Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation can someone please assist me with getting my divs to display one after another?

    Hi All,

    i currently have 6 hidden divs/ul which appear on a rollover of other divs,

    what i want to try and achieve is:

    have the first div show and at timed intervals loop throught the divs until the user moves the cursor onto the shown div.

    dont know if this makes sence or not?

    here is my page

    if you hover over the 6 horizontical tabs the data changes.

    i can provide you with the php/css code if needed

    any help would be greatly appreciated as my js knowledge is no existance i can change pieces of code but thats about it.

    thanks
    Luke

  • #2
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    Hi there,

    you need a few functions and a setInterval:

    Code:
    var timer = window.setInterval("showNext();", 2000);
    ("showNext();" is the function called, 2000 is the time in milliseconds before it's called again - in this case 2 seconds)

    Then you need a showNext(); function:

    Code:
    var array = ["tab1", "tab2", "tab3", "tab4", "tab5"];
    
    function showNext() {
    
         //.... choose next item from array
         //.... hide currently visible div, show new div
    
    }
    You then need a function that starts and stops the timer:

    Code:
    function startTimer() {
          timer = window.setInterval("showNext();", 2000);
    }
    function stopTimer() {
          clearInterval(timer);
    }
    You of course have you're own function that shows the right info which I'll call showInfo(id);

    Finally, you need to set the onmouseover and onmouseout of the the tabs to show the right information and control the timer, so that it doesn't move off the tab you're hovering over:

    Code:
    <div onmouseover = "stopTimer(); showInfo('tab1');" onmouseout = "startTimer();">The Tab Title</div>
    Hope that helps!

    cheers
    Edd

  • Users who have thanked eddjc for this post:

    LJackson (08-18-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    cool thanks mate,

    does this all go in the header?

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    does the shownext function need to be in js? can it be done in php for example?

    not sure how to code js to increase the tab number do you know of a tutorial that can help me, i dont want to keep asking people to just do it for me althought it would be nice ...

    i'll search google see if i can find anything

    thanks mate
    Luke

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok i have tried this to show the next div
    Code:
         //.... choose next item from array
    for(i=0; i<array.length; i++){ 
          if(array[i] == theid){ 
                document.getElementById(theid).style.display="block"; 
          }else{ 
                document.getElementById(thearray[i]).style.display="none"; 
          } 
       } 
    }
    but it shows all the divs at the same time at page load? and none of them hide/show any ideas?

    thanks
    Luke

  • #6
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    hi there -

    if you do it in php, you do it all in php

    but no - javascript is best -

    here's an example of showNext() :

    Code:
    var position = 0;
    var array = ["div1", "div2", "div3", "div4", "div5"];
    
    function showNext() {
    
        if (position == array.length) {
    
               position = 0;
        }
        else {
       
              position++;
        }
    
        showTab(array[position]);
         
    }
    
    var currentDisplay = array[0];
    
    function showTab(id) {
    
         document.getElementById(currentDisplay).style.display = none;
         document.getElementById(id).style.display = block
    
         currentDisplay = id;
    }
    Something like that - there are loads of javascript tutorials on the web - google it!

    Hope that helps
    Cheers
    Edd

  • Users who have thanked eddjc for this post:

    LJackson (08-18-2009)

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate thanks for this...

    i must be doing something very wrong here as this one and several others that i found on google dont want to work for me

    here is my code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript">
    var timer = window.setInterval("showNext();", 2000);
    
    var position = 0;
    var array = ["div1", "div2", "div3", "div4", "div5"];
    
    function showNext() {
    
        if (position == array.length) {
    
               position = 0;
        }
        else {
       
              position++;
        }
    
        showTab(array[position]);
         
    }
    
    var currentDisplay = array[0];
    
    function showTab(id) {
    
         document.getElementById(currentDisplay).style.display = none;
         document.getElementById(id).style.display = block
    
         currentDisplay = id;
    }
    
    function startTimer() {
          timer = window.setInterval("showNext();", 2000);
    }
    function stopTimer() {
          clearInterval(timer);
    }
    </script>
    
    </head>
    
    <body>
    
    <div class="div1" style="background-color:#663300" onmouseover = "stopTimer(); showInfo('tab1');" onmouseout = "startTimer();">1</div>
    <div class="div2" style="background-color:#003300">2</div>
    <div class="div3" style="background-color:#9900CC">3</div>
    <div class="div4" style="background-color:#993300">4</div>
    <div class="div5" style="background-color:#FFCC00">5</div>
    </body>
    </html>
    is there anything wrong with this code to prevent it from working?

    thank you for spending your time helping me
    appreciate it
    Luke

  • #8
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    Hi there,

    the problem is in your divs:

    Code:
    <div class="div1" style="background-color:#663300" onmouseover = "stopTimer(); showInfo('tab1');" onmouseout = "startTimer();">1</div>
    <div class="div2" style="background-color:#003300">2</div>
    <div class="div3" style="background-color:#9900CC">3</div>
    <div class="div4" style="background-color:#993300">4</div>
    <div class="div5" style="background-color:#FFCC00">5</div>
    For a start, the items in the array are the divs that you want, at first to hidden, and then shown so in this case you need to create a pair of elements for each bit of information:

    Code:
    <div class = "tab" id = "tab1" onmouseover = "stopTimer(); showInfo('div1');" onmouseout = "startTimer();">Show Div 1</div>
    
    <div class = "info" id = "div1">Here is the information</div>
    So now when you roll over tab1, it should show div1. Note: whatever you do, you need to define the element using id = "blah" rather than class = "blah" as you've done here:

    Code:
    <div class="div3" style="background-color:#9900CC">3</div>
    
    <div id="div3" style="background-color:#9900CC">3</div>
    Hope this helps!

    Cheers
    Edd
    Last edited by eddjc; 08-18-2009 at 12:29 PM. Reason: a mistake

  • Users who have thanked eddjc for this post:

    LJackson (08-18-2009)

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Hi Edd,

    thanks for your continued help...

    but your gonna wish you didnt start

    here is my new code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript">
    var timer = window.setInterval("showNext();", 2000);
    
    var position = 0;
    var array = ["div1", "div2", "div3", "div4", "div5"];
    
    function showNext() {
    
        if (position == array.length) {
    
               position = 0;
        }
        else {
       
              position++;
        }
    
        showTab(array[position]);
         
    }
    
    var currentDisplay = array[0];
    
    function showTab(id) {
    
         document.getElementById(currentDisplay).style.display = none;
         document.getElementById(id).style.display = block
    
         currentDisplay = id;
    }
    
    function startTimer() {
          timer = window.setInterval("showNext();", 2000);
    }
    function stopTimer() {
          clearInterval(timer);
    }
    </script>
    
    </head>
    
    <body>
    
    <div class="tab" id = "tab1" onmouseover = "stopTimer(); showInfo('div1');" onmouseout = "startTimer();">Show Div 1</div>
    <div id="div1" style="visibility:hidden;">Here is the information</div>
    
    <div class="tab" id = "tab2" onmouseover = "stopTimer(); showInfo('div2');" onmouseout = "startTimer();">Show Div 2</div>
    <div id="div2" style="background-color:#003300; visibility:hidden">2</div>
    
    <div class="tab" id = "tab3" onmouseover = "stopTimer(); showInfo('div3');" onmouseout = "startTimer();">Show Div 3</div>
    <div id="div3" style="background-color:#9900CC; visibility:hidden">3</div>
    
    <div class="tab" id = "tab4" onmouseover = "stopTimer(); showInfo('div4');" onmouseout = "startTimer();">Show Div 4</div>
    <div id="div4" style="background-color:#993300; visibility:hidden">4</div>
    
    <div class="tab" id = "tab5" onmouseover = "stopTimer(); showInfo('div5');" onmouseout = "startTimer();">Show Div 5</div>
    <div id="div5" style="background-color:#FFCC00; visibility:hidden">5</div>
    </body>
    </html>
    which displays
    Show Div 1, 2 etc.... on the page but thats it, nothing appears when i rollover the "tabs" nor does the info appear from the timer?

    sorry for being a pain in the $%#@!!!

    thanks mate really appreciate this
    Luke

  • #10
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    Hi there,

    Sorry - I think in all the backing and forthing some messiness happened and the script just needed tidying up a bit (for e.g. in some instances the showInfo() function was called showTab()) also - you had style.display = none instead of style.display = "none" (CSS attributes are string based). I've done a little housekeeping and this should now work (it works in my browser anyway):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript">
    var timer = window.setInterval("showNext();", 2000);
    
    var position = 0;
    var array = ["div1", "div2", "div3", "div4", "div5"];
    
    function showNext() {
    
        if (position == array.length - 1) {
    
               position = 0;
        }
        else {
       
              position++;
        }
    
        showInfo(array[position]);
         
    }
    
    var currentDisplay = array[0];
    
    function showInfo(id) {
    
         document.getElementById(currentDisplay).style.display = "none";
         document.getElementById(id).style.display = "block";
    
         currentDisplay = id;
    }
    
    function startTimer() {
          timer = window.setInterval("showNext();", 2000);
    }
    function stopTimer() {
          clearInterval(timer);
    }
    </script>
    
    </head>
    
    <body>
    
    <div class="tab" id = "tab1" onmouseover = "stopTimer(); showInfo('div1');" onmouseout = "startTimer();">Show Div 1</div>
    <div id="div1" style="visibility:hidden;">Here is the information</div>
    
    <div class="tab" id = "tab2" onmouseover = "stopTimer(); showInfo('div2');" onmouseout = "startTimer();">Show Div 2</div>
    <div id="div2" style="background-color:#003300; visibility:hidden">2</div>
    
    <div class="tab" id = "tab3" onmouseover = "stopTimer(); showInfo('div3');" onmouseout = "startTimer();">Show Div 3</div>
    <div id="div3" style="background-color:#9900CC; visibility:hidden">3</div>
    
    <div class="tab" id = "tab4" onmouseover = "stopTimer(); showInfo('div4');" onmouseout = "startTimer();">Show Div 4</div>
    <div id="div4" style="background-color:#993300; visibility:hidden">4</div>
    
    <div class="tab" id = "tab5" onmouseover = "stopTimer(); showInfo('div5');" onmouseout = "startTimer();">Show Div 5</div>
    <div id="div5" style="background-color:#FFCC00; visibility:hidden">5</div>
    </body>
    </html>
    Cheers
    Edd

  • Users who have thanked eddjc for this post:

    LJackson (08-18-2009)

  • #11
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    whoops! one more prob:

    Code:
    <div class="tab" id = "tab5" onmouseover = "stopTimer(); showInfo('div5');" onmouseout = "startTimer();">Show Div 5</div>
    <div id="div5" style="background-color:#FFCC00; display:none;">5</div>
    as my code doesn't manipulate the visibility attribute - you need to set instead display:none in the style tag of your divs.

    Code:
    <div class="tab" id = "tab1" onmouseover = "stopTimer(); showInfo('div1');" onmouseout = "startTimer();">Show Div 1</div>
    <div id="div1" style="display:none;">Here is the information</div>
    
    <div class="tab" id = "tab2" onmouseover = "stopTimer(); showInfo('div2');" onmouseout = "startTimer();">Show Div 2</div>
    <div id="div2" style="background-color:#003300; display:none">2</div>
    
    <div class="tab" id = "tab3" onmouseover = "stopTimer(); showInfo('div3');" onmouseout = "startTimer();">Show Div 3</div>
    <div id="div3" style="background-color:#9900CC; display:none">3</div>
    
    <div class="tab" id = "tab4" onmouseover = "stopTimer(); showInfo('div4');" onmouseout = "startTimer();">Show Div 4</div>
    <div id="div4" style="background-color:#993300; display:none">4</div>
    
    <div class="tab" id = "tab5" onmouseover = "stopTimer(); showInfo('div5');" onmouseout = "startTimer();">Show Div 5</div>
    <div id="div5" style="background-color:#FFCC00; display:none;">5</div>
    Cheers
    Edd
    Last edited by eddjc; 08-18-2009 at 01:37 PM. Reason: a mistake

  • Users who have thanked eddjc for this post:

    LJackson (08-18-2009)

  • #12
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    wow thank you so much mate its working

    i really appreciate this...

    i am going to try and incorperate this into my other page to see if i can get it working there

    thank you
    Luke

  • #13
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    no problem. Edd:-)

  • #14
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok i have almost managed to get it working

    here is my code
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    link rel="stylesheet" type="text/css" href="css/indextest_css.css" />
    <
    title>Untitled Document</title>

    <
    script language="javascript">
    var 
    timer window.setInterval("showNext();"4000);

    var 
    position 0;
    var array = [
    "detail_info1""detail_info2""detail_info3""detail_info4""detail_info5""detail_info6"];

    function 
    showNext() {

        if (
    position == array.length 1) {

               
    position 0;
        }
        else {
       
              
    position++;
        }

        
    showInfo(array[position]);
         
    }

    var 
    currentDisplay = array[0];

    function 
    showInfo(id) {

         
    document.getElementById(currentDisplay).style.display "none";
         
    document.getElementById(id).style.display "block";

         
    currentDisplay id;
    }

    function 
    startTimer() {
          
    timer window.setInterval("showNext();"4000);
    }
    function 
    stopTimer() {
          
    clearInterval(timer);
    }
    </script>


    </head>

    <body>
    <div class="showcase">
            
                
                <ul>
                    <li class="content1" id = "tab1" onmouseover = "stopTimer(); showInfo('detail_info1');" onmouseout = "startTimer();">
                      Welcome
                      </li>
                            
                        <ul class="detail_1"> 
                              <li>
                              <div id="detail_info1" style="display:none;">
                            <p>Welcome To Kernow Connect,</p>
                            <p>A web site dedicated in assisting your shopping needs by 
                            presenting the very best the web has to offer at discount prices, 
                            with over fifty of the best online stores rated and separated into 
                            six easy to view  categories, online shopping has never been so easy.
                            </p>
                            </div>
                            </li> 
                        </ul>                        
                
                    <li class="content2" id = "tab2" onmouseover = "stopTimer(); showInfo('detail_info2');" onmouseout = "startTimer();">
                      Big Savings
                      </li>                
                
                        <ul class="detail_2"> 
                              <li>
                              <div id="detail_info2" style="display:none;"> 
                            <p>Big Savings:</p>
                            <p>Kernow Connect provides you with the resources to make big savings 
                            on your shopping, Our price comparison feature compares the best 
                            online stores for the cheapest price and produces a list of products ranging 
                            from the cheapest to the dearest with the prices clearly visible for all to see. 
                            In some instances you can make saving of over fifty percent off R.R.P 
                            which is a fantastic saving.</p>
                            </div>
                            </li> 
                        </ul>  
                
                
                    <li class="content3" id = "tab3" onmouseover = "stopTimer(); showInfo('detail_info3');" onmouseout = "startTimer();">
                      Best Sellers
                      </li>                    
                
                        <ul class="detail_3"> 
                              <li>
                              <div id="detail_info3" style="display:none;"> 
                            <p>Be Sure To Find What Your Looking For:</p>
                            <p>We here at Kernow Connect have tried to make online shopping 
                            as easy as possible for you, for each of our extensive range of 
                            categories on this site we have listed the Best Selling, 
                            New Releases and Most Gifted products helping you keep up to date 
                            with the latest trends, you will ever be short of a gift idea again.</p>

                            </div>
                            </li> 
                        </ul> 
               
                
                   <li class="content4" id = "tab4" onmouseover = "stopTimer(); showInfo('detail_info4');" onmouseout = "startTimer();">
                      Discount Codes
                      </li>
                    
                        <ul class="detail_4"> 
                              <li>
                              <div id="detail_info4" style="display:none;"> 
                            <p>Discount Codes:</p>
                            <p>Kernow Connect provides you with some fantastic Discount Codes 
                            which can be used at the stores check out to give you a discount 
                            on your purchase, these can include free delivery, to money off 
                            your order. All our discount codes from every store listed on this site 
                            can be found on the Discount page.</p>

                            </div>
                            </li> 
                        </ul> 
                
                    <li class="content5" id = "tab5" onmouseover = "stopTimer(); showInfo('detail_info5');" onmouseout = "startTimer();">
                      Product Search
                      </li>
                    
                        <ul class="detail_5"> 
                              <li>
                              <div id="detail_info5" style="display:none;"> 
                            <p>Product Search:</p>
                            <p>Our Product Search function allows you to search for a particular 
                            item, and it will return a list of stores which sells that item and 
                            the price of that item, this feature is still in its early stages of 
                            design and there are still a few errors with it which we hope to iron out soon. </p>

                            </div>
                            </li> 
                        </ul> 
                
                   <li class="content6" id = "tab6" onmouseover = "stopTimer(); showInfo('detail_info6');" onmouseout = "startTimer();">
                      Store Rating
                      </li>
        
                        <ul class="detail_6"> 
                              <li>
                              <div id="detail_info6" style="display:none;">
                            <p>Store Rating:</p>
                            <p>Kernow Connect gives you the opportunity to rate any of the stores 
                            listed on this site, there are a total of four categories in which you 
                            can rate a store, Value for money, Ease Of Use, Delivery Time, and Delivery 
                            Cost. each of these ratings are then added together and given an average 
                            rating which is then displayed next to the store so that you are given an 
                            indication of how well that store has faired in the past.</p>
                            </div>
                            </li> 
                        </ul> 
                
        </ul>
        </div>
    </body>
    </html> 
    and here is my css
    Code:
    /*category contain info*/
    ul, li, img {margin:0;padding:0;border:0;} 
    .showcase {
    float:left;
    position:relative;
    width:700px;
    height:300px;
    margin:0 auto;
    margin-top:10px;
    background-color:#FFFFFF;
    } 
    .showcase>img {
    position:relative;
    z-index:0;
    } 
    .showcase>ul {
    	position:absolute;
    	top:240px;
    	left:0px;
    	width:700px;
    	height:50px;
    	z-index:999;
    	background-color:#000000;
    } 
    .showcase ul li {
    list-style-type:none;
    position:absolute;
    } 
    .showcase ul li a {
    text-decoration:none;
    display:block;
    width:100%;
    height:100%;
    } 
    .showcase ul li a:hover {
    background-image:none!important;
    display:block;
    width:100%;
    height:100%;
    padding:0px;
    } 
    .showcase ul li:hover a {
    background-image:none !important;
    display:block;
    width:100%;
    height:100%;
    padding:0px;
    } 
    .showcase ul li a img {
    width:100%;
    height:100%;
    } 
    .showcase ul li.item1 {
    	left:7px;
    	width:110px;
    	height:40px;
    	top:5px;
    	z-index:1;
    	/*background-image:url(images/item-2.png);*/
    } 
    .showcase ul li.item1 a {
    height:40px;
    } 
    .showcase ul li.item1 a img {
    height:40px;
    } 
    .showcase ul li.item2 {
    	left:122px;
    	width:110px;
    	height:40px;
    	top:5px;
    } 
    .showcase ul li.item2 a {
    height:40px;
    } 
    .showcase ul li.item2 a img {
    height:40px;
    } 
    .showcase ul li.item3 {
    	left:237px;
    	width:110px;
    	height:40px;
    	top:5px;
    } 
    .showcase ul li.item3 a {
    height:40px;
    } 
    .showcase ul li.item3 a img {
    height:40px;
    } 
    .showcase ul li.item4 {
    	left:352px;
    	width:110px;
    	height:40px;
    	top:5px;
    } 
    .showcase ul li.item4 a {
    height:40px;
    } 
    .showcase ul li.item4 a img {
    height:40px;
    } 
    .showcase ul li.item5 {
    	left:467px;
    	width:110px;
    	height:40px;
    	top:5px;
    } 
    .showcase ul li.item5 a {
    height:40px;
    } 
    .showcase ul li.item5 a img {
    height:40px;
    } 
    .showcase ul li.item6 {
    	left:582px;
    	width:110px;
    	height:40px;
    	top:5px;
    } 
    .showcase ul li.item6 a {
    height:40px;
    } 
    .showcase ul li.item6 a img {
    height:40px;
    } 
    .showcase>ul>li>ul {
    display:none;
    position:absolute;
    z-index:999;
    } 
    .showcase>ul>li:hover>ul {
    display:block;
    z-index:999;
    } 
    .showcase>ul>li>ul li {
    width:685px;
    height:227px;
    overflow:hidden;
    background-color:#FFFFFF;
    z-index:1;
    /*border:2px solid gray;*/
    } 
    .showcase>ul>li>ul li img {
    float:left;
    } 
    .detail_1 {
    top:-230px;
    left:0px;
    } 
    .detail_2 {
    top:-230px;
    left:-115px;
    } 
    .detail_3 {
    top:-230px;
    left:-230px;
    } 
    .detail_4 {
    top:-230px;
    left:-345px;
    } 
    .detail_5 {
    top:-230px;
    left:-460px;
    } 
    .detail_6 {
    top:-230px;
    left:-575px;
    } 
    .detail_info .detail_info1 .detail_info2 .detail_info3 .detail_info4 .detail_info5 .detail_info6 {
    float:left;
    padding:5px;
    text-align:left;
    width:680px;
    height:225px;
    background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    } 
    .default_info {
    float:left;
    padding:12px;
    padding-top:20px;
    text-align:left;
    width:676px;
    height:221px;
    background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    } 
    .detail_header {
    float:left;
    border-bottom:2px solid #123456;
    margin-bottom:5px;
    width:210px;
    text-align:left;
    font-size:16px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    } 
    .detail_image{
    width:120px;
    float:left;
    text-align:left;
    margin-top:5px;
    margin-bottom:5px;
    }
    .detail_mini_header{
    float:left;
    width:85px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FF6600;
    padding-left:5px;
    }
    .detail_mini_detail{
    float:left;
    width:85px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#000000;
    padding-left:5px;
    }
    .detail_full_header{
    float:left;
    width:210px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FF6600;
    }
    .detail_full_detail{
    float:left;
    width:210px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#000000;
    }
    .showcase ul li.content1 {
    	left:7px;
    	width:90px;
    	height:20px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding:10px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    } 
    .showcase ul li.content1 a {
    height:40px;
    } 
    .showcase ul li.content1 a img {
    height:40px;
    } 
    .showcase ul li.content2 {
    	left:122px;
    	width:90px;
    	height:20px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding:10px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	} 
    .showcase ul li.content2 a {
    height:40px;
    } 
    .showcase ul li.content2 a img {
    height:40px;
    } 
    .showcase ul li.content3 {
    	left:237px;
    	width:90px;
    	height:20px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding:10px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	} 
    .showcase ul li.content3 a {
    height:40px;
    } 
    .showcase ul li.content3 a img {
    height:40px;
    } 
    .showcase ul li.content4 {
    	left:352px;
    	width:90px;
    	height:30px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding-left:10px;
    	padding-right:10px;
    	padding-top:3px;
    	padding-bottom:7px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    } 
    .showcase ul li.content4 a {
    height:40px;
    } 
    .showcase ul li.content4 a img {
    height:40px;
    } 
    .showcase ul li.content5 {
    	left:467px;
    	width:90px;
    	height:30px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding-left:10px;
    	padding-right:10px;
    	padding-top:3px;
    	padding-bottom:7px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	} 
    .showcase ul li.content5 a {
    height:40px;
    } 
    .showcase ul li.content5 a img {
    height:40px;
    } 
    .showcase ul li.content6 {
    	left:582px;
    	width:90px;
    	height:20px;
    	top:5px;
    	background-color:#FFFFFF;
    	padding:10px;
    	text-align:center;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	} 
    .showcase ul li.content6 a {
    height:40px;
    } 
    .showcase ul li.content6 a img {
    height:40px;
    }
    and here is my page

    as you can see the info is changing but its not in the correct place

    ive tried changing the css but no avail.

    any ideas

    thanks
    Luke

    p.s this is what it was like without the js

    cheers

  • #15
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    Hi there - it's a css problem.

    For some reason best known by yourself you've encased the divs in uls, then you've specified this in your CSS:



    Code:
    .showcase>ul {
    	position:absolute;
    	top:240px;
    	left:0px;
    	width:700px;
    	height:50px;
    	z-index:999;
    	background-color:#000000;
    } 
    .showcase ul li {
    list-style-type:none;
    position:absolute;
    } 
    
    .detail_1 {
    top:-230px;
    left:0px;
    } 
    .detail_2 {
    top:-230px;
    left:-115px;
    }
    I'm not exactly sure how but I think the fact that everything is absolute, and everything is a child of everything else is affecting the display. Better just to put all of your invisible divs completely out of the way - at the bottom of the file maybe, and then reposition them absolutely, using a unique class...

    so in html:


    Code:
      <div id="detail_info1" class = "info">//stuff</div>
      <div id="detail_info2" class = "info">//stuff</div>
      <div id="detail_info3" class = "info">//stuff</div>
    and in css:

    Code:
    .info 
    {
         position:absolute;
         display:hidden;
         top:10px;
         left:20px;
         
    }
    note that top and left only need to be declared once because each bit of text should appear in the same spot...

    [Hint: never try to be too clever with css!]

    Hope that helps!
    Edd


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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