jQuery .append() in Firefox: vertical scrollbar appears? -

-

i want dynamically add number of divs target div in page .append(), set heights , positions they're visible in page without scrolling.

all of goes ok, in firefox (3.6.16 on ubuntu) vertical scrollbar appears, though height of each new div being added total height of page content - though each new div near top of screen, , height isn't anywhere near length of screen. ubuntu chrome behaves fine. when ask jquery height of target div after appending new divs, hasn't changed.

here's of page code test page wrote isolate problem - in advance!

        <style type="text/css">         #target {             width: 50px;             height: 50px;             background-color: #cfc;         }     </style>     <script>         $(document).ready(function() {             var cols = new array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');              for(i = 0; < 10; i++){                 $('#target').append('<div id="new_' + + '">hello</div>');                 $('#new_' + i)                 .position({                     my: 'left top',                     at: 'left top',                     of: '#target',                     offset: '' + (i * 20) + ' ' + (i * 10)                 })                 .width(200)                 .height(150)                 .css('background-color', cols[i]);             }         });     </script> </head> <body>     <div id="target">     </div> </body>

if give added <div> elements "position: absolute", you'll no scrollbars.

the jquery ui ".position()" utility give affected elements (your added <div> elements) "position: relative" if they're not otherwise set "position". elements positioned way consume layout space on page if not moved away "natural" position. thus, page overflows when add elements though they're relocated such fit.

by giving them "position: absolute", take them out of ordinary layout flow. chrome doesn't agree this, reasons don't understand; think firefox doing correct thing here. (edit — if add line append 1 last <div> "target", , make plain-jane <div> little text in no positioning @ all, you'll see ends way way down page in chrome, , scrollbar same size firefox gives you. thus, looks chrome doesn't "claim" phantom space unless comes after it.)

here jsfiddle. updated code (one line):

    $(document).ready(function() {         var cols = new array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');          for(i = 0; < 10; i++){             $('#target').append('<div id="new_' + + '">hello</div>');             $('#new_' + i)             .position({                 my: 'left top',                 at: 'left top',                 of: '#target',                 offset: '' + (i * 20) + ' ' + (i * 10)             })             .css('position', 'absolute')             .width(200)             .height(150)             .css('background-color', cols[i]);         }     });

Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more