javascript - Is there a limit to how often an element's background-image can be modified? - 


//  repaints progress bar's filled-in amount based on % of time elapsed current video. progressbar.change(function () {     var currenttime = $(this).val();     var totaltime = parseint($(this).prop('max'), 10);      //  don't divide 0.     var fill = totaltime !== 0 ? currenttime / totaltime : 0;      //  edit: added check, testing now.     if (fill < 0 || fill > 1) throw "wow should not have been " + fill;      var backgroundimage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))';     $(this).css('background-image', backgroundimage); });

i'm filling progress bar on time using above javascript modify background-image gradient.

extremely intermittently -- background image entirely stops rendering. i've placed logging throughout code , seems firing properly. i'm not dividing 0, nor fill 0, background image stops showing up.

if reload dom element -- starts work again! so, i'm wondering if i'm doing wrong here. maybe can't set background-image continuously hours?

edit: i'm going try , short video clip going logging highlight issue. might take me bit reproduce.

  • i put breakpoint code , observed value of fill value greater 0 , less 1. in instance value 0.6925

  • putting breakpoint code, breaking on point , allowing execution continue causes progress bar's fill re-appear!

edit2: here's video of happening: http://screencast.com/t/dvzbr06f

there no limit. browser using? there may few issues browser cache, try not change image much. here test put together, works fine, fiddle , code:

css:

div {     height:25px; }

html:

<div id="pg"></div>

js:

var counter = 0,     alpha = window.setinterval(function(){         counter++;         if(counter > 60){             window.clearinterval(alpha);         } else {             progressbar("#pg", counter);         }     }, 500),     progressbar = function (elem, val) {         var fill = val / 60;         var backgroundimage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))';         $(elem).css('background-image', backgroundimage);     };

Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more