We Keep Coding

Scrollspy - Page messing up when linking nav bar page to outside url

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();
});

Bootstrap tabs do not switch

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

Scroll when linked to id on same page

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');
}
});
});

Left animation on click li

I have a menu structure:
<ul id="creamenu" class="menuHolder">
<li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
<li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
<li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
</ul>
<ul id="mainmenu" class="menuHolder">
<li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
<li><a id="about2-menu" href="#/haberler">about 2</a></li>
<li><a id="about3-menu" href="#/galeri">about 3</a></li>
<li><a id="about4-menu" href="#/referanslar">about 4</a></li>
<li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>
I have a content structure in same HTML file:
<div id='news-1'>
<!-- content -->
<!-- content -->
</div>
<div id='news-2'>
<!-- content -->
<!-- content -->
</div>
I want, when i click a item e.g. creamenu item, go to div. E.G.
click news-1 item, go to news-1 div. Like this: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241
Is it possible it with pure jQuery?

It's absolutely possible. Try this:
$('#creamenu a').click(function(e) {
var splitId = $(this).attr('id').split('-'),
contentId = splitId[0] + '-' + splitId[1];
e.preventDefault();
$('html, body').animate({
scrollTop: $('#' + contentId).offset().top
}, 'slow');
});
Using this specific approach, you will need to ensure that the id of your link in the #creamenu is prefaced with the id of its corresponding content (as you are doing now).
It would also be more robust to just put the id of your content in the href of the #creamenu link. That way, if the user doesn't have JS active, it would still jump to the content, albeit without an animation. For example:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
Then, your JS would be as follows:
$('#creamenu a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 'slow');
});

<li><a id="news-1-menu" href="#news-1">news 1</a></li>
With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

You can, but you need some minor changes to your code.
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('href') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And change link structure, so href is and id of an element you would like to scroll to.
You could also make a links looks like this:
<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>
And use rel atribute to find an element, You would like to scroll to:
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('rel') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And if you are looking for a parallax effect: http://jessandruss.us/, checkout tutorial here: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/ or here: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

Yes, just change your href attributes to the ID of the element:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
To scroll smoothly, try:
$('a[href^=#]').on('click',function(e) {
e.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('html,body').animate({'scrollTop':top}, function() {
window.location = id;
});
});

Trigger div on pageload

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();
});
});