Hi,
I have a scrolling page with bootstrap, and I’d like to use scrollspy, but no matter what, and how I try I can’t get it to work.
I tried what would seem simple instructions on bootstrap example, and usage, but obviously is much harder to me (not a coder); I googled, and tried some jfiddle as well, but no luck.
I’d greatly appreciate, if you could please take a look at holytablets dot org/gallery_test and tell me what I need to do.
Thank you
It’s working OK for me in Chrome.
Thank you for taking a look.
I was not referring to the scrolling of the page when clicking the link, rather having the links to be highlighted based on the scroll position, specificaly the scrollspy function of bootstrap:
http://getbootstrap.com/2.3.2/javascript.html#scrollspy
Which I have not on the page, as the various combinations I tried - read other sources i.e. stackoverflow an jfiddle - did not work.
Hm, that’s working for me too.
Perhaps try to be more specific about the issue, such as what browser you are using, what you are seeing and what you don’t like about it.
Thank you, and sorry about my explanation, and confusion thereafter.
The scrolling works fine, and also when you click on the left (grey) column images the page scrolls to the corresponding larger image (side note: on local I have fixed the margins for the image not to be cut), and the smaller image is highlighted; if you click on another image the scroll, and small image highlight work fine; and same goes when you click a link on the top nav (gallery, about, general, contact, and test page), the scroll works fine, and the small images are not highlighted.
And I believe thats is what you are referring to when you say it works fine.
Now try to use the scroll bar to scroll the page, none of the links (top nav, or small images) are highlighted when the page section is displayed; nor is the highlight removed (if you first clicked on the small image) if you use scroll bar to scroll the page.
Please check these if I failed again in my explanation:
FYI I’ve tried it in firefox, chrome, and ie.
You don’t seem to have the right things in place to make it work.
First of all you need the initialization in the body tag.
<body data-offset="140" data-target="#navbarExample" data-spy="scroll">
Then you need an ID on a parent div of a ul called nav.
<div class="ab-wrapper">
<div id="navbarExample" class="ab-left">
<ul class="nav ab-links-sx">
I added the id (navbarExample) to the div and the class (nav) to the ul.
Then you need some css to style the active state.
.ab-links-sx li.active {background:green}
That should work if you follow correctly as I have it working locally.
You do have some issues though as your ul structure is invalid.
<ul class="nav ab-links-sx">
<div class="row">
<div class="ab-img-list">
<li> </li>
</div>
<div class="ab-img-list">
<li> </li>
</div>
</div>
<div class="row">
<div class="ab-img-list">
<li> </li>
</div>
<div class="ab-img-list"> </div>
</div>
</ul>
You cannot have content in between list items as that is invalid andf likely to confuse browsers and scripts. All content in a ul must be inside the opening and closing li tags.
To be valid your code should look like this:
<div id="navbarExample" class="ab-left">
<ul class="nav ab-links-sx ">
<li class="row"><a href="#img-1" class="scroll-link" data-id="img-1">
<div class="ab-img-list"> <img src="slider_test_01.jpg" alt="test 1" />
<h3>test 01</h3>
<p>test 01 linking to large image</p>
</div>
</a> </li>
<li class="row"><a href="#img-2" class="scroll-link" data-id="img-2">
<div class="ab-img-list"> <img src="slider_test_02.jpg" alt="test 2" />
<h3>test 02</h3>
<p>test 02 linking to large image</p>
</div>
</a> </li>
<li class="row"><a href="#img-3" class="scroll-link" data-id="img-3">
<div class="ab-img-list"> <img src="/slider_test_03.jpg" alt="test 3" />
<h3>test 03</h3>
<p>test 03 linking to large image</p>
</div>
</a> </li>
</ul>
</div>
Thank you Paul.
First of all apologies for the belated reply, had to reinstall all (pc crash).
I think I missed the nav class in my trials, indeed now at least it’s working to some extent, I don’t know about your test, but now it does change based on active image, but when you scroll away from the gallery section it leaves the last image highlighted - top one if scrolling up, bottom one if scrolling down.
Does it have to do with the data offset in the body?
I tried adding data-spy=“scroll” but same result.
Also would you please tell me why it’s not working if I try it with the top menu (of course I did remove the navbarExample id from the left column div)?
<div id="navbarExample" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="scroll-link" data-id="gallery">Gallery</a></li>
<li><a href="#" class="scroll-link" data-id="about">about</a></li>
<li><a href="#" class="scroll-link" data-id="general">general</a></li>
<li><a href="#" class="scroll-link" data-id="contact">Contact</a></li>
</ul>
</div>
and this css
.navbar-nav li.active {background:#0f0;}
Thanks for the correction.
I don’t think that scrollspy has that facility built in (or at least I couldn’t see it documented anywhere). Most of the time you would want an item highlighted at all times in any nav system.
You can fake it if you add extra links and ids that will take the focus away but is bit of a hack.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>gallery test</title>
<link rel="stylesheet" href="http://holytablets.org/gallery_test/css/stylesheet-orange-2.css" />
<!-- Bootstrap core CSS -->
<link href="http://holytablets.org/gallery_test/css/bootstrap-orange-2.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.ab-links-sx li.active {
background:green
}
.blank {
visibility:hidden
}
</style>
</head>
<body data-offset="140" data-target="#navbarExample" data-spy="scroll">
<div class="ab-wrapper">
<div id="navbarExample" class="ab-left">
<ul class="nav ab-links-sx ">
<li class="row blank"><a href="#img-0" data-id="img-0"> </a> </li>
<li class="row"><a href="#img-1" class="scroll-link" data-id="img-1">
<div class="ab-img-list"> <img src="http://holytablets.org/gallery_test/images_test/slider_test_01.jpg" alt="test 1" />
<h3>test 01</h3>
<p>test 01 linking to large image</p>
</div>
</a> </li>
<li class="row"><a href="#img-2" class="scroll-link" data-id="img-2">
<div class="ab-img-list"> <img src="http://holytablets.org/gallery_test/images_test/slider_test_02.jpg" alt="test 2" />
<h3>test 02</h3>
<p>test 02 linking to large image</p>
</div>
</a> </li>
<li class="row"><a href="#img-3" class="scroll-link" data-id="img-3">
<div class="ab-img-list"> <img src="http://holytablets.org/gallery_test/images_test/slider_test_03.jpg" alt="test 3" />
<h3>test 03</h3>
<p>test 03 linking to large image</p>
</div>
</a> </li>
<li class="row blank"><a href="#img-4" data-id="img-4"> </a></li>
</ul>
</div>
<div class="ab-right">
<section>
<div id="about" class="page-section">
<div class="container">
<h1>about</h1>
<p class="caption"> <b>about us infos.</b> </p>
</div>
<!--/.container-->
</div>
<!--/#about-->
</section>
<section>
<div id="general" class="page-section">
<div class="container">
<h1>general</h1>
<p class="caption"> <b>general infos.</b> </p>
</div>
<!--/.container-->
</div>
<!--/#general-->
</section>
<section>
<div id="gallery" class="page-section">
<div class="container">
<h1 class="h1">Gallery<small class="required"> sample</small></h1>
<div id="img-0"></div>
<div class="row">
<div class="col-md-9">
<p class="caption"> <img id="img-1" src="http://holytablets.org/gallery_test/images_test/slider_test_01.jpg" alt="test 1" /> </p>
</div>
<div class="col-md-3">
<p class="caption"> test 01 </p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="caption"> <img id="img-2" src="http://holytablets.org/gallery_test/images_test/slider_test_02.jpg" alt="test 2" /> </p>
</div>
<div class="col-md-3">
<p class="caption"> test 02 </p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="caption"> <img id="img-3" src="http://holytablets.org/gallery_test/images_test/slider_test_03.jpg" alt="test 3" /> </p>
</div>
<div class="col-md-3">
<p class="caption"> test 03 </p>
</div>
</div>
<p class="caption"> <a href="#" class="scroll-top back-to-top">↑</a> Back to top </p>
</div>
<div id="img-4"></div>
<!--/#container-->
</div>
<!--/#gallery-->
</section>
<div id="contact" class="page-section foot">
<div class="container">
<h2 class="h2">Contact<small class="required"> Required fields</small></h2>
<div class="row">
<div class="col-md-9">
<div class="well well-sm">
<form method="POST" action="contact.php">
<div class="row">
<div class="col-md-6">
<div class="form-group fz-name">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" value="" maxlength="19" placeholder="Name" required />
</div>
<div class="form-group fz-lastname">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" name="lastname" value="" maxlength="27" placeholder="Last Name" required />
</div>
<div class="form-group fz-address">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address" maxlength="27" placeholder="address" />
</div>
<div class="form-group fz-email">
<label for="email">Email</label>
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span>
<input type="email" class="form-control" id="email" name="email" value="" maxlength="54" placeholder="Email" required />
</div>
</div>
<div class="form-group fz-phone">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" value="" maxlength="19" placeholder="Phone - land or mobile" />
</div>
</div>
<div class="col-md-6">
<div class="form-group fz-message">
<label for="message">Message</label>
<textarea id="message" name="message" class="form-control" rows="6" cols="25" required placeholder="Message"></textarea>
</div>
<div class="form-group fz-solutioncon">
<label for="solutioncon">Please write the total of 6+9+1</label>
<input type="text" class="form-control" id="solutioncon" name="solutioncon" maxlength="2" placeholder="type solution" required />
</div>
</div>
<div class="col-md-12 fz-submit">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3"> </div>
</div>
<p class="caption"> <a href="#" class="scroll-top back-to-top">↑</a> back up </p>
</div>
<!-- .container -->
</div>
<!-- #contact -->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
<div class="row">
<div class="ab-logo">
<div id="logo"> <img src="http://holytablets.org/gallery_test/images/logo.png" alt="logo" title="logo" /> </div>
</div>
<div class="ab-top-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">Test Page</a> </div>
<!--/.navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="scroll-link" data-id="gallery">Gallery</a></li>
<li><a href="#" class="scroll-link" data-id="about">about</a></li>
<li><a href="#" class="scroll-link" data-id="general">general</a></li>
<li><a href="#" class="scroll-link" data-id="contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!--/.row -->
</div>
<!--/.navbar navbar-default navbar-fixed-top header -->
<aside>
<div class="page-section">
<div class="container">
<hr />
<div class="row">
<div class="col-md-6">
<ul class="list-unstyled">
<li><a href="#" class="scroll-link credits" data-id="gallery">Gallery</a></li>
<li><a href="#" class="scroll-link credits" data-id="about">about</a></li>
<li><a href="#" class="scroll-link credits" data-id="general">general</a></li>
<li><a href="#" class="scroll-link credits" data-id="contact">Contact</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled">
<li>Extra</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12"> © 2015, All rights reserved </div>
</div>
</div>
<!--/.container-->
</div>
<!--/.page-section-->
</aside>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://holytablets.org/gallery_test/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
</body>
</html>
Thank you very much.
You know it already, nevertheless you are great.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.