I have a sidebar on my website that contains link's to individual divs, but when I try and click on any of them they just highlight without jumping to the div.
The website in question is http://www.ico.mmu.ac.uk/13143651/dip/pages/football.html
the top nav works fine, it's just the side nav that seems to have problems.
Sidebar nav
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<a class="navbar-brand" href="#intro">Football</a>
<ul class="nav nav-pills nav-stacked text-center">
<li>Men's Training</li>
<li>Women's Training</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
</div>
</div>
example div
<div class="col-md-9" id="intro">
<div class="text-center">
<p>some text </p>
</div>
</div>
Any help will be greatly appreciated. Thanks
open your smoothscroll.js in path styling/js delete all and paste this to JUMP directly
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
var hashtag=$(this).attr("href");
window.location=hashtag;
});
});
EDIT:
try to put this on smoothscroll.js
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
});
this is the problem: ('html,body') you want to scroll the main div
Related
I want the menu to automatically animate closed after an item within the menu has been clicked on. And I want the user to still have the option to toggle the menu again. I managed to get the item to disappear after an item is clicked using $('#overlay').toggleClass(); but now the user no longer has the option to click on the menu again. I've tried googling around but can't find a clear answer. I'm new to JavaScript can someone please point me in the right direction.
Link to example http://codepen.io/anon/pen/KpRmgE
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>Port</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<p>First</p>
</section>
<section id="portfolio">
<p>Second</p>
</section>
<section id="about">
<p>Third</p>
</section>
<section id="contact">
<p>Fourth</p>
</section>
JavaScript
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$("nav li").click(function () {
$('#overlay').toggleClass();
});
});
You weren't far off... just a few wrongly placed calls inside the click handler.
Try this:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
Forked codepen
You can also do it this way to make your event handler more clear:
$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
// Clicked! Removing classes
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
});
});
I personally usually use the addClass and removeClass functions when you are doing that kind of specific action. That helps you avoid small errors that could take long to be seen. :)
For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->
Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});
I have side bar menu with the list of items, when it opened it shows the list of the menu with the fade effect. My question is how can I repeat the effect every time when I click "opener" by the way the fadein works for the first time only.
Here is my code for the effect...
<body>
<div id="st-container" class="st-container">
<div id="main" >
<div class="st-pusher">
<!-- nav menu start -->
<nav class="st-menu st-effect-8" id="menu-8">
<ul>
<li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li>
<li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li>
<li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li>
<li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li>
<li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div id="main"><!-- extra div for emulating position:fixed of the menu -->
<div id="st-trigger-effects" class="tab_bar_index">
<button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button>
<button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button>
<div id="titlebar">
<img src="img/logo_text.png" alt-"logo">
<span >Library</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /main -->
</div>
<!-- fade effect for the nav menu -->
<script type="text/javascript">
function fadeItem() {
$('ul li:hidden:first').stop().hide().delay(50).fadeIn();
$(".st-menu ul li ") .addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
</script>
</body>
Initially hide all the items on click and than use .each to loop through and apply the delay and fade in effect.
function fadeItem() {
// hide menu items
$('.st-menu ul li')stop().hide();
// go through and set each element to fade in
$('.st-menu ul li:hidden').each(function (index, elem) {
$(elem).delay((index + 1) * 50).fadeIn();
});
$(".st-menu ul li").addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...
So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that. You can test out what I currently have at http://rac.site44.com just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.
Here is the HTML
<div class="col_4 no-padding">
<a href="/">
<img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
</a>
<a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
<a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
<nav id="nav" class="nav mobile-hide">
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
<li>Estimate</li>
<li class="top mobile-only"></li>
</ul>
</nav>
</div>
and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the $("li.top").click(function(e) { but I can't seem to figure it out)
$(function() {
$("li.top").click(function(e) {
$("#nav").addClass('mobile-hide');
$(".nav-toggle").removeClass('hidden');
$(".nav-toggle2").addClass('hidden');
e.preventDefault();
});
});
Thanks for the help!
I just tested this on your site:
$("html, body").animate({ scrollTop: "0px" });
You can read about .animate() here: http://api.jquery.com/animate/