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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -