Multiple use of "Slideshow" on same page - best practise css

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
7/18/2011 9:51:52 AM
Gravatar
Total Posts 116

Multiple use of "Slideshow" on same page - best practise css

Hi all,

Just looking for a bit of advise here.  I use the built in mojo slideshow feature quite a bit in html modules and wondered what the best practise is for pages where it is used more than once.  I can make it work with inline markup easily enough but then end up with markup such as:

<div class="slideshow" style="float: left; width: 250px; clear: left; margin-right: 15px;">...</div>

<div class="slideshow" style="float: right; width: 400px; clear: right; margin-left: 15px;">...</div>

<div class="slideshow" style="float: left; width: 600px; clear: both; margin-top: 20px; background-color: #eef5fb;">...</div>

Is there an cleaner way of using this built in feature in these circumstances?  For example is it possible to put multiple labels in the "CSS class for slide container div" box seperated by a comma etc. As far as I'm aware the feature won't work if it used inside another container div (js selector?) so I can't do it that way so just wondered if anyone has a neater way of doing it - of course the main reason I'm asking is I'm hoping to be able to utilise Joe's great new mobile add-on for some sites and would like to save myself some recoding (removal of hard coded inline styles) when that times comes! smiley  

7/18/2011 11:39:35 AM
Gravatar
Total Posts 18439

Re: Multiple use of "Slideshow" on same page - best practise css

Hi Andy,

I'm not aware of any problem using multiple instances of Html content feature on a page with slide show enabled on each of them.

If you're managing to use multiple slide shows in one Html instance using syntax like you posted, you could change it and move the hard code styles also to CSS. While you can't use multiple classes in the setting "CSS Class for Slide Container", you can put multiple classes in your markup to add some different style rules to each div like this:

<div class="slideshow slidehow1">...</div>

<div class="slideshow slideshow2">...</div>

<div class="slideshow slideshow3">...</div>

then in CSS put

.slidehow1 { float: left; width: 250px; clear: left; margin-right: 15px; }
.slideshow2 { float: right; width: 400px; clear: right; margin-left: 15px; }
.slideshow3 { float: left; width: 600px; clear: both; margin-top: 20px; background-color: #eef5fb; }

Hope that helps,

Joe

 

7/18/2011 4:57:01 PM
Gravatar
Total Posts 116

Re: Multiple use of "Slideshow" on same page - best practise css

Thanks Joe,

Sorry if I mis-phrased that, there isn't any problem using multiple instances on one page I just knew that I shouldn't be using inline markup to move them about.

The 'problem' with sometimes having long spells away from doing websites/coding is that things you get to grips with and start taking for granted start to slip away a little at times!  Thanks for the reminder on the css so that I can get the code tidied up. smiley

Thanks Joe and best wishes with a fantastic new product! 

Regards

 

Andrew

7/19/2011 7:05:38 AM
Gravatar
Total Posts 18439

Re: Multiple use of "Slideshow" on same page - best practise css

Thank you for the beer Andrew! Much appreciated!

Cheers,

Joe

7/19/2011 7:29:10 AM
Gravatar
Total Posts 116

Re: Multiple use of "Slideshow" on same page - best practise css

No problem, cheers the the css refresher! wink

Cheers

Andrew

You must sign in to post in the forums. This thread is closed to new posts.