div disappearing on margin & width animaton problem - jquery - javascript

I have coded my div to re size and change margin on click of a div with id = switch. But it is disappearing on beginning of animation and reappear on the completion of animation. Ypu can see my fiddle here. Why is this happening and how can I avoid this??
Thanks in advance...:)
blasteralfred

Add
overflow: visible !important;
to #sidebar and#switch won't disappear during the animation.

It is happening because it is hidden underneath your "viewer". If you can move your switch inside the "viewer" and float it left, set margin-left. Should fix it.

During the animation the elements overflow is set to "hidden".
As #switch is visually placed outside #sidebar it disappears. Christopher's solution should override it.
It also would'nt happen if you place #switch inside #viewer

Related

How to get a default positioned element go under a fixed element while scrolling?

I want the form element group to go down under the fixed element while scrolling but it isn't happening . When i scroll down , i'm expecting the fixed positioned element covers the element going up but instead it is covering as if it were a transparent element and getting mixed with the element going up. Help . Here is the Link :
https://codepen.io/tanveer_nihal/pen/xxZqNXw
<https://codepen.io/tanveer_nihal/pen/xxZqNXw>
set this to your #header in css
background-color: white;
You think that it's not working because the you don't set any background so it's transparent. If you add a background-color you will see this.

triangle css border scrolling on div

my problem it's with triangle css border.
You can see all it here, and for explaining well, i will put images of my problem.
What i do was: when I click on a li element, i add a class "activo", and he makes this result:
http://i.imgur.com/J8Zgp5i.png
bassiclly, he add the triangle. But when you scrolling this, the triangle don't go along with. Like:
http://i.imgur.com/sVrlL89.png
Here it's the bin: http://jsbin.com/cexevu/edit?output
Thanks
You have this CSS rule
.it_menuUtilizador nav .it_submenu li .activo:before {
content: '';
position: absolute;
}
You'll want that set to relative, then you'll have to do some CSS to get it positioned where you expect it, as well as fix other problems caused by this change, then it will scroll with the rest of the page.

Element disappears when animating relative wrapper width with jQuery

I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/
I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.

jQuery bind position:absolute to an element

i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.

jQuery z-index doesn't work

i have a menu and on hover i fade a box in. Behind this box i have a small icon and i want to move it in front of the box so you can see it on hover.
Here is my menu > Navigation
I tried it with that jQuery(this).find(".flyer").css("z-index", 10000);
but it stays behind.
How could i manage that problem?
greets Max
z-index only works on positioned elements, so you need to give .flyer a position, like this:
.flyer{
margin: -75px 0 0 0;
width:53px;
height:74px;
position: relative;
}
Here's your example/fiddle edited to work, we're just calling this on hover:
$(this).find(".flyer").css("z-index", 10000);
and this on hover out:
$(this).find(".flyer").css("z-index", "auto");
Make sure that you reference the proper element with the .flyer selector and z-index does not do the trick, try with the zoom attribute.

Categories