Note: I'm new to webdev and i'm building this site with bootstrap
I'm building a one page site and the navbar at the top directs the user to the relevant id. the problem i'm having is that i want it to scroll to the id when clicked (see http://www.blastprocessor.co.uk/). I also want to set the class as active when the user scrolls past a specific id.
I have no idea where to start but i'll post my html code here.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active">What We Are</li>
<li class="">Why Us</li>
<li class="">What We Offer</li>
<li class="">Contact Us</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Right Link</li>
</ul>
</div>
</div>
</nav>
You can use the following function to make your scroll animation. Regarding adding a class 'active' to the past id actually you can follow the answer of #ahb. For your need i just added a var reduce in the function which will help you reduce 50px from the actuall offset.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var reduce = 50;
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - reduce
}, 1000);
return false;
}
}
});
});
ORIGINAL SOURCE
DEMO
Using JQuery:
See here to scroll and animate to your ID.
To add your class after scrolling past your ID use:
//assign the window and all the contents into variables
//instead of going and grabbing it from the DOM on every scroll
var $window = $(window),
$content = $('.content');
$window.scroll(function () {
$content.each(function () {
//for each element that has a class of content
//check its position and add SomeClass
if ($window.scrollTop() >= $(this).position().top) {
$(this).addClass('SomeClass');
} else if ($window.scrollTop() <= $(this).position().top) {
//if window position is less then remove it
$(this).removeClass('SomeClass');
}
});
});
Related
I need to correct something in a PHP project.
I have two pages, home.php and page1.php.
I have separately a header.php which is rendered in both pages (home.php and page1.php).
The problem is that when I am in page1.PHP, the links from the header are not working. It should go to the home page and scroll to clicked section.
Can you please help me how to make it work in javascript or jquery if I click on a navigation button to take me to a home page.
In home page if I click on a navigation button, it will scroll to desired section. This problem is resolved like this in 'header.php':
jQuery('a[href^="#"]').on('click', function (e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
var calculatedHeight = jQuery(".tip-top.fixed").length ? 120 : 230;
if (target.length) {
jQuery('html,body').animate({
scrollTop: target.offset().top - calculatedHeight
}, 700);
return false;
}
}
});
These are the sections:
<ul class="nav list-inline visible-lg visible-md clearfix pull-right nav-pills main-menu">
<li>Clients</li>
<li>Case studies</li>
<li>Capabilities</li>
<li>Team</li>
<li>Contact</li>
</ul>
When I am in the page1.php and I click on a navigation link, in the URL appears the section name where it should take me:
http://localhost/ppi/teszt/#panel-nine
Can you please help me how to achieve this?
I am a noob with anything JS, I have a menubar for a onepage website that works to scroll the page but will not open external links, could one of you guys please help? Code Below, site can be viewed at http://protocol-labs.com/new
html
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Testimonial</li>
<li class="">Contact</li>
</ul>
</div>
js that is causing the issue
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
})(jQuery);
You have prevent default attached to your anchor event. This prevents the link from working.
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault(); // prevents link from working. Remove it and you should be good.
Try to add a special class to all links with anchors (the first 4 ones) and call the function just by clicking these links, keeping the standard behavoir by clicking at Contact
I modified both js as well as html codes: (I guess this code is part of Medilab+ Template)
JS / JQuery
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar2").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});})(jQuery);
HTML Code:
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
I need help with JQuery, I believe this may be obvious solution but I don't know how to go about it. In regards to the nav bar on my scroller page, I want one of the links on the nav bar to go an external page (not to a section in the page). It will do this, but it messes up the scrolling page, (backgrounds move to the wrong section etc). I believe I have to change the refElement but I'm unsure.. Please help :( thanks
/*=========================================================================
Navbar ScrollSpy
=========================================================================*/
var scrollPos = $(document).scrollTop(),
nav_height = $('#navbar').outerHeight();
$('.navbar li a').each(function () {
var currLink = $(this),
refElement = $(currLink.attr('href'));
if( refElement.size() > 0 ){
if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
$('.navbar li').removeClass('active');
currLink.closest('li').addClass('active');
}else{
currLink.removeClass('active');
}
}
});
});
//Initialize smoothscroll plugin
smoothScroll.init({
updateURL: false
});
-----------------------------HTML--------------------------------
<nav class="navbar navbar-fixed-top">
<div class=container>
<div class=navbar-header>
<button aria-expanded=false class="collapsed navbar-toggle" data-target=#nav-collapse data-toggle=collapse type=button><span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span></button>
</div>
<div class="collapse navbar-collapse" id=nav-collapse>
<ul class="nav navbar-nav navbar-right">
<li class=active><a href=#intro data-scroll>Home</a>
<li><a href=#features-3 data-scroll>Marine</a>
<li><a href=#features-4 data-scroll>Industrial</a>
<li><a href=#contact data-scroll>Contact</a>
<li><a href="https://www.example.com" data-target>Careers</a></ul>
</div>
</div>
did some more digging around and found this snippet which works. thanks
/**
* Scroll Spy via Bootstrap
*/
$('body').scrollspy({target: "#nav_wrapper", offset:50});
/**
* Scroll Spy meet WordPress menu.
*/
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
// Selector for top nav a elements
$('#top_main_nav a').each( function() {
if (this.hash.indexOf('#') === 0) {
// Alert this to an absolute link (pointing to the correct section on the hompage)
this.href = "/" + this.hash;
}
});
}
/**
* Initiate Awesome Smooth Scrolling based on a.href
*/
$('a.smooth-scroll, #top_main_nav a').click( function() {
target = $(this).attr('href');
offset = $(target).offset();
$('body,html').animate({ scrollTop : offset.top }, 700);
event.preventDefault();
});
Unfortunately I cannot force my tabs to switch.
I've used the code once and it worked, I used the same versions of jQuery and Bootstrap.
I cannot find the conflict here. There are no identical ids in my code and as far as I can see my CSS does not overwrite the bootstrap CSS.
I use jQuery 2.1.4 and Bootstrap 3.3.4.
The code:
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Tutorial Point Home</a></li>
<li>iOS</li>
<li>jmeter</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>tab1 text</p>
</div>
<div class="tab-pane fade" id="ios">
<p>tab2 text</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>tab3 text</p>
</div>
</div>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
EDIT
I've found the code which is in conflict with the tabs, it's responsible for smooth scrolling:
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 700);
return false;
}
}
});
});
</script>
Is there any way to make them both work? Can I change # for something else?
The return false in the animate function is causing the problem because it the never returns to allow the Bootstrap tab toggle to work. Change it to this..
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 700);
}
}
});
});
Demo: http://codeply.com/go/R4VRTQcx46
I have been trying to set the scroll of my page to a certain div. Kindly let me know how can i do that. Following is my code in which each each option in li moves to certain div . I tried this $("#header3").click(); in doucument.ready function but it didnot work.
Kindly help!
<ul id="navigation">
<LI><A class="home selected-lice"href="#header">Home</A></LI>
<LI>Partners</LI>
<LI><A class="about" href="#header5">About Us</A></LI>
<LI><A class="contact" href="#header6">Contact Us</A></LI>
</ul><!-- end of #navigation -->
Alternatively you can use this to scroll to specific element on page load with animation:
$(function(){
$('html, body').animate({ scrollTop: $("#header1").offset().top });
});
check this link:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
or try to overwrite the usual anchor behavior with some scrolling. Like this:
$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});