/    Sign up×
Community /Pin to ProfileBookmark

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 + “%”; [/CODE]

to

[CODE]‘slide_params[opt.tab_slide_position] = – (the value i want to set) ;’[/CODE]

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%;
}[/CODE]

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.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@vwphillipsJan 21.2014 — [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>[/CODE]
Copy linkTweet thisAlerts:
@focallocalauthorJan 21.2014 — 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 ?
×

Success!

Help @focallocal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...