I want my site to have similar navigation to a browser. I want visitors to be able to right click on one of my links/articles and have the option to open a new tab and have the page load in the same page. Here is the concept site I want to work with link.
Well, then try to use dynamically injected <iframe>. Especially when using JQuery it could be very easy solution. You must also somehow manipulate the links inside the content... look at this link if it helps, hope you won't have problems with "same origin policy".
You have to use some ajax function to load content from the new page into the tab.
Sounds like this would be a good scenario to use a AJAX, for ease of use I would recommend JQuery.
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
As many of you have noticed, when you hit a link to switch from page to page in Google+ or facebook, the URL changes, the body changes but some parts of the page don't, like the chatbox. I believe AJAX can change a specific content of the page by requesting a PHP page from the server and get some results, but that won't change the URL.
Actually, I didn't know exactly how to search that in Google, so, any keywords/names/linkes will be strongly appreciated.
I'm using JQuery library for Javascript and Symfony2 framework for PHP, if this helps.
Look at the JQUERY load method.
http://api.jquery.com/load/
All you need to do is use a selector:
$('mydiv').load('newcontent');
Very powerful function. Look it up!
edit:
Sorry missed that url change. The trick alot of times with the URL is around the Hashtag. If you look closely at the URL there will be a "#" pound symbol in there somewhere. This allows the site to store current state without a reload.
Currently there is no way to change the URL in the browser save for the bit after the hashtag with out fully reloading the site.
you can either use iframe or ajax to keep some part of your page static.To change url either you can use hash hack.
window.location.hash = "pageidentifier"
or you can use the html 5 trick described in the url provided by arxanas
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.
I have an iframe on my site that shows the full contents of an external site. I want to get rid of the iframe but keep the same functionality. I was thinking of using a div with overflow=auto. Problem is, when I attempt to include an external site using php, such as include 'http://www.site.com'; or echo file_get_contents("http://www.site.com");, the site shows up but it takes over formatting, the site's name appears in the titlebar, etc. How might I replace the iframe functionality?
How might I replace the iframe functionality?
This is not easily possible. You run into the problems you just described and to solve those is a real hard job. I don't know of an existing component that does this.
Instead stick to the iframe. What's so bad about it?
If you are getting rid of the iframe because of its default ugly border then you can just make the iframe look seamless using the 'seamless' attribute of iframe
http://www.w3schools.com/html5/att_iframe_seamless.asp
Many web pages load all of their content to change very little information.
Now I would like to know why shouldn't the developers just use ajax for the main page requests?
On my own webpage, I would like to develop the main requests on my webpage with just ajax but I don't know any specific cons with this approach.
Does anybody have an idea why someone shouldn't use ajax so much?
Search engines, crawlers/spiders, browsers with no javascript, screen readers and other consumers of the content will not be very happy with it.
You can provide tons of ajax behavior on top of you website if you already support standard server side navigation for the full content. Have a look at progressive enhancement (SO) and progressive enhancement (wiki).
The whole premise really is that with AJAX you don't need to reload the whole page to update a small percentage of that webpage. This saves bandwidth and is usually much quicker than reloading the whole page.
But if you are using AJAX to load the whole page this is in fact counterproductive. You have to write customised routines to deal with the callback of the AJAX data. Its a whole lot of extra work for little to no increase in performance.
General rule for where to use AJAX: If your updating >50% of your page, just reload, else use AJAX.
I'll give you one very good reason.
If you turn off javascript in the browser it won't work.
The biggest con are users who have JavaScript disabled. Your website simply won't work for them.
Aside from the answers already posted, using AJAX can have ugly side effects on browser control, such as the stop button not working.
One thing is that you want content to have a static url, you want people to be able to link to your pages, bookmark them, etc.
If everything is ajaxified, this could be tricky and/or tedious.
Well if you want to AJAX load new pages, such as the same way Gmail works, I suggest your links are normal A HREF links that point to a true full rendering page URL and alos use an onclick event that stop the attempt at normal link loading and make your AJAX calls. The problem here is you'll be doing almost double coding unless you architecture this all very well.
This way the normal non JS links load the full page, and the JS calls only load the new parts or page. This means spider indexing works again too.
Well, you can always add the onclick event unobtrusively using jquery and stop the normal URL handling.
Eg:
HTML
<a id="ajaxify-this" href="my-working-url">Click me to do AJAXy stuff if you have javascript</a>
then Javascript
$(document).ready(function() {
$("#ajaxify-this").click( function(e) {
updateContent(); // do something ajaxy with the page
return false; // stop the click from causing navigation
})
}
I use only JavaScript and EJS as template Engine for my own webside. One step closer to SOFEA/SOUI.
Search engines, crawlers/spiders, browsers with no javascript, screen readers dislike it, right. But I follow the mainstream ;)