I'm trying to add transitions to a list of items where mouse over causes the item to expand by changing max-height.
The expand on mouse enter happens immediately but the mouse out transition is delayed.
jsfiddle https://jsfiddle.net/cawkie/u2eLh18f/2/
<html>
<head>
<style>
.inner {
border: solid 1px #000000;
width: 300px;
max-height: 30px;
overflow: hidden;
transition: max-height 10s linear 0s;
}
.inner:hover {
max-height: 10000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Lorem ipsum dolor ....
</div>
<div class="inner">
Lorem ipsum dolor ...
</div>
</div>
</body>
</html>
Possibly not relevant, but the JS mouse-out event is immediate.
Am I missing something?
Is there a workaround?
If this is normal/intended - why?
I could use JS/jQuery but was trying not to :-)
If your not opposed to using Bootstrap, they have a really nice accordion implementation you could use the achieve this effect without writing your own Javascript. If you do want to implement it yourself, you can add their CDN link to your page, then use Chrome DevTools to inspect the CSS in the Sources tab. Just prettify it and Ctrl+F search for the relevant classes.
Related
Question
How do I create a <paper-button> group UI element with the following characteristics?
It is a group of <paper-button> elements.
It is stacked vertically.
Each button fills the entire width of the container (without margin, padding or horizontal white space).
There is no margin, padding or vertical white space between the buttons.
Examples:
The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
Similar to the Bootstrap "Vertical variation" shown here.
If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.
Attempts:
See below code for my previous attempts to:
stack vertical buttons using <p> tags and
use a <paper-menu>.
Research:
Flexbox documentation
Paper button documentation
Paper menu documentation
Demo: JS Bin
Code:
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
<link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>
<dom-module id="x-test" noscript>
<template>
<!-- Attempt #1: Stacking Buttons -->
<div id="container">
<p><paper-button>One</paper-button></p>
<p><paper-button>Two</paper-button></p>
<p><paper-button>Three</paper-button></p>
</div>
<!-- Attempt #2: <paper-menu> -->
<paper-menu>
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
</paper-menu>
</template>
</dom-module>
<x-test></x-test>
</body>
</html>
I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:
<link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >
<div class="layout vertical">
<paper-button>foo</paper-button>
<paper-button>foo</paper-button>
</div>
paper-button {
width: 100%;
margin:0;
}
Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html:
http://embed.plnkr.co/1UKMQz/preview
I got my Vertical and Horizontal mixed up when i wrote this answer:)) so below is for horizontal Stacking. But thinking about its pretty much the same except for couple of changes.
So created a
.vertical-section {
min-width: 130px;
}
and make the buttons inline or flex;
eg
paper-button {
display: inline-block; //or inline-flex
margin-bottom: 24px;
}
To get rid of padding/margin etc see below because it should be the same
I played around with the Css for the paper-buttons demo so the above changes will work
For Horizontal stacking
Looking at the demo here paper-buttons and right click to view frame source the code goes like this
<style is="custom-style">
.horizontal-section {
min-width: 130px;
}
paper-button {
display: block;
margin-bottom: 24px;
}
</style>
<div>
<h4>Raised</h4>
<div class="horizontal-section">
<paper-button tabindex="0" raised>button</paper-button>
<paper-button tabindex="0" raised class="colorful">colorful</paper-button>
<paper-button tabindex="0" raised disabled>disabled</paper-button>
<paper-button tabindex="0" raised noink>noink</paper-button>
<paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
<paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
</div>
</div>
</div>
That gives you something like this
Now as you dont want any margin/padding etc and fill the entire width you need to amend the css a bit and inspect the button element.
Take out the padding:24px; from the .horizontal-section eg padding:0;
And take out the paper-button:not margin-bottom:24px; and margin:0 0.25em; from paper-button css
and you end up with this
As you are using a template i beileve the styling may need to go before that.
Sorry i cant do you a demo, i managed to do a demo for someone in 0.5 but not yet for V.1 but its easy to understand the method above.
Demo: JS Bin
Code:
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
paper-material {
xheight: 400px;
width: 400px;
background-color: #ff1101;
margin: 0 auto;
}
paper-button {
width: 100%;
margin: 0;
}
paper-button:hover {
background-color: black;
color: white;
}
</style>
<template>
<paper-material id="material" elevation="3">
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-material>
</template>
<script>
Polymer({
is: 'x-element',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
],
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-down-animation',
node: this.$.material
},
'exit': {
name: 'slide-up-animation',
node: this.$.material
}
}
}
}
},
ready: function() {
this.playAnimation('entry');
}
});
</script>
</dom-module>
</body>
</html>
I want to create a directive that will take tree-like data and feed it to some tree-view script (that uses markup as input), using specific HTML template to render nodes. So, directive takes data + node template as input, inserts DOM subtree, and then calls third-party plugin to make it sortable (http://dbushell.github.com/Nestable/ is on my mind, if this matters).
I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at http://jsfiddle.net/DQjve/):
<div ng-app="TestApp" ng-controller="TestCtrl">
<script type="text/ng-template" id="tree.html">
<div>
<ng-include src="'branch.html'"></ng-include>
</div>
</script>
<script type="text/ng-template" id="branch.html">
<ul>
<li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
</li>
</ul>
</script>
<script type="text/ng-template" id="leaf.html">
<ng-include src="template"></ng-include>
<ng-include src="'branch.html'"></ng-include>
</script>
<script type="text/ng-template" id="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</script>
<tree root="tree" template="my-leaf.html"></tree>
</div>
Desired code would look like this:
<div ng-app="TestApp" ng-controller="TestCtrl">
<tree root="tree" template="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</tree>
</div>
Goals:
(less important) Put all utility templates inside directive JavaScript code.
(more important) Use contents of the <tree> tag as node template.
But I cannot find the solution.
For point 1: Probably, I need to use $templateCache to pre-cache my templates? With some unique template names? Is there any better solution?
For point 2: Should I use ngTransclude for p.2? If yes, how? Is there a way to get contents of initial <tree> tag as a string, before any compilation occurs?
I am using ZURB foundation CSS framework to design a website. Currently I am trying to create a footer that will stay at the bottom of my page. I have the following code for the footer but its not going to the bottom, rather its showing up in the middle.
Could you please tell me how to create a footer (using ZURB foundation framework) that will stay at the bottom?
<div class="row">
<div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>
Simple! Zurb Foundation is itself based on Compass. So you can use the 'Compass Sticky Footer' mixin.
http://compass-style.org/reference/compass/layout/sticky_footer/
There is an example of how to do it here:
http://compass-style.org/examples/compass/layout/sticky-footer/
But you just go:
<div class='example'>
<div id='layout'>
<div id='header'>
<h1>Sticky Footer Example</h1>
</div>
<p>
This is the main content area.
</p>
<p>
In this example you should pretend that the red box
is actually the browser window.
</p>
<p>
Because, being a contrived example, it's not actually sticking
to the bottom of the page.
</p>
<div id='layout_footer'></div>
</div>
<div id='footer'>
This is the footer area.
</div>
</div>
And in you SCSS
#import "compass/reset.scss";
#import "compass/layout.scss";
#include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
#header {
background: #999999;
height: 72px; }
#footer {
background: #cccccc; }
.example {
height: 500px;
border: 3px solid red;
p {
margin: 1em 0.5em; } }
I would create two different footers - one for desktop & tablets - and one for phones.
Using Zurb's "show on and hide on options" it's very easy to do. You can have any graphics used by both footers so any "download penalty" is small.
To create a sticky footer for you website you'll have to add some CSS to Zurb. (You can add this to the app.css file, which is Zurb's repository for your extra CSS)
Also the Brad Frost article (posted by Ed Charbeneau) is a great read - I hadn't seen that before.
HTML:
<div id="footer">
My Awsome Footer 2014
</div>
CSS
#footer{
height: 50px;
position: fixed;
bottom: 0px;
left: 0px;
line-height: 50px;
color: #aaa;
text-align: center;
width: 100%;
}
working fiddle: http://jsfiddle.net/AunmM/
Check out this simple sticky footer for foundation, no need for a #wrapper or a fixed height! Works in mobile as well. http://tangerineindustries.com/download/sticky_footer/
For reference, here's how I accomplished this using Foundation 4.0.
Given a <footer> tag.
footer {
#include panel($panel-color, $panel-padding);
width: 100%;
margin: 0;
position: fixed;
bottom: 0;
}
With foundation 6 the compass import isn't possible out of box. And workaround is hard to find.
Good solution together with foundation can be this little helper:
http://tangerineindustries.com/download/sticky_footer/
Pro:
Developer created this for using together with ZF 6.
You only need a <footer> tag.
Works with responsive depending flexible height of footer, even with
window resizing.
You don't need any extra #wrapper, #pusher, #footer whatever
html-elements.
You don't need any extra CSS.
Contra:
Uses JavaScript.
What you are trying to do is create a "Sticky Footer" or "Fixed Position Footer". This is something which is independent of Foundation and instead is a function of CSS in general.
I would suggest reading this article by Brad Frost. It identifies the basic CSS involved in creating a Fixed Position element and the compatibility issues that arise from doing so.
http://bradfrostweb.com/blog/mobile/fixed-position/
I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.
here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade
You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}
This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/