www.webdeveloper.com
Results 1 to 3 of 3

Thread: simple issue (i think) with setting a width in javasscript.

  1. #1
    Join Date
    Nov 2013
    Posts
    9

    simple issue (i think) with setting a width in javasscript.

    i'm trying to set a width dependant on screen sizes to a sliding tab on my site, so it will work on mobile devices but am having some issues with it's width.

    I'm fairly certain the issue requires changing one line in the .js (line 105 in tab_slide.js) from
    Code:
    slide_params[opt.tab_slide_position] = calc_width + "%";
    to
    Code:
    'slide_params[opt.tab_slide_position] = - (the value i want to set) ;'
    i've added this to the CSS make it expand further on smaller screen sizes

    Code:
    @media all and (max-width: 1200px) {
        #tab_slide {
        left: 0px;
        height: auto !important; 
        width: 65% !important;
        }
        }
    
    @media all and (max-width: 1200px) {
        #tab_slide_include {
        padding: 0px;
        }
        }
    
    @media all and (max-width: 1200px) {
        .tab_text_bg {
        top: 25%;
        }
    unfortunately the slider starts already half opened on a small screen,

    but i cant work out what code/value i should put here to make start closed, open 60% and then close back to its original position on screens under 1200px width.

    i've been playing around with this one problem for 2 weeks and cant work it out so would desperately appreciate some help making the code work.

    here's a link for anyone who'd like to see what's going on: focallocal.org.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tab {
      position:absolute;left:0px;top:100px;width:0px;height:100px;background-Color:red;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tab" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Animator (21-January-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSimpleAnimator={
    
     Animate:function(o){
      var oop=this,mde=o.Mode,op=zxcSimpleAnimator['zxc'+o.ID+mde]||oop.init(o.ID,mde),dly=o.Delay;
      if (isFinite(dly)&&dly>0){
       o.Delay=-1;
       o.to=setTimeout(function(){ oop.Animate(o); },dly);
      }
      else if (op.obj){
       var to=o.Size,ms=o.Animate,o=op;
       clearTimeout(o.to);
       if (o){
        to=typeof(to)=='string'&&to.indexOf('%')>0?o.mk['offset'+(mde=='left'||mde=='width'?'Left':'Top')]*parseInt(to)/100:typeof(to)=='number'?Math.max(to<0&&(mde=='width'||mde=='height')?0:to,to):0;
        oop.animate(o,o.obj,oop.css(o.obj[0],mde),to,new Date(),typeof(ms)=='number'&&ms>20?ms:1000);
       }
      }
     },
    
     init:function(id,mde){
      var obj=document.getElementById(id),o={};
      if (obj&&(mde=='left'||mde=='top'||mde=='width'||mde=='height')){
       o.mk=document.createElement('DIV');
       o.mk.style.position='fixed';
       o.mk.style.right=o.mk.style.bottom=o.mk.style.width=o.mk.style.height='0px';
       obj.parentNode.appendChild(o.mk);
       o.obj=[obj,mde];
       zxcSimpleAnimator['zxc'+id+mde]=o;
       return o;
      }
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?0:n,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
      }
      else {
       a[3]=Math.max(t<0||t<0?0:t,t);
       a[0].style[a[1]]=a[3]+'px';
      }
     }
    
    }
    
    
    zxcSimpleAnimator.Animate({
     ID:'tab',     // the unique ID name of the element to animate.              (string)
     Mode:'width', // the mode of animation, 'left', 'top', 'width' or 'height'  (string)
     Size:'60%',   // the specified animate size.                                (number = the pixel size, string% = the percentage of window size)
     Animate:4000  //(optional) animation duration in millsec.                   (number, default = 1000)
    });
    
    zxcSimpleAnimator.Animate({
     ID:'tab',
     Mode:'width',
     Size:0,
     Animate:4000,
     Delay:4000   //(optional) the delay before animation in millsec.            (number, default = no delay)
    });
    
    /*]]>*/
    </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/

  3. #3
    Join Date
    Nov 2013
    Posts
    9
    thanks for your code. it does what i'm looking for, but i dont think i will be able to combine it with the other tab slide files without breaking something.

    here's the site: www.focallocal.org, the tab slide widget has a lot of files all over the place which i suspect are inter-dependant so i'd be afraid to try and add your code to it.

    i really appreciate your reply though

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles