I want to write common function for all scroll function.Now It is working with separate function for all 'li'.If I write the script directly in on click event it is working.But It is not working if I try to call the function.
function myFunction(a) {
$(document).ready(function() {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navMenu">
<!-- <li class="test1" onclick="$('html, body').animate({scrollTop: $('#consulting').offset().top-40}, 1000);" >Consulting & Solutions</li> -->
<li class="test1" onclick="myFunction(#consulting)" >Consulting & Solutions</li>
<li class="test2" onclick="$('html, body').animate({scrollTop: $('#segments').offset().top-40}, 1000);" >Segments</li>
</ul>
<div id="consulting">
1st div
</div>
<div id="segments">
2nd div
</div>
try this
function myFunction(a) {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navMenu">
<!-- <li class="test1" onclick="$('html, body').animate({scrollTop: $('#consulting').offset().top-40}, 1000);" >Consulting & Solutions</li> -->
<li class="test1" onclick="myFunction(#consulting)" >Consulting & Solutions</li>
<li class="test2" onclick="myFunction(#segments)" >Segments</li>
</ul>
<div id="consulting">
1st div
</div>
<div id="segments">
2nd div
</div>
$(document).ready(function() {
function myFunction(a) {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
}
});
Try this
Related
So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?
You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>
You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.
I have a navigation menu on top of my page made out of list items. I want to apply jQuery code to make the list items to slide down one by one when my page loads...Can't get it work.
index.html
<div class="container">
<ul>
<li id="goFirst">Projects</li>
<li id="goSecond">Contact</li>
<li id="goThird">Blog</li>
</ul>
</div>
script.js
$(document).ready(function() {
$('#goFirst').animate({top: '+=75px'}, 1000);
$('#goSecond').delay(1000).animate({top: '+=75px'}, 1000);
$('#goThird').delay(2000).animate({top: '+=75px'}, 1000);
});
Use marginTop instead of top.
$(document).ready(function() {
$('#goFirst').animate({
marginTop: '+=75px'
}, 1000);
$('#goSecond').delay(1000).animate({
marginTop: '+=75px'
}, 1000);
$('#goThird').delay(2000).animate({
marginTop: '+=75px'
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<ul>
<li id="goFirst">
Projects
</li>
<li id="goSecond">
Contact
</li>
<li id="goThird">
Blog
</li>
</ul>
</div>
I've got a vertical dropdown menu for which I'm using jQuery toggle to open/close the submenus.
It's working fine when the user clicks the parent item (for example 'About' the submenu opens and when they click it again the submenu closes again. However, if they don't click the parent item ('About') a second time to close it but click on a different parent item (let's say 'Industry') to open the submenu both submenus ('About' and 'Industry') are visble.
So I need it to work that 'About' automatically closes when 'Industry' is clicked.
Here is the code :
<nav>
<ul id="nav-list">
<li class="nav-list_item nav-about>About
<div id="about-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
And the JavaScript:
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
I've tried different things I found on stackoverflow already but could'nt get it to work. Any suggestions?
$('#nav-list li').on('click', function() {
$('#nav-list li').not(this).find('div').hide();
$(this).find('div').toggle();
});
.nav-list_item > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
<li class="nav-list_item nav-about">About
<div id="about-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
No need for so convoluted handlers.
demo
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
Just hide the other div when one is click.
I think you can remove redundant code like this:
$('li.nav-list_item').click(function () {
$('li.nav-list_item').find('ul').hide();
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
You can substitute your js with this.
I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.
Here is my JQuery code:
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").hide();
});});
And this is my html code that I am trying to get to hide/show
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.
Using toggle() may be more effective:
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});
Example Fiddle
$(document).ready(function(){
$("#timeli").on('click', function()
{
$("#timeUlSub").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().
Check if you have Jquery linked.
Try this out for conditional usage :
$(document).ready(function(){
$("#timeli").on('click', function(){
if($("#timeUlSub").is(':hidden')){
$("#timeUlSub").show();
} else {
$("#timeUlSub").hide();
}
});
});
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub{
display:none;
}
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});});
jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/
This most be the second most simple rollover effect, still I don't find any simple solution.
Wanted: I have a list of items and a corresponding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.
The following code works, but is awful. How can I get this behaviour in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.
<script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
</body>
</html>
Here's my light-markup jQuery version:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
$('#switches li').mouseover(function(event){
switchTo($('#switches li').index(event.target));
});
switchTo(0);
});
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The switchTo function takes an index number of which <li> / <div> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, display:none for the DIVs) and the sets the desired list-item and div to bold and display. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.
Here's the jQuery version:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$( '#switches li' ).mouseover(
function(){
$( "#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
}
);
}
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>
The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?
And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.