jQuery - Could use a little help with a content loader - javascript

I'm not very elite when it comes to JavaScript, especially the syntax. So I'm trying to learn. And in this process I'm trying to implement a content loader that basically removes all content from a div and inserts content from another div from a different document.
I've tried to do this on this site:
www.matkalenderen.no - Check the butt ugly link there. See what happens?
I've taken the example from this site:
http://nettuts.s3.cdn.plus.org/011_jQuerySite/sample/index.html#index
But I'm not sure this example actually works the way I think it does. I mean, if the code just wipes out existing content from a div and inserts content from another div, why does the other webpages in this example include doctype and heading etc etc? Wouldn't you just need the div and it's content? Without all the other stuff "around"? Maybe I don't get how this works though. Thought it worked mosly like include really.
This is my code however:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#dynloader a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #container';
$('#container').load(toLoad)
}
});
$('#dynloader a').click(function(){
var toLoad = $(this).attr('href')+' #container';
$('#container').hide('fast',loadcontainer);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadcontainer() {
$('#container').load(toLoad,'',showNewcontainer())
}
function showNewcontainer() {
$('#container').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});

The jQuery .load() has some extra functionality in it to support this.
You can see it in the docs here (look at `Loading Page Fragments')
In your example here's the important part: hash+'.html #container' the space before the #container means that jQuery will grab that URL, look for the element with id="container" and fetch only that element's content's discarding the rest of the page. This lets .load() work in a more generic way without what you're fetching being specifically designed for only ajax loading.
In your case I think you just need to remove #content from the end unless you're looking for that element. It's not saying "look for content" that's just the ID they used for the element they wanted to look for. It could have been #divToLoad which would be a clearer example IMO.

Related

Linking within the page

I have seen a lot of websites where they are linking in the same page.
(demo)
The problem in this system is, when you reload the page after clicking the link (which refers you to the selected area), the page immediately scrolled to the selected area, because the click on the link leaves a #name on the URL page (even when reloading), for example:
www.example.com/#down
I have seen also websites, where they don't add #name to the URL line but you still referred to the linked area.
I guessed this has been made by jQuery or Javascript but I couldn't find (inspect element and page's source) the code (I found this system in high-tech sites, where they have a lot of js files and it was complicated to find).
My real question is: how can I link within my website, without using the hash-tag|name system?
The behaviour you describe is the intended, desired behaviour of anchors. As has been said...
Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
You can have an event listener detect clicks on links and scroll accordingly. jQuery would be something like this:
$(document).on("click", "a[href*='#']", function(evt) {
evt.preventDefault();
var target = this.href.split("#")[1];
var elm = document.getElementById(target);
if( elm) elm.scrollIntoView(); // or replace with fancy scrollTo plugin
});
However, be aware that doing this decreases usability. From xkcd...
Working DEMO
HTML:
GO SEE THE DEMO
jQuery:
$("a").click(function(event) {
event.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top
}, 500);
});

jQuery each doesn't work with certain classes, or classes in general?

I'm using Phonegap to build a small (test only) Macrumors application, and remote hosts actually work (there is no same host browser restrictions). I am using the jQuery Load() function to load the contents of the Macrumors homepage http://www.macrumors.com/ into a bin, hidden div, then the each function to loop through all the article classes to show the title in a box with a link to the page.
The problem is, after the Macrumors HTML content is loaded, the each function doesn't work with the article class. Also, in the load function (which allows you to specify certain selectors, id's and classes included, to only load in those sections of the page) the class doesn't work; none of the classes do, in both the load function and each function. And many Id's don't work in the each function either.
Can anybody explain this to a noob like me?
Here is the code:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content');
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
}
And the HTML stuff
<body onload="onBodyLoad()">
<div id="bin">
</div>
<div id="content">
</div>
</body>
I sincerely apologize if there's some very simple mistake here that I'm missing; I'm a major JS newbie.
.load() is asychronous. It hasn't completed yet when you're executing .each(). You need to put your .each() and any other code that wants to operate on the results of the .load() in the success handler for .load().
You would do that like this:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}
I'm also guessing that your .each() function isn't working quite right. If you want to get the link out of each .article object, you would need your code to be like this so that you're only finding the <a> tag in each .article object, not all <a> tags in the whole document:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $(this).find('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}

How to go to an specific anchor when entering the page (doesn't work)

First of all, thats my current state of play: thsbrk.de.
The black boxes should be e.g. a about section. I want to achieve that if you enter my page (thsbrk.de) you directly go to my reference section (anchor '#references'). Then, if you hit the about link you will scroll up to that about section. I already tried to make it working but it doesn't. The anchor seems to be not working.
It would be awesome if someone could look at my code and offer me a solution :)
(The scroll isn't implemented yet, I only ask for the anchor problem)
EDIT: Here I've got a example how it should work: Example
Give a script tag like this in the head.Let it be the first script also.
<script>
location.href="http://thsbrk.de/#references"
</script>
From your code, you have did the same. But just try reordering the script tags it might work.
Plain JS:
window.onload=function() {
var anchorHash = 'references';
document.getElementsByName(anchorHash)[0].scrollIntoView();
}
Here is a jQuery example from 2009 - there may be newer ways
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
In your case this might work
$(document).ready(function() {
var anchorHash = 'references';
var pos = $('#'+anchorHash).position();
window.scrollTo(0,pos.top);
});
Try this and tell me the result:
$(document).ready(function() {
window.location.href = '#references';
});
and then modify your anchor tag like this:
<a name="references">Here</a>

Jquery Replace with Load

I am attempting to do what so many have tried. that is to load a Child DIV and Replace the present DIV. People have suggested using x.load(y > *) but when I use the Star in IE it fails to load the page where as in chrome it loads fine.
Does anyone know what I should do to wrap this so that it works with IE.
You don't load a DIV, you create one using;
var aNewDiv = $('<div />');
You can then replace your div using the replaceWith method;
x.replaceWith(aNewDiv);
If you want to load an element from another page, you can do;
x.load('foo.html .selector', function () {
var self = $(this);
self.replaceWith(self.children());
});
For more info, see the load() documentation.

Ajax inserted content not accessible in DOM

I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd

Categories