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.
Related
I have a css animation that essentially slides two images with a high z-index off the screen revealing the website content below it on the home page. It is only on the home page and not on any other pages.
What I would like to do is have this animation run only the first time the page is accessed during a session. So if the user navigates to another page and then comes back to the home page, I don’t want the animation to run again.
The only solution I can think of is to create an HTML5 session storage object on the first page load that is checked every time the home page is loaded and use jquery to hide div that contains animation if the value of the object is set.
This seems a bit overkill for such a simple task. Any suggestions on a simpler way of just removing the div that is persistent across page reloads during the session? You don’t have to write the code for me, just point me in a simpler direction if possible. Like is there a way to do this with just CSS. Or if I remove the element using JavaScript will it remain removed after navigating to another page within site and then coming back to home page. Please and thanks!
P.S. This is a custom WordPress theme so I’m open to a PHP solution as well.
You can check the referrer URL and run the animation only if the referrer is not the site itself. But this time the animation won't be shown if the visitor first opens another page and then navigates to the homepage.
Another option would be using cookies.
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.
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 a web page where I have two iframes. I set the url (location) of the iframes in the page onload event. This is done to "delay load" the content. That is, the main page content is rendered first, then the iframe content with e.g. Like buttons, trust logos etc. are displayed. This speeds up the page rendering considerably.
However...
Clicking the back button first removes the trust logo. Then another back button click removes the Like buttons. The third click finally takes the user to the previous page.
Is there any way to avoid the URLs of the iframes to go into the browser history, while maintaining the above functionality?
Thanks!
Avoid using iFrames, if you really want to improve rendering like this, use AJAX. However there are numerous other problems if your page actually renders slow, how large is it, and how is it structured?
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).