I have a doubt. how to move the pop up above find atm locations. I tried it by changing html structure but its not working.
Here's an example
You don't need to use Javascript, CSS will do just fine. You need to create a separate div that you can display and hide with the clickon the 'search ATM' link. Here's a detailed howto on displaying and hiding a div with CSS:
http://www.devinrolsen.com/css-hide-and-display-content/
Related
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/
I'm currently working on a small "dress-up" type feature for a friend's website, but have run into a logic issue.
The items that you may use to dress your avatar must be bought. Bought items are loaded on screen for users to click (as an image) and when clicked should create a jqueryui draggable inside a div. The problem I've run into, is I can't figure out how to make it create that exact image inside the div.
I guess what I'm looking for is a way to recreate the image clicked inside the div as a draggable. Anyone have suggestions?
Pseudo-code:
image.click(function() {
div.append($(this).clone());
});
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 am using lightbox and wz_tooltip they both working individually fine.
means when i use tootip for some lightbox link on the page it shows me properly and when i click on that link i can see lightbox properly but when i use tootip function for the link in the lightbox it doesn't work properly. it hides behind the lightbox. i think the problem may occur due to the z-index but i don't find any solution yet.
I want some example where custom tootip is used in lightbox link please i dont want to use jquery and title parameter of the link.
Regards,
Salil
Use a tool like Firebug or Web Inspector to see what containing element the tooltip has (i.e. the highest parent).
Set its z-index to higher than the modal.
You may need to use !important.
HI Salil,
Agian Stuck in Tooltip Try Position If your position is absolute then and then Z-index work otherwise not ok, Try Position Relative and by Setting Margin too,
Ok
Bye Mayur Mate