Help setting Width of Slides

[Paul O'B]

Hi,

Using the example that Vic posted I managed to get something working with a bit of fiddling.

This looks pretty close to what you want.

It will work with any number of slides automatically without changing the css, The only manual thing to do is to add the altlinks by hand.

    <p id="nojs" class="altlinks"><a href="#slide1">Slide 1</a> | <a href="#slide2">Slide 2</a> | <a href="#slide3">Slide 3</a></p>

The above links are only visible when js is turned off and use the fragment identifier to rotate the content.

They suffer from the same problem as the existing one in that if JS is turned off and the page is resized while you have clicked one of the slides then as you open the page the scroll position is altered and a previous slide can be seen. Once you click the link again then it clicks back to normal.

I believe this would be a problem with any fragment identifier and overflow method used in a similar way and don't see a solution (unless someone else can see a different way to do this). If the slide had a fixed height then we could get around this but that would ruin the fluid nature of the slide.

[Rayzur]

Hi,
It will work with any number of slides automatically without changing the css, The only manual thing to do is to add the altlinks by hand.

Hi Paul, yes that is much cleaner

I had tried using white-space:nowrap along with inline-blocks too but I ran into to problems when using the previous script. Looking back now I think it was because I was not overriding the AP that the script was injecting.

The above links are only visible when js is turned off and use the fragment identifier to rotate the content.

That seems more appropriate too.

They suffer from the same problem as the existing one in that if JS is turned off and the page is resized while you have clicked one of the slides then as you open the page the scroll position is altered and a previous slide can be seen. Once you click the link again then it clicks back to normal.

Like you, I don't see any way around that. That looks like the price that has to be paid for the side scrolling CSS only version.

I believe this would be a problem with any fragment identifier and overflow method used in a similar way and don't see a solution (unless someone else can see a different way to do this). If the slide had a fixed height then we could get around this but that would ruin the fluid nature of the slide.

The only thing that might help would be a min-height on the LI for the CSS only version, untested though.

All in all, I think you've got the cleanest thing going so far

There's not any other fluid width sliders running around out there that I know of so were treading in uncharted waters here.

EDIT:
BTW, I was playing around with TinySlider 2 earlier as an attempt to get away from the jQuery library.
It uses a very lean standalone javascript. It requires the onclick events in the html for the navigation though.

[DoubleDee]

Hi,

Using the example that Vic posted I managed to get something working with a bit of fiddling.

This looks pretty close to what you want.

Paul, thanks for going the extra mile.

Not to seem ungrateful, but it introduces some new issues (unless I'm missing something)...

1.) The user has to "start" the slide-show. (Because this is for my home page, it should play automatically. The goal is to "force-feed" people content in case they don't navigate on their own to what I want them to see!)


2.) When the slide-show is playing, the height of the slide-show varies. Now, obviously, the height will change if you adjust the browser width, but when that is constant, the slide-show box should be a set height.

If it isn't, it cause two issues... First, it makes you dizzy with all of that changing. Second, it would readjust the entire home page. (There will be normal <p>'s after the slide-show and they shouldn't be hoping around.


3.) Slides #2 and #3 go one direction and Slide #1 goes another direction. That looks really confusing. Maybe it's any easy fix.

Thank you, AGAIN, for yet another way to tackle my original problem! If the above issues can be addressed, it may be a viable solution.

(I guess we don't have anyone here that could point me to the right place in the original example's JavaScript to tinker with that code, huh?)

They suffer from the same problem as the existing one in that if JS is turned off and the page is resized while you have clicked one of the slides then as you open the page the scroll position is altered and a previous slide can be seen. Once you click the link again then it clicks back to normal.

I believe this would be a problem with any fragment identifier and overflow method used in a similar way and don't see a solution (unless someone else can see a different way to do this). If the slide had a fixed height then we could get around this but that would ruin the fluid nature of the slide.

I don't see any issues when JavaScript is off. In FF on my Mac, everything adjusts properly and as you click through each tab manually, things look and behave as they should. (For me, it was when JavaScript was turned on that things looked like we took a step backwards...)

Thanks,



Debbie

[Rayzur]

1.) The user has to "start" the slide-show. (Because this is for my home page, it should play automatically. The goal is to "force-feed" people content in case they don't navigate on their own to what I want them to see!)

Just set the autoPlay to true in the .ready(function of the script at the end of the html.

    <script type="text/javascript">        
                $(document).ready(function(){ $('#fluidslide').jshowoff({ 
                  effect: 'slideLeft',
                    cssClass: 'hidelinks',
                    hoverPause: false,
                    autoPlay: true 
                }); 
                $("#nojs").hide();
                });
            </script>

Likewise I would probably set the hoverPause: to "true" also. That allows them to pause it with their cursor and read the entire content before it slides away.

[Paul O'B]

2.) When the slide-show is playing, the height of the slide-show varies. Now, obviously, the height will change if you adjust the browser width, but when that is constant, the slide-show box should be a set height.

If it isn't, it cause two issues... First, it makes you dizzy with all of that changing. Second, it would readjust the entire home page. (There will be normal <p>'s after the slide-show and they shouldn't be hoping around.

But that's what would happen when you had a fluid page anyway. When you reduce the height of fluid content the page grows. I don't see how you can have both at the same time. The only way in CSS we can accomodate the fluid height text is by not setting a height.

However, if Paul W or some other kind soul wants to code this in javascript then here's what they'd have to do:

On browser resize cycle through the slides in the page and find the tallest one and then set the height of all slides to that tallest height. This would have to happen on browser resize and would ensure that each slide is the same height for the current width of the screen.

The drawback is that the onresize event usually slows the page down and makes opening and closing the window a little choppy.

[DoubleDee]

Just set the autoPlay to true in the .ready(function of the script at the end of the html.

Oops, I was changing the settings in the JavaScript file instead of the HTML file. Duh!

Likewise I would probably set the hoverPause: to "true" also. That allows them to pause it with their cursor and read the entire content before it slides away.

Agreed.

Okay, so that fixes one of my issues.


Debbie

[Rayzur]

The only way in CSS we can accomodate the fluid height text is by not setting a height.

That is why I proposed setting a min-height on the LI. It's not a cure all but it will stop it from jumping up and down when the page is at it's max-width.

The content in these sliding elements should limited anyway since they are just brief intros. Pick the one with the most text and set a min-height according to it.

[DoubleDee]

But that's what would happen when you had a fluid page anyway. When you reduce the height of fluid content the page grows. I don't see how you can have both at the same time. The only way in CSS we can accomodate the fluid height text is by not setting a height.

Hmm... Let me explain what I'd like.

If you go back to my original example here...

...you will see that the height remained the same between slides. That was important, because Slide #1 was three paragraphs high, whereas Slides #2 and #3 were only one paragraph high.

By making all slides the same height as the tallest slide, things looked uniform and you don't get the "jumping" that we have now.

This is how things should work in my mind...

The slides should all be the same height and that height should accommodate the tallest slide (e.g. height: 10em) at the widest browser setting (i.e. full-screen). Then if the user reduces the browser size, *obviously* the middle column's width would shrink - thus forcing the slide-show to be skinnier as well - and the slides would need to be taller (e.g. height: 20em)

I have no problem with the slides height increasing to accommodate a narrower middle column. All I am wanting is for all the slides to be the same height.

That seems like a fair and flexible compromise to me, right?

Can't that be done in the CSS?

Thanks,



Debbie

[DoubleDee]

That is why I proposed setting a min-height on the LI. It's not a cure all but it will stop it from jumping up and down when the page is at it's max-width.

But better than a Min-Height, is a uniform height like my original example! (Not sure how we did it, but I thought it looked great.)

The content in these sliding elements should limited anyway since they are just brief intros. Pick the one with the most text and set a min-height according to it.

I suppose that is doable.

Okay, but dumb question... If we set the Min-Height to 10em, and then I had a slide that needed 15 lines - which I think would be 15em - would that keep all of the slides equal height, or would you have all of the other slides at the Min-Height of 10em and the big slide at 15em?!



Debbie

[Paul O'B]

That is why I proposed setting a min-height on the LI. It's not a cure all but it will stop it from jumping up and down when the page is at it's max-width.

The content in these sliding elements should limited anyway since they are just brief intros. Pick the one with the most text and set a min-height according to it.

Yes, that would be a partial solution but seems to defeat the purpose of a fluid layout to me .

I've added a min height in here for testing.

I also tried to make it only slide one way but it seems as though I broke something along the way as the original slide doesn't slide out of the way now but just gets covered up.

However, I think the one direction slide is less accessible because the user doesn't know when they have got to the end of the slides. Most of these scripts do a similar reverse slide once you've reached the end of the slides otherwise the user just keeps clicking on forever.

[Rayzur]

But better than a Min-Height, is a uniform height like my original example! (Not sure how we did it, but I thought it looked great.)
I suppose that is doable.

Your original example was not a fluid width slider, your min-max widths were not working correctly. Maybe it looked good but I don't think you stress tested it.

Reduce your viewport width and you will see that overflow:hidden on the .slides along with the injected widths from the script was throwing everything off.

That what most of this thread was about, cleaning all that up.

There is a PRICE to pay for this fluid width slider, you can't have it both ways.

EDIT:
I think the best thing you could do is be a "word crafter", by that I mean select a fairly equal amount of Key-Words for each section.

These are really just brief intros and if you can keep the content amount consistent then it will prevent jumping and they will all wrap to consistent heights with the fluid widths.

[DoubleDee]

Paul,

I took Rayzur's advice and added a Min-Height, which seems to work.

Also found a way to get the slides going the same way, although it doesn't sound like you like that. (Will post my corrections for all to see in a bit!)

BTW, two more less important issues...

1.) How does he get those "pretty" borders around the numbers and controls so they look like reversed buttons? (See slide show with Back Lab here... jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig)

Oh, and is there is a *simple* way to do that that is supportable by all browsers (i.e. no CSS3) then that would help!)


2.) If I slow down my slide-show, can I insert Hyperlinks in a slide, so I user could click on it and go to a page with more information?

Thanks,



Debbie

[DoubleDee]

Your original example was not a fluid width slider, your min-max widths were not working correctly. Maybe it looked good but I don't think you stress tested it.

No, I know it wasn't working and that is why I've created another monster thread!

I just meant I liked how the height was constant.

That what most of this thread was about, cleaning all that up.

There is a PRICE to pay for this fluid width slider, you can't have it both ways.

You, Paul and I seem to be racing to correct each other today!

See my last post. Took your advice and we are making progress. (I even took a stab at the JavaScript - which is a little easier to follow than that first plug-in - and made some minor improvements which I'll post later.)

Go CSS Team!!



Debbie

[Rayzur]

See my last post. Took your advice and we are making progress.

The min-height I suggested was not a cure-all, it was really only good for the page at it's max-width.

See the edit to my last post, that is what I would be doing.

2.) If I slow down my slide-show, can I insert Hyperlinks in a slide, so I user could click on it and go to a page with more information?

You shouldn't have to be concerned about that now with the hover pause set to true.

[DoubleDee]

The min-height I suggested was not a cure-all, it was really only good for the page at it's max-width.

See the edit to my last post, that is what I would be doing.

Yes, "word crafting" - as you say - makes sense.

I'm sure if I play around with things, I can find a combination of Content and Min-Height that work at both the Min and Max Widths.

You shouldn't have to be concerned about that now with the hover pause set to true.

So, what I meant was, "Is there any reason with all of this JavaScript stuff that I cannot use Hyperlinks?" (Since we made my static HTML slides dynamic, I thought maybe that would cancel out the ability to use Hyperlinks?!)

One last thing, back to my other question...

Is the pretty rounded button-like look, from CSS3?

Is there anyway to do that in a more supported way?

The only ways I can think would be 1.) Wrap the text in DIVs and style them like they are buttons, or 2.) Maybe add background shading and padding to the Text itself to create the illusion of a square/rectangular buttons?

Thanks,


Debbie

[Paul O'B]

Is the pretty rounded button-like look, from CSS3?

Yes the round corners are border-radius properties but not supported in IE8 and under.

You can either use images using the sliding doors techniques or just let IE have square buttons instead. Or lastly use one of the js linrarires such as CSS3pie.

Most of my clinets are happy to let IE8 and under have square corners and cut down oin the overheads of all the other methods.

[DoubleDee]

Yes the round corners are border-radius properties but not supported in IE8 and under.

You can either use images using the sliding doors techniques or just let IE have square buttons instead. Or lastly use one of the js linrarires such as CSS3pie.

What is a "js linrarires"???


Paul, I'm still trying to figure ou how the JavaScript works.

Do you know where in the HTML or JavaScript the file "jshow.css" is called??

(I would like to style the buttons, but need to first figure out how the style-sheet hooks up to everything else.)

Thanks,



Debbie

[DoubleDee]

Do you know where in the HTML or JavaScript the file "jshow.css" is called??

Cancel that one request.

I was being dense!!

(I thought that the JavaScript plugin was setting the path to the stylesheet, but aftre I posted it dawned on my I just needed to add a "link" to the stylesheet!)





Debbie

[DoubleDee]

After staying up until 3:00 a.m., I think I've got a pretty nice finished product. Whew!

Here is a link to my test page...

Debbie's Test Page

I spent A LOT of time reading through the original code trying to understand how the HTML/CSS/JavaScript worked, and then cleaning things up. (Think I lost my "JS virginity" last night!)

Everything looks great, with the only minor point being that if you re-size the browser with JavaScript off, it moves the slide off the screen as you minimize. (But a quick refresh fixes things.)

When I have more time, I'll probably add a note or a "refresh" link on the version when Javacript is off, so the user understand how to compensate for this minor flaw.

Also, I'll need to style the JS-Off links to make them look like buttons.


Everyone, please feel free to critique my final layout and code!!! (If anyone can look at my commented questions, that would be very helpful!!)

Thanks,


Debbie

[Paul O'B]

Hi Debbie yes that's looking pretty good now

I think it looks better with the fade that you've added rather than the slide.

What is a "js linrarires"???

That should have said Libraries lol As in CSS3Pie.

I updated my version to account for fluid heights automatically but it got a little complicated but I'll post it anyway as Ray may be interested.

The new example is here and it works like this:

My first thought was to cycle through the slides and find the tallest and then set all slides to that tallest height to stop the jump. This work on first page load but would not work on resize. I uses the resize event to run the routine again but it still wouldn't work.

It seems that the plugin script strips the slides out of the DOM and that means you can't get the height from them. As the script was too complicated for me to adjust I cheated and I cloned the slides and appended them to an empty div. I then absolutely placed this div under the existing slides and set the visibility to hidden to that they wouldn't interfere with anything else.

This simply allowed me to grab the height of the longest slide from the cloned slides and then apply it to the real slides parent.

I'm only posting this out of interest in the hope that others may be able to do this more neatly. However, I still haven't seen a single example of a fluid height scroller on the web and I must have looked at hundreds now.

[DoubleDee]

Hi Debbie yes that's looking pretty good now

Thanks! (I had good teachers!!)

I think it looks better with the fade that you've added rather than the slide.

Yeah, me too, that's why I changed it. (BTW, if you look at the lines I commented out in the JS, then you'll see how to make everything slide from the same direction, since you weren't sure how to do this.)

That should have said Libraries lol As in CSS3Pie.

Ha ha. I figured it was a type-o!

I updated my version to account for fluid heights automatically but it got a little complicated but I'll post it anyway as Ray may be interested.

Yeah, too complicated for me! (I'm quite happy with the example I posted.)

Thanks,



Debbie

[Rayzur]

I updated my version to account for fluid heights automatically but it got a little complicated but I'll post it anyway as Ray may be interested.

Hi Paul,
Thanks for posting your latest fluid height fix.

The new example is here and it works like this:

My first thought was to cycle through the slides and find the tallest and then set all slides to that tallest height to stop the jump. This work on first page load but would not work on resize. I uses the resize event to run the routine again but it still wouldn't work.

With some help from one of my js buddies I was able to get a script working that does exactly what your first thought was. Similar to an Equal Height Column script, I call this one the "Equal Height Sibling" script. With a little bit of tweaking it can be adjusted to target any sibling tags within any element ID. From the limited testing I've done so far it seems to be working fine.

Equal Height Siblings

Open that link in your browser, resize your window and grab the bottom right corner with your cursor and move your cursor in circles.
That should make it pass our Fluid Slider test.

>>but it still wouldn't work.

From what I just learned (assuming I understand it right): If you have multiple resize events running in separate calls then it can cause one or both to fail. I'm not sure how you had it set up but grouping the calls together may have solved it.

It seems that the plugin script strips the slides out of the DOM and that means you can't get the height from them. As the script was too complicated for me to adjust I cheated and I cloned the slides and appended them to an empty div. I then absolutely placed this div under the existing slides and set the visibility to hidden to that they wouldn't interfere with anything else.

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.

I know Debbie says she's content with things the way they are.
If I can make time, I may still try to take this a step further and see if I can merge what we have so far in with that TinySlider2 script I mentioned earlier in the thread.

[DoubleDee]

I'd swing toward this plugin rather than Cycle. It's simple and generates no inline style widths so should respect CSS applied to content.

jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig

A big THANK YOU goes out to Victor for introducing all of us to this cool new JavaScript Plugin!!




Debbie

[DoubleDee]

I know Debbie says she's content with things the way they are.

If I can make time, I may still try to take this a step further and see if I can merge what we have so far in with that TinySlider2 script I mentioned earlier in the thread.

Rayzur, can you please explain what it is that you and Paul are up to? (My brain fizzled out this weekend after I got things working how I wanted. Not really following what you two are talking about...)

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

Anyways, feel free to improve (and simplify) things even more. (As far as simplification, I think that script I used could stand some definite cleaning up.)

Glad I inspired people to "push the envelope"!



Debbie

[Rayzur]

Rayzur, can you please explain what it is that you and Paul are up to?

We were looking for ways to keep it fully fluid without having it jump up and down, while not having to rely on min-height as it was not really a cure-all.

Different amounts of content in each slide are what caused that jumping. On a live site, all content below the slider would be jumping up and down with it.

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

To an extent it does, but there is still that jump in the height at it's min-width. Your using the min-height on the LI which is just a conditional fix only really good for max-width.

We we're just trying to take it the extra step and make it fool proof.