Affix and Scrollspy Jumping

Report · Aug 17, 2017

Hi Everyone,

I want to shout out to the pro users and more knowledgable users of Html/CSS/Jscript etc. If it were not for you, then people like me who know other coding languages but are not Html experts could not build awesome sites. So thanks!

I am using a combo of Affix and Scrollspy on a side navigation pills, and the issue is that the first time I click a link it jumps then, afterwards works like normal. How do I get the code to work for the first time a navigation link is click and all other times? Attached below is my html code. Currently, I am not using any external CSS or Javascript files.

<!DOCTYPE html>  
<html lang="English">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta name="description" content="">  
    <meta name="author" content="">  
    <title>Resume</title>  
    <link rel="shortcut icon" href="#">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> 
  
    <!--[if IE]>  
                <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>  
                <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>  
        <![endif]-->  
    <style>  
        /* 
A Bootstrap 3.1 affix sidebar template 
from http://bootply.com 
This CSS code should follow the 'bootstrap.css' 
in your HTML file. 
license: MIT 
author: bootply.com 
*/  
        
body {  
padding-top: 50px;  
}  
@media screen and (min-width: 768px) {  
#masthead h1 {  
font-size: 50px;  
}  
}  
.navbar-bright {  
background-color: #111155;  
color: #fff;  
}  
.affix-top,  
.affix {  
position: static;  
}  
@media (min-width: 979px) {  
#sidebar.affix-top {  
position: static;  
margin-top: 30px;  
width: 200px;  
}  
#sidebar.affix {  
position: fixed;  
top: 70px;  
width: 200px;  
}  
}  
#sidebar li.active {  
border: 0 #eee solid;  
border-right-width: 5px;  
}  
a:link {
    color: black;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: deepskyblue;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: blue;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: lightskyblue;
    background-color: transparent;
    text-decoration: underline;
.Master-type {
color: blue;
}
</style>  
</head>  
  
<body>  
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
 <div class="container-fluid">
<div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
 </button>
 <a class="navbar-brand">Kyle Adrian Kenyon</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Hobbies</a></li>
<li><a href="#">Blog</a></li>
 </ul>
</div>
 </div>
</nav>  
  
    <!--/masthead-->  
  
    <!--main-->  
    <div class="container" style="width: 98%">  
        <div class="row">    
<hr id="Welcome" style="padding-top: 25px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<div class="media">
<div class="media-object">
<img src="images/Tucson.jpg" class="img-rounded img-responsive" alt="Placeholder image">
</div>
<div class="media-body">
<h2 class="media-heading">Biomedical Engineer</h2>
<p class="excutive_summary">
•2 plus years of experience in the biomedical engineering field.<br>
•Skilled in FDA regulated GMP Products and medical devices.<br>
•Expert in statistical analysis using R, Matlab, or Python.<br>
•Expert in Data Analytics.<br>
•Skilled in Adobe Photoshop, Indesign, and Illustrator.<br>
•Knowledgable of UX UI. 
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<h4><a href="mailto:email@kyleakenyon.com"><i class="fa fa-envelope" aria-hidden="true"></i></a> : <a href="mailto:email@kyleakenyon.com">email@kyleakenyon.com</a>
</h4>
</div>
</div>
<div class="row">
<div class="col-lg-11">
<h4>
<i class ="fa fa-map-marker" aria-hidden="true"></i> : Current Location
</h4>
<div class="googlemap-styles" id="googleMap" style="height:400px">
</div>
<script>
function myMap() {
var mapProp= {center:new google.maps.LatLng(39.742043,-104.991531),zoom:9,};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwVhRhRZnm8FPEtergk-8PddDsPJ3l0x8&callback=myMap"></script>
</div>
</div>
</div>
</div>
           
            <!--left-->  
            <div class="col-md-10">    
  
<hr id="Timeline" style="padding-top: 50px">
<h2 style="padding-left: 15px">Timeline</h2>
<hr>
<div class="row" style ="padding-left: 15px">
<iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=12NvQtlrdRMdXscZwq6nduU868FM..." width="100%" height="600" frameborder="0"></iframe>
</div> 
  
<hr id="Education" style="padding-top: 50px">
<div class="row" style="padding-left: 15px">
<div class="col-sm-8 col-lg-7">
<h2>Education</h2>
<hr>
<div class="row">
<div class="col-xs-6 col-md-7">
<h4>University of Colorado Denver | Anschutz </h4>
<h4>Bioengineering </h4>
</div>
<div class="col-xs-5 col-md-5">
<h4 class="text-right"><i class="fa fa-graduation-cap" aria-hidden="true"></i> August 2015 - July 2017</h4>
</div>
</div>
<h4><span class="label label-default">Masters</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<div class="row">
<div class="col-xs-6">
<h4>University of Arizona</h4>
<h5>Biomedical Engineering</h5>
</div>
<div class="col-xs-6">
<h4 class="text-right"><i class="fa fa-graduation-cap" aria-hidden="true"></i> August 2010 - May 2010</h4>
</div>
</div>
<h4><span class="label label-default">Bachelors</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<div class="row">
<div class="col-xs-6">
<h4>University of Arizona</h4>
<h5>Molecular and Cellular Biology</h5>
</div>
<div class="col-xs-6">
<h4 class="text-right"><i class="fa fa-graduation-cap" aria-hidden="true"></i> August 2010 - May 2010</h4>
</div>
</div>
<h4><span class="label label-default">Bachelors</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
</div>
<div class="col-sm-4 col-lg-5 col-md-4">
<h2>Skill Set </h2>
<hr id="Skills">
<div class="progress programming">
<div class="progress-bar programming_for" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 75%"> R</div>
</div>
<div class="progress programming">
<div class="progress-bar programming_for" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> Python</div>
</div>
<!-- Yellow Progress Bar -->
<div class="progress programming">
<div class="progress-bar programming_for" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> Matlab</div>
</div>
<!-- Red Progress Bar -->
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> Statistics</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> Data Analysis</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> Cell Culture</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> MS Project</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> Microsoft Office</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> Process R&D</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> Wordpress</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> Photoshop</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> InDesign</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> Illustrator</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> Dreamweaver</div>
</div>
</div>
</div>
  
<hr id="Experience" style="padding-top: 50px">
<h2 style="padding-left: 15px">Work Experience</h2>
<hr>
<div class="row" style="padding-left: 15px">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>Gates Biomanufacturing Facility</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> Aug 2016 - Jul 2017</h4>
</div>
</div>
<h4><span class="label label-default">Biomedical Engineer Intern</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>University of Colorado</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> May 2015 - Jul 2017</h4>
</div>
</div>
<h4><span class="label label-default">Graduate Research Assistent</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
</div>
<hr>
<div class="row" style="padding-left: 15px">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>The Princeton Review</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> May 2014 - July 2016</h4>
</div>
</div>
<h4><span class="label label-default">MCAT Instructor & Tutor</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>Photometrics</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> Nov 2013 - July 2014</h4>
</div>
</div>
<h4><span class="label label-default">Applications Engineering Intern</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
</div>
<hr>
<div class="row" style="padding-left: 15px">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>University of Arizona</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> Aug 2013 - May 2014</h4>
</div>
</div>
<h4><span class="label label-default">Senior Design Project</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>Carondelet St. Joseph’s Hospital</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> May 2012 - Nov 2013</h4>
</div>
</div>
<h4><span class="label label-default">Patient Care Technician</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
</div>
<hr>
<div class="row" style="padding-left: 15px">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>University of Arizona</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> May 2012 - Aug 2013</h4>
</div>
</div>
<h4><span class="label label-default">Undergraduate Research Assistant</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
<div class="col-lg-6">
<div class="row" >
<div class="col-xs-5">
<h4>University of Arizona</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> Aug 2010 - May 2011</h4>
</div>
</div>
<h4><span class="label label-default">La Paz Dormitory: Operations Officer</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
</div>
<hr id="Professional" style="padding-top: 50px">
<h2 style="padding-left: 15px"> Professional Development  </h2>
<hr>
<div class="row" style="padding-left: 15px">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>Six Sigma</h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> July 2017 - Current</h4>
</div>
</div>
<h4><span class="label label-default">Yellow Belt </span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-xs-5">
<h4>Aspen Institute </h4>
</div>
<div class="col-lg-7 col-sm-7 col-xs-7">
<h4 class="text-right"><i class = "fa fa-calendar-check-o" aria-hidden="true"></i> Jan 2002 - Dec 2006</h4>
</div>
</div>
<h4><span class="label label-default">Senior Web Developer</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantiu</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
</div>
</div>
<hr id="Hobbies" style="padding-top: 50px">
<h2 style="padding-left: 15px">Hobbies</h2>
<hr>
<div class="container">
<div class="row" style="padding-left: 15px">
<h3>Photography</h3>
<div id="carousel1" class="carousel slide col-md-10" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1" class="active"></li>
<li data-target="#carousel1" data-slide-to="2" class="active"></li>
<li data-target="#carousel1" data-slide-to="3" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/Aspen.169.2016.jpg" width="600" height="400" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item"><img src="images/Tucson.jpg" width="600" height="400" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second Image</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third Image</h3>
<p>Third slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Carousel_Placeholder.png" alt="Forth slide image" class="center-block">
<div class="carousel-caption">
<h3>Forth Image</h3>
</div>
</div>
</div>
            <a class="left carousel-control" href="#carousel1" role="button" data-slide="left">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">left</span>
            </a>
            <a class="right carousel-control" href="#carousel1" role="button" data-slide="right">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">right</span>
            </a>
</div>
</div>
<hr class="col-md-10">
<div class="row col-md-10" style="padding-left: 15px">
<h3>Electronics</h3>
<hr>
<h3>Woodworking</h3>
</div>
</div>  
  
            </div>  
            <!--/left--> 
            
            <!--right-->  
            <div class="col-md-1" id="rightCol">  
                <ul class="nav nav-stacked" id="sidebar">  
<li><a href ="Resume.html#Welcome">Welcome</a></li>
<li><a href="Resume.html#Timeline">Timeline</a></li>
<li><a href="Resume.html#Education">Education</a></li>
<li><a href="Resume.html#Skills">Skills</a></li>
<li><a href="Resume.html#Experience">Experience</a></li>
<li><a href="Resume.html#Professional">Professional</a></li>
<li><a href="Resume.html#Hobbies">Hobbies</a></li>
                </ul>  
            </div>  
            <!--/right-->
         
        </div>  
        <!--/row--> 
        
      <hr>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Copyright © MyWebsite. All rights reserved.</p>
</div>
<div class="col-xs-6">
<p class="text-right"><a href="">Download Resume <i class="fa fa-cogs" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
</footer>
    
    </div>  
    <!--/container-->  
  
  
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script>  
        /* activate sidebar */  
        $('#sidebar').affix({  
            offset: { 
                top:$('#sidebar').offset().top,
bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40
            }  
        });  
  
        /* activate scrollspy menu */  
        var $body = $(document.body);  
        var navHeight = $('.navbar').outerHeight(true) + 20;  
  
        $body.scrollspy({  
            target: '#leftCol',  
            offset: navHeight  
        });  
  
        /* smooth scrolling sections */  
        $('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 - 50  
                    }, 1000);  
                    return false;  
                }  
            }  
        });  
  
    </script>  
</body>  
  
</html>

Report · Aug 17, 2017

Could you post a link to your work in progress so we can see what's happening in our browsers?

No code came through in your post and it is much simpler for contributors here to find the issue in a live page (even if it's just uploaded to a temporary location).

Report · Aug 17, 2017

Hi Jon, I would be happy to do so. Do you have a suggestion of such service?

Report · Aug 17, 2017

Usually I suggest creating a folder on a server you control called TEST.

You can then upload the page to that folder and supply a link similar to www.yourdomain.com/TEST/page.html

Once the problem is found, you just delete the TEST folder.

Report · Aug 17, 2017

Most ISP's offer web hosting (on a small scale) in their package. It may be an idea to check.

Wappler, the only real Dreamweaver alternative.

Report · Aug 17, 2017

Have a look at https://www.bootply.com/100983

Wappler, the only real Dreamweaver alternative.

Report · Aug 18, 2017

Hi Everyone, Ok, so I have upload my page to a hosting service that I want to use: kylekenyon.com. What I have uncovered or discovered is that there are three interesting conditions: 1. With "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" & "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" versions the scrollspy and affix work excellent, however, the photography carousel's left and right buttons do not work. 2. With the latest versions of Jquery and Bootstrap, the scrollspy and affix have messed up format, but, the photography carousel's left and right buttons work. 3. With the 1.11.3 Jquery and 3.3.6 Bootstrap, and an inserted carousel from dreamweaver that generates associated bootstrap and css files, everything is messed up. So, what I am thinking is that there has been a significant change in the up to date versions of jquery and bootstraps and that I am using the latest syntax for the carousel. Ideally, I would like to use the latest verisions of jquery and bootstrap for the scrollspy and affix but I am not knowledgable enough to properly update my code. Lastly, the framework I am using for the Affix and Scrollspy comes from https://forums.adobe.com/message/8240012#8240012 by Ben Pleysier.

Report · Aug 18, 2017

kylek99706848 wrote
Hi Everyone, Ok, so I have upload my page to a hosting service that I want to use: kylekenyon.com. What I have uncovered or discovered is that there are three interesting conditions: 1. With "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" & "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" versions the scrollspy and affix work excellent, however, the photography carousel's left and right buttons do not work. 2. With the latest versions of Jquery and Bootstrap, the scrollspy and affix have messed up format, but, the photography carousel's left and right buttons work. 3. With the 1.11.3 Jquery and 3.3.6 Bootstrap, and an inserted carousel from dreamweaver that generates associated bootstrap and css files, everything is messed up. So, what I am thinking is that there has been a significant change in the up to date versions of jquery and bootstraps and that I am using the latest syntax for the carousel. Ideally, I would like to use the latest verisions of jquery and bootstrap for the scrollspy and affix but I am not knowledgable enough to properly update my code. Lastly, the framework I am using for the Affix and Scrollspy comes from Bootstrap Affix by Ben Pleysier.

Its all working ok here in Firefox on Mac with Bootstrap 3.3.6 and jQuery 1.11.3

Your carousel next/previous arrows works in the 'Timeline' section and your navigation tabs down the right side of the page 'stick' to the top of the browser window (when necessary) and smooth slide to the appropriate section when selected.

Maybe I'm mis-understanding what the current problem is?

Report · Aug 18, 2017

It also appears to function correctly to me in Firefox 54.0.1 and Chrome 60.0.3112.101 on Windows 7.

Report · Aug 18, 2017

No, your correct. I just don't have the right version upload. Its the carousel within the hobbies section for photography. I am uploading it now.

Report · Aug 18, 2017

Ok, the right version is up.

Report · Aug 18, 2017

There's some kind of conflict between the carousel arrow buttons and the side nav tabs.......

Add another class to your navigation container - 'sideNav' as shown below:

Find the jQuery code at the foot of the page and locate the below line:

$('a[href*=#]:not([href=#])').click(function() {

Change it to below: (this then just targets the anchor tags in the sideNav container).

$('.sideNav a').click(function() {

(EDITED - you could just use the id rightCol instead of adding the class - If you use the id and not the class):

$('#rightCol a').click(function() {

Hopefully that should resolve the issue.

One other thing - it's good practice to surround the bit of jQuery at the foot of the page in a document ready function:

$(document).ready(function(){

JQUERY GOES HERE

});

</script>

EDITED - no need to include Resume.html in the link, just use the container id:

<li><a href ="#Welcome">Welcome</a></li>

<li><a href="#Timeline">Timeline</a></li>

<li><a href="#Education">Education</a></li>

<li><a href="#Skills">Skills</a></li>

<li><a href="#Experience">Experience</a></li>

<li><a href="#Professional">Professional</a></li>

<li><a href="#Hobbies">Hobbies</a></li>

Report · Aug 18, 2017

Hi osgood! So, I just added the the suggestions you made prior to the edit. Great news, the carousel works! Thank you so much, however, now the sidebar navigation is no longer doing the affix with scrollspy. What I am thinking is the

$(document).ready(function(){

/* activate sidebar */

$('#sidebar').affix({

offset: {

top:$('#sidebar').offset().top,

bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40

}

});

/* activate scrollspy menu */

var $body = $(document.body);

var navHeight = $('.navbar').outerHeight(true) + 20;

$body.scrollspy({

target: '#leftCol',

offset: navHeight

});

My hypothesis of issues:

1.That the $('#sidebar').affix might needs to be changed?

2.$body.scrollspy({ target: '#leftCol', offset: navHeight }); needs to be $body.scrollspy({ target: '#sidebar', offset: navHeight });

3.$('.sideNav a').click(function() does not need the a?

Your help is beyond helpful. I guess I am learning hmtl, css, and javascript by sheer brute force with the help of you and others on the internet! Not like I already know enough programming languages!! XD

Report · Aug 18, 2017

Its because you have not got your <script> quite correct. You are missing some end brackets }) });

I've corrected it so cut and replace what you have now with the below:

$(document).ready(function(){
/* activate sidebar */
$('#sidebar').affix({
offset: {
top:$('#sidebar').offset().top,
bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40
}
});

/* activate scrollspy menu */
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 20;

$body.scrollspy({
target: '#leftCol',
offset: navHeight
});

/* smooth scrolling sections */
$('.sideNav a').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 - 50
}, 1000);
return false;
}
}
});
});

</script>

Report · Aug 18, 2017

Welp. I missing the end parentheses at the last line that closes the document ready function. >.> I am spoiled with python IDES, R, and matlab..... Thank you so much for all the help. You truly have gotten me the 10% percent that I needed.

Affix and Scrollspy Jumping

1 Correct answer