Results 1 to 5 of 5

Thread: multiple content sliders - different css / styles

  1. #1
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default multiple content sliders - different css / styles

    1) Script Title: Featured Content Slider

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem:

    Hello, how do I have multiple content sliders on the same site (each with different css styles? I've tried renaming all the css items contentdiv2 etc but that seems to break the slider. Could you help me by explaining how to do this? thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Say you have:

    Code:
    <div id="slider1" class="sliderwrapper">
    
    <div class="contentdiv">
    Content 1 Here. <br />
    <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
    </div>
    
    <div class="contentdiv">
    Content 2 Here.
    </div>
    
    <div class="contentdiv">
    Content 3 Here.
    </div>
    
    </div>
    
    <div id="paginate-slider1" class="pagination">
    
    </div>
    The script does rely upon the presence of the class names and id's. However, css relies upon selectors. So a unique selector for the contentdiv class in the above would be:

    Code:
    #slider1.contentdiv {
    whatever
    }
    The paginate and wrapper divisions already have unique id selectors. What else do you want to customize? Also, you can add a compound class, for instance:

    Code:
    class="contentdiv mycontent1"
    which will cascade if used after the first definition and will select like:

    Code:
    .mycontent1 {
    whatever
    }
    Last edited by jscheuer1; 06-23-2008 at 04:52 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mobius2000 (09-11-2008)

  4. #3
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default how about this?

    John.. what do you think is causing this on my site? Toggle the slider the the LOGIN NOW and JOIN NOW buttons. You will see the upcoming slide UNDER the current for a flash while the other slide is loading. It's very annoying. Is it possible it's something I did? Any idea what might be causing it? Thank you VERY much for your help with this.

    http://www.longislandonline.com/dev/
    Last edited by parmenti; 06-23-2008 at 02:04 AM.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The problem is in your style.php file where you have:

    Code:
    .sliderwrapper{
    position: relative; /*leave as is*/
    overflow: hidden; /*leave as is*/
    border: 10px solid navy;
    border-bottom-width: 6px;
    width: 400px; /*width of featured content slider*/
    height: 250px;
    }
    
    
    
    .sliderwrapper .contentdiv{
    visibility: hidden; /*leave as is*/
    position: absolute; /*leave as is*/
    left: 0;  /*leave as is*/
    top: 0;  /*leave as is*/
    padding: 5px;
    background: white;
    width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
    height: 100%;
    filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }
    something like (it's slidewrapper, not sliderwrapper and once you fix that, the styles would need to be a little different):

    Code:
    .slidewrapper{
    position: relative; /*leave as is*/
    overflow: hidden; /*leave as is*/
    width: 293px; /*width of featured content slider*/
    height: 263px;
    }
    
    .slidewrapper .contentdiv{
    visibility: hidden; /*leave as is*/
    position: absolute; /*leave as is*/
    left: 0;  /*leave as is*/
    top: 0;  /*leave as is*/
    padding: 5px;
    background: white;
    width: 293px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
    height: 263px;
    filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }
    will be about right. A little fine tuning may be desired.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    parmenti (06-24-2008)

  7. #5
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thank you very much for your response. I actually saw that just about the same time I checked your repsonse. The end conclusion is I REALLY need to sleep more often Thanks again, I think the response time and help on this site is incredible. I should have joined a long time ago.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •