Help setting Width of Slides

[DoubleDee]

I found a “slide-show” online that I want to use on my home page, but there is a slight problem…

My home page has a fluid middle column that adjusts from a Min-Width to a Max-Width, and the slide-show I found online is fixed width.

Apparently the JavaScript determines the page/container width (e.g. 600px), and then it determines the # of slides (e.g. 3) and then it creates the HTML/CSS with the slide width set accordingly (i.e. 200px).

If I can just get some help determining which JavaScript file does this, and what lines of code are setting the width (and technically the height as well), then hopefully it won’t be too hard to modify this original script?! :-/

Here is the original slide-show script:

Build an Auto-Scrolling Slideshow That Works With and Without JavaScript | Nettuts+

And here is a link to my test page which shows what I have and what I want:

Debbie’s Test Page

Admittedly I don’t know JavaScript, but I do have programming experience, so with a little help, hopefully this won’t be too large of a challenge to conquer?!

Thanks,

Debbie

[pablogo]

Look at the “slideshow.css” everything is hardcoded there, for what i see.

See you

[DoubleDee]

@pablogo

Look at the “slideshow.css” everything is hardcode for what i see.

See you

But I don’t know JavaScript…

I looked through that entire file, but couldn’t make heads-or-tails of the author’s code. (Not very “structured”!)

Could you help me figure out what code needs to be modified?

Thanks,

Debbie

[pablogo]

DoubleDee “slideshow.css” is not javascritp is “Cascade Style Sheet” so, there you will find lines like

...
#slideshow .slides li {

width: 920px;

...

that is setting the width, so changing them to a lower value can get you closer to what you need. You can put percents values, for example “50%” and it will be adaptative.

You need to change all the “width” lines to have a good result.

See you

[DoubleDee]

pablogo,

I misread what you said, but regardless, the issue isn’t a stylesheet issue.

The file jquery.cycle.all.min.js is dynamically creating the HTML/CSS. (Just open my web page up in FireBug and you’ll see this…)

If this was just a CSS issue, it would be fixed.

Debbie

[pablogo]

You are right, in your page it’s 600px width, it may need a deeper look, sadly i’ m not familiarized with JQuery, i saw the “.context” may there is something.

I really thought it may be in the .css, cause i saw everything hardcoded.

See you

[Paul_Wilkins]

The problem you are facing, and your solution, are all in the slideshow2.css file.

I am redirecting this thread to the CSS forum so that they can help you to resolve this issue.

[DoubleDee]

@paul_wilkins

The problem you are facing, and your solution, are all in the slideshow2.css file.

I am redirecting this thread to the CSS forum so that they can help you to resolve this issue.

Not according to Paul O’B and Rayzur in this thread…

(And I take both of their words as “law”!!)

Debbie

[Paul_Wilkins]

@DoubleDee

Not according to Paul O’B and Rayzur in this thread…

(And I take both of their words as “law”!!)

The jQuery cycle plugin nor the slideshow script do not set a mandatory width of 600. It would be stupid if they did that.

There are several places in the CSS file that do set the max width, for example:

#slideshow {
	min-width: 300px;
	max-width: 600px;
/*	width: 600px;/**/
/*
	min-width: 300px;
	max-width: 640px;
	/*	width: 480px; /**/
	background-color: #eee;
	border: 1px solid #ddd;
}

and

#slideshow .slides {
	overflow: hidden;		/* Prevent slides from lining up side-by-side (when JavaScript is off)!! */
	min-width: 300px;
	max-width: 600px;
/*	width: 300px;/**/
/*	width: 480px;/**/
}

and

#slideshow .slides li {
	min-width: 260px;
	max-width: 560px;
/*	width: 260px;/**/
/*	width: 440px;/**/
	float: left;
	padding: 20px;
}

That is where you will find your solution.

[Rayzur]

@paul_wilkins

The problem you are facing, and your solution, are all in the slideshow2.css file.

I am redirecting this thread to the CSS forum so that they can help you to resolve this issue.

Hi Paul W.

I had set up a standalone test case in post#4 of the other thread, could you take a look at it please?

I disabled the slideshow2.css and set the page up with internal styles. From there I made it a fluid width container and set the widths of the LI accordingly with percentage widths.

If you look in the <head> you will see that the slideshow.js is also disabled to test the fluid widths without js. The widths work fine at that point, I set a light-blue BG color on them to show the widths

Once the js is enabled it takes the widths and divides them into 1/3, it becomes evident then that the js is overwriting the width and it is also adding heights. Firebug shows the styles that the script is inserting, the dimensions change at various screen widths and they are set in pixel values rather than the 33.3% width that I used.

That is why we suggested that Debbie start a thread in the js forum.

[Paul_Wilkins]

@Rayzur

I had set up a standalone test case in post#4 of the other thread, could you take a look at it please?

Good job. Some context really does help there.

Through experimenting, I’ve just found that adding the following works with your test case:

.slides li { 
    width: 800px !important 
}

[Rayzur]

Yes, the !important declaration does seem to work with fixed widths.

The script may be having trouble with the 300% width I set on the UL.

That is how this fallback method works, the UL gets a width equal to the total width of all list-items.

Say the three list items were 800px, then the UL would be set to 2400px wide. The overflow:hidden on the .slides div is what keeps the extra width hidden. The oversized width prevents the floated LI’s from dropping.

What we are trying to do here is make a fluid version that has the widths working the same when js is on.

It doesn’t seem to work with fluid widths with js on. However it is working in my demo without js on, that’s what has me confused.

/* ----- Slideshow UL ------*/
#slideshow .slides ul {
    float:left;
    [COLOR=Blue]width:300%;[/COLOR]/* three list items x 100% (100% = current fluid width of #slideshow)*/
    /*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
    float:left;
    [COLOR=Blue]width:33.3% !important;[/COLOR]/*100% divided by three*/
    background: #CDF;/*for testing widths*/
}

[DoubleDee]

@Rayzur

Say the three list items were 800px, then the UL would be set to 2400px wide. The overflow:hidden on the .slides div is what keeps the extra width hidden. The oversized width prevents the floated LI’s from dropping.

Paul, if you launch my home page and turn on FireBug and select one of the slides in action so that FireBug expands that part of the code, then you will see that JavaScript is dynamically building (and replacing) the CSS each time a slide appears

That being said, I agree with Paul and Rayzur that this is a JavaScript issue. (There may be “hacks” for the CSS, but it certainly seems more logicaly to modify the JavaScript I found online.)

What we are trying to do here is make a fluid version that has the widths working the same when js is on.

Exactly, Rayzur.

Paul, I have spent the last several weeks tweaking my home page so that it is more flexible (i.e. accessible) which means that it should work between 760px and 1200px.

Thanks to a TON OF HELP from both Paul O and Rayzur, I think I’ve got a really nice layout that is also solid CCS-wise, and very accessible. (Maybe even enough to make DeathShadow happy!)

The only sticking point is that this slide-show doesn’t expand and shrink like the paragraph that I now have in the middle column of my home page does.

Since my slide-show is entirely text-based, making it “fluid” shouldn’t be too hard, and is actually expected since I had to compromise and lose using png images which I originally wanted. :mad:

Hope that makes more sense!

Oh, btw, sorry to be a WIMP, but I don’t know JavaScript at all, so that is why I’m reaching out for help.

I do have a programming background, and if someone can get me started am more than willing to modify the JavaScript myself, but after reading the code, I can’t make any sense of it.

Thanks,

Debbie

[Paul_Wilkins]

Setting the ul width to 100% and the li width to 100% !important fixes most of the problems.

You can reload the page at different widths, and the widths adjust accordingly.

/* ----- Slideshow UL ------*/
#slideshow .slides ul {
    float:left;
    width:100%;/* three list items x 100% (100% = current fluid width of #slideshow)*/
    /*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
    float:left;
    width:100% !important;/*100% divided by three*/
    background: #CDF;/*for testing widths*/
}

The only remaining issue is a relatively minor one, when the user manually adjusts the width of the screen. It fixes itself on a refresh of the page though.

I have to go now though and won’t be at a computer to help any further, so good luck with things.

[Rayzur]

Thanks for your help Paul , yes it looks like it was having trouble with that 300% width.

That was needed for the CSS only version so it looks like it is back to the drawing board now.

[DoubleDee]

Rayzur,

I’m a bit lost.

Do I just add in those couple of lines that Paul last posted, or were there more changes I missed in you two going back and forth?

Debbie

[Rayzur]

@DoubleDee

Rayzur,

I’m a bit lost.

Do I just add in those couple of lines that Paul last posted, or were there more changes I missed in you two going back and forth?

Debbie

If you use 100% widths then the floats will drop and the three LI’s will just stack on top each other. That would defeat the CSS only version from working in a sliding manner.

That’s why I said “back to the drawing board”

There still may be a way to do it by manually setting the widths in the script but that is beyond my abilities.
We need to be able to set the UL at 300% width via js, then the 33.3% widths on the LI will work and it should degrade to a side sliding CSS version

[DoubleDee]

@Rayzur

If you use 100% widths then the floats will drop and the three LI’s will just stack on top each other. That would defeat the CSS only version from working in a sliding manner.

That’s why I said “back to the drawing board”

Well, I added Paul’s code and it does seem to do what he said it would, i.e. if you adjust the browser window and hit refresh it seems to shrink the slides and still fit. (Of course no user would know to do that, so I’m not sure how much of an improvement that is…)

Try this code with Paul’s additions…

<!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;
}

/*************************** CODE FROM PAUL ***********************************/
/* ----- Slideshow UL ------*/
#slideshow .slides ul {
    float:left;
    width:100%;/* three list items x 100% (100% = current fluid width of #slideshow)*/
    /*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
    float:left;
    width:100% !important;/*100% divided by three*/
    background: #CDF;/*for testing widths*/
}
/*************************** CODE FROM PAUL ***********************************/

#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>

There still may be a way to do it by manually setting the widths in the script but that is beyond my abilities.

We need to be able to set the UL at 300% width via js, then the 33.3% widths on the LI will work and it should degrade to a side sliding CSS version

It would have been nice if I would have gotten some help in the JavaScript forum with JavaScript.

I am still eager to modify that plug-in if I could get some assistance.

Debbie

[Rayzur]

It looks like the !important declaration on the UL will make it work.

That still leaves the redraw problem though, I suspect that could be fixed via js as well. When a browser resize event takes place you would need a script to redraw the page.

The formula is: total LI’s x 100% = __

In this case it’s 3 LI, so 300% is the UL width

/* ----- Slideshow UL ------*/
#slideshow .slides ul {
    float:left;
    [COLOR=Blue]width:300% !important;[/COLOR]
    /*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
    float:left;
    [COLOR=Blue]width:33.3%;[/COLOR]
    background: #CDF;/*for testing widths*/
}
#slideshow .slides [COLOR=Black][B]li#slide-three[/B][/COLOR] {
    [COLOR=Blue]margin-right:-1px;[/COLOR]/*soak up rounding errors*/
}

[PaulOB]

That still leaves the redraw problem though, I suspect that could be fixed via js as well.

If we over-ride the js with more importants we get this working.

}
#slideshow .slides li {
    float:left;
    [B]width:33.3%!important;[/B]
    background: #CDF;/*for testing widths*/
   [B] position:relative!important;
    height:auto!important;[/B]
}

<!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;
}
/*************************** CODE FROM PAUL ***********************************/
/* ----- Slideshow UL ------*/
#slideshow .slides ul {
    float:left;
    width:300% !important;/*background: #EEE;/*for testing widths*/
}
#slideshow .slides li {
    float:left;
    width:33.3%!important;
    background: #CDF;/*for testing widths*/
    position:relative!important;
    height:auto!important;
}
#slideshow .slides li#slide-three {
    margin-right:-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>

Of course if you change it to 4 slides then all the css has to be changed accordingly which is why the js should be handling this automatically.