toggle - jQuery Panels - Weird Content Effect -

-

i getting weird jquery effect on website building.

http://www.real-visual.com/site/technology/

on page, in left panel, see 4 orange links. if click one, slides open content panel. then, if click different orange link, slides closed first panel , slides open second one.

however, notice weird effect where, when slide sliding closed, content inside changes.

here example of jquery code powers these slides:

$("#panel-2-button").click(function() {     if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }     $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000);  }); $("#panel-2-button-medium").click(function() {     if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }     $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000); }); $("#panel-2-button-large").click(function() {     if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }     $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);  });

and here example of html:

<div id="content-inner-panel-2-medium" class="togglepanel">     <h1>microsoft kinect</h1>     <p>text here</p>     <div id="panel-2-close-medium"></div> </div>   <div id="content-inner-panel-3-medium" class="togglepanel">     <h1>large screen & immersive</h1>     <p>text here</p>     <div id="panel-3-close-medium"></div>  </div>    <div id="content-inner-panel-4-medium" class="togglepanel">     <h1>mobile phones & tablets</h1>     <p>text here</p>     <div id="panel-4-close-medium"></div>   </div>    <div id="content-inner-panel-5-medium" class="togglepanel">     <h1>games controllers & remotes</h1>     <p>text here</p>     <div id="panel-5-close-medium"></div>   </div>

does know why weird content-switcharound bug occuring when slide closes , how fix it?

the problem line: 

if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }

specifically:

$(".togglepanel").hide("slide", { direction: "left" }, 1000);

that line hides first element in .togglepanel finds (which kinect one) , hides that. need find id of visible .togglepanel , hide id, not class:

var visiblepanel = 'none'; $('.togglepanel').each(function(){     if ($(this).is(':visible')) {         visiblepanel = $(this).attr('id');     } }); if (visiblepanel != 'none'){ $(visiblepanel).hide("slide", { direction: "left" }, 1000); }

that last line might need prepend # symbol so:

if (visiblepanel != 'none'){ $('#' + visiblepanel).hide("slide", { direction: "left" }, 1000); }

Comments

Post a Comment

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres...
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines. ...
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=...
Read more