SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with Max-Min Page

    Hi all!

    I am trying to make my slide-show page "fluid" by having a Max-Min Width setting similar to what Paul did in his 3-Column Layout.

    I had this working like a charm on my Home Page with a fluid middle column of just text, but when I apply the same concepts to my Slide-Show it doesn't work.

    Here is the URL to my test website...

    Debbie's Test Page

    Your help is appreciated!

    Thanks,


    Debbie

    P.S. I just added a copy of my Home Page, and the effect I'm trying to achieve.
    Last edited by DoubleDee; Mar 17, 2011 at 15:50. Reason: *** Updated the content of the URL above ***

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    The element is at its max with because you have given the ul inside a very large width which will stretch the div to the maximum before you start.

    Code:
    #slideshow .slides ul {
        width: 2880px;                /* Total Width = 960px/slide X 3 slides */
    }
    If you removed the width from the ul then the element would be fluid to a degree but only on first view or on refresh (and I'm guessing that the slideshow needs that width anyway).

    It will not change on browsers resize because the js is working out how many elements it needs to slide and is then writing a fixed width directly into the opening ul tag.
    e.g. here:
    Code:
    <h1>Testing Header</h1>
    	<div id="slideshow">
    		<div class="slides">
    			<ul style="position: relative; width: 600px; height: 288px; overflow: hidden;">
    				<li style="position: absolute; top: 0pt; left: 600px; display: none; z-index: 3; opacity: 1;" id="slide-one">
    					<h2>Slide one</h2>
    So I don't think its possible to be fluid with that version unless someone wants to rewrite it and I'm not sure how you could make it fluid very easily as I guess you need a fixed width to slide the panels correctly which is calculated at the start.

    I had a look around but couldn't see anything off the shelf that handled fluid width I'm afraid (but perhaps I just didn't find it.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    The element is at its max with because you have given the ul inside a very large width which will stretch the div to the maximum before you start.

    Code:
    #slideshow .slides ul {
        width: 2880px;                /* Total Width = 960px/slide X 3 slides */
    }
    Yeah, that is supposed required from the code I got offline.


    If you removed the width from the ul then the element would be fluid to a degree but only on first view or on refresh (and I'm guessing that the slideshow needs that width anyway).

    It will not change on browsers resize because the js is working out how many elements it needs to slide and is then writing a fixed width directly into the opening ul tag.
    e.g. here:
    Code:
    <h1>Testing Header</h1>
    	<div id="slideshow">
    		<div class="slides">
    			<ul style="position: relative; width: 600px; height: 288px; overflow: hidden;">
    				<li style="position: absolute; top: 0pt; left: 600px; display: none; z-index: 3; opacity: 1;" id="slide-one">
    					<h2>Slide one</h2>
    So I don't think its possible to be fluid with that version unless someone wants to rewrite it and I'm not sure how you could make it fluid very easily as I guess you need a fixed width to slide the panels correctly which is calculated at the start.
    I was afraid you were going to say that.

    So where do I go from here??

    I spent ALL OF THIS TIME trying to build an accessible home page that used good CSS techniques...

    I think my home page looks really good, and it is fairly adaptable, but if there is no way to get my slide-show to adjust widths, then what should I do??


    (The slide-show is supposed to be a *key* portion of my home page, because it allows me to broadcast important information to people, and increase their interest so they go deeper into my website.)


    I had a look around but couldn't see anything off the shelf that handled fluid width I'm afraid (but perhaps I just didn't find it.
    There must be some way to compromise...

    Thanks,


    Debbie

  4. #4
    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)
    Hi Debbie,

    I got pretty close by changing that .slides ul width that Paul mentioned. It will get rounding errors at some instances but you can prevent float drop with a negative margin on one of the LI to soak up rounding errors.

    As Paul also mentioned, the script will need to be adjusted. It is taking the the total number LI and dividing them into the available space then setting a pixel width. In this case it is making their width appx 1/3.

    I had already made the LI's width 1/3 but now the script takes that and makes it 1/3 again. You can change your viewport width and the refresh the page to see that with the BG color I set on the LI.

    I have the js disabled with comments for now though.
    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;
    }
    /* ----- 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%;/*100% divided by three*/
        background: #CDF;/*for testing widths w/ js turned on*/
    }
    #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>

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Debbie,

    I got pretty close by changing that .slides ul width that Paul mentioned. It will get rounding errors at some instances but you can prevent float drop with a negative margin on one of the LI to soak up rounding errors.
    With JavaScript disabled, your code appears to do what I want.

    However, and maybe I'm not understanding you, but I don't see how it is close with JavaScript on. With JavaScript on, all I see are these really narrow slides that won't expand outwards as the browser window width increases.


    As Paul also mentioned, the script will need to be adjusted. It is taking the the total number LI and dividing them into the available space then setting a pixel width. In this case it is making their width appx 1/3.
    I'm trying to look at the jquery.cycle.all.min.js file, but I honestly can't make heads or tails of the authors code.


    Debbie

  6. #6
    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
    However, and maybe I'm not understanding you, but I don't see how it is close with JavaScript on. With JavaScript on, all I see are these really narrow slides that won't expand outwards as the browser window width increases.
    Right, I explained that the script was making 1/3 of my 1/3 widths.
    I had already made the LI's width 1/3 but now the script takes that and makes it 1/3 again. You can change your viewport width and the refresh the page to see that with the BG color I set on the LI.
    You will need to take this to the JS forum and get someone to show you how to keep the script from setting dimensions. It is also setting heights along with the widths.

    If you can get it to stop setting dimensions then you can control them yourself via the css so it works in both cases, js on or off. Of course you have to adjust the % widths when you change the amount of LI. You have three in there now so their widths are set at 33.3%

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    If I cannot figure out how to adjust the JavaScript, then what would you propose?

    What would be the best compromise with having a middle column that remains "fluid" but a slide-show that is fixed-width?

    (If I make the slide-show the "minimum" size, then it would be really tiny and I'll have lots of white space on each side. But if I made it the "maximum" size, then it will either get chopped off or blow up my page for users with small monitors or larger screen resolutions.)

    I am planning on putting paragraphs below the slide-show in the middle column, so at least they will work, but if the JavaScript cannot be fixed, then I fear this could be a real sore thumb.

    Thanks,


    Debbie

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thread closed as discussion continued here.


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
  •