Snippet Code for Simple Ajax Tabs with cool CSS Styles
Categories: Ajax, Featured, Programming
Tags: Ajax, CSS, HTML
Written By: admin
Hey folks over there, here I came up with simple Ajax Tabs, you guys can show case your valuable content using tabs scenario that to with Ajax. This is simple and elegant way of representing your content when your pages have tons of content to display. If you go through the code its simple and basic Ajax implementation, if you are a web-developer its easy to understand. In the example which I am attaching with this snippet article consists of index.html, ajax.js, tabs.css and lastly the content page named as contentpage1.html
If the required page is not loaded then it will show up and error like the below screen shot:
If the required page is loaded then the content is loaded onto one simple ‘div’ and this will look something similar like the screen shot below:
If there is any problem with the request or response then it will look something similar like the screen shot below:
So do you need the full content, here it is - Snippet Code for Ajax Tabs
Rock up the web world with Ajax, I will strive hard to deliver basic and high level snippets, please let us know your feedback on all the posted articles.
May 19th, 2007 at 11:29 pm
Dear Developers, for the above snippet please use web-server for better results. You guys can use windows default server IIS.
June 9th, 2007 at 12:08 pm
[...] Source: http://www.developersnippets.com/?p=22 [...]
June 9th, 2007 at 1:17 pm
[...] Source: http://www.developersnippets.com/?p=22 [...]
June 10th, 2007 at 9:57 am
[...] @ http://www.developersnippets.com/?p=22 var addthis_pub = ‘codelinkers’; Back to Codelinkers your virtual Link Sharing [...]
June 10th, 2007 at 12:30 pm
[quote comment="14"]Dear Developers, for the above snippet please use web-server for better results. You guys can use windows default server IIS.[/quote]
Um, what?
June 10th, 2007 at 4:26 pm
[...] Snippet Code for Simple Ajax Tabs with cool CSS Stylesat Developer Snippets This is simple and elegant way of representing your content when your pages have tons of content to display. (tags: tabs menu menu.example css design ajax ajax.examples) [...]
June 10th, 2007 at 7:29 pm
Hi Emanuel,
My Intension was to say the developers that if we want to run an Ajax Application, we need a server interaction (I mean any web server).
June 11th, 2007 at 10:18 am
Ah, gotcha. Wasn’t quite clear what you were implying, thought you were telling people IIS was required to render the tabs
September 8th, 2007 at 8:51 pm
Hello,
I am trying to implement this on IIS and I keep getting the Error message. In fact, when I try to use the default files that I downloaded from your site, I still got the error. Are there some other changes I need to make to ajax.js?
Thanks
Rakesh.
September 9th, 2007 at 3:27 am
Hi Rakesh, Firstly I would like to thank you for viewing developersnippets site, well coming to your query, in the zip file which I have attached to this article - has got three folders (images, js, style) and two html files (index.html, and contentpage1.html), so when you place this “AjaxSimpleTabs” folder into your IIS server - when you browser to index.html, the first tab would be enabled (selected) and the code will comes up as mentioned above in the second image. And if you select the second tab or third tab - it will give error message like the one which I have mentioned in the first image. I have placed content for only first tab not for tab two and three.
Hope this will solve! you, keep visiting http://www.developersnippets.com
September 9th, 2007 at 12:14 pm
It worked! I was unzipping all the files into the same folder without setting up the hierarchy as you suggested.
Fantastic! Thank you very much for posting this, this was very useful.
Thanks a lot,
Rakesh.
April 28th, 2008 at 8:20 pm
[...] Source: http://www.developersnippets.com/?p=22 [...]
May 27th, 2008 at 6:44 pm
[...] Source: http://www.developersnippets.com/?p=22 [...]
August 5th, 2008 at 7:10 pm
[...] 2. Tabs simple con AJAX y CSS: [...]
August 17th, 2008 at 4:09 am
[...] 1. Snippet Code for Simple Ajax Tabs with cool CSS Styles [...]
August 29th, 2008 at 6:37 am
Hey i have unzipped the folder and after that i have run the index.html page.
but when i m clicking on the first link the error message is shown as the first pic over here .and when clicking on the second and third tab its showing only “Content Loading pic”.So what to do??
August 29th, 2008 at 7:45 am
Hi Hiren,
If you see my first comment on this post, you might got the answer by seeing that only. It says below the same:
“Dear Developers, for the above snippet to work please use any web-server for better results. You guys can use windows default server IIS.”
August 31st, 2008 at 6:23 pm
[...] Snippet Code for Simple Ajax Tabs with cool CSS Styles 2. Using XMLHttpRequest, reading XML data (Adobe AIR Application) 3. Remove special characters [...]
September 1st, 2008 at 6:11 pm
[...] System Error: -1072896658 in IE 2. Snippet Code for Simple Ajax Tabs with cool CSS Styles 3. Using XMLHttpRequest, reading XML data (Adobe AIR Application) 4. Remove special characters [...]
October 19th, 2008 at 11:33 am
[...] and which is a free and opensource JavaScript Library which acts as a thin layer inside Web 2.0 and Ajax applications. Unique features are: * Under 10K! * Simple, JavaScript Centric Syntax * Fast * Easy to include [...]
October 26th, 2008 at 4:59 pm
[...] articles which you would like to read: 1. Snippet Code for Simple Ajax Tabs with cool CSS Styles 2. Simple steps to develop AJAX Website – DeveloperSnippets 3. JavaScript Visitors Browser [...]
October 27th, 2008 at 5:29 pm
[...] articles which you would like to read: 1. Placing a Play Icon over the image using CSS 2. Snippet Code for Simple Ajax Tabs with cool CSS Styles 3. Simple steps to develop AJAX Website – DeveloperSnippets 4. JavaScript Visitors Browser [...]
November 13th, 2008 at 11:49 am
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm