Hi guys im working on my first website and im trying to implement a sliding menu using jquery.
This is what a got so far :
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn't, i would like the menu to close as soon as the mouse leaves the control.
Any idea why this isn't working ?
Thanks in advance.
Do your stuff without the inline JS, and remember to close the <a> element and use a ready function
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
FIDDLE
As you're using jQuery I believe it would be beneficial for you to use something similar to:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
What this will mean is that whilst the mouse is over the menu, the menu will stay in its open position. When the mouse exits the menu it will close. Obviously change the id, and animation CSS values to suit your needs :)!
Here is a working example:
http://jsfiddle.net/V3PYs/1/
Really there is no problem here - the script is doing exactly what you told it to. However, from what I understand, what you want is for the menu to stay open when you leave the "trigger" element if the user's mouse is now over the menu. Try this:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
This way, the user is left some time after mousing out of the trigger element to get to the menu. You might need to fiddle with the timeout, but this should work. I tested this and it seems to be working. Just be sure, if necessary, to wrap this in $(document).ready to make sure all elements are loaded and ready.
Demo: http://www.dstrout.net/pub/menu.htm
If you're using jQuery this would be the proper way to go about it:
Show box
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(just copy/paste this in and it should work)
Related
So I'm making a website for someone and I'm quite new to jQuery (which probably doesn't help). The site needed a dropdown menu to display links to the galleries in a list rather than having them all in the navigation bar. The problem is, whenever I hover over the li element the dropdown slides down but when I hover over the dropdown, it slides back up.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
},
function () {
$('ul.nav-dropdown').slideUp('medium');
}
);
});
Probably something simple, but help is quite welcome. JSFiddle below.
http://jsfiddle.net/6e87Lwkb/
You are toggeling the event in the me handler, you need to do this:
$(document).ready(function () {
$("li#navi-dropdown").on('mouseover',function () {
$('ul.nav-dropdown').slideDown('medium');
})
$("ul.nav-dropdown").on('mouseleave',function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I have also updated your fiddle, check it out it works now.
here is my fiddle:
http://jsfiddle.net/6e87Lwkb/7/
Consider putting your ul submenu inside your li, and reposition it.
Don't forget to use .stop() too, so as jquery don't queue your slides animations :
$('ul.nav-dropdown').stop().slideDown('medium');
See your updated fiddle here
Try with this code.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
});
$(".nav-dropdown").mouseleave(
function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I see other tutorials about this topic on this website, but this one is different from all the other ones.
I found this tutorial called "Adding a bounce to a slide down". Here is the link for it.
I have put everything how it's supposed to be, just like in that tutorial, but I do not want two buttons representing close and open, I just want a button with an image, like an arrow. Then when you click the arrow, it will slideDown with the information and that kinda stuff and then, when you click the arrow again, it will slideUp and it will hide the information.
That tutorial could do that, but it has two ID'S representing the close button and the open button and I do not want that.
Here is the JS code for that tutorial and there is more, but this is where it get's the affects and stuff like that.
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow", "easeOutBounce");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Do you see #open and #close? that represents two ID'S for the toggle buttons.
I really want to know how to delete the close and the close will represent the open so, when you click the open it will open and when you click the open again, it will close it self without another ID for it.
I have been trying to figure this out, but couldn't figure it out.
Please tell me, what do I gotta do to achieved this.
If your arrow element has the ID "toggle", you could do:
$(document).ready(function () {
$("#toggle").click(function () {
var $panel = $('#panel');
if ($panel.is(':visible')) {
$panel.slideUp("slow");
} else {
$panel.slideDown("slow", "easeOutBounce");
}
});
});
jsfiddle
you can try slideToggle()
Example:
$(document).ready(function() {
$("#toggle a").click(function () {
$("#toggle a").slideToggle();
});
});
Use $( "#panel" ).toggle( "bounce", { times: 2 }, "slow" );;
See this demo
For more Examples visit : http://api.jqueryui.com/bounce-effect/
It uses the following external js files:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I am very new in programming, please give me a mercy. Below is my code:
$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})
$(function(){
document.getElementById("custom_link").addEventListener("click",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
},false)})
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.
http://jsfiddle.net/ETrjA/2/
$('#custom_link').hover(function () {
$('#custom_div').toggleClass('highlighted');
});
$('#custom_link').click(function (e) {
$('#custom_div').addClass('highlighted');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.
You are mixing Javascript with its framework jQuery. Stick with jQuery for this.
// CSS: Create the highlight accessible with two classnames.
.highlight, .highlight_stay{
background:yellow;
}
Jquery
$(function(){
$('.custom_link').hover(function(){
$(this).addClass('highlight');
}, function(){
$(this).removeClass('highlight');
});
$('.custom_link').click(function(){
$(this).addClass('highlight_stay');
});
});
here is a link http://jsfiddle.net/8GV7B/2/
$(function(){
mouse_is_clicked = false;
$(".custom_link").hover(function(){
$("#container").addClass("highlight");
}, function(){
if(!mouse_is_clicked){
$("#container").removeClass("highlight");
}else{
mouse_is_clicked = false;
}
});
$(".custom_link").click(function(){
$("#container").addClass("highlight");
mouse_is_clicked = true;
});
});
I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?
Maybe you could use internal links (href="#top") instead of binding events with jQuery.
jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this