If I use the new version in Post #51, am I gonna have to learn everything over and retool everything?
Paul's version from post#51 is the stable version that meets all the requirements of this fully fluid slider 
Not sure if you need me to post my code online, or if I should just jump to this newer and different version?!
I really think you should be using Paul's version anyway so I'm not sure if it would help by posting it at this point.
When setting the 100% width on the LI it did require me to remove the padding but that is always the case when using 100% widths.
Here is what I have that seems to be working fine with js on & off
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.jshowoff.min.js"></script>
<style type="text/css">
/*
Title: jShowOff: a jQuery Content Rotator Plugin
Author: Erik Kallevig
Version: 0.1.2
Website: http://ekallevig.com/jshowoff
License: Dual licensed under the MIT and GPL licenses.
*/
*{margin :0;padding}/* for testing only */
h1,h2,p {margin:0 0 1em}
h1{text-align:center;}
#demo {
position:relative;
}
#demo, #demo ul {
min-width:320px;
max-width:800px;
list-style:none;
margin:0 auto;
padding:0;
width:auto;
background:#ccc;
overflow:hidden;
white-space:nowrap;
zoom:1.0;
}
#demo ul {z-index:2}
#demo li {
/*padding:10px; /*remove this with 100% width*/
display:-moz-inline-box; /*old gecko*/
display:inline-block;/* FF2+ + others*/
white-space:normal;
vertical-align:top;
width:100%;
}
#demo li#slide2 {background:#EEF;}/*testing 100% width*/
#demo li li {
display:block;
width:auto;
}
#demo li h2,
#demo li p,
#demo li li {margin:0 10px 1em}
* html #demo li{display:inline}/* ie6 display:inline-block hack*/
*+html #demo li{display:inline}/* ie7 display:inline-block hack*/
.jshowoff-controls {float:left;}
.jshowoff-slidelinks {float:right}
.jshowoff-controls a, .jshowoff-slidelinks a,#nojs a {
margin:0 5px;
display:inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:#fff;
background:#999;
padding:3px 10px;
text-decoration:none;
}
.jshowoff-controls a:hover, .jshowoff-slidelinks a:hover,#nojs a:hover{background:red}
.altlinks {zoom:1.0}
/* create a clone element so that we can grab height when browser resized*/
/* this element is inserted via js */
/* the lists will basically be on top of each other so we can just grab height from parent*/
#clone {
position:absolute;
background:red;
min-width:320px;
max-width:800px;
top:0;
left:0;
right:0;/* safari needs this*/
white-space:normal;
z-index:-1;
visibility:hidden;
}
* html #clone li{float:left;margin-right:-100%}/* ie6 needs this*/
*+html #clone li{float:left;margin-right:-100%}/* ie7 needs this*/
</style>
</head>
<body>
<div id="demo">
<h1>Fluid Width Slider</h1>
<ul id="fluidslide">
<li id="slide1" class="slide">
<h2>Slide one</h2>
<p>One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
</li>
<li id="slide2" class="slide">
<h2>Small Businesses...</h2>
<ul>
<li>Employ over half of private sector workforce</li>
<li>Hire 40% of High-Tech Workers</li>
<li>Represent 99.7% of all employer firms</li>
</ul>
</li>
<li id="slide3" class="slide">
<h2>Slide three</h2>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim.</p>
</li>
</ul>
<p id="nojs" class="altlinks"><a href="#slide1">Slide 1</a> | <a href="#slide2">Slide 2</a> | <a href="#slide3">Slide 3</a></p>
<script type="text/javascript">
function adjustHeights() {
$('#fluidslide').after('<div id="clone"></div>');// create a holding div to hold a copy of our slides
$("ul#fluidslide").clone().prependTo("div#clone");// add slides to holding div
$('#clone ul').removeAttr("id")//remove ids from copy slides
$('#clone li').removeAttr("id")// remove ids from copy slides
adjustHeights2();
}
adjustHeights();
$(document).ready(function(){ $('#fluidslide').jshowoff({
effect: 'fade',
hoverPause: true,
autoPlay: true
});
$("#nojs").hide();// hide the normal naviagtion links when js is working
});
function adjustHeights2() {
/* no need to cycle through slides as they are all on top of each other and the parent will hold their height*/
var num2 = $('#clone').height();
$("#fluidslide").css('height',num2 );// set height of parent rather thean each individual slide
}
$(window).resize(function() {
$("#fluidslide").css('height','auto' );
// window.setTimeout('adjustHeights2()' ,500);
// adjust heights using a timeout to make it smoother
// ie6 and 7 don;t like that much so just do this
adjustHeights2();
});
</script>
</div>
<!--end #demo-->
</body>
</html>
Originally Posted by Rayzur
Reply With Quote
Guess it is more exciting than it originally seemed?! 
Bookmarks