jQuery slideDown makes other elements jump -


i'm trying build list of elements dynamic height , number, slide , down when user clicks on them. thing is, 1 of them must revealed @ time, while others automatically slide after clicked on.

i'm having issues elements located below 1 being slid down. seem jump down, again correct place, 7px (i assume it's 5px margin-top of div.text + 2px of border).

the sliding div:

<div class="slide">     <div class="bar">         <a href="#" class="title">slide #1</a>     </div>     <div class="text">         lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum sed odio nulla. pellentesque auctor molestie ipsum, ut lobortis mauris laoreet id. praesent ut dolor sed dui euismod mattis @ nisl. etiam mi dolor, placerat eget feugiat nec, tempus id risus. ut sed lobortis arcu. fusce vestibulum enim sed quam tristique sagittis. etiam @ tempor enim.      </div> </div>

the script use slide them up/down.

$('.text').hide(); $('.slide .bar a').click(function(){     if($(this).parent().next('.text').is(':hidden')){         $('.text').slideup(200);         $(this).parent().next('.text').slidedown(200);     }     else if($(this).parent().next('.text').is(':visible')){         $(this).parent().next('.text').slideup(200);     }

});

to better illustrate, fiddle: http://jsfiddle.net/q682d/1/

any simple way fix this? i'd keep border , margin, or @ least keep div.texts looking same way now.

i able after, out "jumping", accordion method below, seems better of 2 options.

accordion method

jquery ui accordion

jsfiddle

css

a {     text-decoration: none;     color: #252525; } .bar {     border-radius: 6px;     box-shadow: 0 0 0 1px #bbb;     height: 34px;     border: 1px solid #eacec3 !important;     background: #ddb09e;     /* old browsers */     filter: none !important;     box-shadow: inset 0 -17px 30px 0 #c98c75, 0 0 0 1px #84413f;     width: 400px;     margin-bottom:0.5em; } .text {     background: #fff;     border: 1px solid #aaa;     border-radius: 6px;     font: 14px'trebuchet ms', 'lucida grande', 'lucida sans unicode', 'lucida sans', tahoma, sans-serif;     padding: 10px;     width: 365px; } .title {     float: left;     font: bold 17px'trebuchet ms', 'lucida grande', 'lucida sans unicode', 'lucida sans', tahoma, sans-serif;     line-height: 35px;     margin-left: 12px;     text-decoration: none !important;     text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.3);     vertical-align: middle; } .ui-accordion .ui-accordion-header {     display: block;     cursor: pointer;     position: relative;     padding:0; } .ui-accordion .ui-accordion-content {     padding: 1em 1.2em;     border-top: 1px solid #aaa;     overflow: auto; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {     color: #000;     text-decoration: none; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {     background:none;     font-weight: normal;     color: #fff;     width:400px;     border: 1px solid #fff; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon {     position: absolute;     left: 0;     top: 40%;     margin-top: -8px; }

js

 $(function () {      $("#accordion").accordion({          collapsible: true,          active: false      });  });

html

<div id="accordion">     <div>         <div class="bar"> <a href="#" class="title">slide #1</a>         </div>     </div>     <div class="text">lorem ipsum dolor sit amet, consectetur adipiscing elit.         <br>         <form>text:             <input type="text">             <br>             <input type="checkbox">             <br>             <input type="radio">             <br>             <input type="button" value="button">         </form>     </div>

slidedown / slideup method

not clean, got of jump out using box-sizing:border-box; , reorganizing things bit. there still slight flicker, maybe steer in right direction.

jsfiddle2

css

a {     text-decoration: none;     color: #252525; } .slide {     padding-bottom: 15px;     width: 400px; } .bar {     border-radius: 6px;     box-shadow: 0 0 0 1px #bbb;     height: 34px;     border: 1px solid #eacec3 !important;     background: #ddb09e;     /* old browsers */     filter: none !important;     box-shadow: inset 0 -17px 30px 0 #c98c75, 0 0 0 1px #84413f;     width: 400px;     margin-bottom:0.25em; } .text {     background: #fff;     border: 1px solid #aaa;     border-radius: 6px;     font: 14px'trebuchet ms', 'lucida grande', 'lucida sans unicode', 'lucida sans', tahoma, sans-serif;     padding: 10px;     width: 400px;     box-sizing:border-box;     -moz-box-sizing:border-box; } .title {     float: left;     font: bold 17px'trebuchet ms', 'lucida grande', 'lucida sans unicode', 'lucida sans', tahoma, sans-serif;     line-height: 35px;     margin-left: 12px;     text-decoration: none !important;     text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.3);     vertical-align: middle; }

update: suspect there may bug in .slidedown() , .slideup() animation calculations, if change .show() , .hide() jump disappears.

jsfiddle3


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more