SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 70

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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,764
    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,764
    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,702
    Mentioned
    101 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,764
    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,702
    Mentioned
    101 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,702
    Mentioned
    101 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,764
    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,702
    Mentioned
    101 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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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.

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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

  17. #17
    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

  18. #18
    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.

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 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
    A big THANK YOU goes out to Victor for introducing all of us to this cool new JavaScript Plugin!!




    Debbie

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

    Code:
        <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.

  21. #21
    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 O'B View Post
    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.

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

  23. #23
    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)
    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.

    Code:
        <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.

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

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    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.


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
  •