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
Related
I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
I've recently been told to use Panels to dynamically load content into different sections with Drupal. However, I've just realized that there is an easy way to do it, I've added this jQuery code to all menu items:
$('.menu a').click(function(){
$('#content').load($(this).attr('href') + " #content");
return false; //to avoid refresh
});
In this way I can easily update anyblock from any link without having to use Panels.
Is this approach a good one ?
Do you also think Panels is not necessary to simply load html into website sections dynamically ?
thanks
Panels main usage, is not loading content without page loads. It's primarily used
to create different page layouts that depends on certain criteria, that you can setup with code, or in the AI.
Let the content of the page, be aware of which content is being viewed, and tying to different content together.
Your current script will work, but it's a bit crude in it's current form. Fx, what will happen if a user clicks several times. If you want to dynamically update your content, you should only change the parts that needs changing instead of loading/changing the whole page. Then you might as well just load the new page instead. I guess this is where Panels can help you, but I haven't tried using Panels like that.
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)
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).
I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm