Here is example which shows content of different div on when button is clicked.
Fidddle: http://jsfiddle.net/teddyrised/NHtvM/15/
Rather then div, I want to display the content of different page when link is clicked.
There must not appear scroll bar.
Header and footer should remain fixed. how to do this?
JS:
$(function () {
// Scroll to function
function scrollTo(ele) {
$("html, body").animate({
scrollTop: $(ele).offset().top - $("header").outerHeight()
});
}
// Detect location hash
if (window.location.hash) {
scrollTo(window.location.hash);
}
// Detect click event
$("header a[href^='#']").click(function (e) {
var target = $(this).attr("href");
scrollTo(target);
e.preventDefault();
});
});
If content is loaded you can hide-show what you need. If by page you mean a external page you can call the resource with a ajax call:
$.ajax({
url: "http://fiddle.jshell.net/user/login/",
context: document.body
}).done(function(data) {
target.html(data);
scrollTo(target);
});
http://jsfiddle.net/2LCM4/
Related
I use the slice() function to load more items in the catalog. When I click on an item detail and want to return to the previous page by clicking the Back button in the browser, only the first 15 items are displayed. Is it possible for the page to load at the last position and the user not have to scroll through the items again?
$(function () {
$(".content-inner-wrapper").slice(0, 15).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".content-inner-wrapper:hidden").slice(0, 15).slideDown();
if ($(".content-inner-wrapper:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Thanks for the advice.
I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});
I'm using Twitter Bootstrap's treeview plugin to generate a table of contents. The links I have for each node has the location of where the HTML is located and the anchor tag to go to. I parse this and load the HTML in a DIV on the current page and then scroll to the anchor tag. This works fine using the code below, but when I collapse or expand the nodes, it stops loading the HTML in the DIV and opens the page directly, basically ignoring the click event I have on the anchor tag. Any idea why that click event would not be triggered?
I have the following code to listen to buttons I have to expand or collapse the whole tree as follows:
var $treeview = $('#treeview');
$("#expand").click(function (e) {
e.preventDefault();
$treeview.treeview('expandAll', { silent: true });
});
$("#collapse").click(function (e) {
e.preventDefault();
$treeview.treeview('collapseAll', { silent: true });
});
I set silent to true to suppress events but then my listener for anchor tags with hrefs in them will no longer get called. Everything works as expected otherwise so I'm unsure why these event calls cause this problem. And unfortunately, I can't use the nodeSelected event because subsequent clicks on the anchor tags cause the other HTML page to load, which is undesired; it needs to remain on the current page so the following code is the only way I was able to achieve that.
$("a[href*='#']").click(function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.hash;
var location = this.href.match(/[^#]*/g)[0];
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
return false;
});
Maybe you can do like this
$("body").on("click", "#expand", function (e) {
e.preventDefault();
$treeview.treeview('expandAll', { silent: true });
});
$("body").on("click", "#collapse", function (e) {
e.preventDefault();
$treeview.treeview('collapseAll', { silent: true });
});
And
$("body").on("click", "a[href*='#']",function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.hash;
var location = this.href.match(/[^#]*/g)[0];
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
return false;
});
I have the following anchor tag in my HTML that I use to load contents from that HTML location into a contents div on the current page. This anchor tag is part of Bootstrap treeview plugin I use for generating a table of contents:
1.1 Overview
In my JavaScript, I have the following code I use to listen for two events. One for the anchor tag so that I disable the default behavior and the other to process the anchor tag and load the contents and scroll to the anchor as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
});
// Add smooth scrolling to all links inside a navbar
$treeview.on('nodeSelected', function (e, data) {
e.preventDefault();
if (data && data.href !== "") {
// Split location and hash
var hash = data.href.match(/[#].*/g)[0];
var location = data.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
});
What I am seeing is that the first time a click a node in my TOC, it loads the HTML into the contents div as expected but the second time I click it, it loads the HTML page that is referenced in the anchor tag despite my efforts to track if I previously loaded it as I do with the conditional logic above. I also notice that on the subsequent click, the anchor selector is not being called.
Any idea how I can accomplish having the TOC initially load the HTML from another page into the current page and then on subsequent calls just scroll to the anchor location (ie., chapter)?
Combining the two functions and returning false appears to work as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.href.match(/[#].*/g)[0];
var location = this.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
return false;
});
The scenario is this:
Link from an RSS feed into my website http://website.com/#anchorelement
I'd like to jump/scroll to #anchorelement
However, #anchorelement is loaded using jQuery.load() after http://website.com/ is ready. As a result, using the link http://website.com/#anchorelement does not jump to #anchorelement because the element has yet to be loaded when performing the jump.
Does anyone have any suggestions on how to make this work? Is it possible to intercept the anchor jump with javascript and make it wait until the jQuery.load() call is complete?
Thanks!
$(function(){
// so this is inside your document ready function.
// you need to add a callback
$( somecontainer ).load('somecontent', function(){
// after the content has been loaded
// check if a hash is present in the location
if( window.location.hash != '' ){
// find an element with matching id
var anchor = $( location.hash ).get(0);
// if element was found scroll it into view
if( anchor ){ anchor.scrollIntoView() }
}
});
});
If you have multiple content to load, load it one per one using callback function and if you want to scroll on one of them, call function scroll on the last callback.
$(function ()
{
//Get the hash and load your content
var hash = location.hash.replace('#', '');
loadLocationContent(hash);
});
function loadLocationContent(hash)
{
$('container1').load("someContent1", function(){
$('container2').load("someContent2", function(){
$('container3').load("someContent3", function(){
$('container4').load("someContent4", scrollToHashAfterContentLoad(hash));
});
});
});
}
function scrollToHashAfterContentLoad(hash, contentId)
{
if (hash != '')
{
$('html, body').animate({ scrollTop: $('#' + hash).offset().top }, 2000);
}
}