Member Avatar for network18

Hi,
I am working on the jquery slideshow script, which i had borrowed from some famous jquery plugin and customized so nicely so as to look just as par my requirement .Its working perfectly fine in the Internet Explorer but failing to even call the event on click in firefox and that's too without notification of any error in the error console.
Now I feel the lack of any debugging tools for jQuery...

  • 2 Contributors
  • 9 Replies
  • 140 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for pritaeas

Did you try firebug ? Also, a link to your page would help, so we can see for ourselves.

Member Avatar for network18

Did you try firebug ? Also, a link to your page would help, so we can see for ourselves.

No, couldn't figure it out with just the firebug, I am feeling the need of some stronger debugging tool.
See the attachment.

<!--
Div order:
slideshow->slidesContainer->slideInner->slide
#prt
-->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slick jQuery Slidehow: Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 310;
  var slideHeight = 160;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>');
    // Float left to display horizontally, readjust .slides width
/*	.css({
      'float' : 'left',
      'width' : slideWidth
    });
*/
  // Set #slideInner width equal to total width of all slides
  //alert(numberOfSlides+">>"+slideWidth * numberOfSlides);
  $('#slideInner').css('width', slideWidth * numberOfSlides);  

// commented 10Feb,2010 #prt
  // Insert controls in the DOM
  $('#t')
    .prepend('<span class="control" id="leftControl"><img src="img/bulli01.gif" align="left" hspace="0" title="previous" /></span>')
    .prepend('<span class="control" id="rightControl" ><img src="img/bulli02.gif" align="right" hspace="0" title="next" /></span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

 // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){alert(34);
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    alert(1);
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
/* 
	$('.control').bind('click', function(){alert(">>");});
    
    $('.control').click(function(){alert("ssdz");
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    	alert(1);
		// Hide / show controls
    	manageControls(currentPosition);
    	// Move slideInner using margin-left
    	$('#slideInner').animate({
      	'marginLeft' : slideWidth*(-currentPosition)
    	});
  	});
*/ 
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){alert('hi');
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>
<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	margin:0 auto;
	width:310px;
	height:130px;
	position:relative;
	border:0px solid red;
	background-color:#EEEEEE
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:315px;
  height:130px !important;
  /*overflow:auto;  allow scrollbar */
  position:relative;
  border:0px solid white;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  /*width:540px;  reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  /*These are my width
  width:330px;*/
  height:130px !important;
  float:left;
  width:310px;
}
.second_title {width:200px;border:0px solid red;vertical-align:top;padding:4px;position:absolute;}
.in_div {padding:0px;margin-top:5px;border:0px solid blue;position:relative;}
.desc {width:185px;border:0px solid red;vertical-align:top;padding:4px;position:absolute;margin-top:35px;color:#CCCCCC;}
.sp_title {width:50px;border:0px solid red;}
/**
 * Moneylife CSS
 */
.bo00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;}
.bo00b{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}
.bo00c{font-family:arial,helvetica,ms sans serif,sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}
.a00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;}
.a00:hover{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:underline;}
.left_anchor00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#a50c14;text-decoration:none;font-weight:bold;}
.left_anchor00:hover{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}

/** 
 * Slideshow controls style rules.
 */
.control {
  cursor: pointer;
  color:black;
}

#leftControl {
  top:0;
  left:0;
 }
#rightControl {
  top:0;
  right:0; 
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

#pageContainer {
  margin:0 auto;
  width:960px;
}
-->
</style>
</head>
<body>
<div id="pageContainer" style="position:relative;overflow:hidden;">
  <!-- Slideshow HTML -->
  <div id="slideshow">
  		<div id="t" style="float:right;width:26px;border:0px solid red;height:13px !important;">
  			
    	</div>
    <div id="slidesContainer">
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00">Finance</a></span><br>
        <div class="in_div" ><img src="img/825q4y80.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Second title</span>
        <span class="desc">Turkey, Jordan and Egypt: Hot Destinations this Diwali <a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00">Markets</a></span><br>
        <div class="in_div" ><img src="img/cx86txl9.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Explosive Potential?</span>
        <span class="desc">Premier Explosives is on a strong growth path and seems to be backed by good R&D<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00">Life</a></span><br>
        <div class="in_div" ><img src="img/2z5kz2ik.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Chor Bazaar for Cars</span>
        <span class="desc">Stolen cars is big business. Veeresh Malik gives you a flavour of how it works<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00"></a></span><br>
        <div class="in_div" ><img src="img/5ni2wzdp.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Numbered Existence</span>
        <span class="desc">Banks to play a key role in issuing unique<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00"></a></span><br>
        <div class="in_div" ><img src="img/5ni2wzdp.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Numbered Existence</span>
        <span class="desc">Banks to play a key role in issuing unique<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->
</div>
</body>
</html>
Member Avatar for pritaeas

Through trial and error I've found the problem to be the float: right from the "t" div. I you remove this, it also works in FF. You have to find a way around this I guess.

Member Avatar for network18

Through trial and error I've found the problem to be the float: right from the "t" div. I you remove this, it also works in FF. You have to find a way around this I guess.

yes, i figured it out, but I need to maintain the design also properly.
Now i did another workaround for it ( see attachment), but now the last slide is not visible in the mozilla, it goes down in the bottom of outer wrapper div where it is not visible.

Member Avatar for network18

No attachment.

sory, find it here

<!--
Div order:
slideshow->slidesContainer->slideInner->slide
#prt
-->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slick jQuery Slidehow: Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 304;
  var slideHeight = 130;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides.wrapAll('<div id="slideInner"></div>');
  
  // Set #slideInner width equal to total width of all slides
  //alert(numberOfSlides+">>"+slideWidth * numberOfSlides);
  $('#slideInner').css('width', slideWidth * numberOfSlides);  
  
  // Hide left arrow control on first load
  manageControls(currentPosition);
  
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  
   // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	margin:0 auto;
	width:308px;
	height:134px;
	position:relative;
	border:1px solid #EEEEEE;
	background-color:#EEEEEE;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:304px;
  height:130px !important;
  /*overflow:auto;  allow scrollbar */
  position:relative;
  border:0px solid white;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  /*width:540px;  reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  /*These are my width
  width:330px;*/
  height:130px !important;
  float:left;
  width:304px !important;
}
.second_title {width:200px;border:0px solid red;vertical-align:top;padding:4px;position:absolute;}
.in_div {padding:0px;margin-top:5px;border:0px solid blue;position:relative;}
.desc {width:185px;border:0px solid red;vertical-align:top;padding:4px;position:absolute;margin-top:35px;color:#CCCCCC;}
.sp_title {width:50px;border:0px solid red;}
/**
 * Moneylife CSS
 */
.bo00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;}
.bo00b{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}
.bo00c{font-family:arial,helvetica,ms sans serif,sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}
.a00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;}
.a00:hover{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:underline;}
.left_anchor00{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#a50c14;text-decoration:none;font-weight:bold;}
.left_anchor00:hover{font-family:tahoma,vedana,arial,ms sans serif;font-size:8pt;color:#000;text-decoration:none;font-weight:bold;}

/** 
 * Slideshow controls style rules.
 */
.control {
  cursor: pointer;
  color:black;
}

#leftControl {
  top:0;
  left:0;
 }
#rightControl {
  top:0;
  right:0; 
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

#pageContainer {
  margin:0 auto;
  width:960px;
}
-->
</style>
</head>
<body>
<div id="pageContainer" style="position:relative;overflow:hidden;">
  <!-- Slideshow HTML -->
  <div id="slideshow">
      	<span class="control" id="rightControl" ><img src="img/bulli02.gif" align="right" hspace="0" title="next" /></span>
   		<span class="control" id="leftControl" ><img src="img/bulli01.gif" align="right" hspace="0" title="previous" /></span>
  		<!--div id="t" style="float:right;width:26px;height:13px !important;">
  			
    	</div-->
    <div id="slidesContainer" >
      <div class="slide" style="padding:5px;">
        <span class="sp_title" ><a href="/topbar/76.html" class="left_anchor00">Finance</a></span><br>
        <div class="in_div" ><img src="img/825q4y80.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Second title</span>
        <span class="desc">Turkey, Jordan and Egypt: Hot Destinations this Diwali <a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00">Markets</a></span><br>
        <div class="in_div" ><img src="img/cx86txl9.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Explosive Potential?</span>
        <span class="desc">Premier Explosives is on a strong growth path and seems to be backed by good R&D<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00">Life</a></span><br>
        <div class="in_div" ><img src="img/2z5kz2ik.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Chor Bazaar for Cars</span>
        <span class="desc">Stolen cars is big business. Veeresh Malik gives you a flavour of how it works<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00"></a></span><br>
        <div class="in_div" ><img src="img/5ni2wzdp.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Numbered Existence</span>
        <span class="desc">Banks to play a key role in issuing unique<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
      <div class="slide" style="padding:5px;">
        <span class="sp_title"><a href="/topbar/76.html" class="left_anchor00"></a></span><br>
        <div class="in_div" ><img src="img/5ni2wzdp.bmp" alt="An image" style="width:100px;height:95px;margin-right:2px;" />
        <span class="second_title bo00b">Numbered Existence</span>
        <span class="desc">Banks to play a key role in issuing unique<a href="/article/76/20.html" class="a00"> Read more...</a></span>
        </div>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->
</div>
</body>
</html>
Member Avatar for pritaeas

I can only see that the scrolling is off in opera and chrome. I'm guessing the float left is causing this to happen, but I have not yet found a solution.

Member Avatar for network18

I can only see that the scrolling is off in opera and chrome. I'm guessing the float left is causing this to happen, but I have not yet found a solution.

yes, noticed it and that's why, to solve the problem I had done it the other way as par the second attached file.To solve the problem from the first scenario as in attachment .
I have removed the div:t to solve that file.So now its working in firefox also, but just the last slide is going down from the frame in firefox.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.