CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Feillen
Feillen

Reputation: 129

Why are images not being shown?

I am kind of new to web development and the whole html, css, js thing, but I dare say I am a competent programmer, so I should at least have an idea about what is not working on my code. But this is not the case and I am reaching a state of angry frustration I wouldn't like to stay in.

My objective is to create a whole online course in the same fashion of a power point presentation: clickable objects that make things appear and lead to some other pages; and animations of images appearing in order.

I have not had any issues with the previous "slides" I have transcripted to a web page, but the last one is giving me headaches. My page consists mainly of images included via the <img> tag, all of them with a proper id and one or more class values (class="class1 class2"). Positioned with a position: absolute; style I place them where I want them to be. Next up is the animations, and here is how I handle it:

When the document finishes loading, this is, <body class="contentBody" onload=...> a method is called: myLocalInit(); and it handles the animations using jQuery functions. Here is the whole code about 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 the <body> looks like this in the end: <body class="contentBody" onload="myLocalInit();">

Then, when the page is loaded none of the methods inside myLocalInit() take effect, which is weird. BUT IT GETS WEIRDER! If I take out the methods from myLocalInit() and place them in the onload event (<body class="contentBody" onload="disablePNButtons();hideAll('.part');lowerClass('.animar',50);slideUpAll();">, they take effect up to slideUpAll() (I found this out via boring alert debugging).

I seriously have no idea of what is wrong with this particular page, I have done similar programming with the previous 7 pages and it worked well. Please, PLEASE! I beg of you all, gurus, please enlighten me on why this is not working T_T

Upvotes: 0

Views: 65

Answers (2)

Feillen
Feillen

Reputation: 129

Well, guess what, I apparently missed a comma , inside the insidious code that manages the sequencial animation. The last callback function is not separated from the 400 parameter T_T

A whole morning for this alone... Thanks a lot for all of you who aided me and gave useful advice :)

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2584

This might/might not solve your problem. Hard to pinpoint exact solution without debugging your code. And just reading your question doesnt make me think of any obvious issues. So I can provide a few good practices instead which could solve the problem and also make your code more dependable.

Please put your functions within a document ready block:

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
    // All your functions

    myLocalInit();
});

And then move the script tag from header to the end (just within the closing </body> tag.

That makes javascript non blocking, and also load only once the DOM is ready.

the next thing you could do is, also call the myLocalInit(); at the end of the document ready block as shown above and remove it from body.onload. This will still run once the DOM is loaded.

Please let me know if these changes solved the problem.

Upvotes: 1

Related Questions