I want to load content using Ajax and keeping just the header from being reloaded, similar to this site.
So far I have this but don't know what else to add to get the same effect. I noticed that on that website that the URL also changes as well as the content apart from the header, which is exactly what I want. After looking through the source code I can't find anything that he's using apart from noticing the .php extension in the URL.
$('nav li a').click(function(){
// var pageurl = $(this).attr(href);
var pageurl = $(this).attr('href');
$('#wrap').load(pageurl);
});
What am I doing wrong?
Update
Sorry, I did miss out the quotes on the href although it still doesn't work for me.
$('nav li a').click(function(e){
var pageurl = $(this).attr('href');
$('#wrap').load(pageurl);
e.preventDefault();
});
You need to add quotes around the attr and also stop the link from changing page by adding preventDefault().
Edit:
I just noticed your selector is:
$('nav li a')
Are you sure it's not meant to be #nav or .nav (for ID or class)?
To achieve the change in the address bar, you need to use the history object of window.
Check https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
From that page:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Related
I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>
You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.
I'm trying to add jQuery to a website so when the link to the next page in the nav menu is clicked, then "active" class is switched to the "active" or current page. The "active" class is also set initially to the home page. Additionally, it's a website using Bootstrap so I was wondering if something was conflicting with my jQuery. Seems simple enough and my code works somewhat. It removes the active class from the Home page and briefly flashes on the next tab, but it does not stay "active." Here's the jQuery:
$(".nav li").click(function() {
$('li').removeClass('active');
$(this).addClass("active");
});
Any thoughts on what I may be doing wrong? Thanks in advance.
Andrew
I had a similar problem and wrote the following script:
var _urlpath = $(location).attr('pathname').split('/').pop();
$('#menu > li').each(function(){
var _this = $(this);
var _str = _this.find('a').attr('href');
_str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
});
It's fairly simple: filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology), hash in the li > a's .
Alas, there might be a better way of doing this.
I have a web site on based on SkelJS that currently loads a different part of the webpage by appending an #anchor to the url like this:
Note that #blog loads the blog page, the scroll is at the top. Inside the Blog page I need to scroll to a certain article. How can I use two anchors so that something like #blog#article_x would work? I suppose I have to look for a workaround since anchoring 2 ids makes no sense, is there a work around?
Additional notes:
Note that if a change #blog to #article_x it actually goes to the desired article however if someone shares the link it won't go to the article because it will look for #article_x on the homepage, where it does not exists.
Here is a demo of the template I'm using (http://html5up.net/uploads/demos/astral/#) note how the #anchor loads the desired page.
You can use a hash that contains both page and element. Then split and then do your page load then scroll, i.e. #blog,someelement
//on page load or wherever you detect the hash
$(function(){
var hash = window.location.hash;
var ele = null;
//Detect if there is a splitable hash
if(hash.indexOf(",") != -1){
var parts = hash.split(",");
hash = parts[0];
ele = jQuery("#"+parts[1]);
}
//whatever function you do to load the blog page
loadPage(hash,ele);
});
function loadPage(page,ele){
//do page loading
$("#page").load("http://someurl.com",function(){
//if there was no second part to the hash
//this will be skipped
if(ele){
$("html,body").animate({
scrollTop: ele.offset().top
},1000);
}
});
}
JSfiddle Demo
Considering the ID of the element that you want to scroll to is myelement you can use below jquery code to smoothly scroll to it.
$("html,body").animate({scrollTop : $("#myelement").offset().top},1000);
We can scroll to specific div when it has id or class
var $id=window.location.href.split('#')[1];
$('html, body').scrollTop($("#"+$id).offset().top)
I saw something really different, and I have no idea how to do it.
The site Rdio.com when you click in any link, the url change totally (not #).
But the div in the bottom of the page (that is playing the song) do not reload.
How they do this?
you can do this with an ajax load and then you mainipulate the browser history.
like so:
/*clickhandler Hauptmenü*/
$('#main-nav a').on('click', function(e){
var href = $(this).attr('href'),
title = $(this).text();
loadContent(href,title);
/*manipulate Browser history */
history.pushState({path: href, titel: title}, $(this).attr('href'), 'http://www.example.com/'+$(this).attr('href'));
e.preventDefault();
});
window.addEventListener('popstate', function(e){
loadContent(e.state.path, e.state.titel);
}, false);
function loadContent(href,title){
var href = href,
container = $('#main-cont');
container.fadeOut(100, function(){
container.load( href +' #main-cont', function(){
container.fadeIn(200);
$('title').replaceWith('<title>' + title + '</title>');
});
});
};
I hope this answers your question.
This is done with JavaScript's new history object, using the pushState and popState methods. See also http://diveintohtml5.info/history.html
Correct me if I'm wrong - considering that I havent been to their site - but I believe that they would be using an Iframe of some sorts - considering that they would have to reload that div if they did otherwise
This is my first incursion in jQuery so I am really newbie with this. I read the documentation (actually, I am still on it) to get to know it better!
The thing is that I have a website with several links into a li element and I want to achieve that every time I click in one of these links, a certain piece of text will appear in a div id="container" in the webpage.
How could I do this?
Quick, simple answer:
$('#yourlist li a').click(function(){
//grab link's href attribute
var href = $(this).attr('href');
//update content
$('#container').html("Loading page " + href + "...");
//load page via AJAX using link's href
$('#container').load(href);
});
I added more code to show how you would access the given link using $(this) and further load its href via AJAX.
$('li a').click(function(){
$('#container').html('Text you want to add');
});
try
<script src="your/downloaded/jquery/path.js></script>
<script>
$(document).ready(function() {
$('a#idOfLink').click(function() {
$("div#container").html("<span class='red'>Your certain text</span>");
});
})
</script>