Solved

Ajax and Static Content in Jquery tabs

Posted on 2011-02-18
3
690 Views
Last Modified: 2012-05-11
Hi Guys and Gals-

I am using the Flowplayer.org/tools/tabs/ to create my search result windows in a real estate application. The issue I am having is the use of Ajax, vs Static content inside a DIV. I dont want my visitors to have to wait for content to download on each tab just to get their results. According to the documentation, adding the ajax setting in the JS call allows you to tun all on to ajax, however I only want that last two tabs to use ajax to call in external content, and the first to load static or DIV content.


<!DOCTYPE html>
<html>
 <head>
	<title>jQuery Tools standalone demo</title>
 
	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
	 
 
	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
	
	<!-- tab styling -->	
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-no-images.css"/>
	 
	
	<!-- skin 2 -->
	<style>
	
	
	/* alternate colors: skin2 */
	ul.skin2 a {
		background-color:#89a;		
		color:#fff !important;
	}
	
	/* mouseover state */
	ul.skin2 a:hover {
		background-color:#678;
	}
	
	/* active tab */
	ul.skin2 a.current {
		background-color:#4F5C6A;
		border-bottom:2px solid #4F5C6A;	
	}
	
	/* tab pane with background gradient */
	div.skin2 div {
		min-height:200px;
		color:#fff;	
		background:#234 url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x scroll 0 -50px;
		
		/* IE6 does not support PNG24 images natively */
		_background:#4F5C6A;
	}
	</style>
</head>
 
<body>
 
 
<!-- tabs -->
<ul class="css-tabs skin2">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Second tab</a></li>
	<li><a href="#">A ultra long third tab</a></li>
</ul>
 
<!-- panes -->
<div class="css-panes skin2">
	<div>
	
		<img src="http://static.flowplayer.org/img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
	
		<h2>Lorem ipsum dolor sit amet</h2>
		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
		</p>
		
		<p>
			Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam. 
		</p>			
		
		<br clear="all" />
		
	</div>
	
	<div>
		<p>
			Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
		</p> 
		<p>
			Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
		</p>
	</div>
	
	<div>
		<p>
			Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
		
		<p>
			In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
		</p>
	</div>
</div>
 
<!-- activate tabs with JavaScript -->
<script> 
$(function() {
	$("ul.skin2").tabs("div.skin2 > div");
});
</script>
 
 
 
</body>
 
</html>

Open in new window

0
Comment
Question by:jfergy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 34934381
I have used jquery tabs , which works good with the situation you described.

Look at

http://jqueryui.com/demos/tabs/


http://jqueryui.com/demos/tabs/#event-show
0
 

Author Comment

by:jfergy
ID: 34976590
Hey, follow up question. How do I add multiple tab containers to a page dynamically. As the number of containers will change? The support data does not seem to dscuss this

Thanks
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 34979580
To add tabs dynamically.


tabs( "add" , url , label , [index] )


e.g.

$(document).ready(function()
{
      $("#tabs").tabs();
               // add after first tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB", 1 );
               // append the tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB");
      return;
}

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question