jQuery Navigation Slider

Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. 19-08-12 #1
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    jQuery Navigation Slider

    I got pretty interested in JavaScripting so tried a lot of cool stuff and I love it very much :D

    Need some help with my horizontal navigation I tried, basically the subnav slide down when you hover on the 'Point on me', and it slides up when your mouse goes out from the text.

    But I couldn't make it, like..erm..when you hover the subnav and the 'Point on me', it will stop there until your mouse got out off the 'Point on me' and subnav.

    But the problem is, I can't code both of them coding getting the same argument cause they aren't in the same div, they are separated far away.

    DEMO:
    https://dl.dropbox.com/u/32360643/su...uery/test.html

    Source codes:
    Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(function(){
		$('.nav').slideDown();
	},
	function (){
		$('.nav').slideUp();
	});
			
});
</script>
</body>
</html>
    Hope you guys understand my bad english :(
    Please give me a hand..please
    Reply With Quote Reply With Quote
  2. Check out our sponsor
    jQuery Navigation Slider
  3. 20-08-12 #2
    EliteGM
    The Gamma..? EliteGM is offline
    MemberRank
    Jul 2006 Join Date
    NandolandLocation
    4,078Posts

    Re: jQuery Navigation Slider

    EDIT:
    Demo - http://jsfiddle.net/kQJZj/

    I've not tested it but this should work:
    Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.nav').slideDown();
		},
		function (){
			menuTimer = setTimeout("$('.nav').slideUp();", 2000);
		}
	);
	$('.nav').hover(
		function() {
			clearTimeout(menuTimer);
		},
		function() {
			$(this).slideUp();
		}
	);		
});
</script>
</body>
</html>
    It will only go up if you take your mouse off of the subnav. If you take your mouse off of .toggle and don't put it on the subnav within 2 seconds, it will auto close to prevent it from being open constantly.
    Last edited by EliteGM; 20-08-12 at 10:44 AM.
    Reply With Quote Reply With Quote
  4. 20-08-12 #3
    Shibi
    Self-claimed retard Shibi is offline
    MemberRank
    May 2012 Join Date
    SwedenLocation
    220Posts

    Re: jQuery Navigation Slider

    Great ! I really love it :D
    Reply With Quote Reply With Quote
  5. 21-08-12 #4
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by EliteGM View Post
    EDIT:
    Demo - Edit this Fiddle - jsFiddle

    I've not tested it but this should work:
    Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.nav').slideDown();
		},
		function (){
			menuTimer = setTimeout("$('.nav').slideUp();", 2000);
		}
	);
	$('.nav').hover(
		function() {
			clearTimeout(menuTimer);
		},
		function() {
			$(this).slideUp();
		}
	);		
});
</script>
</body>
</html>
    It will only go up if you take your mouse off of the subnav. If you take your mouse off of .toggle and don't put it on the subnav within 2 seconds, it will auto close to prevent it from being open constantly.
    Code:
    $(document).ready(function() {
    $('.toggle').hover(

    function() {
        $('.nav').slideDown();
    }, function() {
        menuTimer = setTimeout("$('.nav').slideUp();", 200);
    });
    $('.nav').hover(

    function() {
        clearTimeout(menuTimer);
    }, function() {
        $('.nav').slideUp();
    });
});
    Hell yea :) it works :D thanks bro~

    btw, is it possible to use if and else statement eg, a=1 blah blah
    ps: I replaced 2000 to 200
    Last edited by NubPro; 21-08-12 at 09:11 AM. Reason: changed integers
    Reply With Quote Reply With Quote
  6. 21-08-12 #5
    EliteGM
    The Gamma..? EliteGM is offline
    MemberRank
    Jul 2006 Join Date
    NandolandLocation
    4,078Posts
    Quote Originally Posted by NubPro View Post
    Code:
    $(document).ready(function() {
    $('.toggle').hover(

    function() {
        $('.nav').slideDown();
    }, function() {
        menuTimer = setTimeout("$('.nav').slideUp();", 200);
    });
    $('.nav').hover(

    function() {
        clearTimeout(menuTimer);
    }, function() {
        $('.nav').slideUp();
    });
});
    Hell yea :) it works :D thanks bro~

    btw, is it possible to use if and else statement eg, a=1 blah blah
    ps: I replaced 2000 to 200
    Of course!
    JS has if/else, for, while, etc.

    Sent from my GT-I9300 using Tapatalk 2
    Reply With Quote Reply With Quote
  7. 21-08-12 #6
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by EliteGM View Post
    Of course!
    JS has if/else, for, while, etc.

    Sent from my GT-I9300 using Tapatalk 2
    And shitzzie this doesn't work o.o
    I wonder did any statement are wrongly coded?
    Code:
    //Toggle Sub Navigation
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.dropdown').slideDown();
            a=1;
		},
		function (){
			if(a==1) {
            	$('.dropdown').slideUp();
            }
		}
	);
	$('.dropdown').hover(
		function() {
			a=2;
		},
		function() {
			$(this).slideUp();
		}
	);		
});
    Reply With Quote Reply With Quote
  8. 21-08-12 #7
    EliteGM
    The Gamma..? EliteGM is offline
    MemberRank
    Jul 2006 Join Date
    NandolandLocation
    4,078Posts

    Re: jQuery Navigation Slider

    That should work. What are you trying to accomplish here, though?
    Reply With Quote Reply With Quote
  9. 21-08-12 #8
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by EliteGM View Post
    That should work. What are you trying to accomplish here, though?
    nah it didn't

    so I tried this and it work :)
    Code:
    //Toggle Sub Navigation
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.dropdown').slideDown();
		},
		function(){
			a=1;
		});
		
	$('.dropdown').mouseout(
		function() {
			a=1;
		}
	);		
	$('body').hover(function(){
			if(a==1) {
				$('.dropdown').slideUp();
			}
		});
});
    But I found it funny when I use this, what can I replace it with?
    Code:
    	$('body').hover(function(){
    pss: top secret XD
    Reply With Quote Reply With Quote
  10. 21-08-12 #9
    foxx
    Hm. foxx is offline
    MemberRank
    Sep 2006 Join Date
    Czech RepublicLocation
    5,257Posts

    Re: jQuery Navigation Slider

    how about you learn general programming basics before trying to use frameworks
    Reply With Quote Reply With Quote
  11. 21-08-12 #10
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by foxx View Post
    how about you learn general programming basics before trying to use frameworks
    what's franeworks?
    Reply With Quote Reply With Quote
  12. 21-08-12 #11
    foxx
    Hm. foxx is offline
    MemberRank
    Sep 2006 Join Date
    Czech RepublicLocation
    5,257Posts

    Re: jQuery Navigation Slider

    Software framework - Wikipedia, the free encyclopedia
    Reply With Quote Reply With Quote
  13. 21-08-12 #12
    Chris
    Developer Chris is offline
    DeveloperRank
    Nov 2008 Join Date
    933Posts

    Re: jQuery Navigation Slider

    Jquery is a framework of Javascript. Before you use Jquery, you should master the fundamentals of Javascript because those same fundamentals carry over to Jquery. Making functions, If/Else statements, etc. These fundamentals exist in most programming languages, and if you're planning on a career with programming, you will deal with them for your entire life.
    Reply With Quote Reply With Quote
  14. 22-08-12 #13
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by Chris View Post
    Jquery is a framework of Javascript. Before you use Jquery, you should master the fundamentals of Javascript because those same fundamentals carry over to Jquery. Making functions, If/Else statements, etc. These fundamentals exist in most programming languages, and if you're planning on a career with programming, you will deal with them for your entire life.
    this is going to be hard o.o gonna learn a new programming language...
    I wonder where should I start with?
    Reply With Quote Reply With Quote
  15. 22-08-12 #14
    foxx
    Hm. foxx is offline
    MemberRank
    Sep 2006 Join Date
    Czech RepublicLocation
    5,257Posts

    Re: jQuery Navigation Slider

    new programming language? you know one already? that's kinda hard to believe..
    Reply With Quote Reply With Quote
  16. 22-08-12 #15
    NubPro
    Hello! NubPro is offline
    MemberRank
    Dec 2009 Join Date
    C:\DesktopLocation
    1,592Posts

    Re: jQuery Navigation Slider

    Quote Originally Posted by foxx View Post
    new programming language? you know one already? that's kinda hard to believe..
    okay bro *new language
    Reply With Quote Reply With Quote


Page 1 of 2 12 LastLast
« Previous Thread | Next Thread »

Advertisement