I have a hidden element on my page. When a button is clicked, it makes the element below it slide down using slideToggle. The problem is that it is showing up behind the content that is below it: http://jsfiddle.net/Messp/
I would like to make the toggled image to show in the front of the content. I tried using z-index but that does not work. Does anyone know how to fix this issue?
The image needs to be a positioned element for the z-index to take effect.
Throwing "position: relative;" on it should do the trick. :)
http://jsfiddle.net/Dygerati/DyPeC/1/embedded/result/
add a position:relative to the image, right after the z-index
Related
I have a div which I want to highlight on click. Onclick, I use the bootstrap over the screen, but how do I make the div appear above the backdrop. I know using the modal is a easier solution. But I want to try this method.
I appreciate any help.
Thanks
Change z-index of your div in your CSS file to something like this:
z-index: 999;
See more details on how z-index works here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
I would like to know how can I change attributes of a div onClick.
To make myself clear, I want to know how can I make a div that looks like the one on the Mozilla Developer Network site.
When you click the "Mozilla" button, the banner slides down to reveal behind it a hidden div.
I know this hiding thing is based on the z-index of the overlapping slide and the absolute position.
My question is how can I make the div slide position (e.g. top: 0px to top: 150px) and stay there when removing finger from mouse.
Thank you folks.
I was recently found a strange behavior in IE9(haven't tested under IE8):
http://jsfiddle.net/qktfq/5/
Remove the yellow element(by clicking it) will cause the scrollbar in blue element scroll back to top. This behavior will happen only if yellow element is floated or absolute positioned.
This behavior is really annoying. Any help on how to avoid it will be a tremendous help! Thank you.
Got it! It's because of the positions. Try adding position:relative to the scrollable div (in this case, div.outer) and you will see that it works.
Better: You can wrap everything in a div with position:relative and it should do the trick.
After a little bit of research, i found out this behavior will only affect the elemnt that close to floated or position:absolute element. If i add another element between them, this behavior will gone.http://jsfiddle.net/qktfq/34/
But add an empty element only for this resaon seems odd...Orz...
I have three divs
page-left
page-right
flipper
I have images of equal size in all three divs. I hide the image in flipper div when the document is ready. When I press the animate I use jQuery's animate function to reveal the div. The problem is I want to div the be revealed from right to left and not left to right as show in the fiddle.
http://jsfiddle.net/UZWmd/38/
I had solved the problem of revealing from right to left using a single image. But I cannot figure out how to do it in the current scheme of things.
http://jsfiddle.net/UZWmd/38/
Can someone help
If you want that effect then you will have to go the opposite way. You're gonna need to hide the top div, instead of revealing (showing) the bottom div. Take a look at this modified version of your fiddle.
Like this? http://jsfiddle.net/UZWmd/47/
Look here:
How can I animate the opposite way?
Manipulating the margin-left and width on animate seems to do the trick.
Here's a JS fiddle of what I am talking about:
http://jsfiddle.net/r77K8/98/
My overlay gives the appearance of having disabled the link, but the link still remains clickable. I looked through some examples of modal dialog windows in hopes of finding a solution. As far as I can tell I need to use absolute positioning.
I am hesitant to do so because in reality my content is dynamically populated. It seems like a lot of added work to try and keep the overlay the correct dimensions -- I really like how it looks right now, I just would like to make the controls unclickable while the overlay is the parent. Is this possible?
In your example, it looks like you have the contents that you are trying to disable INSIDE the overlay div. In order for this to work, you need to put the overlay div OVER the contents, so place it after your contents. That way it covers up your content div.
And yes, your overlay should have absolute positioning so that you place it at the top-right corner of the parent container and give it 100% width and height, so that it covers the entire parent container.
See this jsfiddle for an example.
EDIT:
Try this example instead. Put both the contents and the overlay in a container. That way, the overlay will only take up that part of the page.
Notice that the container divs (divLink1 and divLink2) must have position:relative for this to work. According to the absolute description in this link, "The element is positioned relative to its first positioned (not static) ancestor element." So you have to set the containers to position:relative, but don't actually move them.