darkray16
09 Oct 2009, 09:51 PM
So I'm still new at Javascript and have been doing a lot of reading and tutorials on W3schools. So I decided to try adding javascript to a page that I created with html/css to make it look more dynamic. Basically I want some tabs to move when clicked.
The problem is nothing happens when I click on the tab. I tested and I've been able to change other styling aspects of the anchor, like I can set the display to "none". But when it comes to the "left" positioning, I can't seem to change the value of it. Eventually I want it to slide, but for now I'm just trying to get it to move at all on a click.
I have some css styling and html on the page but nothing complicated. I'm sure I'm forgetting something basic and important to make the events work but I can't seem to figure it out.
I can manipulate other aspects of the style but the "left" aspect doesn't seem to work at all when I try to change it.
Here is the html;
"<li ><a href="#" id="newstab" onclick="moveRight('newstab')"><span class="tabtext" >News</span></a></li>"
css;
"#newstab {
position:absolute;
display:block;
width:80px;
height:60px;
text-indent:-10000px;
background:url(tab-news.png) no-repeat;
top:48px;
left:0px;
}
#newstab:hover {
background:url(tab-news-hover.png) no-repeat;}"
and javascript;
"<script type="text/javascript" language="javascript">
var i=0
function moveRight(eleID)
{
i=+3;
document.getElementById(eleID).style.left=i;
}
</script>"
The problem is nothing happens when I click on the tab. I tested and I've been able to change other styling aspects of the anchor, like I can set the display to "none". But when it comes to the "left" positioning, I can't seem to change the value of it. Eventually I want it to slide, but for now I'm just trying to get it to move at all on a click.
I have some css styling and html on the page but nothing complicated. I'm sure I'm forgetting something basic and important to make the events work but I can't seem to figure it out.
I can manipulate other aspects of the style but the "left" aspect doesn't seem to work at all when I try to change it.
Here is the html;
"<li ><a href="#" id="newstab" onclick="moveRight('newstab')"><span class="tabtext" >News</span></a></li>"
css;
"#newstab {
position:absolute;
display:block;
width:80px;
height:60px;
text-indent:-10000px;
background:url(tab-news.png) no-repeat;
top:48px;
left:0px;
}
#newstab:hover {
background:url(tab-news-hover.png) no-repeat;}"
and javascript;
"<script type="text/javascript" language="javascript">
var i=0
function moveRight(eleID)
{
i=+3;
document.getElementById(eleID).style.left=i;
}
</script>"