Animated div textbox?

[cdmlb hotmail com]

I'm tring to make Animated div textboxes using the litle OOP that javascript has but ending up with some dead ends. Yeah I have no clue what I'm doing went it comes to OOP with javascript Any hints on what I could do to make a box like this in OOP us jscript? It's easy to do when it's not animated, don't even need OOP. Only reason I need OOP when animted is to keep track of the box being open and closed to animate for each height of each box, but since not sure how to do the OOP using jscript, it's behaving weird. LIVE DEMO NOT ANIMATED http://cdmlb.homelinux.net/sites/wip/projects/prog_script/javascript/text_block/text_block.html LIVE DEMO ANIMATED NOT WORING TO WELL PLAY AROUND WITH EACH BOX A FEW TIMES THE CODE ON THIS PAGE IS THE OOP VERSION< BUT FOR THE DEMO TRIED TO DO IT WITH NO OOP, BECAUSE OOP SUCKS WITH JSCRIPT http://cdmlb.homelinux.net/sites/wip/projects/prog_script/javascript/anim_text_block/anim_text_block.html

---

HTML <div id="main1" class="main">         <div id="header1" class="header">                 <a href="javascript:block1.DisplayBlock;" class="title">CLICK HERE TO OPEN AND CLOSE<⁄a>         <⁄div>         <div id="body1" class="body">                 <p id="content1" class="content">                         SOME TEXT GOES HERE.                 <⁄p>         <⁄div>         <div id="footer1" class="footer">         <⁄div> <⁄div>

---

CSS .main {         border: blue thin outset; &

[cdmlb hotmail com]

No one not even going to look at it thanks? cdmlb

[Shog9 0]

A couple quick notes (don't have time to look it over properly just now):

cdmlb@hotmail.com wrote:

AnimBlock.prototype.DisplayBlock = function()

Since you're adding this function to the prototype, you really don't need to do it every time an object of that type is instantiated. You can put all those outside of the constructor function and it'll work just fine.

cdmlb@hotmail.com wrote:

if(this.document.getElementById(this.content).style.display == "block")

You never assign anything to this.document, so it doesn't exist. In your demo page, the functions are not called as part of an object, and so this is actually a reference to the default scope, which does include document (though prefixing it with this is redundant).

cdmlb@hotmail.com wrote:

setTimeout(function(){CloseBlock();}, this.speed); }

There's no exit condition - you need to stop calling CloseBlock() at some point... ;) OOP in JS is easy enough, but you can't think about it the same way you do OOP in most other languages.

---- Scripts i've known... CPhog 0.9.9 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.1 - printer-friendly forums

[cdmlb hotmail com]

yeah I know if have to put an if statment at some time for the open and close functions just took them out for not until I can get the oop part of it working first cdmlb

[cdmlb hotmail com]

I think I got the OOP working better now, but I'm dumb and can't get it to animate any comments? block1 = new AnimBlock("body1", "content1", 200); block2 = new AnimBlock("body2", "content2", 200); block3 = new AnimBlock("body3", "content3", 200); AnimBlock.prototype.DisplayBlock = DisplayBlock; AnimBlock.prototype.OpenBlock = OpenBlock; AnimBlock.prototype.CloseBlock = CloseBlock; function AnimBlock(body, content, speed) {     this.body = body;     this.content = content;     this.speed = speed;     this.size = 0; } function DisplayBlock() {     if(document.getElementById(this.content).style.display == "block")     {         document.getElementById(this.body).style.height = "0px";         document.getElementById(this.body).style.padding = "0px";         document.getElementById(this.content).style.display = "none";         this.CloseBlock();     }     else     {         this.OpenBlock();         document.getElementById(this.content).style.display = "block";         document.getElementById(this.body).style.padding = "20px";         document.getElementById(this.body).style.height = "auto";     }          this.size = 0; } function OpenBlock() {     if(this.size <= 100)     {         document.getElementById(this.body).style.height = this.size+"px";         this.size++;         setTimeout(function(){this.OpenBlock();}, this.speed);     } } function CloseBlock() {     if(this.size >= 0)     {         document.getElementById(this.body).style.height = this.size+"px";         this.size--;         setTimeout(func

[Shog9 0]

cdmlb@hotmail.com wrote:

this.size = 0;

Should be set to 100 when opening.

---- Scripts i've known... CPhog 0.9.9 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.1 - printer-friendly forums