javascript - Div sliding from above the footer on click on another div -

-

i having trouble in sliding div bottom of page.

here jsfiddle

when click on blue box (arrow-hover) div slides up(box-main).

but hide div(box-main) again have click inside box-main div.

instead want hide div when again click on blue box(arrow-hover). tried lot,but unsuccessful.

and used position fixed both boxes when zoom in page box fixed , hides rest of page. if give position absolute or relative div(box-main) visible below footer, doesn't nice. there other way this.

here code

html:

 <div id="container"> <div id="box-main"></div> <div id="arrow-hover"></div>     <footer></footer> </div>

css:

    #container {     margin:0;     width:100%;     height:100%; }  #box-main{     position: fixed;     left:150px;     bottom: -150px;     width: 250px;     height: 150px;     background: #000;     z-index: 100; } #arrow-hover{     position: fixed;     bottom: 50px;     left: 250px;     width: 50px;     height: 50px;     background: blue;     z-index: 100;  } footer {     width:100%;     background:green;     height:50px;     bottom:0;     left:0;     position:absolute;     z-index:500; }

jquery:

 $('body').on('click','#arrow-hover',function(){     $('#arrow-hover').animate({         bottom: '200px'     },250);     $('#box-main').animate({         bottom: '50px'     },250); });    $('body').on('click','#box-main',function(){     $('#arrow-hover').animate({         bottom: '50px'     },250);     $('#box-main').animate({         bottom: '-150px'     },250); });

and want put upward arrow in (arrow-hover)div when clicked div moves , arrow should downwards, when again clicked div hides. there way of doing in jquery or javascript or css3.

any appreciated, lot.

since don't rely on variables, added class main box: "visible"

this class gets toggled in both animations, set, when show it, , removed, when hide it:

update: include arrows in clickable div, add "arrow up" class #arrow-hover element in html:

<div id="container">   <div id="box-main"></div>   <div id="arrow-hover" class"arrow-up"></div>   <footer></footer> </div>

then add toggleclass function, arrow-hover click handler, switch between arrow-up , arrow-down class

$('body').on('click','#arrow-hover',function(){ if($('#box-main').hasclass("visible")) {     $('#arrow-hover').animate({         bottom: '50px'     },250).toggleclass("arrow-up arrow-down");     $('#box-main').animate({         bottom: '-150px'     },250).toggleclass("visible"); }else {      $('#arrow-hover').animate({         bottom: '200px'     },250).toggleclass("arrow-up arrow-down");     $('#box-main').animate({         bottom: '50px'     },250).toggleclass("visible"); } });

all have now, define arrow-up , arrow-down classes in css , set background image.

for purposes, use icon font "font awesome" http://jsfiddle.net/hapttwf6/28/ --> how looks ;)


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more