javascript - Why are images not being shown? -
i kind of new web development , whole html, css, js thing, dare competent programmer, should @ least have idea not working on code. not case , reaching state of angry frustration wouldn't stay in.
my objective create whole online course in same fashion of power point presentation: clickable objects make things appear , lead other pages; , animations of images appearing in order.
i have not had issues previous "slides" have transcripted web page, last 1 giving me headaches. page consists of images included via <img>
tag, of them proper id
, 1 or more class
values (class="class1 class2"
). positioned position: absolute;
style place them want them be. next animations, , here how handle it:
when document finishes loading, is, <body class="contentbody" onload=...>
method called: mylocalinit();
, handles animations using jquery functions. here whole code it:
function mylocalinit(){ disablepnbuttons(); hideall('.part'); lowerclass('.animar',50); slideupall(); } function slideupall(){ $(".identifica").animate({ top: '-=50px', opacity: '1' }, 400); settimeout(slideuprest(),400); } function slideuprest(){ $(".identifica").animate({ top: '-=50px', opacity: '1' }, 400, function(){$('#preguntas').animate({ top: '-=50px', opacity: '1' }, 400, function(){ $('#hogar').animate({ top: '-=50px', opacity: '1' }, 400, function(){ $('#negocio').animate({ top: '-=50px', opacity: '1' }, 400, function(){ $('#holabank').animate({ top: '-=50px', opacity: '1' }, 400, function(){ $('#agrobank').animate({ top: '-=50px', opacity: '1' }, 400 function(){ $('#vr').animate({ opacity: '1' }, 400)})})})})})}); } function hideall(class1){ $(class1).css('opacity','0'); } function lowerclass(class1,height){ $(class1).css('top', '+='+height+'px'); } function disablepnbuttons(){ udutu_api.gblpreviousbutton.btnenabled(false); udutu_api.gblnextbutton.btnenabled(false); }
and <body>
looks in end: <body class="contentbody" onload="mylocalinit();">
then, when page loaded none of methods inside mylocalinit()
take effect, weird. gets weirder! if take out methods mylocalinit()
, place them in onload
event (<body class="contentbody" onload="disablepnbuttons();hideall('.part');lowerclass('.animar',50);slideupall();">
, take effect slideupall()
(i found out via boring alert
debugging).
i have no idea of wrong particular page, have done similar programming previous 7 pages , worked well. please, please! beg of all, gurus, please enlighten me on why not working t_t
this might/might not solve problem. hard pinpoint exact solution without debugging code. , reading question doesnt make me think of obvious issues. can provide few practices instead solve problem , make code more dependable.
please put functions within document ready block:
// $( document ).ready() block. $( document ).ready(function() { console.log( "ready!" ); // functions mylocalinit(); });
and move script tag header end (just within closing </body>
tag.
that makes javascript non blocking, , load once dom ready.
the next thing is, call mylocalinit();
@ end of document ready block shown above , remove body.onload. still run once dom loaded.
please let me know if these changes solved problem.
Comments
Post a Comment