CODEWITHSUNDEEP
javascripthtmlcss
skarchmit
skarchmit

Reputation: 459

Javascript not working on some element by id's

I'm attempting to make 3 lines do something: line 1 rotate 45deg and some translate line 1 opacity 0 line 1 rotate -45deg and some translate

JS Fiddle

<a href = "#"><div id = "menu" onclick="menu()">
              <div id = "lineOne">1</div>
              <div id = "lineTwo">1</div>
              <div id = "lineThree">1</div>
              </div>
</a>

function menu()
{
    //Show Differnet Button
    document.getElementById('lineOne').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)";
    document.getElementById('lineTwo').style.opacity = ".3";
    document.getElementById('lineThree').style.WebkitTransform = "rotate(-45deg) translate3d(10,-10px,0)";
}

#lineOne, #lineTwo, #lineThree, #line4, #line5, #line6
{
    margin-top: 6px;
    margin-left: 30px;
    position: relative;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 7px !important;
    background: black;
    color: rgba(1,1,1,0) !important;
}

My code on JS Fiddle is above, and the only result I am getting is the opacity and the first one rotates and translates. Nothing else. I completely ignores the rest. What can I do?

Upvotes: 0

Views: 110

Answers (2)

Derek
Derek

Reputation: 3435

You are missing a px in your transform.

document.getElementById('lineThree')
        .style.WebkitTransform = "rotate(-90deg) translate3d(10px,-10px,0)";

translate3d requires length units.

Upvotes: 5

Jonathan M
Jonathan M

Reputation: 17451

There were lots of problems. Here's a working fiddle: http://jsfiddle.net/FK499/42/

First you needed to tell it to put the js in the <head> by setting it to "No wrap - in <head>"

Second, your function wasn't closed with a }.

Third, you didn't need the anchor tag.

Fourth, you were missing the px in the last transform.

HTML:

    <div id = "menu" onclick="menu();">
                <div id = "lineOne">1</div>
                <div id = "lineTwo">1</div>
                <div id = "lineThree">1</div>
    </div>

and the js:

function menu()
        {
        //Show Differnet Button
        document.getElementById('lineOne').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)";
        document.getElementById('lineTwo').style.opacity = ".3";
        document.getElementById('lineThree').style.WebkitTransform = "rotate(-45deg) translate3d(10px,-10px,0)";
        }

Upvotes: 4

Related Questions