i want to load dynamic pages by using javascript-ajax...
i have side(vertical) tabs just like facebook has(which is on left side) and right side which shows the content(page) of that tab. when i will click on any tab the content(page) should be loaded on right side......i didnt mean loading a whole page. i mean changing divs of that right side....one more example of youtube home....in youtube on left side we have channels to which we subscribe, when we click on any of that tab, videos are loaded of that channel..
how to do this....any link to example? please share
Related
I know using Ajax you can load parts of page, but how would you load a different URL (not just hash change) without actually loading full page?
The demo can be found at rottentomatoes.com
Go to home page. On the left hand side of the page, click on one of the Opening Movies.
Now scroll down by 20px appx., to understand the effect.
Click on another Opening Movie.
Now the URL is changed, but full page is not loaded. Or that is what is my perception.
How would you do that?
I don't know fully about this but by using ajax and history api you can do this.
Just try the following links may help you
Changing URL without refresh?
JQuery: Change URL param without reloading?
I need to know how is it possible using AJAX to navigate between pages like Facebook. When I click a link in Facebook the url in address bar changes and the main content area is reloaded with new content but the navigation list on left, header on top and chat on left side remain intact. It appears that those sections are not reloaded. How this become possible when the address bar changes? please ,if possible give a small example.
You can use libraries such as history.js coupled with ajax calls. This library dynamically modifies the URL as you are clicking around the site. The library is available at https://github.com/browserstate/History.js. And a great demo is available at http://rypit.me/demos/isotory/tutorial/history.js.html
I'm working on changing member profile UI on one site. Project page: http://design.vitalbmx.com/user_menu/member_profile2.html
Goals:
Usability: page load time must be optimized, especially images in the active tab
SEO: pagination links within tabs must be crawlable
Assumptions:
Most users will go to "All" tab by default
Most users will rarely click other tabs except "All"
Most users will not send links to paginated tabs, only to 1st page of any given tab
Implementation scenarios:
Content of all tabs is loaded at once on the same page. Pagination via Ajax (with URL's to existing pages for crawlers). Possible issues - lag for loading images for tabs other than first tab if it's set in page URL (e.g. #videos)
Content of first tab ("All") to load first. Load content of other tabs only when they are clicked. Issues - extra HTTP calls and also lag for loading images for tabs other than first tab
Content of all tabs is loaded on the same page BUT image sources are replaced with a generic image for tabs other than current tab before images begin loading. When another tab is clicked (or after current tab images are loaded) image sources are reverted to original and begin loading (somewhat like Mashable.com but without the annoying fade-in effect)
Ajax-less - dedicated page for each tab. Makes more sense for SEO than for usability. Easy to copy-paste-send URL's with pagination.
Which one would be the best? Or am I missing something?
I think you should go with no. 4, because that one uses less load from server and client.
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?
I am trying to implement a search page with 2 tabs: Basic Search Options and Advanced Search Options. The Search button is outside the tab at the bottom of the page.
I am trying to figure out which switchType to use on the rich:tab component. richfaces offers 3 switch types:
ajax
server
client
I don't understand when someone who use one over the other.
Can someone explain succinctly when/how you would use the different switchTypes?
Thanks in advance!
April26
Examples of the three types here.
Ajax - When the tab is clicked on the body of the tab is requested from the server without refreshing the entire page. This makes the initial load time of the page with tabs faster than client switching and allows the user to click between tabs without refreshing the entire page.
Server - When the tab is clicked on the entire page is refreshed to get the body of the tab. Use Server switching when you want to keep the tab page load time down but don't want any ajax code. Clicking between tabs is not very smooth looking.
Client - All tab bodies are loaded when the tab page is loaded. The initial load of the page is slower but switching between tabs is much faster for the user.
I've created several pages that use RichFaces tabs and they all have used client switching. It makes the tabs more usable if the user doesn't have to wait when they click on a tab.