Response title
This is preview!
- Screen name: noahw79
- About Me: Web Producer at Workday
noahw79's Profile
1 Posts
15 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 30-Nov-2011 09:09 PM
- Forum: Using jQuery
Hello everyone!
So here's my issue, I'm using this jQuery slider code that my coworker and I manipulated so that 3 images slide at a time. It worked great till we updated our jQuery to 1.6.2 from 1.3.2 (we were going to go with 1.7.1 but now that we've encountered this problem we have to hold off). I went all the way back to 1.4.1 and it works okay but not as bad as the latest versions.
I included ALL the code. You can literally copy this whole thing into a blank page, save it and test it. It's not really working as expected right now. It doesn't slide all the way back to 1 and there's an empty slide after 9. I will work with my coworker to debug it more but I want to know why versions 1.4.3 through 1.7.1 break it.
For the record, I can use jQuery but I'm not a developer so this isn't something I'm going to figure out on my own. Thank you in advance!!- <html>
<head>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
.control {
display: block;
cursor: pointer;
font-size: 14px;
color: #000;
z-index: 1000;
width: 19px;
height: 218px;
position:absolute;
text-align: center;
border:1px solid #ccc;
vertical-align: middle;
}
#leftControl {
opacity:0.5;
cursor:auto;
left: 0px;
}
#rightControl {
right: 0px;
}
#slideshow {
height: 227px;
position: relative;
width: 677px;
padding-left: 25px;
}
#slides-container {
overflow: hidden;
width: 650px;
border: 1px solid #5D87A1;
margin: 0px auto;
position: relative;
float: left;
display: inline;
height: 212px;
padding-top: 5px;
}
.slide {
width: 217px;
height: 210px;
float: left;
}
.slide-content {
padding: 5px 10px 12px;
border-right: 1px dashed #5D87A1;
display: block;
height: 190px;
position:relative;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
/*
A.D. Notes for slider controls
# rightControl init is enabled from css. Need to disable rightControl if numberOfSlides is less than 3.
# currentPosition is multiplies of 3. ( 3*n = 0, 3, 6, 9... )
# Disable rightControl if numberOfSlides < (currentPosition + 3) (See illustration below.)
# 1 2 3 (Disable rightControl if numberOfSlides < 3; and enable if numberOfSlides >= 3)
# 4 5 6 (Disable if numberOfSlides < 6; and enable if numberOfSlides >= 6)
# 7 8 9 (Disable if numberOfSlides < 9; and enable if numberOfSlides >= 9)
# and so on!
*/
var currentPosition = 1;
var slideWidth = 217;
var slides = $('.slide');
var numberOfSlides = slides.length; // start indexing from 0
// Remove scrollbar in JS
//$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slide-inner div
slides.wrapAll('<div id="slide-inner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slide-inner width equal to total width of all slides
$('#slide-inner').css('width', slideWidth * (numberOfSlides)); // total num of slides
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl"> < </span>')
.append('<span class="control" id="rightControl"> > </span>');
// Hide left arrow control on first load
//manageControls(currentPosition);
// Create event listeners for .controls clicks
// If only three features, don't enable rightControl
if((numberOfSlides) > 3) {
$('#rightControl').bind('click', buttonClickHandler);
} else {
$('#rightControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
}
$('.control').show();
// manageControls: Hides and Shows controls depending on currentPosition
function buttonClickHandler(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition + 3 : currentPosition - 3;
// Hide / show controls
manageControls(currentPosition);
// Move slide-inner using margin-left
$('#slide-inner').animate({
'marginLeft' : slideWidth*(- currentPosition)
});
}
function manageControls(position){
// Enable/disable leftControl if position is back to 0
if(position==1){
$('#leftControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
} else {
//$('#leftControl').fadeIn(200);//.bind('click', buttonClickHandler)
$('#leftControl').bind('click', buttonClickHandler).css({'opacity':1, 'cursor': 'pointer'});
}
// Enable/disable rightControl depends on the overflow number of slides
if( numberOfSlides < (position + 3) ) {
// numberOfSlides is not overflowing to next slide - disable rightControl
$('#rightControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
} else{
// else, overflow - enable rightControl
$('#rightControl').bind('click', buttonClickHandler).css({'opacity':1, 'cursor': 'pointer'});
}
}
// END SLIDESHOW
}); // END ALL JS
</script>
</head>
<body>
<div id="slideshow">
<div id="slides-container">
<div id="slide-inner">
<div class="slide">
<div class="slide-content">
<p>SLIDE 1</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 2</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 3</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 4</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 5</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 6</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 7</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 8</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 9</p>
</div>
</div>
</div>
<!-- END SLIDE INNER -->
</div>
<!-- END SLIDE CONTAINER -->
</div>
<!-- END SLIDESHOW -->
</body>
</html>
- «Prev
- Next »
Moderate user : noahw79