Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm trying to activate a CSS transition with Javascript through DOM when a div object is clicked. I avoided jQuery and used JS on purpose in order to learn DOM (this is actually my first experiment with it). I implemented a standard solution: getting the elements' ListNode from the HTML document, then changing the className of the desired object. Yet, it does not seem to work properly (I'm obviously using Firefox).

Thank you in advance.

Here are the files.

<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>

<body>
<div class = "image"  onclick = "foo()"></div>
</body>
</html>

style.css

.transition {
    -moz-transition: 2s width;
    width: 150px;
    height: 100px;

}

.image {
    -moz-transition: 2s width;
    width: 100px;
    height: 100px;
    background-color: black;
}

script.js

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}

EDIT: Edited the code in order to make immediately visible the working solution.

share|improve this question
everything except the doctype should be inside the HTML element. – Wouter J May 15 '12 at 16:20
Stencil, look at code in your link, and look at the code you have posted. You're missing many elements. – aziz punjani May 15 '12 at 16:25
@Interstellar_Coder: First of all, thank you for your accurate answer. All I'm saying is that the example on w3schools shows that <!doctype html> has to be put outside the html tag. I'm indeed missing many elements because it was only meant to be a quick experiment. – Stencil May 15 '12 at 16:30
Stencil, Wouter is saying the same thing, everything except for the <!doctype html> element should be in the <html> tags, meaning the doctype should be outside of the html tags. – aziz punjani May 15 '12 at 16:33
@Stencil Quick experiment or not... you need to stick to the correct order of elements, otherwise you can't expect things to work. As Wouter J stated, you need to put all your tags (except the doctype) within the html tag. Within the html tag, you need a head and body tag. – Steve May 15 '12 at 16:33
show 1 more comment

3 Answers

up vote 2 down vote accepted

You're using getElementsByName, but you don't have an element with a name of image, instead you have an element with a class of image. You probably intended to use document.getElementsByClassName('image'). On a side note, the structure of your html page is incomplete, you need a <head> and <body> section, also your <html> opening tag is in the wrong place. 

<!doctype html>
<html> 
<head> 
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head> 
<body> 
    <div class = "image"  onclick = "foo()"></div>
</body> 
</html>
share|improve this answer
up vote 1 down vote

Try this in your javascript logic:

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}​
share|improve this answer
up vote 1 down vote

As Stencil mentioned everything should be inside HTML Tag.Similar kind of width animation could be easily achieved using jQUery

$('.image').animate({width: 250}, 500 );
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.