Grow your CSS skills. Land your dream job.

Sidebar problem

  • # June 1, 2011 at 8:01 am

    I am getting so annoyed with things which should be simple just not working for me, now that i have added an image slideshow to the page, the sidebar refuses to sit next to it on the right.

    http://www.lsw-design.com/sgraphics3/study_trips.php

    Any ideas?

    # June 1, 2011 at 10:28 am

    Float .trips_content to the left.

    .trips_content{float: left;}
    # June 1, 2011 at 10:49 am

    Aha thanks, i tried floating the slideshows to the left, but completely forgot .trips_content.

    # June 1, 2011 at 11:48 am

    Another strange problem, I need to have 4 image slide shows on the page so i just tried copying the script code which was working for the first slide show, and changing the id’s in it for the new slide show, but for some reason the second works (Prague section) but nothing i do gets the first working again.

    How should i go about getting the 4 working on the same page?

    # June 1, 2011 at 1:40 pm

    Need.The.Code.

    Also I need a better explanation of the problem.

    Cheers mate, and good looking design!

    # June 1, 2011 at 3:37 pm

    The code for the slider is:

    var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index){
    if(index < $('#london_img img').length){
    var indexImage = $('#london_img img')[index]
    if(currentImage){
    if(currentImage != indexImage ){
    $(currentImage).css('z-index',2);
    clearTimeout(myTimer);
    $(currentImage).fadeOut(350, function() {
    myTimer = setTimeout("showNext()", 5000);
    $(this).css({'display':'none','z-index':1})
    });
    }
    }
    $(indexImage).css({'display':'block', 'opacity':1});
    currentImage = indexImage;
    currentIndex = index;
    $('#thumbs li').removeClass('active');
    $($('#thumbs li')[index]).addClass('active');
    }
    }

    function showNext(){
    var len = $('#london_img img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
    }

    var myTimer;

    $(document).ready(function() {
    myTimer = setTimeout("showNext()", 5000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
    var count = $(this).attr('rel');
    showImage(parseInt(count)-1);
    });
    });

    I have tried duplicating the code and changing the IDs to something else, but can’t get it to work.

    # June 4, 2011 at 6:41 am

    Can anyone help me with getting 4 working on the same page?

    # June 12, 2011 at 1:56 pm

    Is this not possible to do? i have asked on a few sites and had no one suggest how to do it.

    # June 12, 2011 at 6:41 pm

    Yes it is possible to load several sliders on the same page but not the way you have done it. In the following instance I was using the Coda Slider, so you would have to load the jquery and coda slider js files first then
    You would need something like this


    and in the Html put each slider in it’s own div named like above

    # June 15, 2011 at 3:20 pm

    Thanks for the suggestion, i have been trying it out. Does anyone know why the ULs with the tabs in is 292px wide? i have looked in the css and the js and i can’t find anything making the width 292px and i can’t get it to be any wider which i need to do.

    Any ideas?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".