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.
Related
For a website, when people load a page, there is an animation with buttons inside which appear. You can see a screenshot of the animation below.
Once the animation is finished, I want the user to be able to click on one of them. How can I do this ? Is existing a library, a suitable language, or a specific technology to complete this ?
Thank you
if possible, edit the video and crop it.
Add the buttons using simple HTML.
I’m sorry if that isn’t possible.
I'd say the easiest way to get the animation to respond to click events (like a button) would be to set up a mouse event listener in javascript, it will get fired every time someone clicks on the page.
Basically, within the click handler, you will compare the click location of the mouse to known screen coordinates of the buttons - if they match - trigger an event.
The hard bit comes with finding the coordinates of the buttons - very easy if the animation is drawn on a canvas - a bit harder if it's just an image.
After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard 'list' items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.
Issue #1:
When you mouse over the Category, the 'dropdown' div appears as it should, but when you go to mouseover the 'dropdown' div it disappears. But if you mouseover another category the 'dropdown' div disappears and the new one appears as they both should. What am I missing?
Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the 'dropdown' div appears to blink by popping up twice. Can't figure that out either?
I have posted my code here: http://jsfiddle.net/UXxL8/
Thanks so much and I know it's probably something simple I'm overlooking. But you know how it is after you stare at the same code for too long...
Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.
I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.
I set up an updated fiddle here. The Category 3 menu item has been updated.
You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued - fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.
Here's the improved code.
I am trying to create a sliding menu effect when a link is clicked, basically on click I want to prepend a background that fades in with 0.6 opacity and then slide my menu into place and then on a further click I want to reverse this animation. I have create a click event with a callback function but I think this callback is cancelling out my first click so nothing seems to be happening, can anyone advise me on how I can create this effect?
I have created a fiddle here: http://jsfiddle.net/AHj4Y/3/
Thanks
Kyle
I think this works the way you want it to: http://jsfiddle.net/AHj4Y/5/
In the link below there are some bubbles wich animates from left to right in a loop. If you hover over one of them, it gets larger and stops animating. My problem is that the bubble doesnt stop for very long, I want it to stop permanently, until you click on it
http://jsfiddle.net/jukke/SU4gJ/1/
You are also more than welcome to rewrite parts of the code to make it better/cleaner. I dont really have much experience coding :)
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.