Results 1 to 5 of 5

Thread: <div> help

  1. #1
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default <div> help

    How do i use it? I'm a beginner at html5 so i want to know how do i use it with Javasccript inside a code to show nothing

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    Do you mean something like this? http://www.randomsnippets.com/2011/0...v-with-jquery/

    javacript code:
    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function toggleDiv(divId) {
       $("#"+divId).toggle();
    }
    </script>
    html:
    Code:
    <a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
    The content in this div will hide and show (toggle) when the toggle is pressed. 
    </div>

  3. #3
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mlegg View Post
    Do you mean something like this? http://www.randomsnippets.com/2011/0...v-with-jquery/

    javacript code:
    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function toggleDiv(divId) {
       $("#"+divId).toggle();
    }
    </script>
    html:
    Code:
    <a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">
    The content in this div will hide and show (toggle) when the toggle is pressed. 
    </div>
    Have you noticed my problem at http://www.dynamicdrive.com/forums/s...-function-call

    That is the reason i needed some <div> help so could you modify my latest code there and show me the problem and the solution

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    
    #slider {
      position:absolute;left:0px;top:0px;width:500px;height:400px;border:solid red 1px;
    }
    
    .slide {
      left:0px;top:0px;width:500px;height:400px;
    }
    
    </style>
    </head>
    <body>
    
     <div id="slider">
    
      <div class="slide" >
       <h1>Welcome to My Core</h1>
       <p>Start by choosing your name</p>
    
       <form action="">
       Username: <input type=" text" name="Username"><br>
       <p>Then choose your gender</p>
    
       <input type="radio" name="gender" value="Male">Male<br>
       <input type="radio" name="gender" value="Female">Female
      </form>
    
      <p>Press the Play button to play!<p>
    
      <button onclick="zxcSlider.GoTo('slider',1);" >Play</button>
     </div>
    
     <div class="slide" >
      Hello and welcome to World of My Core!<br />
      What would you like to do?<br />
      <button  onclick="zxcSlider.GoTo('slider',0);" >Inventory</button>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlider={
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.c+ud);
      }
     },
    
     GoTo:function(id,c){
      var o=this['zxc'+id];
      if (o&&o.ary[c]){
       this.Pause(id);
       if (c!=o.c){
        o.ud=c>o.c?1:-1;
        this.rotate(o,c);
       }
      }
     },
    
     init:function(o){
      var id=o.ID,ud=o.Direction,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
      if (p){
       var clds=p.childNodes,sz=p.offsetWidth,ary=[],z0=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         clds[z0].style.position='absolute';
         clds[z0].style.left=(ary.length>0?-sz:0)+'px';
         clds[z0].style.width=sz+'px';
         ary.push([clds[z0],'left']);
        }
       }
       o.id=id;
       o.ary=ary;
       o.lgth=ary.length-1;
       o.sz=sz;
       o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>10?hold:o.ms*4;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.c=0;
       p.style.overflow='hidden';
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>10?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,a){
      var c=o.c;
      this.Pause(o.id);
      o.auto=a===true;
      c=o.auto?c+o.ud:a;
      c=c>o.lgth?0:c<0?o.lgth:c;
      this.animate(o,o.ary[o.c],0,o.sz*(o.ud>0?1:-1),new Date(),o.ms);
      this.animate(o,o.ary[c],o.sz*(o.ud>0?-1:1),0,new Date(),o.ms,true);
      o.c=c;
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       o.auto&&nxt?oop.Auto(o.id,o.hold):null;
      }
     }
    
    
    }
    
    zxcSlider.init({
     ID:'slider',          // the unique ID name of the parent DIV.                 (string)
     Direction:-1,         //(optional) the slide direction, 1 = forward, -1 =back. (number, default = 1 = forward)
     Animate:1150,         //(optional) the animation duration in millisec.         (number, default = 1000)
     AutoHold:2500,        //(optional) the auto rotate delay in millisec.          (number, default = Animate*4)
     AutoStart:false       //(optional) the auto rotate start delay in millisec.    (number, default = no auto start)
    })
    /*]]>*/
    </script>
    
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks Vic but is that the only solution to my problem? i mean i want some more simplier way to do that

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •