I'm using bootstrap tabs and have added a url to each of them.
So, if someone goes to www.example.com/index.html#contact. It takes them to the right page (the contact page).
The problem is I have a home page that links to each tab. When you click "contact" on the home page it should redirect to www.example.com/index.html#contact, but instead it goes to the main page, which is "About us", even thought the URL at the top says www.example.com/index.html#contact and not www.example.com/index.html#about.
I hope that made sense.
Heres my code:
Home page: (when you click on an image it takes you to the page)
<div id="row1">
<img src="images/About_Photo_Red.jpg" width="33%" id="about">
<img src="images/Conference_Photo_Red.jpg" width="33%" id="conference">
<img src="images/Sponsors_Photo_Red.jpg"width="33%" id="sponsors">
</div>
Tabs:
<div class="tabs" id="navtabs">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills head-menu" id="navbar">
<li class="active">About Us</li>
<li>Conference</li>
<li>Sponsors</li>
<li class="disabled">Gallery</li>
<li>Contact Us</li>
</ul>
</div>
Java script
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
});
// navigate to a tab when the history changes
window.addEventListener("popstate", function(e) {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
$(this).scrollTop(0);
} else {
$('.nav-pills a:first').tab('show');
}
});
});
Note that the popstate event is fired only when an actual browser action is taken; calling history.pushState does not fire the event.
That said, if you take the history handler out of the event listener and into a standalone function, you can call it manually on page load (to be safe; some browsers fire a popstate event on pageload, and some do not) and after you push history.
Example:
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
updateTabs();
});
function updateTabs() {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
$(window).scrollTop(0);
} else {
$('.nav-pills a:first').tab('show');
}
}
// navigate to a tab when the history changes
window.addEventListener("popstate", updateTabs);
// make sure the correct tab is set on pageload
updateTabs();
});
Related
I am using bootstrap nav-tabs for "Login" and "Register".
<div class="panel-heading">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1success" data-toggle="tab">Login</a></li>
<li><a data-toggle="tab" href="#tab2success" data-toggle="tab">Register</a></li>
</ul>
</div>
And using javascript to remember the last tab the user was on via local storage. The reason I am doing this is because when the user is registering and enters invalid data (submitted form), it reloads the page and returns to the "Login" tab.
I can have the webpage remember the last tab via all the time:
$(document).ready(function (){
$('a[data-toggle="tab"]').on('show.bs.tab', function (e){
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
But I only want to trigger the code when the form is submitted (not all the time). This is the code I am currently working with:
<script type="text/javascript">
$("#btn100").onclick(function ()
{
$('a[data-toggle="tab"]').on('show.bs.tab', function (e)
{
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab)
{
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
alert("check if code executed");
});
</script>
I have also tried: $("#fm100").submit(function (), $("form").submit(function (), and creating an HTML onclick="rememberTab()" function from the submit button.
I look forward to all your help, thanks!
I have this code in header.html:
<nav role="navigation">
<ul class="nav">
<li><a id="home" href="index.html" class="current">home</a></li>
<li><a id="about" href="includes/test.html">about</a></li>
<li><a id="resources" href="#">resources</a></li>
<li><a id="archive" href="#">archives</a></li>
</ul>
</nav>
Now, everything seems fine until my index.html loads files from another folder to fill the divs with id="header", id="content" and id="footer" using:
$(function() {
$("#mainhead").load("templates/header.html");
$("#content").load("templates/content.html");
$("#footer").load("templates/footer.html");
});
My question is - How can I replace content in the div id="content" with the one from another HTML page that can be accessed by clicking a link in the nav menu?
Change the code that loads the navigation to this...
$("#mainhead").load("templates/header.html", function() {
$(this).find(".nav a").on("click", function(e) {
e.preventDefault(); // stop the link from firing as normal
$("#content").load(this.href); // load the file specified by the link
});
});
This will "ajaxify" the links in the header navigation, after it has loaded, so that the content div is loaded for each of the links, without having to navigate away from the page. Just make sure each header link has the correct href value for the content you want it to load.
Is this what you meant? This will load the content from header/content/footer pages and load in the appropriate div on click of home.
$("#home").click(function () {
$("#mainhead").load("templates/header.html", function (data) { $(this).html(data); });
$("#content").load("templates/content.html", function (data) { $(this).html(data); });
$("#footer").load("templates/footer.html", function (data) { $(this).html(data); });
});
$("#content").replace("old page","new page");
try this one.
or
$("#content").load(){
location.replace("your page");
}
or
var url = "Your url"; $(location).attr('href',url);
$("#div").html("Your content");
I want dropdown menu also to be able to click the item. Example:
Menu item: Services
Sub items: - branding } These already have working links
- marketing }
But when I replace # with a link for Services, it does not work. when i click it nothing happens although if I right click and open in new tab it opens the URL.
I think it's related to the Javascript.
HTML:
<li class="dropdown">Services
<ul class="dropdown-menu">
<li>YouTube</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
Javascript:
$(document).ready(function() {
$('.js-activated').dropdownHover({
instantlyCloseOthers: false,
delay: 0
}).dropdown();
$('.dropdown-menu a').click(function (e) {
e.stopPropagation();
});
});
this code:
$('.dropdown-menu a').click(function (e) {
e.stopPropagation();
});
disables the default action (redirecting) on a click on 'a' element within the menu.
hope that helps.
My html for a tabbed menu and its content:
<div class="tab-menu"> <!-- menu -->
<ul>
<li>link to tab 1</li>
<li>link to tab 2</li>
<li>link to tab 3</li>
</ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
<div id="tab1" class="tab">first tab content</div>
<div id="tab2" class="tab">second tab content</div>
<div id="tab3" class="tab">third tab content</div>
</div>
... and the script to make the menu work is
// Displays the first tab when
$(".tabs").each(function(){
$(this).find(".tab").hide();
$(this).find(".tab-menu li:first a").addClass("active").show();
$(this).find(".tab:first").show();
});
$(".tabs").each(function(){
$(this).find(".tab-menu a").click(function() {
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().parent().parent().find(".tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
The menu works when user clicks a tab. This means the menu opens up with the first <div> visible by default and when the user clicks another tab, that corresponding <div> appears just as expected. However, when I type in the url mysite/path#tab2, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript
EDIT: It seems document.location.href provides the full url. How do I parse and extract the label from this url?
When the page is loaded, check the location.hash property and behave consequently:
$(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
Better than that, don't register any click listener at all, and just use the hashchange event:
$(window).hashchange(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.
$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.
Use class instead of id. Select elements using class.
Also you can use .each() method
You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );