SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 70
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Help setting Width of Slides

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at the "slideshow.css" everything is hardcoded there, for what i see.


    See you

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pablogo View Post
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DoubleDee "slideshow.css" is not javascritp is "Cascade Style Sheet" so, there you will find lines like
    Code CSS:
    ...
    #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

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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:

    Code css:
    #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

    Code css:
    #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

    Code css:
    #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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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:

    Code css:
    .slides li { 
        width: 800px !important 
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    /* ----- Slideshow UL ------*/
    #slideshow .slides ul {
        float:left;
        width:300%;/* three list items x 100% (100% = current fluid width of #slideshow)*/
        /*background: #EEE;/*for testing widths*/
    }
    #slideshow .slides li {
        float:left;
        width:33.3% !important;/*100% divided by three*/
        background: #CDF;/*for testing widths*/
    }

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.

    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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code css:
    /* ----- 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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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...

    Code CSS:
    <!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

  19. #19
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

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

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    }
    #slideshow .slides li {
        float:left;
        width:33.3%!important;
        background: #CDF;/*for testing widths*/
        position:relative!important;
        height:auto!important;
    }
    Code:
    <!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.

  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If we over-ride the js with more importants we get this working.
    Thanks for the help Paul.

    Your solution does work, but adds a strange side-effect...

    When the slide-show goes from Slide #1 to Slide #2, SLide #2 zooms by twice! (Same for Slide #3)

    It is kind of a dizzying effect for readers.

    I changed the transition settings in slideshow.js to make this side-effect more evident.

    Just point to this file instead, and you'll see what I mean...

    Code JavaScript:
    $slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
    //    timeout: 1000,      // time before next slide appears (in ms)
        slideSpeed: 5000,   // time it takes to slide in each slide (in ms)
    //    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
        tabSpeed: 400,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'scrollRight',   // the slide effect to use
    //    fx: 'scrollLeft',   // the slide effect to use
    //    fx: 'fade',   // the slide effect to use
     
        init: function() {
            // set the context to help speed up selectors/improve performance
            this.context = $('#slideshow');
     
            // set tabs to current hard coded navigation items
            this.tabs = $('ul.slides-nav li', this.context);
     
            // remove hard coded navigation items from DOM
            // because they aren't hooked up to jQuery cycle
            this.tabs.remove();
     
            // prepare slideshow and jQuery cycle tabs
            this.prepareSlideshow();
        },
     
        prepareSlideshow: function() {
            // initialise the jquery cycle plugin -
            // for information on the options set below go to:
            // [url=http://malsup.com/jquery/cycle/options.html]JQuery Cycle Plugin - Option Reference[/url]
            $("div.slides > ul", $slideshow.context).cycle({
                fx: $slideshow.fx,
                timeout: $slideshow.timeout,
                speed: $slideshow.slideSpeed,
                fastOnEvent: $slideshow.tabSpeed,
                pager: $("ul.slides-nav", $slideshow.context),
                pagerAnchorBuilder: $slideshow.prepareTabs,
                before: $slideshow.activateTab,
                pauseOnPagerHover: true,
                pause: true
            });
        },
     
        prepareTabs: function(i, slide) {
            // return markup from hardcoded tabs for use as jQuery cycle tabs
            // (attaches necessary jQuery cycle events to tabs)
            return $slideshow.tabs.eq(i);
        },
     
        activateTab: function(currentSlide, nextSlide) {
            // get the active tab
            var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
     
            // if there is an active tab
            if(activeTab.length) {
                // remove active styling from all other tabs
                $slideshow.tabs.removeClass('on');
     
                // add active styling to active button
                activeTab.parent().addClass('on');
            }
        }
    };
     
     
    $(function() {
        // initialise the slideshow when the DOM is ready
        $slideshow.init();
    });
     
     
    $('#s1').cycle({timeout:2000});
     
    $('#pauseButton').click(function() {
        $('#s1').cycle('pause');
    });

    I agree that the problem really needs to be resolved in the JavaScript file. (It would be nice if the JavaScript Forum wouldn't keep throwing this back on to the CSS side. Different levels of support I guess...)

    I was hoping to get some help on the JQuery forums, but I cannot register at their website and the author of the code won't help me figure out why I can't sign up?!

    Will have to kick around my version, Rayzur's versions, and your version and see which makes the most sense?!

    Maybe I was looking in the wrong JavaScript file, but when I looked in jquery.cycle.all.min.js it looked like "spaghetti code" and not knowing JavaScript, I certainly didn't see any clear areas or variables that would help fix this problem.

    I did see some "widths", but don't see where the data is coming in from or how it is being manipulated. Once again showing that "good code" is "documented code"!!! (Now we know why JavaScript programmers get such a bad wrap among other developers! Anyways...)



    Debbie

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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
    Would it help if the scripting did not resize things?

    jQuery's Cycle plugin has an option called 'containerResize' which allows you to disable the resizing that you saw earlier.

    So in the slideshow script where there was:

    Code:
        prepareSlideshow: function() {
            // initialise the jquery cycle plugin -
            // for information on the options set below go to:
            // http://malsup.com/jquery/cycle/options.html
            $("div.slides > ul", $slideshow.context).cycle({
                fx: $slideshow.fx,
                timeout: $slideshow.timeout,
                speed: $slideshow.slideSpeed,
                fastOnEvent: $slideshow.tabSpeed,
                pager: $("ul.slides-nav", $slideshow.context),
                pagerAnchorBuilder: $slideshow.prepareTabs,
                before: $slideshow.activateTab,
                pauseOnPagerHover: true,
                pause: true,
                containerResize: false
            });
        },
    There would now be the piece added in green:


    Code:
        prepareSlideshow: function() {
            // initialise the jquery cycle plugin -
            // for information on the options set below go to:
            // http://malsup.com/jquery/cycle/options.html
            $("div.slides > ul", $slideshow.context).cycle({
                fx: $slideshow.fx,
                timeout: $slideshow.timeout,
                speed: $slideshow.slideSpeed,
                fastOnEvent: $slideshow.tabSpeed,
                pager: $("ul.slides-nav", $slideshow.context),
                pagerAnchorBuilder: $slideshow.prepareTabs,
                before: $slideshow.activateTab,
                pauseOnPagerHover: true,
                pause: true,
                containerResize: false
            });
        },
    That removes the resizing that scripting does, but now introduces more CSS issues, such as needing to set the height of the slides ul element to be able to see the content
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

  24. #24
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Would it help if the scripting did not resize things?

    jQuery's Cycle plugin has an option called 'containerResize' which allows you to disable the resizing that you saw earlier.
    Hi Paul,
    Yes that looks like it eliminates the need for !important on the 300% width of the UL since it is the container.

    We're still having to override some of the LI styles with !important though. The LI's are the children and the script is setting them as position:absolute; along with calculated heights.

    That removes the resizing that scripting does, but now introduces more CSS issues, such as needing to set the height of the slides ul element to be able to see the content
    I think that was because the script was setting them as AP that I mentioned above. When I set position:relative !important; and height:auto!important; the UL height is no longer a problem.

    So if we could stop it from applying styles to the LI (children) that would help too.

    We could set a min-height on the UL to keep it from changing heights with the fluid content list-items, That allows it to expand it's height at narrowed widths.

    Here is what it requires now when using containerResize: false :
    Code:
    /* ----- Slideshow UL ------*/
    #slideshow .slides ul {
        float:left;
        width:300%;
        min-height:240px;
        /*background: #EEE;/*for testing widths*/
    }
    #slideshow .slides li {
        float:left;
        width:33.3% !important;
        position:relative !important;
        height:auto !important;
        background: #CDF;/*for testing widths*/
    }
    Code:
    <!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>Fluid Width jQuery Slideshow</title>
        <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>
    
    <script type="text/javascript">
    $slideshow = {
        context: false,
        tabs: false,
        timeout: 3000,      // time before next slide appears (in ms)
    //    timeout: 1000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
    //    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
        tabSpeed: 400,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'scrollRight',   // the slide effect to use
    //    fx: 'scrollLeft',   // the slide effect to use
    //    fx: 'fade',   // the slide effect to use
    
        init: function() {
            // set the context to help speed up selectors/improve performance
            this.context = $('#slideshow');
    
            // set tabs to current hard coded navigation items
            this.tabs = $('ul.slides-nav li', this.context);
    
            // remove hard coded navigation items from DOM
            // because they aren't hooked up to jQuery cycle
            this.tabs.remove();
    
            // prepare slideshow and jQuery cycle tabs
            this.prepareSlideshow();
        },
    
        prepareSlideshow: function() {
            // initialise the jquery cycle plugin -
            // for information on the options set below go to:
            // http://malsup.com/jquery/cycle/options.html
            $("div.slides > ul", $slideshow.context).cycle({
                fx: $slideshow.fx,
                timeout: $slideshow.timeout,
                speed: $slideshow.slideSpeed,
                fastOnEvent: $slideshow.tabSpeed,
                pager: $("ul.slides-nav", $slideshow.context),
                pagerAnchorBuilder: $slideshow.prepareTabs,
                before: $slideshow.activateTab,
                pauseOnPagerHover: true,
                pause: true,
                containerResize: false
            });
        },
    
        prepareTabs: function(i, slide) {
            // return markup from hardcoded tabs for use as jQuery cycle tabs
            // (attaches necessary jQuery cycle events to tabs)
            return $slideshow.tabs.eq(i);
        },
    
        activateTab: function(currentSlide, nextSlide) {
            // get the active tab
            var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
    
            // if there is an active tab
            if(activeTab.length) {
                // remove active styling from all other tabs
                $slideshow.tabs.removeClass('on');
    
                // add active styling to active button
                activeTab.parent().addClass('on');
            }
        }
    };
    
    
    $(function() {
        // initialise the slideshow when the DOM is ready
        $slideshow.init();
    });
    
    
    $('#s1').cycle({timeout:2000});
    
    $('#pauseButton').click(function() {
        $('#s1').cycle('pause');
    });
    </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;
    }
    /* ----- Slideshow UL ------*/
    #slideshow .slides ul {
        float:left;
        width:300%;
        min-height:240px;
        /*background: #EEE;/*for testing widths*/
    }
    #slideshow .slides li {
        float:left;
        width:33.3% !important;
        position:relative !important;
        height:auto !important;
        background: #CDF;/*for testing widths*/
    }
    #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;
        background: #DDD;
        border-top: 2px solid #ccc;
        overflow: hidden;/*contain floated li*/
    }
    #slideshow .slides-nav li {
        float: left;
    }
    #slideshow .slides-nav li a {
        float: left;
        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.
                    </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.
                    </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>

  25. #25
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    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
    Hi Victor,

    Yes, that is the goal, to get rid of the inline styles that the script is injecting.


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
  •