Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});
Related
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I'm trying to code a seo friendly ajax portfolio right now. My goal is to provide javascript effects to users and normal html to bots/users without js.
Files:
index.php (starting point of my program)
aboutme.php (contains html code for "about me")
contact.php (contains html code for "contact")
The idea:
User visits index.php and clicks on "About me" -> loading animation appears -> aboutme.php gets loaded with ajax -> history.pushstate rewrites the url to aboutme.php.
-> When the user shares the current website url on fb/twitter/g+ the bots will get the correct title, body etc., as it is the normal html page without any javascript.
But my problem is: If other users open that page, they see directly the content. But I want to show them a loading animation first until the data got loaded with ajax (similar as they click on a link).
How can I achieve such an approach? Thank you very much!
Best way to do this, create a javascript file. Write the link tag into "head" part. This will make the javascript file downloaded before content. Javascript shows the animation, but at the same time browser will be downloading the content already in the background. On "document ready" event, stop animation.
This will let bots to access the content directly. Because javascript won't work for them.
To make your ajax content crawlable see https://developers.google.com/webmasters/ajax-crawling/, Bing supports this as well. Or use the HTML5 pushState, see http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate, https://github.com/blog/760-the-tree-slider etc.
I've always thought this is more effort than its worth(generally), but to answer your question:
index.php, aboutme.php, contect.php should deliver full html.
certain links should have js event handlers intercept the click, and instead of loading aboutme.php, they load aboutme-content-only.php in the background. then update the dom and push state etc...
this way the site can easily degrade for those users who are first time visitors, as well as those whose browsers dont support push state or javascript.
I think that it is not a problem at all, keep your href of links as usual, then using JavaScript or jQuery change the default behavior of clicking link to load the linked contents with ajax.
my question is about this website - http://www.bits-apogee.org/2011/
whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?
is this some query plugin?
I totally agree with #JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.
Modify the URL without reloading the page
The site is using Hashes (#) in the URL to denote the new content being loaded.
This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...
http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.
There are 2 possibilities:
You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.
If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.
They're not using a plugin. They're doing an ajax request to a URL like this:
http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong
and dumping the overview in the container.
The circle of this type of process is usually like this:
listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container
2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.
Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.
We all know that Firebug / Web Developer Toolbar, etc. can change the HTML/CSS of any page to our local machines. Upon refreshing, however, we know these changes are not saved.
How does someone save these changes for just our local machine, in an automatic fashion that would have our changes reappear after refreshing the site?
For example, say I go to a blog posting website, which is updated by someone every day. Say I wanted to color the background of every blog's title I've read a bright annoying red, (so quick viewing in the future would allow me to skip over these). In this case, imagine the title is always an h2 element. I would add an inline element to this heading, so:
<h2>The world ends this year!</h2>
becomes
<h2 style="color:red;">The world ends this year!</h2>
Is there any way to Mark, Highlight, or change this blog post title on just our local machine for automatic viewing in the future?
If you're aiming to personalize your own web experience I recommend a Greasemonkey script
that applies CSS programmatically. There is an equivalent plugin called Stylish which is the analog of GM for CSS. There are equivalents for Chrome.
If you're aiming to provide this functionality to users of a website you're creating, I'd look into storing personalized styling on the client-side using HTML5 DOM Storage.
You don't need any plugin or program to do that, just create the userContent.css file in your Firefox profile directory, and paste your custom CSS for the webpage you want, like:
#-moz-document url-prefix(http://www.domain.com/blog/) {
#content h2 {
color:red !important;
}
#content h2 a {
color:red !important;
}
}
you can find more customizable technique on the mozilla developer site
I'm sure there are browser plugins to do something like this - especially for Firefox, etc. (If not, it wouldn't be too complicated to create one.)
Otherwise, I'd investigate Greasemonkey, and write some custom user scripts to do just this. You could have the custom user script apply to all sites, and use a local data store to determine if the site has been previously visited or not.
Ideally, instead of duplicating the history store (since your web browser is already storing history), such a plugin would integrate with the browser history. However, this may not be desirable if you have your browser history configured to only save the most recent # of days, and if you want this listing of "read" posts to be maintained longer-term.
Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).