I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.
Related
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)
I want to show an English wikipedia article on the left side of the page and then show the Spanish version of that wikipedia article on the right side of the page.
Is there a way to do that with html, javascript, ajax, etc.?
I know I could use iframes, but it would be nice to have them scroll together (you scroll one, and the other scrolls... or just have one scroll bar for both) and follow links together (if a link is clicked on one page, the appropriate translated page goes in the other side(if it exists)).
Iframes are good to display pages from another domain and let users browse them within your page. However, there really isn't a way to detect click events within the content of an iframe if it is from another domain. This article explains why.
You basically have to find what page the iframe loaded, right? Even if you were to add an onload event on the iframe to check what page was loaded, even this is not allowed, I'm afraid.
An interesting concept. IF you are sure you want to load two webpages then iframe is your option. However, for the functionality that you desire, you have to use a custom scroll on one of the pages and traverse the second page by the same amount. Here is a sample for a single page custom scroll. Just use the same concept for the other page too.
Update : You can perhaps, have a look at this. The content stored in the databases can be access MediaWiki as far as i know. Use this to get the data specific to your link.
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).
So I've been pondering this for some time and trying out various strategies. Basically I'm trying to create a bookmarklet that, when clicked, pops up a header on whatever page you happen to be on. In this header, there is a small form, the contents of which are submitted to a server. Once this is submitted, the header should disappear. In all cases, I've loaded my JS with a simple loader bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/script.js';})();
The problem is tricker than it sounds - every idea i've come up with fails in some instance - and for now lets forget about IE compatibility, I'll deal with that later.
Idea 1 was to redirect the browser to a page on my server with the form at the top and the original page inside an iframe underneath. This works fairly well, but is very slow: 3 page loads to see the form and the original page, followed by another pageload once the form is submitted to return you to the original page. Furthermore, it breaks on sites that framebust.
Idea 2 was to insert an iframe at the top of the original page, the iframe src'ing the form document on my server. This works wonderfully and only requires 1 pageload (the iframe contents). However, absolutely placed elements on the original page remain in their absolute locations, overlaying my header, while everything else is shifted down. Furthermore, I find it is impossible to get rid of this header after the form is submitted short of also creating a link underneath the iframe which would hide the iframe and itself, which one would click after submitting the form. Long story short, not really production quality.
Idea 3 was not to use frames at all. Insert a div at the top of the page with my form on it, and this form would be submitted to my server. The problem with this of course is that the original page's stylesheets will affect my new div, and I can't for the life of me figure out how to tell the page not to style the header-div (or to style it only with my rules). I'm told this is trivial in jQuery, and while I've started learning/using it, I have not found a way to do this. Also there's also the position:absolute problem as described in idea 2, but I figure that's minor.
Am I being stupid in the way i'm going about this? Should I abandon all hope for making a header and just pop up a new window? I'd really like it to be a header, but a window will suffice if a header is impossible (this is 2009 - pretty much nothing is impossible online these days...)
Anyway, any help fixing the above ideas or a completely new idea is very very welcome.
Thanks a lot for your time,
Mala
How about inserting an <iframe> into the page?
That should be simple and won't inherit the original page's CSS.
You can pass in anything you need for the iframe in the querystring.
I suppose making it self-destruct could be tricky... maybe you could redirect it to a page on the original domain, and poll for that.