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

LJackson · 08-17-2009, 09:24 PM

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

eddjc · 08-17-2009, 09:42 PM

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

LJackson · 08-17-2009, 09:56 PM

cool thanks mate,

does this all go in the header?

LJackson · 08-17-2009, 10:08 PM

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

LJackson · 08-17-2009, 10:13 PM

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

eddjc · 08-18-2009, 12:15 AM

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

LJackson · 08-18-2009, 12:56 AM

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

eddjc · 08-18-2009, 12:27 PM

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

LJackson · 08-18-2009, 01:03 PM

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

eddjc · 08-18-2009, 01:32 PM

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

eddjc · 08-18-2009, 01:35 PM

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

LJackson · 08-18-2009, 01:56 PM

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

eddjc · 08-18-2009, 02:46 PM

no problem. Edd:-)

LJackson · 08-18-2009, 02:59 PM

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

eddjc · 08-18-2009, 03:23 PM

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