I'm building a small website, and i'm having an issue with jQuery animation,
Basically i have placed a small text (one character div) inside a circle (another div), and i want it to grow when the user hovers over it while keeping the inner div (text) at the original position, the circle will shrink back to original size upon mouseleave() event.
The growing/shrinking part is working quite good, the problem is with the inner text which changes position upon mouseenter().
Here's the HTML
<body>
<div class="steps">
<div id="one" class="number">
<div id="num-text">
<p><strong>1</strong>
</p>
</div>
</div>
</div>
</body>
with 'steps' serving as a container and 'number' the actual circle !
Here's a link to the JSFiddle of this question: http://jsfiddle.net/Rockr90/hZSKA/
Thank you !
Edit:
Actually, the flickering only happens on Chrome, the example with CSS3 works on IE and FireFox as expected, maybe it has something to do with webkit ?
This is possible with CSS only! You dont need jQuery for this and I will explain how to do it with this example. I've used display table for the circle so that we can use display table-cell for perfectly centered text
HTML
<div class="circle">
<p>1</p>
</div>
CSS
.circle {
position:relative; //set up a position, not needed, but for example
top:100px;
left:100px; // width and height
width:100px;
height:100px;
display:table; // display table for centered <p> with table-cell
background-color:blue;
border-radius:50%; // make it a circle!
-webkit-transition: all 0.5s; // transition
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.circle:hover {
margin-left:-10px; // on hover we will increase the height and width
margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
width:120px;
height:120px;
}
.circle p {
display:table-cell; // display table-cell magic
vertical-align:middle; // put the text in the middle!
text-align:center;
font-size:2em;
color:white;
}
FIDDLE
http://jsfiddle.net/n6D46/
If you give #num-text a height, you can vertically align it to the center using the absolute positioning you already have on it:
#num-text {
position:absolute;
text-align:center;
color:#eee;
font-size:24px;
width:100%;
height: 24px;
top:50%; margin-top:-12px; }
See fiddle here: http://jsfiddle.net/hZSKA/1/
As a side note, it's probably possible to do this same effect using CSS3 but that may not be backwards compatible with older browsers.
A quick (but rough and tumble) fix would be to also animate #num-text:
function () {
$(this).animate({
height: '-=10px',
bottom: '-=5px',
width: '-=10px'
}, 50);
$('#num-text').animate({'top': '-6px'}, 50)
});
});
JSFiddle: http://jsfiddle.net/hZSKA/5/
Although I'm sure there will be better answers.
EDIT: whoops, linked to the wrong JSFiddle.
Related
I'm having an issue which seems to be preventing CSS transitions from playing on an element which is simultaneously changing from display:none.
In the following example, the divs have identical CSS, except that hovering over the first one hides the other two. The second div is hidden using visibility:hidden, and the third is hidden using display:none.
When you mouse over the first div, the behaviour is as expected: the first div transitions and the other two are hidden. When you mouse out, the behaviour is different from what I would expect: the first div transitions back to normal, the second div is unhidden then transitions back to normal, but the third div is unhidden and still in the normal state.
I was expecting for the third div to match the behaviour of the second and also be unhidden, then transition back to normal.
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
display:none;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
Since the second div works as expected, it's fairly easy to come up with alternate solutions using visibility:hidden and some positioning CSS, but is it possible to accomplish this in just CSS using display:none? If not, why does display:none affect other transitions in this way?
Note: This seems like something that would be easy to find, but my searches only turned up questions about attempting to transition the display property itself, not its side-effects on other transitions.
A simple explanation of display: none:
Turns off the display of an element (it has no effect on layout); all
descendant elements also have their display turned off. The document
is rendered as though the element did not exist.
(Emphasis mine)
The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.
Workaround
The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50%;
transition: border-radius 1s;
animation: display 1s;
}
#hover:hover,
#hover:hover ~ div {
border-radius: 0%;
}
#hover:hover ~ #hide1 {
visibility: hidden;
}
#hover:hover ~ #hide2 {
display: none;
}
#keyframes display {
0% {
border-radius: 0;
}
100% {
border-radius: 50%;
}
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't (unless I have an animation)</div>
No, you cannot use display:none;
Reason:
When using display:none; - The element will be hidden, and the page will be displayed as if the element is not there. So when you hover over it - the element is totally removed...and border-radius:0%; never gets applied. When you hover away - the element shows immediately as the css tells it to - with border-radius:50%;
visibility:hidden; hides an element, however the element will still take up the same space as before. The element will be hidden, but still affect the layout.
You just can use transition for numerical properties in CSS, So you should use opacity and transition: all 1s to do this:
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: all 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
opacity: 0;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
visibility: hidden;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
This will work. On mouse out third div also have transition.
I've been experimenting with HTML5 for a bit, and i wanted to try to make an Image change when a mouse hovers over it. I've tried a couple of methods and none of them gave the desired effect. I've looked through multiple tutorials but they mostly explained how to add effects to the same Image, and not change it entirely.
This is the code i have now, it doesnt actually work as intended:
ul.imagetransition li img:hover {
background-image: url('Data/Images/Image 1Hover.png');
}
<section>
<ul class="imagetransition">
<li><img src="Data/Images/Image 1.png"/></li>
</ul>
</section>
In this code, the original image is previewed correctly, but when the mouse hovers over it it immediately adds a small part of the second image onto the first one. I've tried adding the transition effect code, but it didnt have any effect. I'll be doing more research regarding this, if anyone knows/understands how to get this done, please point me to the right directions! :D
Please let me know if further Information/Code is needed
Greatly appreciated,
Have a good day
Does it work for you?
HTML:
<ul>
<li id="aaa">
<img class="bottom" src="a.jpg">
<img class="top" src="b.jpg">
</li>
</ul>
CSS:
#aaa {
position:relative;
height:100px;
width:100px;
margin:0 auto;
list-style-type: none;
}
#aaa img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#aaa img.top:hover {
opacity:0;
}
From past experiences this won't work unless you use JS's getElementById and change the src of the background image. Either that or use a two in one kind of thing like
<div id="parent1">
<ul></ul>
</div>
Where if you hover over it the first one's background would have an opacity of 0 and the ul's opacity to one by using parent/child relation and activation or maybe try add !important at the end of the second background image restrictions like padding won't work coz that would only separate your images even more.
Hope this helps.
Ps: I was writing this on my phone :/ but now i edited it using my laptop
here are some examples using JS
the mouseover thing
and this is for the change image thing
i think you can piece these together finely.
HTML
<img class="bottom" src="a.jpg">
CSS
img
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
img:hover {
width: 300px;
}
Im trying to do a horizontal navigation with some fixed/sticky elements.
When the user scroll the page, some divs have to remain stuck on the left edge.
Here a fiddle of what i want to do :
http://jsfiddle.net/rQUeL/
css
.container>div {
display:block;
float:left;
}
.container {
height:100%; display:block; background:grey; float:left; width:2000px;
}
.cover{
width:25%; height:100%; background:blue; }
.menu{
width:90px; height:90px; background:green; margin-left:100px; }
.menu.fixed{
}
.cover.fixed{
}
.content{
width:500px; height:100px; background:red; }
<div class="container">
<div class="cover" >
<div class="menu">Menu</div>
</div>
<div class="content">content</div>
When the green square reach the left edge, the green and the blue elements have to be fixed , and the red content go below.
I believe it can be do jQuery...
Thank you for your help.
Sebastien
You basically change the class when the scroll length is above a certain number (in this case margin-left from .menu)
$(window).scroll(function () {
var sl = $(this).scrollLeft();
if (sl > 100) { // 100 is margin-left from .menu
$('.menu').addClass('fixed');
$('.cover').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
$('.cover').removeClass('fixed');
}
});
PS: I have no idea what you want with the red element
FIDDLE
I had the same issue and couldn't find any solutions using CSS alone. so I made jQuery plugin that solves this issue. You can find it here.
Well, I had a great gif here demonstrating what it does but SO doesn't support it. You'll have to click this to see it.
Now, before you yell at me, let me yell at you first. This is a BYOCSS. So if you're looking for something that will take care of the CSS for you, keep looking. All you have to do is style the header element in an absolute position.
This plugin is still in development and needs some improvements. It's kinda jittery when you scroll. You can ease the jittering with a CSS3 transition: 90ms;
This is just a starting point, if you would like to contribute to it, fork it and see what you can do.
Update: added css transitions on fiddles to make it clearer
When the padding is removed from this div via javascript, Chrome doesn't resize the content to fit (i.e., the red div doesn't cover the yellow, it stays the same size):
http://jsfiddle.net/XDchs/4/
Likewise, if padding is added, the content is pushed outside of the div:
http://jsfiddle.net/XDchs/3/
Firefox resizes as I'd expect. Does anyone know why, and how to fix it?
HTML:
<div id="outer">
<div id="inner">
<div id="content">blah</div>
</div>
</div>
CSS:
#outer {
background-color:blue;
width:300px;
margin:0 auto;
}
#inner {
padding-left:100px;
margin:2px;
background-color:yellow;
-webkit-transition:padding-left 2s;
-moz-transition:padding-left 2s;
}
#inner.no-padding {
padding-left:0;
}
#content {
background-color:red;
}
JavaScript:
$(document).ready(function() {
$("#inner").addClass("no-padding");
});
I have no idea why Chrome appears to behave incorrectly, but you can work around with resetting the width:
#inner.no-padding {
padding-left:0;
width: 100%;
}
I ended up fixing this by setting the content's width to 100% via javascript after adding the CSS class: http://jsfiddle.net/XDchs/6/
$("#content").width("100%");
I couldn't find a CSS solution that completely worked.
Also, I filed this as a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=171060
does any one know how to make the slide to left effect like in the "Read it Later" app with CSS3 or JS?
onclick --> slide whole div to left and show the div under the one which slides away.
here is an video with the example: READ IT LATER
May be that's you want with css3.
CSS
.parent{
width:300px;
border:1px solid red;
height:100px;
position:relative;
}
.box{
width:40px;
height:40px;
background:green;
display:block;
z-index:0;
}
.slider{
width:300px;
background:#454545;
color:#fff;
font-weight:bold;
font-size:24px;
height:100px;
position:absolute;
top:0;
right:300px;
transition: right 1s ease;
-moz-transition: right 1s ease; /* Firefox 4 */
-webkit-transition:right 1s ease; /* Safari and Chrome */
-o-transition:right 1s ease; /* Opera */
z-index:1;
}
.box:focus + .slider,.box:active + .slider{
right:0;
}
HTML
<div class="parent">
<div class="slider">hello</div>
</div>
Check this http://jsfiddle.net/MhHx2/
UPDATED
http://jsfiddle.net/MhHx2/4/
You can achieve that effect by using a couple of standard techniques.
Create two div elements, one for the one that is going to slide out, and one for the one that is going to get revealed.
Position them using z-index. Please not that the divs have to be positioned using absolute, relative, or fixed for this to work.
You can use jQuery for the effects. I found a decent post here.
That should get you done.