Thread: help with code please, trying to get the tab colour to change.

**ljackson** · 18 Aug 2009 @ 21.40

Hi All,

ok i am new to js and know very little

i am currently working on having divs display one after another which was working fine i then tried to make it so the tab at the bottom would change colour if its relivant info is being shown which is where the problem comes in, now nothing is working

i was told about safari's debugging tool but am unable to find it?

can someone please look through this code and see if they can see the error?

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" />
<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"];
var tabs = ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6"];

var currentDisplay = 0;
var currentTab = 0;

function showNext() {

    if (position == array.length - 1) {

           position = 0;
    }
    else {
   
          position++;
    }

    showInfo(position);
     
}

var currentDisplay = array[0];

function showInfo(id) {
     
    currentT = document.getElementById(tabs[currentTab]);
    currentD = document.getElementById(array[currentDisplay]);

     tab = document.getElementById(tabs[id]);
     div = document.getElementById(array[id]);

     currentD.style.display = "none";
     currentT.style.background = "white";
     
    div.style.display = "block";
    tab.style.background = "green";

     currentDisplay = id;
    currentTab = id;
}

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

<style type="text/css">
.container{
float:left;
position:relative;
width:690px;
height:300px;
margin:0 auto;
margin-top:10px;
background-color:#FFFFFF;
border:2px solid #FF6600;
padding:5px;
}
.info_container{
float:left;
position:relative;
width:675px;
height:220px;
margin:0 auto;
background-color:#99FF00;
border:2px solid #FF6600;
padding:5px;
}
.info 
{
     position:absolute;
     display:hidden;
     top:5px;
     left:10px;
     
}

.content1
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#009900;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:16px;
    padding-right:15px;
}
.content2
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#FFFFFF;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:15px;}
.content3
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#FFFFFF;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:14px;
    padding-right:14px;}
.content4
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#FFFFFF;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:15px;}
.content5
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#FFFFFF;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:15px;}
.content6
{
    float:left;
    margin-right:5px;
    top:100px;
    background-color:#FFFFFF;
    color:#000000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:16px;
}
.tab_strip{
float:left;
width:675px;
background-color:#000000;
height:40px;
padding:5px;
margin-top:10px;
border: 2px solid #000000;
}
</style>
</head>

<body>
<div class="container">
<div class="info_container">
    
  <script language="javascript">
  showInfo("display_info1");
  </script>
    
    

  <div id="detail_info1" class = "info" 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>
  
  <div id="detail_info2" class = "info" 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>
  
  <div id="detail_info3" class = "info" 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>
  
  <div id="detail_info4" class = "info" 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>
  
  <div id="detail_info5" class = "info" 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>
  
  <div id="detail_info6" class = "info" 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>
  
  </div>    
  
    <div class="tab_strip">
    <div class="content1" 
    id = "tab1" 
    onmouseover = "stopTimer(); showInfo('detail_info1');" 
    onmouseout = "startTimer();">
    Welcome
    </div>
    
    <div class="content2" 
    id = "tab2" 
    onmouseover = "stopTimer(); showInfo('detail_info2');" 
    onmouseout = "startTimer();">
    Big Savings
    </div>
    
    <div class="content3" 
    id = "tab3" 
    onmouseover = "stopTimer(); showInfo('detail_info3');" 
    onmouseout = "startTimer();">
    Best Sellers
    </div> 
    
    <div class="content4" 
    id = "tab4" 
    onmouseover = "stopTimer(); showInfo('detail_info4');" 
    onmouseout = "startTimer();">
    Discount Codes
    </div>    
     
    <div class="content5" 
    id = "tab5" 
    onmouseover = "stopTimer(); showInfo('detail_info5');" 
    onmouseout = "startTimer();">
    Product Search
    </div>    
    
    <div class="content6" 
    id = "tab6" 
    onmouseover = "stopTimer(); showInfo('detail_info6');" 
    onmouseout = "startTimer();">
    Store Rating
    </div>  

    </div>
</body>
</html>

thanks
and my page
Untitled Document

**ljackson** · 18 Aug 2009 @ 23.26

ok i have found a piece of info which seed to of preventing it from working

Code:

var currentDisplay = array[0];

which was there before and it was working? but never mind it seems to be working ok,

a couple of questions,

how do i get the first array value e.g detail_info1 to show up when the page loads, at the mo the text area loads up blank and then the second item is shown it seems to skip the first one?

also something else which was working before i changed the tab colour was when the user hovers over one of the "tabs" the relivant info would appear now when someone hovers over one no info is being displayed?

any ideas

thanks
Luke

**ljackson** · 18 Aug 2009 @ 23.37

ok have managed to get the tabs to show the data on rollover

just need to get the first piece of info to show at page load instead of balnk for 4 seconds?

any ideas
thanks
Luke

**CloudedVision** · 19 Aug 2009 @ 02.49

Well, you have an interval set up every 4 seconds, so you just need the function to run once before the interval:

Code:

function startTimer() {
showNext();
      timer = window.setInterval("showNext();", 4000);
}

**ljackson** · 19 Aug 2009 @ 06.20

hi CV,

i have tried what you suggested but for some reason it prevents everything else from working and im not getting anything at all

i even tried showNext(0); but nothing.

any ideas?

thanks
mate

edit
===

you replied at 3.49am wow mate thats impressive :D

**CloudedVision** · 19 Aug 2009 @ 21.07

Different timezone. It was only 10pm for me lol

Well, it sounds like you have a syntax error in your javascript. Is firefox reporting any?

**ljackson** · 19 Aug 2009 @ 21.14

ah i see

, thought that was a bit unusual.

um the only validation error im getting as a result to js is

required attribute "type" not specified in the following
<script language="javascript">

is there a specific tool in ff to debug javascript?

thanks mate
Luke

**ljackson** · 19 Aug 2009 @ 21.40

ok i have changed it to type = text/javascript and added the showNext() line but nothing works again?

here is all my js code

Code:

<script type="text/javascript">
var position = -1;
showNext();
var timer = window.setInterval("showNext();", 4000);
var array = ["detail_info1", "detail_info2", "detail_info3", "detail_info4", "detail_info5", "detail_info6"];
var tabs = ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6"];

var currentDisplay = 0;
var currentTab = 0;

function showNext() {

    if (position == array.length - 1) {

           position = 0;
    }
    else {
   
          position++;
    }

    showInfo(position);
     
}

function showInfo(id) {
     
    currentT = document.getElementById(tabs[currentTab]);
    currentD = document.getElementById(array[currentDisplay]);

     tab = document.getElementById(tabs[id]);
     div = document.getElementById(array[id]);

     currentD.style.display = "none";
     currentT.style.background = "white";
     
    div.style.display = "block";
    tab.style.background = "orange";

     currentDisplay = id;
    currentTab = id;
}

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

it now validates ok

any ideas mate?
thanks

**CloudedVision** · 19 Aug 2009 @ 23.23

I believe the problem is that showNext() is being called before its defined. I changed showNext() to window.onload = showNext; Try that out.

Code:

<script type="text/javascript">
var position = -1;
window.onload = showNext;
var timer = window.setInterval("showNext();", 4000);
var array = ["detail_info1", "detail_info2", "detail_info3", "detail_info4", "detail_info5", "detail_info6"];
var tabs = ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6"];

var currentDisplay = 0;
var currentTab = 0;

function showNext() {

    if (position == array.length - 1) {

           position = 0;
    }
    else {
   
          position++;
    }

    showInfo(position);
     
}

function showInfo(id) {
     
    currentT = document.getElementById(tabs[currentTab]);
    currentD = document.getElementById(array[currentDisplay]);

     tab = document.getElementById(tabs[id]);
     div = document.getElementById(array[id]);

     currentD.style.display = "none";
     currentT.style.background = "white";
     
    div.style.display = "block";
    tab.style.background = "orange";

     currentDisplay = id;
    currentTab = id;
}

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