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/
Related
I am using the ElevateZoom plugin in my web app. But the default behavior of the plugin is that the zoom section is shown only when the mouse hovers around the particular area.
What I am trying to achieve is, show the zoomed version of the image in a different DIV and will keep on showing the zoomed pic even after the mouse is removed from the pic.
Is ElevateZoom plugin able to do so by default , or has someone already achieved this functionality with the plugin.If so, any pointers or help is really appreciated.
The elevateZoom plugin can’t do this out of the box.
If you look at the plugin code (jquery.elevatezoom.js) you can see the mouseleave function on line #450 and if you are ok with editing the plugin code you can just replace self.setElements("hide") with self.setElements(""). But I don’t think this will give the desired result.
You can either find another plugin or hack your way through this one. For the latter it's good to know that you can access the elevateZoom object this way:
var $image = $('#your-image').elevateZoom({...});
console.log( $image.data('elevateZoom') );
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.
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
I have a div, that I'm using JavaScript to position, so that when someone hovers over an image, it displays a tooltip message that follows along with the pointer. (Using tooltip-0.2.js )
The problem is that when a user goes to the page in IE6, a disabled dropdown box on the page is showing through this absolutely positioned tooltip when it tries to hover over it. How can I get this dropdownlist to know its proper place? ;)
You can put an iframe element behind your layer to block such things from showing through. It will also block Flash objects from showing through. It's messy, but works.
You better use another tooltip lib.
The "shining-through" effect is well known and other tooltips work around it.
I can't name a specific other tooltip lib.