Help setting Width of Slides

Quote:

---

Originally Posted by Rayzur

Hi Paul,
It might be worth a shot to see if you can merge my script into your page and eliminate the empty clone div. Seeing that it is standard javascript it should not have any conflict with the jQuery plugin stripping the slides out of the DOM.

---

Hi Ray,

I already tried a similar script to yours and couldn't get it to work but I tried yours anyway and ran into the same issues.

The problem is that once the slider is running it removes the slides from the dom and then inserts them one at a time. Therefore when your script runs on resize it only finds the one element and cannot determine the tallest element.

I've uploaded a new example to add the clone div via js so now the mark up is clean and will work with any number of slides automatically and maintain a consistent height on screen resize.

It seems to be working everywhere (more or less) but I don't know what the implications are of having the slides cloned. I guess if you had hundreds of them then there would be overheads to consider so some other method would be preferable.

Quote:

---

Originally Posted by Debbie

I *thought* the solution I posted did everything we all wanted?

---

As Ray said you are manually setting a min-height which means that if you change the content in the slides you will also have to manually adjust the css to match. Which is fine if you want to do that :)

However your method still doesn't cater for when the screen is resized smaller. Just resize your browser to the min-width and you will see that the page starts jumping up and down again.

We were looking for an automatic solution that adjusts to the tallest content in the slider even when the screen is resized smaller or larger.

Quote:

---

Originally Posted by Paul O'B

Hi Ray,

I already tried a similar script to yours and couldn't get it to work but I tried yours anyway and ran into the same issues.

The problem is that once the slider is running it removes the slides from the dom and then inserts them one at a time. Therefore when your script runs on resize it only finds the one element and cannot determine the tallest element.

---

So, conceptually, can't you just look at all of the slides in the beginning, determine the "tallest" one, store that number/whatever somewhere, and then use it later? (I should shut up, because this is out of my league, but just trying to help!) :)

Quote:

---

However your method still doesn't cater for when the screen is resized smaller. Just resize your browser to the min-width and you will see that the page starts jumping up and down again.

---

True, but my plan was just to set a Min-Height - at the Mind-Width setting - so that it works - at least on *my* monitor! (Oops! Maybe that is the flaw in my thinking?!) :D

Quote:

---

We were looking for an automatic solution that adjusts to the tallest content in the slider even when the screen is resized smaller or larger.

---

Okay, I'll shut up and let the pros get back to bigger and better things! :)



Debbie

P.S. You and Rayzur sure are getting excited over this! In the beginning, I had to coax a response out of both of you. :p Guess it is more exciting than it originally seemed?! :)

Quote:

---

Originally Posted by DoubleDee

So, conceptually, can't you just look at all of the slides in the beginning, determine the "tallest" one, store that number/whatever somewhere, and then use it later? (I should shut up, because this is out of my league, but just trying to help!) :)

---

That's good thinking except that we would have to save the height at every possible pixel width :)

Remember the height of the element will vary depending on the width of the window so if you get the initial height then that only refers to the width that the window happens to be open at. Once you resize the browser the height will change at every pixel change and you would have to save all those as well ;)

Quote:

---

True, but my plan was just to set a Min-Height - at the Mind-Width setting - so that it works - at least on *my* monitor! (Oops! Maybe that is the flaw in my thinking?!) :D

---

Yes, that's a reasonable solution but I think you just need a bit more height. The drawback of course is that once the screen is wider you will have rather a lot of blank space.

However as long as you don't have a lot more content in one slide than another then I don't think its a big issue.

Quote:

---

P.S. You and Rayzur sure are getting excited over this! In the beginning, I had to coax a response out of both of you. :p Guess it is more exciting than it originally seemed?! :)

---

I think that your request for a fluid slider was a fair one and an interesting one which is why it kept our attention :)

Quote:

---

Originally Posted by Paul O'B

That's good thinking except that we would have to save the height at every possible pixel width :)

---

Yep, I better keep quiet! :lol:

Quote:

---

Yes, that's a reasonable solution but I think you just need a bit more height. The drawback of course is that once the screen is wider you will have rather a lot of blank space.

However as long as you don't have a lot more content in one slide than another then I don't think its a big issue.

---

For my situation, that is what I am shooting for.

Quote:

---

I think that your request for a fluid slider was a fair one and an interesting one which is why it kept our attention :)

---

Well, if I can't be a "brain" like you guys, at least I can ask "brainy questions"!! (I try to help out where I can...) :cool: :cool:


Debbie

Paul and Rayzur,

Our Slide-Show is working great so far, but just one kink I uncovered last night...

(Hmmm... how to explain?!) :-/

Is there some way to make each slide expand to fill the available space between my Left and Right Fixed-Width Columns?

You guys did a great job making things "fluid", however, some slides are short on content which means that the slides are shrinking to fit the text and leaving ugly white gaps to the right of the skinny slide. :(

For instance, let's say I have the following slides...


Slide #1:

Quote:

---

Get and keep a competitive edge.
Building a competitive edge into the fabric of your business is crucially important to long-term success. Some ways to get this edge are by knowing more than your competitors, making a product that is hard or impossible to imitate, being able to produce or distribute your product more efficiently, having a better location, or offering superior customer service.

---

Slide #2:

Quote:

---

Small Businesses...
* Employ over half of private sector workforce
* Hire 40% of High-Tech Workers
* Represent 99.7% of all employer firms

---

In the above scenarios, Slide #1's "fluid" nature means that it will expand and contract to fit any window size between the Min-Width and Max-Width which is exactly what we want!

However, Slide #2 is a problem because the available text isn't wide enough to push the slide out to meet the Left and Right Columns.

I can't adjust the "Min-Width" setting, because it messes up the larger Min-Max equation.

(It is almost like I need a Display: Block kind of action to address this issue.)

As it stands, I either need to make my font-size really big to push things out, or add extraneous text which is ridiculous?!

What makes this trickier is that every slide is different! One might have long stretches of prose like Slide #1 above, whereas many slides will read like PowerPoint presentations like Slide #2.

Any ideas of how to fix this?

Thanks,



Debbie

Quote:

---

Originally Posted by DoubleDee

However, Slide #2 is a problem because the available text isn't wide enough to push the slide out to meet the Left and Right Columns.

I can't adjust the "Min-Width" setting, because it messes up the larger Min-Max equation.

(It is almost like I need a Display: Block kind of action to address this issue.)

As it stands, I either need to make my font-size really big to push things out, or add extraneous text which is ridiculous?!

---

Hi,
The slide elements are list-items that were set to display:inline-block which is a shrinkwrapping element. If the LI does not have a width it will shrinkwrap to the width of it's content.

Try setting width:100% on the inline-block LI, that should set it's width according to the parent UL where the min/max widths were set.
Not sure what the script will do with it though, wasn't it changing the LI's to position:absolute?

The content in your slide#2 also looks like list-items so that could be set up as a nested UL.

Quote:

---

Originally Posted by Rayzur

Hi,
The slide elements are list-items that were set to display:inline-block which is a shrinkwrapping element. If the LI does not have a width it will shrinkwrap to the width of it's content.

Try setting width:100% on the inline-block LI, that should set it's width according to the parent UL where the min/max widths were set.
Not sure what the script will do with it though, wasn't it changing the LI's to position:absolute?

---

I tried that, but I should be so lucky that it would be that easy.

It worked when the suspect slide was static, but when the slide-show rotates to the next slide you get this weird "ghosting" effect where you can see the narrower slide in the background so you get this ugly *skip* effect.

(I can't complain since I don't know JavaScript, but I suspect that if I had written the JavaScript, I would have taken a different approach. It sure does some weird things to our HTML/CSS?!)

Any other ideas?


Last night - and now again today - I was so desperate Iw as thinking of doing something insane like...

Code:

---

<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

---

Code:

---

color: #FFF;
background-color: #FFF;

---

:(



Debbie

Well I'm not sure what you were doing with the html on your #2 content example but I don't see any problems when I incorporate it into Paul's last example from post #51.

Here is how I set it up:

Code:

---

#demo li {
    padding:10px;
    display:-moz-inline-box; /*old gecko*/
    display:inline-block;/* FF2+ + others*/
    white-space:normal;
    vertical-align:top;/*min-height:300px;*/
}
#demo li li {display:block}

---

Code:

---

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

---

Quote:

---

Originally Posted by Rayzur

Well I'm not sure what you were doing with the html on your #2 content example but I don't see any problems when I incorporate it into Paul's last example from post #51.

---

Ugh.

Hey, I don't want to look a gift horse in the mouth, but I sorta didn't keep following you and Paul on that vertical fluid thingy.

If I use the new version in Post #51, am I gonna have to learn everything over and retool everything? :shifty: :(

(Don't mean to be a pain, but I just have things working so well - and I was finally starting to understand the code - and so I'm afraid to scrap everything I have. I mean I already did that when we switched from the non-fluid slide-show.)

If the code in Post #51 fixes the issue, then I guess I'll have to "upgrade", but I'm hoping it isn't an entirely different paradigm, because I spent a lot of time reading the last version of JavaScript in an attempt to style my buttons and tabs just like I wanted...

Hope that makes sense?

Not sure if you need me to post my code online, or if I should just jump to this newer and different version?!

Thanks,



Debbie

Quote:

---

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 :)

Quote:

---

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>

---

Quote:

---

Originally Posted by Rayzur

Paul's version from post#51 is the stable version that meets all the requirements of this fully fluid slider :)

---

Okay, I'll have to pour over his code when I can.

Hopefully it isn't too radically different - especially on the JavaScript side?! :-/

Quote:

---

Here is what I have that seems to be working fine with js on & off

---

Thanks for that.

How do I get it to rotate automatically? (That was a key requirement!)

You have URLs in your code to some JavaScript but they don't seem to be picking up?

BTW, dumb question, but I don't understand the second link. What are the correct two URLs so I can review the code and make local copies?

Quote:

---

src="./jquery.jshowoff.min.js">

---

Hopefully I won't have too many questions!

Thanks,



Debbie

Quote:

---

You have URLs in your code to some JavaScript but they don't seem to be picking up?
BTW, dumb question, but I don't understand the second link. What are the correct two URLs so I can review the code and make local copies?

---

That was the file path Paul was using, the js was included in the root folder beside the html file. He had everything in the fluid-slide folder.

Just grab the js from his path:
http://www.pmob.co.uk/fluid-slide/jq...showoff.min.js

Then set the file path up according to whatever you had been doing. ;)

Quote:

---

Originally Posted by DoubleDee

Okay, I'll have to pour over his code when I can.

Hopefully it isn't too radically different - especially on the JavaScript side?! :-/
Thanks for that.

How do I get it to rotate automatically? (That was a key requirement!)

---

In my example it's already set to rotate automatically with autoPLay: true set in the js.

Quote:

---

You have URLs in your code to some JavaScript but they don't seem to be picking up?

---

The js is here. It should be the same as the one you were using I think.

I couldn't find your online slideshow as you didn't leave a current link and the link in your earlier post#33 is being re-directed to a dodgy site (according to mcafee).

Quote:

---

Whoa!

Are you sure you want to go there?

webcache109.com may try to steal your information.
Why were you redirected to this page?

• When we visited this site, we found it may be designed to trick you into submitting your financial or personal information to online scammers. This is a serious security threat which could lead to identity theft, financial losses or unauthorized use of your personal information.

---

Quote:

---

Originally Posted by Paul O'B

I couldn't find your online slideshow as you didn't leave a current link and the link in your earlier post#33 is being re-directed to a dodgy site (according to mcafee).

---

That would be a file not found redirect.

Her existing version is linked to from post #44

Quote:

---

Originally Posted by paul_wilkins

That would be a file not found redirect.

---

Ah ok - I just got the big red warning from Mcaffee that is was a dangerous site and those things frighten me :)

Quote:

---

Her existing version is linked to from post #44

---

[/quote]

I still couldn't see the slideshow on there unless I'm going slideshow blind :)

Quote:

---

Originally Posted by Paul O'B

I couldn't find your online slideshow as you didn't leave a current link and the link in your earlier post#33 is being re-directed to a dodgy site (according to mcafee).

---

I'll look at your new and improved code after supper!

And, no, I'm not sending you on purpose to bad sites.

I just post my code long enough to get help, so old links may not work, and since it is *free* hosting, they send dead links to an advertising page I suppose!

Sorry!

And I look forward to catching up with you and Rayzur on versions. :)


Debbie

Quote:

---

Originally Posted by Paul O'B

Ah ok - I just got the big red warning from Mcaffee that is was a dangerous site and those things frighten me :)

---

Nah... I'm a "good girl" and your friend! :angel:

See my comments above...

(Gee, I'm gonna start getting a "bad rep" if people refer to old links I took down.) :blush:


Debbie

Here's what is going on, it's a free web host and if any file is not found it automatically injects that redirect.

For example, if you view the page source of Debbie's index page you will see a CSS file does not link to an actual file.

Code:

---

<link type="text/css" rel="stylesheet" href=".css">

---

If you click on it via the page source in FF it will show you that redirect in the page source without actually going to the site.

That CSS link needs to be removed from the index page since it is not leading to an actual file at the moment.

Short of getting a real hosting service the best thing she can do is try not to leave dead links behind and remove any invalid file paths from the page source.

If you do get a redirect then it's best to bail out asap and not go clicking around on the ad site.

EDIT:
Debbie, as long as you keep doing what you have been with setting links to your test pages on your index page then you should be fine.
The problems come into play when you link to anything other than your index page and then remove that link later. Don't leave dead links on the index page either, it looks like you have been pretty good about keeping it up to date though.

Thanks for the clarification :) It just worries me when I see that big red Mcaffee box :)

Quote:

---

Originally Posted by Rayzur

EDIT:
Debbie, as long as you keep doing what you have been with setting links to your test pages on your index page then you should be fine.
The problems come into play when you link to anything other than your index page and then remove that link later. Don't leave dead links on the index page either, it looks like you have been pretty good about keeping it up to date though.

---

Rayzur, if that is the only issue, then what I am doing should be okay.

The reason I set up a landing index.php page is so that I can just modify it and let people know what the "Example of the Day" is.

If you guys run into dead links, it is either...

1.) Their server has a caching issue where it won't take my updated file with the same name sometimes for 20 minutes?! (That one is mega-annoying because even I have gotten dead links...)

2.) Someone just happens to be surfing when I am doing an upload and I haven't had a chance to get all of the related files in place to prevent a dead link coming up.


It sounds like what I am doing is what you want, and Paul's issue may have just been a timing issue.

I *do* wanna remain a "good girl" here on SitePoint! ;)

Thanks,



Debbie