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!
Related
here i don't know the technically what will call but will try to explain the scenario what i want to achieve. following is the image what i am facing issue
when page right boundary is not touching the list it is showing like this.
when i minimize the browser window from any side i want list should come in the visible area of the page it should change the position now it is clipping the list like this
Please help me how i will change the position of the list as its touching to the any boundary of page like top, left, right, bottom. using jquery or css
Put your table inside a div and for div add css rule overflow:auto
Yes, You can achieve that things,
For that you have to use Shuffle.js
Please refer this Link
I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!
It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.
It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.
So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?
Thanks!
Danny
To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties.
also, make sure you hide the div when the animation ends.
$('a').click(function(){
$('#thediv').parent().css('overflow','hidden');
$('#thediv').animate({'top': '+=500px', opacity: 0},function(){
$(this).hide();
});
});
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.
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.