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
Related
I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
I have a div inside of Fancybox that I want to overflow over the edge of the fancybox window.
The structure of the page looks like this:
<div class="fanybox">
<div class="overflow">
Test
</div>
</div>
I want .overflow to flow over the edge of the window. Trying to change the z-index of .overflow to something higher than 8030 (the default Fancybox value) does not work, and yes, the div is positioned absolutely.
Is there anyway to fix this? I can provide an image of what I'm trying to accomplish.
I haven't used fancybox, myself, but playing around with the chrome console on their demo page I think I got the effect you are looking for.
-Drop out the overflow:hidden; on #fancybox-content.
#fancybox-image (or whatever your container is){
.
.
.
position:relative;
right:50px;
z-index:9000;
}
That's all it took for what's on their demo page. Should absolutely be doable as long as your content's parent isn't positioned statically, and the overflow isn't hidden. I'd probably position it relatively (not absolutely) if I understand what you are trying for. Hope that helps.
EDIT
Alright, I downloaded and got a bare bones page up using fancybox2 from the link provided (because apparently I have too much time on my hands :-). Using all their default values, all I had to change was the jquery.fancybox.css
.fancybox-inner {
position:relative;
right:50px;
}
and the image floated outside the container div. If you are trying to move a separate div or something you added, principles are the same. But it DOES work... Goodluck.
If the overflow element is inside the fancybox, you won't need any z-index at all. Every non-static-positioned element generates its own stack, and relative-positioned content inside a fancybox will easily overflow its outer elements [Demo].
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.
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
I have a div.
I want that user should not be able to scroll the page if the height is more than 350px.
Also the scroll bar should be visible in disable mode in that case.
I want to achieve this using javascript.
Thanks
I can't say I completely understood what you want, but I think what you're looking for is CSS not javascript. Take a look at the overflow property.
Seems like you're looking for overflow: hidden; perhaps?