What I currently have:
index.php: Mainpage, showing topbar, navigation & placeholder for content
navigation: uses javascript to load a php-file into the content-section from index.php if a link in the navigation is clicked; important: NO refresh of index.php
Is working fine right now. Also the url in the address bar is not being changed right now when clicking a link.
What should be added:
If a link in the navigation is clicked, javascript should still load a php-file but also should change the url in the address bar without refreshing the side.
Example:
url: "www.example.com
In navigation link "work" is clicked.
work.php is loaded into the content-section of index.php
url now: "www.example.com/work
Additionally if the user types www.example.com/work in the address bar index.php should load work.php without a link being clicked.
A good example to understand my issue with the url in the address bar is facebook. Hope I could clarify my problem so somebody is able to help me ;-)
You can only change the hashtag of a URL without refreshing the page (making another request).
So when a navigation link is clicked you could change "www.example.com" to "www.example.com/#work" but you can't change it to "www.example.com/work" without reloading the page.
A hashtag can get set with javascript using window.location.hash
window.location.hash = "work";
If you are looking to avoid hashtags, you can use the HTML5 history API. This allows you to have the / in your pages using the history.pushState() and history.replaceState() method.
There is also this plugin that you may find useful.
Related
I want to make my website have page navigation like Facebook does. I mean when click a link on Facebook from the navigation bar on the left side(News Feed, Pages, Lists etc.) only Facebook content flow, advertising side bar changes(in short, middle and right columns) and URL changes. No page redirection happens.
One thing also, I have learned that you can change URL with History API but, how is it possible to make when another person uses that link and you make them to get into that page? For instance, you have index.php and profile.php. In index.php you have navigation bar, and a few good basic items you never change. When you load profile.php into a on index.php with AJAX and change the URL to www.example.com/profile.php from www.example.com/index.php its ok.
However if someone else uses that link later, how i am going to merge index.php and profile.php? I dont have navigation bar in profile.php, I only have the AJAX info to use inside index.php.
SCREENSHOT: http://tinypic.com/r/idsjsh/8
I hope I explained everything clearly. I am really wondering how facebook achieves this.
I got a situation here. I have a main page and a subpage. The subpage does have an iframe container and there are two pages test1.htm and test2.htm that are loaded into that iframe when your current page is "subpage.htm".
However, what I want to to, is to be able to click on a link on my main page and it opens up the subpage and automatically loads a predefined page, lets say test1.htm into the iframe.
I got the function to load a page into an iframe and I though by using JavaScript and some code this was possible. Unfortunately, I couldn't figure out a way to do this.
function link {
url = '../subpage.htm';
document.target = url;
loadintoiframe(myiframe,test1.htm);
}
I got the function loadintoiframe, it needs the name of the iframe and the page to load.
When I call the function link() as a href link on the main page, it does load the subpage, but it does not load the iframe correctly.
Maybe someone can help me out?
Why not just put
Link
And avoid the JavaScript at all?
So this does not work.
I tried to go for a JavaScript Method that just does a href basically and then calls the method that loads my special page into that iframe on the href site.
That did not work, so anyone else got a clue how I can href a different .htm site and simultaniously tell that site to load a certain page into the iframe?
Best regards,
Alex
I have a page with an iFrame in it. I want to be able to send links to people, that will open a page within that iFrame on my page.
The main (parent) page is called results.html
The iFrame has the id "searchresults"
The page that I wan people to be able to open within that iFrame is results.php, but it would have a number of parameters in it (for example results.php?id=5)
How would I construct the link to send to people?
For example, would it be /results.html?target="searchresults";?results.php?id=5
I simply can't work it out!
What stops you from simply loading the iFrame and the main frame with the same GET parameters?
Or the place where you add iFrame, simply add the GET parameters of the main page also to the iFrame and then check for their presence in the iFrame code?
For example, I have a page:
index.php
In this page I have an iFrame with an URL:
<iframe src="search.php"></iframe>
If I make a search, then the main page would change:
index.php?search=test
Now when I am generating the iFrame URL, I check if that GET parameter exists, if it exists then I append it to iFrame URL:
<iframe src="search.php?search=test"></iframe>
I have a page that pulls up information based on an ID from the url using php get. It does this in an iframe. So there is an iframe on the main page that shows all the content, if a user wants a link, they click a link to a page, which is targeted to that iframe. So if a user wants to see an individual post, the iframe is directed to a page that pulls the id from the link.
href="location.php/?id=2" target="mainframe"
My question is, I want someone to be able to click a link to my website from somewhere else, and be able to see just that post, I want to do this without having to create another page, so if there is a way to make a http://www link navigate to my page, and then tell the iframe what to do, that would be awesome. Thanks!
put this at the bottom of your page before the </body>
<script>
document.getElementById('frame_name_goes_here').src = "http://linktoyourpost.html";
</script>
Used php to decide if the Id was present in the url, if it is, direct to the specified id, otherwise, the iframe source is the default page.
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).