4335 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 more
Reaper-Media says

I don’t usually venture over into the forest, but i need a bit of help with some javascript i am creating for my new site. It’s for a set of tabs, and i am having trouble with getting the click event to work proberly. The tabs are built with tables, to make a 3d button effect.

The page is here: http://test-server.reaper-media.com/source/pages/home.html (i know it isn’t a full html page, it’s just the way i’m stucturing my site with php, this page is just the content of the home page )

Basically, i cant get the click event to work properly. It’s supposed to change the background colors, and div style and a javascript variable. The variable doesn’t even change!

Javascript Code:
var currentTab = 1
totalTabs  = 3

function rollOverTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style2" 
        document.body.style.cursor = 'pointer'
    }
}

function rollOutTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style1" 
        document.body.style.cursor = 'default'
    }
}

function clickTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style2" 
        cellDiv = "tab" + tabID + "table" 
        for(i=0;i<totalTabs;i++){
            currentCell = "tab" + i + "table" 
            document.getElementById(currentCell).style.backgroundColor = "#CCCCCC"        
        }
        document.getElementById(cellDiv).style.backgroundColor = '#6591A3'
        document.body.style.cursor = 'default'
        currentTab = tabID
    }
}
Code For Buttons:
<table cellspacing="0" border="0" cellpadding="1" width="100%">
            <tr>
              <td bgcolor="#6591A3" onmouseover="rollOverTab(1)" id="tab1table" onmouseout="rollOutTab(1)" onclick="clickTab(1)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                    <tr>
                      <td height="29"><div class="style2" id="tab1text" align="center">Stock Flash Items</div></td>
                    </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="5"> </td>
              <td bgcolor="#CCCCCC" onmouseover="rollOverTab(2)" id="tab2table" onmouseout="rollOutTab(2)" onclick="clickTab(2)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                      <tr>
                        <td height="29"><div class="style1" id="tab2text" align="center">Latest Designs </div></td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="5"> </td>
              <td bgcolor="#CCCCCC" onmouseover="rollOverTab(3)" id="tab3table" onmouseout="rollOutTab(3)" onclick="clickTab(3)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                      <tr>
                        <td height="29"><div class="style1" id="tab3text" align="center">Latest Designs </div></td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="300"> </td>
            </tr>
          </table>
Thanks in advance Guys! :)

Reaper

382 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
blabus says

I believe you may need to change this:

onmouseout=”rollOutTab(3)”

to this:

onmouseout=”javascript:rollOutTab(3)”

Not positive, but give it a try.

4335 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 more
Reaper-Media says
I believe you may need to change this:

onmouseout=”rollOutTab(3)”

to this:

onmouseout=”javascript:rollOutTab(3)”

Not positive, but give it a try.

nope, the other javascript commands worked, and it was definately calling the code, i checked with an alert()

And i sorted it anyway, the “for” command was messing it up somehow :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by