javascript - Positioning div elements left & top not working with content in FireFox -


i've got webpage full-screen canvas. on canvas i'm going place , position divs contain ui elements canvas. i'm using jquery create divs , give them css style need. re-position and/or re-size them in javascript upon window re-size. problem is, enter 1 space div, firefox says 'no!' , seems ignore css changes made javascript, if remove content of div again.

here's technical details:

the div i'll show fullscreen div overlays canvas , functions dim-screen in case there dialogs user has opened canvas appears darker , attention pulled towards dialog.

the css i'm using is:

.ui_layer {     position: absolute;     top:0px;     left:0px; }  #ui_layer_dim {     background-color: #000000;     opacity: 0.5; }

in javascript have own function creates div, runs jquery:

$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");

then, on onwindowresize (tiggered window 'resize' eventlistener), change div's width , height fit new window size:

gameui.layers["ui_layer_dim"].onwindowresize = function() {     this.css("width", window.innerwidth + "px");     this.css("height", window.innerheight + "px"); };

in chrome works perfectly, if place content in div. firefox works, when div in it's initial state. 1 change div's contents , 'boom goes': no more dynamic sizing.

i've tried different css position settings, tried setting width , height attributes using css function, using style function of element , using setattribute see if it's caused sort of incompatibility; results didn't change.

i've run series of tests see happens html content placed div , noticed weird: inspector , css rules won't show changes width , height of window's innerwidth , innerheight. neither div itself, i've set logging view info window's innerwidth , innerheight before setting div's width , height , logging div's width , height after setting it, , shows correct dimensions...

after building , testing system several days have no clue anymore cause problem. i've said before: chrome works should know code technically works, might different approach needed make work in firefox. hope knows. appreciated!

edit: here's fiddle code, try running in firefox, resize result, should resize grey div well. now, right click result, go inspector , put text or space inside div , resize again. not working me. link: http://jsfiddle.net/usll6/

edit 2: here's screenshot clear problem i'm having. marked yellow initial state of browser width, set narrow able show problem more clearly. marked orange state after made browser wider bit. can see grey div doesn't resize should, neither inspector value , css rules value, console shows correct value. first ("setting property:.....") retrieved window.innerwidth, second ("property height has....") retrieved actual width property div element using style.getpropertyvalue. enter image description here

just noticed ie gives same result firefox, yea..ie....

is gameui.layers known mozilla? did try jquery solution?

 $(window).resize(function(){       $('#ui_layer_dim').width(window.innerwidth);       $('#ui_layer_dim').height(window.innerheight);   });

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more