How Make Page Navigation in php without reloading the page without jquery like facebook has.
ex. for welcome page : http://www.facebook.com/?sk=welcome
for friends list : http://www.facebook.com/?sk=ff&ap=1
for news feed link http://www.fack.com/?sk=nf
with clicking the link instead of reloading whole page the appropriate content be loaded.
how to do this without javascript, jquery
Without JS and jQuery, the only way will be an <iframe>.
Look at this documentation for more.
If you want it done the same way that Facebook does, you’ll have to use JavaScript. There’s little way to do it without it.
Related
I want to achieve something like Facebook, where the top bar stays there and only the content underneath it changes for different pages. At the same time the URL at the top also changes, for example /messages or /events.
I'm not completely sure if this is how Facebook works but I'm trying to achieve something like this... Right now I can't figure out how this could be done...
Does anyone know how this could be achieved or if there is a name for it?
You could do this with a fixed header that is on all of your current pages, so that whenever a new page loads it appears the header is still there, or you could do the more complex way of putting all your pages in separate divs on one page, and hiding/showing the appropriate divs when a link is clicked. I'd recommend the first way personally, but those are some options.
I'm sure there are other ways to go about this.
If that isn't what you want then I apologize.
Edit: Also, my first suggestion will load a whole new page, so if you want the seamless transition effect then the second option will be the better route to go
Templates perhaps? You can't change urls without navigating to a different page as far as I know. If you want consistent elements on the page with varying content that basically is the function of templates.
If you're looking for dynamic elements to show up on the page then you should look into AJAX and DOM manipulation. jQuery is the defacto library to help with both of those. Take a look at http://api.jquery.com/ and maybe search for a template engine. Most web frameworks include a template system to create consistent styles and allow code reuse.
You can use #anchors, that won't reload the page. For newer browsers, you can use https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history to update the url without reloading the page
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.
I need to create a website with an audio player that plays as users traverse through the site. At the same time, the content section needs to fade out and back in while this is still going on. So bring in another piece of HTML without reloading the page. The question I have is, how can i get all those to run correctly, while at the same time, running different Jquery plugins on different pages?
Essentially, I need to website to run like this one but with a continuous audio player in the corner or something.
http://www.chalicerecording.com/
If you notice, the page never reloads and the name of the actual file doesnt display on the browser top. This gives me the idea thats its using PHP for the page.
So with that idea, I ended up finding this.
http://www.youtube.com/watch?v=ytKc0QsVRY4
The problem im having with that is that I cant seem to figure out a way to run individual Jquery plugins on each individual PHP page without reloading the entire page. I hope this is enough info for you guys to work with.
you will need to use ajax calls to do so
jQuery.ajax
jQuery.post
jQuery.get
you also need to use jQuery fadeIn , jQuery fadeOut
I would like to build a website where when you go to the next pag,
the page slides to the next.
I can use Jquery.ScrollTo but then i have to load all the pages at ones.
http://demos.flesler.com/jquery/scrollTo/
This is not a good result for the google index I think.
What is the best way to do this? I think about loading the next page with ajax.
you need includes having HTML links for your navigation, ensuring that your site works on browsers that do not have JavaScript turned on, and using real links in your JavaScript or AJAX, such as:
[a href=”ajax.htm?sn=products” onClick=”navigate(‘ajax.html#sn=products′); return false”]products[/a]
Check out the JQuery mobile framework which has this implemented. They use Ajax page loads and CSS3 transitions to slide new pages into view but your page HTML uses normal tags which can be used by a search spider.
http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html
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).