I'm experimenting with pop-down menus (inside floating DIVs). Making them appear with onmouseover attributes is no problem, but I'm not sure how I can make the menu close properly.
I'm dealing with an image that has links mapped over it with <map>. I want people to see a menu when hovering over a link.
I figured the best way to know when to close the menu is wait until the mouse is no longer hovering over the HTML element that called the menu or the menu itself, then wait one second, and then close the menu.
Is my idea something that can be implemented, perhaps with some jQuery? Or is there a better and more efficient alternative?
I will throw my recommendation behind the jQuery hoverIntent plugin. Should be up and running quickly, very configurable, and no need to roll your own code.
I did some additional digging myself. http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
I need to somehow combine this with a <map> that makes parts of an image invoke a drop-down menu. Do you think this can get the job done?
with jquery:
$("your-menu-button-selector, your-menu-selector").bind("mouseleave", function(e){
clearTimeout($(this).data("mouseleaveTimeout"));
$(this).data("mouseleaveTimeout", setTimeout(function(){
//your code
//closeMenu();
}, 1000)); //one second
});
you also want to clear the timeout when opening the menu!
$("your-menu-button-selector, your-menu-selector").bind("mouseenter", function(e){
clearTimeout($(this).data("mouseleaveTimeout"));
//your code
//openMenu()
});
I understand it now, you can have the same thing apply also to the link and the menu box so that when hovering the options, it does not disappear.
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 an idea for an website which needs this kind of technique. It's compared to the fade-in technique but in my opinion this fits the design better. Is there anyway to disable scroll options and only scroll to an anchor when its button is clicked. If anyone got a link to a tutorial it would be really helpfull as I can't get it clear myself.
To disable scroll options, you can use the css overflow rule like this:
overflow-y:hidden;
To add function to your buttons, you'll have to use js event listeners that are set to listen for clicks:
document.getElementById("t1").addEventListener("click", scrollDown);
After that, you can use javascript or jquery to scroll the page to whatever anchor depending on page position/clicks that have already happened etc.
Here's a thrown together jsFiddle of what it sounds like you're trying to do:
JsFiddle
I use a lot of divs in that example, but the only important thing for function is the id of elements used.
Hope this helps!
I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks
You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/
I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle
hope your all good... Another question :/
Heres the page im working on:
http://beelinetest.site50.net/uw_virtual_tour.html#
Its not a huge problem, but if you press the tabs quickly- two will shoot up- what can i do about this? So it waits for the first tab to complete its movement?
Also, another thing while im here, notice the slight hover over movement ive added to the tabs? When hovered over they move 7px up, then back down when un-hovered. But when clicked the tab moves up and it still thinks my mouse is on hover... Its not until i move the mouse until it moves back down 7px...
Thanks in advance, Tom
Your click handler for each tab should disable the clicks on the other tabs until the "slide in" function is complete. Looking at your code, it might be easier to accomplish if you had a common selector rather than selecting each individual one by id. Perhaps you could add a class to each div you want to use as a tab, then you could operate on them as a group.
Please check this site: pixeli.ca/works/italia
There I work on the site. The problem is when I just open this address, it doesn't show two panels using jScrollPane properly - these look like narrow horizontal stripes with content inside them. Then I click any of the top nav bar items and it becomes what it should be - all looks fine. What can I do to make it work right way from the beginning?
Seems like there is something related to jQuery hide() function. When I turn it off in the document, it works well. Did anybody face something like this before?
Yes, I have solved the issue. So, there is a simple animation effect implemented in the site through jQuery fadeIn function. It shows elements gradually first time, then sets a cookie so this animation doesn't work anymore.
Here is a piece of code where I made it work:
setTimeout(function () {
loadContent('about');
$('#doc2').fadeIn(1000);
}, 7000);
The #doc2 div is the main container for content and I noticed that when it is visible and I load content using my function loadContent('about') it works fine but doesn't work right way if #doc2 is hidden. I just added this function to be executed the same time as fading in #doc2 and now it works well. If you have any questions regarding it, please feel free to ask.