Question

I have no experience with jquery or javascript for that matter.
I am trying to implement this technique to respond to users for errors or messages in general.

lights-out-dimmingcovering-background-content-with-jquery

This method uses the onclick event and that’s not what im after, I have tried to replace .onclick with .load but that doesn’t seem to work. I’m after a quick fix as I really don’t have the time to learn jquery or its event handlers.

The goal is to catch any errors or message’s and once these are called the alert box is called without any further actions such as .onclick.

How my code would look:

{PHP}
$forms = new forms();
if(count($forms->showErrors) > 0 // or == true)
{
    foreach($forms->showErrors as $error)
    {
        print('<p class="alert">'.htmlspecialchars($error, ENT_QUOTES).'</p>');
    }
}

Edit:
ALL FIXED, thanks!

Answer 1

You’re on the right track with “.load” but you want to bind this functionality to the “ready” event of the page (when the DOM is complete; you don’t need to wait for the load event), so here’s what you need to change – assuming you’re using the code sample on the Lights Out page:

$(document).ready(function(){  

    //Adjust height of overlay to fill screen when page loads  
    $("#fuzz").css("height", $(document).height());  

    //When the link that triggers the message is clicked fade in overlay/msgbox  
    //$(".alert").click(function(){  
    //  $("#fuzz").fadeIn();  
    //  return false;  
    //});

    // INSTEAD: If any errors are present in the page, fade in the layer:
    if ( $("p.alert").length ) {
        $("#fuzz").fadeIn();
    }
    // end of change

    //When the message box is closed, fade out  
    $(".close").click(function(){  
        $("#fuzz").fadeOut();  
        return false;  
    });  

});  

//Adjust height of overlay to fill screen when browser gets resized  
$(window).bind("resize", function(){  
    $("#fuzz").css("height", $(window).height());  
});

Be sure to include the HTML and CSS for the layer, too.