I am building a website and when I click on one of my header's page links, it loads the whole page again, rather than preserving the header and only loading the main content. For example:
When you click on a button on the sidebar of YouTube, it will, for example, load the watch later playlist, and preserve the search bar and sidebar. How would I go about doing this on my website?
Have a look at using aJax. This should resolve your issue.
Related
I'm sure this is a beginner question, but I just finished a course in web programming with JSP, and I noticed that our book (Murach's Java Servlets and JSP) often used jsp includes to add in the header.jsp and footer.jsp for every page. So let's say that I have a page with a header that contains 4 buttons (b1-b4) and a footer with a "contact" button. Each button would open its corresponding page (b1 opens b1.jsp, etc.) and in each jsp page the header and footer are included every time. I noticed that with this, whenever I click a button, the entire page, including the header and footer, have to be recreated, resulting in a quick flash from a blank white page to the page's content. I found this a little distracting, making the header/footer feel less 'persistent' a more just slapped onto every page.
I was wondering, what if I just had 1 index page with the header and footer and in-between I placed an iframe. Then when someone clicks a button, it would load the new page into the iframe and not have to reload the header/footer constantly. So I'm curious to see what is normal practice and if includes are the way to go, how do I get rid of that annoying flicker?
I did try with an iframe, but now the problem is that whenever I refresh the page, the iframe goes back to empty (because the index page is refreshed). Is there any way to get around this and refresh what is inside the iframe rather than the page itself?
I want to know, how we can do the page reload but while loading the page we keep some conten on page visiable.
In real senario, google or facebook load new page or chages some part of the page(not using the ajax) but there header or footer are not get change means stick to page and it visible through-out the process to page load start and end.
Can anyone tell me how it has to be done?
well, your examples don't reload page. They load new content with AJAX, so while loading you can execute your scipts and display current content. After you can append new blocks to page and change url using HTML5 History API.
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
I know the backend detail,that it works using long polling.
I am more interested in knowing how the sidebar is persistent through different pages.
The sidebar is not being loaded again,when a new link is created.How could this be implemented.
You can handle the link clicks with Javascript. Once you get a click, you would only change the main content (whatever the main div or block is) and keep the sidebar intact. So, it's kind of like "pseudo-links." I don't think you actually go to another page, but the content of the current page is changed.
Handling URL change with Javascript.
How to change the URL in the browser. (Facebook changes the address bar URL without actually loading the page.)
i want to design a website who contain 4-5 page but i need a feature then when user click on any link the content is changed without any other page load. how i can do this
my page look like this
but when user click on left side or right side link the content is load without page refresh. how i can do this.
jQuery UI tabs?
http://jqueryui.com/demos/tabs/default.html
You can either use frames or load content via Ajax.