We Keep Coding

Tab links not rederecting to the right page

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

scroll to function show #id in url javascript

I am using jquery.scrollTo.js to scroll to blocks in one page onclick.
Html Code:
<ul>
<li>About</li>
<li>Products</li>
</ul>
<div id="about" class="item">
<a name="about"></a>
About content
</div>
<div id="product" class="item">
<a name="product"></a>
Products content
</div>
Internal Script:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
Please refer http://jsfiddle.net/8up4A/ to just view the code in jquery.scrollTo.js . I am trying to show the id name along with the url like http://www.test.com/index.html#about.
If i removed return false in internal script the id displays in url but the scrolling not working correctly. How to achieve this without affecting the scrolling effect. Any Help? Thanks.

$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
var currentString = $(this).attr('href');
var newString = currentString.substr(1);
$("html,body").animate({
scrollTop: $('a[name="'+newString+'"]').offset().top
}, 2000);
});
});
And you can remove the scrollTo.js plugin, you don't need it.

Prevent loading dynamic contnet in bootstrap tab twice

I have a bootstrap tab that loads dynamic page content inside it with pagination . I am using codigniter framework . The flowing jquery works fine loading content in specific tab but what i have noticed in firebug that whenever i switch to another tab and then get back to previous one then it loads the tab content again .
How can i prevent loading the previous tab from loading again when clicked .
Here is my page ..
<div class="tabbable">
<ul class="nav nav-tabs" id="myTabs">
<li id="home">Home</li>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="get_all_division"></div>
<div class="tab-pane" id="get_all_district"></div>
</div>
</div>
<script>
$(function() {
var baseURL = 'http://allinfo/area/';
//load content for first tab and initialize
$('#get_all_division').load(baseURL+'get_all_division', function() {
$('#myTabs').tab(); //initialize tabs
});
$('#get_all_division').on('click', 'a.page', function() {
$('#get_all_division').load($(this).attr('href'));
return false;
});
$('#get_all_district').load(baseURL+'get_all_district', function() {
$('#myTabs').tab(); //initialize tabs
});
$('#get_all_district').on('click', 'a.page', function() {
$('#get_all_district').load($(this).attr('href'));
return false;
});
$('#myTabs').bind('show', function(e) {
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
//load content for selected tab
$(contentID).load(baseURL+contentID.replace('#',''), function(){
$('#myTabs').tab(); //reinitialize tabs
});
});
});
</script>

you could use .empty() to remove the loaded content once the tab is hidden using a callback, or when another tab is clicked
$('#get_all_district').load(baseURL+'get_all_district', function() {
$('#get_all_division').empty();
$('#myTabs').tab(); //initialize tabs
});

Making click work only on parent item

I have footer with some content inside. ANd i made my footer show\hide on click. But now if i click on any item inside footer(i have navbar there) my footer reacting on show\hide aswell. How do i make only parent(footer) to react on clicks, and none of child elements? I'm using jquery mobile.
Here is my code:
<div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" data-tap-toggle="false" >
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a id="menu-item-home" data-icon="custom" href="index.html" class="ui-btn-active ui-state-persist"> </a></li>
<li><a id="menu-item-near-me" data-icon="custom" href="near-me.html"> </a></li>
<li><a id="menu-item-rewards" data-icon="custom" href="rewards.html"> </a></li>
<li><a id="menu-item-invite" data-icon="custom" href="invite.html"> </a></li>
<li><a id="menu-item-profile" data-icon="custom" href="profile.html"> </a></li>
</ul>
</div><!-- /navbar -->
</div>
<!-- /footer -->
</div>
And JS
$("#index").live('pagecreate', function() {
$("[data-role='footer']").live("click", function() {
if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
{
$("[data-role='footer']").removeClass('ui-fixed-hidden');
}
else
{
$("[data-role='footer']").addClass('ui-fixed-hidden');
}
});
});
TLDR;
I want to make links inside my footer to work, but not trigger footer to show\hide while click on link

You could add
$(document).on("click", "[data-role='footer'] li", function(e) {
e.stopPropagation();
});
Note that I used on instead of live, which is deprecated. Note also that jQuery has a useful toggleClass function. So I'd suggest you replace your existing code with
$("#index").live('pagecreate', function() {
$(document).on("click", "[data-role='footer'] li", function(e) {
e.stopPropagation();
});
$(document).on("click", "[data-role='footer']", function() {
$("[data-role='footer']").toggleClass('ui-fixed-hidden');
});
});

For a variety of reasons, you shouldn't actually use .live, but replace it with .on. Anyway, I think this will work:
... 'click', function (e) {
if ($(e.target).not("[data-role=footer]")) {
e.stopPropagation();
}
});

this should work...i suggest u to use on instead on live...
$(document).on("click", "[data-role='footer']", function(e) {
if(e.target != this){
return;
}
if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
{
$("[data-role='footer']").removeClass('ui-fixed-hidden');
}
else
{
$("[data-role='footer']").addClass('ui-fixed-hidden');
}
});

So your problem is that , the link in the footer not works. The easiest solution for this, is bind a click event to the link inside your footer and use either $.mobile.changePage() or window.location() method to open the desired url. Add this to your code :
$("[data-role=footer] a").bind("click",function(){
$.mobile.changePage($(this).attr("href"));
});

appending a page to my url when using jquery ajax

I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page. My problem is that in doing this my url remains the same. How can I append the href value to the url?
Sample of my code:
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
$(document).ready(function() {
$('#nav li a').click(function(e) {
var href = $(this).attr('href');
$.ajax({
url : href,
method : 'get',
success : function(data) {
$('#content').html(data);
console.log('complete');
}
});
e.preventDefault();
});
All advise welcome :)
Thanks

$(function() {
$('#nav li a').click(function(e) {
e.preventDefault();
$('#content').load(this.href);
});
});

i'm assuming you mean you want to append it onto your current page URL
in which case, you should be able to do this:
$.ajax({
url : window.location.href + "/" + href,
method : 'get',
success : function(data) {
$('#content').html(data);
console.log('complete');
}
});
EDIT:
once you get the ajax page, you can access the elements from within it. for example, if you have a div on your page that you are getting, you can select it in your success function. try this:
success : function(data) {
var $selectedElement = $(data).find("#SELECTYOURELEMENT");
$('#content').html($selectedElement);
// or you can append the element to your content if you would prefer that
console.log('complete');
}

The jquery address plugin is very easy to use:
http://www.asual.com/jquery/address/
and the history plugin is also useful for things like what you want as well as handling use of back button and such in an ajax site.
http://tkyk.github.com/jquery-history-plugin/

I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page.but page doesn't load.
my html sample code
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" id="nav">
<li class="active">
<a href="tab1.html" data-toggle="tab" >Apply Leaves</a>
</li>
<li>
<a href="tab2.html" data-toggle="tab" >My Leaves</a>
</li>
<li>
<a href="tab3.html" data-toggle="tab" >Leave Record</a>
</li>
</ul>
<div class="tab-content" id="ajax-content">
</div>
and my jquery code
$(document).ready(function() {
$("#nav li a").click(function() {
$("#ajax-content").empty().append("<div id='loading'><img src='../static/js/ajax-loader.gif' alt='Loading' /></div>");
$("#nav li a").removeClass('active');
$(this).addClass('active');
$.ajax({ url: this.href, success: function(html) {
("#ajax-content").empty().append(html);
alert(this.href);
}
});
return false;
});
});