How do i activate this jquery function when combined with PHP

Question

Hi there,

I would like to apologize at first instant for asking some stupid question(well not the case for me), but i cannot help it out. i must admit i do not know jQuery but i do have the basic understanding of Javascript and i am a dedicated PHP developer. i don't have any problem understanding the HTML or css. when it comes to jquery i lag it and i dont have enough time to learn it because of the deadline i have to meet.

to start with i developed an application using php and purchased a template from themeforest, now it has some nice and beautiful javascript code the problem is i do not know how to make it work. even though it lies right infront of me. here is my code in the login page. where i want to use this jquery

<link rel="stylesheet" type="text/css" href="css/basicblack.css" title="styles5" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/supersleight.js"></script>
<script type="text/javascript" src="js/jquery.example.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
    $(document).ready(function(){
            $(".block").fadeIn(1000);                  
            $(".msg-error").fadeIn(1000);
            $(".msg-warning").fadeIn(1000); 
            $('.msg-error').supersleight();
            $('#username').example('Username'); 
            $('#password').example('Password');
    });
/* ]]> */
</script>

and now i want to use the fadein effects for the class msg-error and msg-warning in my code, it is not working, here is the combined code with PHP logic which i have used.

although with this i am able to get the desired result like it will show the error if the field is empty or invlalid username and password. but i am unable to use that fadein effect. how do i do that?

<div id="wrap">
    <?php if(isset($_POST['login'])) { if( empty($_POST['username']) || empty($_POST['password'])) { ?>
    <div class="msg-error">
    <img src="images/icons/22/messagebox_warning.png" alt=""/>
    <p>Please fill in all of the fields!</p>
    </div>       
    <?php } }?> 
       <?php
       if( isset($_POST['login'])) {
       if( !empty($_POST['username']) || $_POST['password']) {
       if( !check_login($_POST['username'], $_POST['password'])) {
       ?>
       <div class="msg-error">
            <img src="images/icons/22/remove.png" alt=""/>
            <p>Wrong username or password!</p>
        </div>
       <?php } } } ?>

Answer 1

My guess is that these items are not fading-in because they're visible to start with. Use simple CSS (display:none) to hide them, then the jquery fadeIn calls should display them once the page is loaded.

update As others have pointed out, it's probably better to hide the messages with js instead of css, to allow users withough javascript to see the messages.

Answer 2

I'm just guessing here, but the problem might be that, given what I can see here, your "msg-error" divs are already displayed, so they can't be faded in. Try modifying your jQuery like so:

$(document).ready(function(){
            $(".block").hide().fadeIn(1000);                  
            $(".msg-error").hide().fadeIn(1000);
            $(".msg-warning").hide().fadeIn(1000); 
            $('.msg-error').supersleight();
            $('#username').example('Username'); 
            $('#password').example('Password');
});

Answer 3

As grossvogel suggests, it is likely that the elements are not hidden to begin with. Bear in mind that if you hide them with CSS, they will be less accessible to users without JavaScript. You could do something like this instead:

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
        $(".block").hide().fadeIn(1000);                  
        $(".msg-error").hide().fadeIn(1000);
        $(".msg-warning").hide().fadeIn(1000); 
        $('.msg-error').supersleight();
        $('#username').example('Username'); 
        $('#password').example('Password');
});
/* ]]> */
</script>

This type of approach is known as progressive enhancement.

Answer 4

You can change these three calls:

$(".block").fadeIn(1000);                  
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000); 

To just this:

$(".block, .msg-error, .msg-warning").hide().fadeIn(1000); 

This uses the multiple selector to get all 3 at once, and does a .hide() to hide them just before fading them in. The benefit of this is that if a user has JS disabled, they'll still get the errors, just without a fade.