Improve company productivity with a Business Account.Sign Up

x
?
Solved

Ajax and Static Content in Jquery tabs

Posted on 2011-02-18
3
Medium Priority
?
705 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
  • 2
3 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 1000 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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

606 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