[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.3

jCarousel, click link to load different number of contents

Asked by Dada44 in Jquery, JavaScript, Asynchronous Javascript and XML (AJAX)

Tags: jCarousel, click, link, load, different, contents

Hi all,

When my site first loads shows jCarousel with two images.
In the site I have three links, clicking link 1 makes jCarousel to show 12 images, clicking link 2 shows 2 images and link 3 shows 7.

The problem:
The width of the <ul> element is the  one to fit the 2 initial images.  So if I click link 1 instead of 12 images, I get to see just 2.
The same for link 3, instead of 7 images I see 2.

The carousel is set to show 6 images at the time.
So if the width of one element is 127px, I do the multiplication and I apply it to the <ul> via jquery's css, I get to see just 6 images for link 1 and link 3 because next button is disabled (the next button is not enabled as it still "thinks" that there are just two images in the carousel as when the site loaded for the first time).

Questions:
Is the approach of adding the width to the <ul> element via jquery correct? If so how can I enable the next button for when there's more than 6 images?
 I've been able to enable the next button by adding  mycarousel_nextItemCallback(); after line 36 in the code below, but though the button is enabled there's no functionality :(

function mycarousel_nextItemCallback()
{
jQuery(".jcarousel-next").attr({ disabled: "false" });
jQuery(".jcarousel-next").removeClass("jcarousel-next-disabled");
jQuery(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");

}



If the previous approach is not correct, what can I do to fix this width issue? Please help, I'm clueless.

Please take into account that the number of images that the links/first load show will change dynamically (feed dynamically by webservice calls), so hardcoded fixes with numberOfElements won't do :(

Here the link:
http://www.vt-psoe.com/2.html
And the  code with absolute paths  is below.
Thanks a lot!

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site</title> 

<script type="text/javascript" src="http://www.vt-psoe.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.vt-psoe.com/js/jquery.jcarousel.js"></script>
<link href="http://www.vt-psoe.com/css/jquery.jcarousel.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="http://www.vt-psoe.com/css/jquery.jcarousel.skin.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="http://www.vt-psoe.com/css/styleScreen.css" rel="stylesheet" type="text/css" media="screen,projection" /> 

<script type="text/javascript">
$(document).ready(function(){	
   jQuery('#playlistInner').jcarousel();
}); 

function switchList(index){ 
             var numberOfElements = 0; 
						 $("#playlistInner").empty();
				   	$("#playlistInner").html(""); 
				   	
						 
						 if (index==0)
						 {
	           numberOfElements = 12; // feed dynamically by webservice calls
	            } else if (index==1){
	             numberOfElements = 2; // feed dynamically by webservice calls
	            }else if (index==2){
	             numberOfElements = 7; // feed dynamically by webservice calls
	            }
	            
	            var do1="";
              var wid = numberOfElements* 127; // 127px is the width for one image
     
              $("#playlistInner").css({"width" : ""+wid+"px" }); 
	           	for(var i=0;i < numberOfElements;i++){
      
              do1 +=	"<li></li>";
              
         	}
           	$("#playlistInner").html(do1);
	
					buildContent(numberOfElements);
					
}
 
  
 
 function buildContent(numberOfElements){
 
	$("#playlistInner").html(""); //clear contents.
	var contentBuilder = ""; 
	 numberOfElements2 = 0; 
	  numberOfElements2 = numberOfElements;  

	for(var i=0;i < numberOfElements2;i++){ 
	  	var i2 = i+1;
			contentBuilder += "<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-"+i2+" jcarousel-item-"+i2+"-horizontal' jcarouselindex="+i2+">";	
  		contentBuilder += "	<a  href=\"\"><img src=\"http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg\" width='75' height='75' /><span></span></a>";	
			contentBuilder += "	</li>";	 
  } 
  $("#playlistInner").html(contentBuilder);
 }
	 
function initial(){ 
//fills #playlistInner on load
	var do2 = "";
 var numberOfElements3 = 2; // feed dynamically by webservice calls 
         	for(var i=0;i < numberOfElements3;i++){ 
         				do2 +=	"<li><a  href=\"\"><img src=\"http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg\" width='75' height='75' /><span></span></a></li>";
              
         	}
           	$("#playlistInner").html(do2);
} 
</script> 
 
</head>
<body class="home" > 

	<div id="header"> 
		<!-- #nav -->
		<div id="mainNav">
			<div id="mainNavInner"> 
				<ul>
<li ><strong><a href="#" onclick="switchList(0); return false;">Link 1</a></strong></li>
				  	<li><strong><a href="#" onclick="switchList(1); return false;">Link 2</a></strong></li>
			<li><strong><a href="#" onclick="switchList(2); return false;">Link 3</a></strong></li>
	
				</ul>
			</div>
		</div>
		<!-- /#nav -->
	</div>
	<!-- /#header --> 

	<div id="playlist">
		<ul id="playlistInner" class="jcarousel-skin-ipsoetv"> 
        <script> 
           initial();
     </script>
    
   	</ul>
	</div> 
</body>
</html>
[+][-]11/06/09 12:18 AM, ID: 25757477Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]11/06/09 12:33 AM, ID: 25757543Accepted Solution

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

About this solution

Zones: Jquery, JavaScript, Asynchronous Javascript and XML (AJAX)
Tags: jCarousel, click, link, load, different, contents
Sign Up Now!
Solution Provided By: Kravimir
Participating Experts: 1
Solution Grade: A
 
[+][-]11/06/09 03:56 AM, ID: 25758336Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091021-EE-VQP-81 - Hierarchy / EE_QW_3_20080625