Twitter-Bootstrap Scrollspy - javascript

I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}

So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works

Related

how to change content without refreshing the page?

The Following Code is what I tried to execute to to change the content without refreshing the page. I'm unable to execute the home.html and other pages into the main page while I'm trying to call. Can anyone help me out, I'm a beginner in this. Thanks in Advance !
$(document).ready(function(){
$('#content').load('home.html');
})
ul #nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}
ul #nav li {
display:inlne;
margin-right:10px;
}
<!Doctype html>
<html>
<head>
<title>Website Name</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Nav -->
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<!-- Content which would change without refreshing the page -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple.js">
</script>
</body>
</html>
<!-- home.html-->
<h1>Home</h1>
<p>Simple Text</p>
<!-- about.html-->
<h1>About Us</h1>
<p>Simple Text</p>
<!-- contact.html-->
<h1>Contact</h1>
<p>Simple Text</p>
Assuming
$(document).ready(function(){
$('#content').load('home.html');
})
is the the content of simple.js then change the hrefs to actual URLS like home.html and make your code look something like this:
$(function() {
$("#nav").on("click","a",function(e) {
e.preventDefault(); // cancel the link
$("#content").load(this.href); // load the href
});
})

Getting the contents of each bootstrap tab and printing them in separate divs?

What I would like to do is get the contents of each bootstrap tab and print them in different divs. Basically, I would like to trigger the el.tab('show') function for each [data-toggle='tab'], grab the shown contents, and print them in different divs on the same page.
$(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
.new
{
width: 30%;
margin: 1%;
border: 1px solid black;
display: inline-block;
min-height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is Home</div>
<div class="tab-pane" id="profile">This is Profile</div>
<div class="tab-pane" id="messages">This is Messages</div>
<div class="tab-pane" id="settings">This is Settings</div>
</div>
<div id="newHome" class='new'>
Want to print home content here
</div>
<div id="newProfile" class='new'>
Want to print profile content here
</div>
<div id="newMessages" class='new'>
Want to print messages content here
</div>
<div id="Settings" class='new'>
Want to print settings content here
</div>
</body>
</html>
Example: http://jsbin.com/zixihexepu/edit?html,css,js,output
Remove <script src="https://code.jquery.com/jquery-3.1.0.js"></script> from your html head as jQuery is already defined, defining multiple times will cause problem.
Then try this:
$(function() {
//This event fires on tab show after a tab has been shown.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
//get the content href
var contentId = $(e.target).attr('href');
//from content href prepare new div id and show content html there
$("#new" + contentId.substring(1).capitalizeFirstLetter()).html($("" + contentId).html());
})
});
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
check this fiddle
bootstrap tab event Reference

bootstrap change navbar .active background color

I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!-- MOBILE FIRST -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- THEMES -->
<!-- <link href="css/theme_black.min.css" rel="stylesheet"> -->
<!-- <link href="css/theme_white.min.css" rel="stylesheet"> -->
<!-- HOMEMADE - these files are local -->
<!-- <script src="js/functions.js"></script> -->
<!-- <link href="css/custom_style.css" rel="stylesheet"> -->
</head>
<body>
<header id="header" class="header clearfix no-padding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<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" href="#">Test</a>
</div>
<div class="collapse navbar-collapse no-padding">
<ul class="nav navbar-nav pull-right" id="navigator">
<li id="home"><a class="border" href="#">Home</a></li>
<li id="about"><a class="border" href="#">About</a></li>
<li id="cv"><a class="border" href="#">CV</a></li>
<li id="contact"><a class="border" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
I am using the following code in my javascript to change the .active item
functions.js
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.
custom_style.css
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
//some sort of .active {
// background-color: blue;
//}
EDIT:
Now with a fiddle: https://jsfiddle.net/819qbftg/2/
To achieve what you want, you have to do two things, make sure you address the right item with JavaScript and override the default styling that's been set by the Bootstrap CSS.
JavaScript (jQuery)
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
You were addressing the #nav, but in your HTML, there was only a class with nav, no ID. Also, don't add the class to the href attribute.
This JS code will first remove .active from all selectors (.nav li) before setting it again on the item that's clicked.
Styling added
.navbar-default .navbar-nav>.active> a,
.navbar-default .navbar-nav>.active> a:focus,
.navbar-default .navbar-nav>.active> a:hover {
background: red; /* Anything you want */
}
See this JSFiddle for a demo.
Override these styles...
<style>
.navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
.navbar-default .navbar-brand:focus { color: #DD0000; }
</style>
I took your file above and put this style tag at the bottom of the <head>. Seems to do what you're asking. I usually do this in a separate CSS for the site that is included last in your CSS links.

Can't get the scrollTo jQuery effect to work

I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here.
I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.).
<html>
<head>
<meta charset="utf-8">
<title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>
<link rel="icon" type="image/png" href=""><!--favicon-->
<meta name="description" content=""><!--description that appears under Google listing-->
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
</head>
<body>
<div id="header">
<div class="container">
<div id="navbar">
<div id="logo"><img src="images/logo.png"></div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--navbar-->
</div><!--container-->
</div><!--header-->
<div id="home">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--home-->
<div id="about">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--about-->
<div id="portfolio">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--portfolio-->
<div id="contact">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--contact-->
$(document).ready(function() {
$('#nav').onePageNav();
});
$(document).ready(function() {
$('#nav').$scrollTo();
});
</body>
</html>
Where is your opening <script> and closing </script> tag for the jQuery?
Update:
Why declare $(document).ready twice?
$(document).ready(function() {
$('#nav').onePageNav();
$('#nav').scrollTo();
});
You do not need to use Jquery to scroll top. You can use it on window object
window.scrollTo(0,0);
But if you want to animate or want to perform scroll on specific element, then you can use jquery
$("html, body").animate({ scrollTop: 0 }, "slow");
In your code, you have to write your javascript code inside <script></script> tag.
There is an spelling mistake of scrollTo instead of $scrollTo
Back To Top Link
HTML
<a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>
CSS
.btn-go-top {
position:fixed;
bottom: 20px;
right: 20px;
}

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace

Categories