Hi all!
I am trying to make my slide-show page “fluid” by having a Max-Min Width setting similar to what Paul did in his 3-Column Layout.
I had this working like a charm on my Home Page with a fluid middle column of just text, but when I apply the same concepts to my Slide-Show it doesn’t work.
Here is the URL to my test website…
Your help is appreciated!
Thanks,
Debbie
P.S. I just added a copy of my Home Page, and the effect I’m trying to achieve.
Hi Debbie,
The element is at its max with because you have given the ul inside a very large width which will stretch the div to the maximum before you start.
#slideshow .slides ul {
width: 2880px; /* Total Width = 960px/slide X 3 slides */
}
If you removed the width from the ul then the element would be fluid to a degree but only on first view or on refresh (and I’m guessing that the slideshow needs that width anyway).
It will not change on browsers resize because the js is working out how many elements it needs to slide and is then writing a fixed width directly into the opening ul tag.
e.g. here:
<h1>Testing Header</h1>
<div id="slideshow">
<div class="slides">
<ul s[B]tyle[/B][B]=[/B][B]"position: relative; width: 600px; height[/B]: 288px; overflow: hidden;">
<li [B]style[/B][B]=[/B][B]"position: absolute; top: 0pt; left: 600px; display: none[/B]; z-index: 3; opacity: 1;" id="slide-one">
<h2>Slide one</h2>
So I don’t think its possible to be fluid with that version unless someone wants to rewrite it and I’m not sure how you could make it fluid very easily as I guess you need a fixed width to slide the panels correctly which is calculated at the start.
I had a look around but couldn’t see anything off the shelf that handled fluid width I’m afraid (but perhaps I just didn’t find it.
Yeah, that is supposed required from the code I got offline.
If you removed the width from the ul then the element would be fluid to a degree but only on first view or on refresh (and I’m guessing that the slideshow needs that width anyway).
It will not change on browsers resize because the js is working out how many elements it needs to slide and is then writing a fixed width directly into the opening ul tag.
e.g. here:
<h1>Testing Header</h1>
<div id="slideshow">
<div class="slides">
<ul s[B]tyle[/B][B]=[/B][B]"position: relative; width: 600px; height[/B]: 288px; overflow: hidden;">
<li [B]style[/B][B]=[/B][B]"position: absolute; top: 0pt; left: 600px; display: none[/B]; z-index: 3; opacity: 1;" id="slide-one">
<h2>Slide one</h2>
So I don’t think its possible to be fluid with that version unless someone wants to rewrite it and I’m not sure how you could make it fluid very easily as I guess you need a fixed width to slide the panels correctly which is calculated at the start.
I was afraid you were going to say that. 
So where do I go from here??
I spent ALL OF THIS TIME trying to build an accessible home page that used good CSS techniques…
I think my home page looks really good, and it is fairly adaptable, but if there is no way to get my slide-show to adjust widths, then what should I do??
(The slide-show is supposed to be a key portion of my home page, because it allows me to broadcast important information to people, and increase their interest so they go deeper into my website.)
I had a look around but couldn’t see anything off the shelf that handled fluid width I’m afraid (but perhaps I just didn’t find it.
There must be some way to compromise… :-/
Thanks,
Debbie
Hi Debbie,
I got pretty close by changing that .slides ul width that Paul mentioned. It will get rounding errors at some instances but you can prevent float drop with a negative margin on one of the LI to soak up rounding errors.
As Paul also mentioned, the script will need to be adjusted. It is taking the the total number LI and dividing them into the available space then setting a pixel width. In this case it is making their width appx 1/3.
I had already made the LI’s width 1/3 but now the script takes that and makes it 1/3 again. You can change your viewport width and the refresh the page to see that with the BG color I set on the LI.
I have the js disabled with comments for now though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link type="text/css" rel="stylesheet" media="screen" href="slideshow222222222222.css" />
<script type="text/javascript" src="http://doubledee.byethost2.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://doubledee.byethost2.com/js/jquery.cycle.all.min.js"></script>
<!-- DISABLED <script type="text/javascript" src="http://doubledee.byethost2.com/js/slideshow.js"></script> -->
<style type="text/css" >
body {
margin: 0;
padding: 0;
font: 100%/1.3 arial, helvetica, sans-serif;
}
#slideshow {
width: 70%;
min-width: 400px;
max-width: 800px;
margin: 30px auto;
background: #EEE;
border: 1px solid #ddd;
}
#slideshow ul {
margin: 0;
padding: 0;
list-style: none;
}
.slides {
overflow: hidden;
}
/* ----- Slideshow UL ------*/
#slideshow .slides ul {
float:left;
width:300%;/* three list items x 100% (100% = current fluid width of #slideshow)*/
/*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
float:left;
width:33.3%;/*100% divided by three*/
background: #CDF;/*for testing widths w/ js turned on*/
}
#slideshow .slides li#slide-three {
margin-left:-1px;/*soak up rounding errors*/
}
#slideshow .slides h2 {margin: 5px 10px 0;}
#slideshow .slides p {margin: 10px;}
/* ---- slideshow nav ----*/
#slideshow .slides-nav {
clear: both;
float: none;
width: auto; /*reset from #slideshow ul*/
background: #DDD;
border-top: 2px solid #ccc;
overflow: hidden;/*contain floated li*/
}
#slideshow .slides-nav li {
float: left;
width: auto; /*reset from #slideshow li*/
}
#slideshow .slides-nav li a {
display: block;
padding: 15px 20px;
outline: none;
}
</style>
</head>
<body>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2>Slide one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec pretium arcu non velit. Phasellus adipiscing auctor
lorem. Curabitur in urna ut purus consequat sollicitudin.
Phasellus ut diam. Cras magna libero, tempor id, venenatis
sit amet, venenatis et, dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec pretium arcu non velit. Phasellus adipiscing auctor
lorem. Curabitur in urna ut purus consequat sollicitudin.
Phasellus ut diam. Cras magna libero, tempor id, venenatis
sit amet, venenatis et, dui.
</p>
</li>
<li id="slide-two">
<h2>Slide two</h2>
<p>
Nam ac nibh sit amet augue ultricies sagittis. Donec sit
amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
nisi condimentum urna, sit amet molestie odio dolor non lectus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</li>
<li id="slide-three">
<h2>Slide three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse adipiscing dui a nibh. Integer tristique lorem
vitae massa. Etiam dapibus, eros sit amet euismod semper,
felis erat congue lacus, sed aliquam metus libero sed elit.
</p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li><a href="#slide-one">Slide one</a></li>
<li><a href="#slide-two">Slide two</a></li>
<li><a href="#slide-three">Slide three</a></li>
</ul>
</div>
</body>
</html>
With JavaScript disabled, your code appears to do what I want.
However, and maybe I’m not understanding you, but I don’t see how it is close with JavaScript on. With JavaScript on, all I see are these really narrow slides that won’t expand outwards as the browser window width increases.
As Paul also mentioned, the script will need to be adjusted. It is taking the the total number LI and dividing them into the available space then setting a pixel width. In this case it is making their width appx 1/3.
I’m trying to look at the jquery.cycle.all.min.js file, but I honestly can’t make heads or tails of the authors code.
Debbie
Right, I explained that the script was making 1/3 of my 1/3 widths.
I had already made the LI’s width 1/3 but now the script takes that and makes it 1/3 again. You can change your viewport width and the refresh the page to see that with the BG color I set on the LI.
You will need to take this to the JS forum and get someone to show you how to keep the script from setting dimensions. It is also setting heights along with the widths.
If you can get it to stop setting dimensions then you can control them yourself via the css so it works in both cases, js on or off. Of course you have to adjust the % widths when you change the amount of LI. You have three in there now so their widths are set at 33.3%
Rayzur,
If I cannot figure out how to adjust the JavaScript, then what would you propose?
What would be the best compromise with having a middle column that remains “fluid” but a slide-show that is fixed-width?
(If I make the slide-show the “minimum” size, then it would be really tiny and I’ll have lots of white space on each side. But if I made it the “maximum” size, then it will either get chopped off or blow up my page for users with small monitors or larger screen resolutions.)
I am planning on putting paragraphs below the slide-show in the middle column, so at least they will work, but if the JavaScript cannot be fixed, then I fear this could be a real sore thumb.
Thanks,
Debbie
Thread closed as discussion continued here.