jquery - Figuring out total height of a div -



jquery - Figuring out total height of a div -

i want create simple vertical slider on website. simple code

$('.down').click(function(){ $('#container_slider_youtube').animate({ margintop: '-=410px'}, 1000); }); $('.up').click(function(){ $('#container_slider_youtube').animate({ margintop: '+=410px'}, 1000); });

i can slide container in , downwards works fine. problem i'm having can maintain pressing or downwards button totally messes position of div. what's way prepare problem?

might improve not rely on relative values, , instead, compute new, static values assign .animate().

also, applications such this, find it's way more simpler utilize css position , top instead of relying on margin. (older) browsers seem have hate negative margins fire fire of one thousand hells.

// illustration var container = $('#container_slider_youtube'), parent = container.parent(), step = 410 ; $('.down').click(function () { var currenttop = container.css('top'), newtop = math.max(0, currenttop - step) ; container.animate({ margintop : newtop }, 1000); });

you can adapt .up click. create sure business relationship height of container parent (using .height() probably).

if you're going go css position route, create sure container parent at least position:relative, , container at least same well. set container position:absolute.

jquery slider

Comments

Post a Comment

Popular posts from this blog

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more

r - url in CRAN extension manual -

r - url in CRAN extension manual - aesthetics question cran manuals. how create urls description field reddish , function when clicked (like first url in url field)? 1 appears reddish in manual first url in th url field, , of links (such in bugreports field) don't work.. here's description (chopped down): package: bundle type: bundle title: stuff version: 0.2.1 date: 2012-05-09 author: me maintainer: bob <bob@gmail.com> depends: r (>= 2.15), imports: gridextra suggests: plyr lazydata: true description: bundle awesome. note: qdap not compiled mac users. installation instructions mac user or other os users having difficulty installing qdap please visit: http://trinker.github.com/qdap_install/installation license: gpl-2 url: http://trinker.github.com/qdap/ https://github.com/trinker/qdap bugreports: https://github.com/trinker/qdap/issues collate: 'adjacency_matrix.r' and manual: https://dl.dropbox.com/u/61803503/qd...
Read more

asp.net - .NET Control.ID property inconsistency -

asp.net - .NET Control.ID property inconsistency - please have @ code below: partial class _default inherits system.web.ui.page protected sub page_load(byval sender object, byval e system.eventargs) handles me.load dim c1 new checkbox c1.id = "test1/" 'line 7 placeholder1.controls.add(c1) end sub protected sub button1_click(byval sender object, byval e system.eventargs) handles button1.click each c command in page.controls each d command in c.controls each f command in d.controls each g command in f.controls each h command in g.controls if typeof h checkbox dim cbox new checkbox cbox = ctype(h, checkbox) msgbox(cbox.checked) 'line 20 end if next ...
Read more