growing and shrinking div in javascript

Write a simple DHTML page with one centered div, height 200px, width 200px, that is blue, on a white background.
When clicking on the div it should slowly grow to 500px (width) and then shrink to 200px, and repeat this motion until it is clicked again.
Do not use 3rd party JavaScript libraries in your solution.


LVL 2
SunScreenCertAsked:
Who is Participating?
 
GregTSmithConnect With a Mentor Commented:
A couple of small tweaks and this works for me in FireFox 3.0.1.
<html>
<head>
<script>
var page = {
  active: false,
  action: null,
  reference: null,
  speed: null, 
  initialize: function () {
    document.onclick = page.onClick;
  },
  onClick: function (e) {
    var o = (e) ? e.target : event.srcElement;
    if (o.id === 'box') {
      if (page.active) {
        page.action = 'shrink';
        page.active = false;
        page.speed = 20;
      }
      else {
        page.speed = 3;
        page.active = true;
        page.action = 'grow';
        page.reference = setInterval(page.adjust, 25);
      }
    }
  },
  adjust: function () {
    var o = page.find('box'), 
      w = o.style.width || '200px',
      i = parseInt(w.substring(0, w.length - 2), 10);
    switch (page.action) {
      case 'grow':
        i += page.speed;
        if (i >= 500) {
          page.action = 'shrink';
        }
        break;
      case 'shrink':
        i -= page.speed;
        if (i <= 200) {
          page.action = 'grow';
          if (!page.active) {
            clearInterval(page.reference);
          }
        }
        break;
    }
    o.style.width = i + 'px';
  },
  find: function (id) {
    return document.getElementById(id);
  }
}
window.onload = page.initialize;
</script>
<style>
* {
  margin:0;
  padding:0;
}
body {
  margin:100px 10px 10px 10px;
  text-align:center;
}
#box {
  background-color:blue;
  height:200px;
  margin:auto;
  width:200px;
}
</style>
</head>
<body>
<form id="form1">
 
<div id="box"></div>
 
</form>
</body>
</html>

Open in new window

0
 
GregTSmithConnect With a Mentor Commented:
10 minutes of playing around... of course it will be up to you to make this work in the browsers you need to support, but it's an idea... I've only tested in IE7.
<html>
<head>
<script>
var page = {
  active: false,
  action: null,
  reference: null,
  speed: null, 
  initialize: function () {
    document.onclick = page.onClick;
  },
  onClick: function () {
    var o = event.srcElement;
    if (o.id === 'box') {
      if (page.active) {
        page.action = 'shrink';
        page.active = false;
        page.speed = 20;
      }
      else {
        page.speed = 3;
        page.active = true;
        page.action = 'grow';
        page.reference = setInterval(page.adjust, 25);
      }
    }
  },
  adjust: function () {
    var o = page.find('box'), 
      w = o.style.width || '200px',
      i = parseInt(w.substring(0, w.length - 2), 10);
    switch (page.action) {
      case 'grow':
        i += page.speed;
        if (i >= 500) {
          page.action = 'shrink';
        }
        break;
      case 'shrink':
        i -= page.speed;
        if (i <= 200) {
          page.action = 'grow';
          if (!page.active) {
            clearInterval(page.reference);
          }
        }
        break;
    }
    o.style.width = i + 'px';
  },
  find: function (id) {
    return document.getElementById(id);
  }
}
window.onload = page.initialize;
</script>
<style>
* {
  margin:0;
  padding:0;
}
body {
  margin-top:100px;
  text-align:center;
}
#box {
  background-color:blue;
  height:200px;
  width:200px;
}
</style>
</head>
<body>
<form id="form1">
 
<div id="box"></div>
 
</form>
</body>
</html>

Open in new window

0
 
ddayx10Commented:
Well if the author is not going to comment on that I will...

Nice effort. Doesn't work cross browser but I still admire your work. I would help out and write one that works cross-browser, but it doesnt seem as though it would be used, and you deserve the points anyway!

:)
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
SunScreenCertAuthor Commented:
No please help me with the cross browser one
0
 
SunScreenCertAuthor Commented:
hey this is not working
0
 
SunScreenCertAuthor Commented:
hey i have firefox and it is not working
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.