All I want is, at the example which can be found here, is the grey box which appears when you click on the 'how to' box to remain ABOVE the elements below. I have been trying to play with z-index but it doesn't seem to work.
I don't really want it to push the other elements out of position when opened, which happens if I remove the height attribute from the parent li, just to expand out as it does, but above everything else.
Must be a z-index solution but I couldn't seem to find it.
Add position: relative to the acitem class which should do the trick
Related
I'm creating a popup for elements in the DOM, much like Qtip. I know there are alot of done plugins for this but I wanted to create one myself.
Basicly what the code does:
Hover element, take that elements offset and alter a little bit so that the popup is over the element.
Show the popup element and then change its position according to the element that was hovered.
But it seems like I've failed. It doesn't work in IE7.
When I hover an element in IE7 my popup shows in the right location BUT the element that was hovered changes position.
JSfiddle: http://jsfiddle.net/egj46/
I can't say what exactly is causing that, it can be solved by moving the popup div "pHolder" to after the content.
i really need help, i can't see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.
Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.
I am using simple slideToggle here, and really can't understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.
I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.
Here is the link
Sorry if i didn't explain it better, english is not my native language.Thanks!
You need to keep space for these div's. Use visibility:hidden and animation but do not use display:none which doesn't keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.
As far as I can make out, the only way to bring something to the front is to delete/append, or just append. However, this is so inefficient that I thought I'd just check here first.
I've got a complex set of objects which pop up on a mouseover (paths and text). I initially thought I'd handle this by creating one static instance of the popup, and hiding it. Whenever it's needed, I simply translate it and make it visible.
I thought this worked, but it turns out that it's transparent - anything which is created dynamically in a script appears on top of it. Is there any way to make this work? The alternative is to create it from scratch on every mouseover, and then to delete it on mouseout, which just feels wrong.
Thanks -
Al
You could give it an enormous z-index and toggle the visibility if it is positioned absolutely (or fixed) or the display if it is static. Least amount of redrawing is to position it absolutely or fixed, and toggle visibility between hidden and visible.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.