0

hi,

I am a newbie in programming...recently i have developed a very simple (probably too simple!!!) javascript code that trims strings and shows animation....the code should be self explanatory....and i have included comments in the snippet so everyone understands what i did....any comments appreciated....just save the txt file as .html and double click to see the output in browser...

Attachments
<html>
 
 


<!--
 
// Basic trim() function version 1.0. A Faizza007 Initiative.
 
// This is a function for running trimming operation on a given string.
 
// Right now it recognises one leading and one trailing whitespace in a string.
 
// support for more than one whitespaces would be done in subsequent versions.
 
// it could have been done in one function...but i splitted it in three to make it simple....(i guess!!!)-->
 
 
 
 
<script language="javascript"> 
 
 
   function trim(string){
 
      
       var checkVar=string.toString();
 
 
       //document.write("checkVar is " + checkVar + "<br>");
 
       //document.write("charAt(0) in  checkVar is " + checkVar.charAt(0) + "<br>")
 
       
       // check for leading and trailing spaces......
 
 
 
       var leadFlag;
 
       var trailFlag;
 
 
       if(checkVar.charAt(0)==' '){
 
            leadFlag=true;
 
           //document.write("inside leadflag the value is : " +leadFlag + "<br>");
            
    
       }
 
  
       if(checkVar.charAt(checkVar.length-1)==' '){
 
           trailFlag=true;
 
       }
    
 
 
      // calling apropriate padding function based on leading and trailing space existance........
 
 
           if(leadFlag==true && trailFlag==true) // both leading and trailing space exist, no need to check more.....
                    
          {
 
              // calling bothTrim() function
 
                 var fnlVar= bothTrim(checkVar);
 
                 return fnlVar;
 
 
          }else if(leadFlag==true || trailFlag==true){
        
 
          // either one has a whitespace, lets check specifically which one has the space......
 
 
         
 
      
           if(leadFlag==true){
 
                // found our whitespace....calling leadTrim() function
 
 
                     var fnlVar=leadTrim(checkVar);
 
 
                //document.write("the value of leadflag is " +leadFlag + "<br>");
 
 
                  return fnlVar;
 
 
 
           }else
           
 
                 {
               
               // calling trailTrim() function......
 
 
 
                      var fnlVar= trailTrim(checkVar);
 
 
                        return fnlVar;
 
 
 
 
                 }
 
 
 
            
 
 
 
       }
 
 
 
           
          return checkVar;
 
 
   }
 
 
  // function for triming both side of the string........
 
   function bothTrim(trString) {
 
    var str=trString.toString(); // converting tostring again just to be cautious.....
 
 
     var finalString=str.substr(1,str.length-2); 
 
 
     return finalString;    
 
 
 
 
 
 
  }
 
 
   // function for leading spaces.........
 
 
 
    function leadTrim(trString){
 
 
     var str=trString.toString();
 
 
     var finalString=str.substr(1,str.length-1);
 
 
      //document.write("final var " +finalString + "<br>");
 
 
      return finalString;
 
 
 
 
   }
 
 
 
  // function for trailing spaces......
 
 
 
  function trailTrim(trString){
 
    var str=trString.toString();
 
    var finalString=str.substr(0,str.length-1);
 
 
     return finalString;
 
  }



 
 
function func(){
 
 
var bb=document.getElementById('div1').innerHTML;
 
var hh=trim(bb.toString());
 
//var kk="hala";
 
 
if(hh=='Open'){
 
   //document.getElementById('cont1').style.display='None';


   setTimeout('animateClose1()',10);
    

   
 
 

 
}else if(hh=='Close'){



   //document.getElementById('cont1').style.display='';


   setTimeout('animateOpen1()',10);


   


}
 
 
} 
 
  function animateOpen1(){

  document.getElementById('cont1').style.height=50;
 
  document.getElementById('cont1').style.display='';



  setTimeout('animateOpen2()',100);





 }




 function animateOpen2(){

  document.getElementById('cont1').style.height=100;

  setTimeout('animateOpen3()',100);





 }



 function animateOpen3(){

  document.getElementById('cont1').style.height=150;
  document.getElementById('div1').innerText='Open';
  

 }




function animateClose1(){

  document.getElementById('cont1').style.height=100;
 
  //document.getElementById('cont1').style.display='';



  setTimeout('animateClose2()',100);



}



function animateClose2(){

  document.getElementById('cont1').style.height=50;
 
  //document.getElementById('cont1').style.display='';



  setTimeout('animateClose3()',100);



}


function animateClose3(){

  document.getElementById('cont1').style.height=0;
 
  document.getElementById('cont1').style.display='none';


  document.getElementById('div1').innerText='Close';


  



}


 
 
 
 
 
</script>
 
 
<body>
 
 
<div id="div1" 
 
             style="width:150px;
             height:40px;
             top:0px;
             left:0px;
             background:#a6bbcd;
             cursor:Hand;
             text-align:Center;
             overflow:hidden;" onClick="func();">
 
 
   Open  </div>
 
 
 <div id="cont1" style="width:150px;
             height:150px;
             top:0px;
             left:0px;
             background:pink;"> This is a test of content
 
 </div>
 
 
 
</body>
 
 
</html>
2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by faizza007
0

It's nice that you are trying to learn more. From looking at your code, here is my comment...

1) I believe you are coding it on IE only. One obvious difference that this code won't work on FF is that the value of style pixel does not have 'px' at the end.
2) Your variable names do not explain themselves. This would be difficult for others who want to read your code.
3) Even though you said you have included comments, your comments are too brief and not really helpful. Furthermore, some functions have no comment at all. Documenting your code means anyone who looks at your code can understand what and how your function works without going through the function.
4) You could merge all your animation functions into one or two. Your animation function is not useful and will need a lot more if you want more steps in it.
5) Your code contains too many hard-coded variables -- looks for specific div IDs. This won't be extensible and/or flexible enough for other purposes in the future.
6) You use a div innerHTML to trigger the animation which is very weird to me. You could use a button to trigger the animation function instead.

PS: I do not know why you need to keep hiding & showing your display?

Below is a sample of what I would attempt to merge all your animation functions into one. Just a sample anyway... You could modify it the way you want it to your purpose...

// your code
function animateOpen1() {
  document.getElementById('cont1').style.height=50;
  document.getElementById('cont1').style.display='';
  setTimeout('animateOpen2()',100);
}

function animateOpen2() {
  document.getElementById('cont1').style.height=100;
  setTimeout('animateOpen3()',100);
}

function animateOpen3() {
  document.getElementById('cont1').style.height=150;
  document.getElementById('div1').innerText='Open';
}

function animateClose1() {
  document.getElementById('cont1').style.height=100;
  //document.getElementById('cont1').style.display='';
  setTimeout('animateClose2()',100);
}

function animateClose2() {
  document.getElementById('cont1').style.height=50;
  //document.getElementById('cont1').style.display='';
  setTimeout('animateClose3()',100);
}

function animateClose3() {
  document.getElementById('cont1').style.height=0;
  document.getElementById('cont1').style.display='none';
  document.getElementById('div1').innerText='Close';
}

// =======================

// sample code
// Display an animation of growing style size of an element from 0px
// up to 150px, and each step is 50px. Ignore if the
// incoming element is not found.
//
// @param  contentDivId  string which is the target element for
//                       changing style size
// @param  height  integer which is the assigned style size
function animationOpen(contentDivId, height) {
  var el = document.getElementById(contentDivId)
  if (el) {  // only do it if the element exists
    height = parseInt(height, 10)  // ensure integer because of calling from setTimeout()
    el.style.height = height+"px"
    height += 50
    if (height>150) {
      height = 150
      window.setTimeout("animationClose('"+contentDivId+"', "+height+")", 10)
    }
    else {
      window.setTimeout("animationOpen('"+contentDivId+"', "+height+")", 100)
    }
  }
}  // animationOpen(string, int)

// Display an animation of shrinking style size of an element from 150px
// down to 0px, and each step is 50px. Ignore if the
// incoming element is not found.
//
// @param  contentDivId  string which is the target element for
//                       changing style size
// @param  height  integer which is the assigned style size
function animationClose(contentDivId, height) {
  var el = document.getElementById(contentDivId)
  if (el) {  // only do it if the element exists
    height = parseInt(height, 10)  // ensure integer because of calling from setTimeout()
    el.style.height = height+"px"
    height -= 50
    if (height<0) {
      height = 0
      window.setTimeout("animationOpen('"+contentDivId+"', "+height+")", 10)
    }
    else {
      window.setTimeout("animationClose('"+contentDivId+"', "+height+")", 100)
    }
  }
}  // animationClose(string, int)

// when you use it, just put the function onclick on a button in HTML as...
// onclick="animationOpen('cont1', 50)"

Edited by Taywin: n/a

0

Hey..thank you for your comment...actually i just wanted to see if i am able to do some coding that works or not. i agree i should have used meaningfull variable naming. my animation function is too naieve(i know!!). i thought if i could animate one div based on another div click..the next step would b to make a custom accordion.(which i tried to use in C# and it does not work very well.)...any way thanks for ur comments and the revised code....

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.