CODEWITHSUNDEEP
jquerycssopacity
input
input

Reputation: 7519

No opacity IF element is visible

How do I get this effect that if the error message is displayed the form should not lose its opacity, but if the error message is hidden, opacity should be applied only when the form is hovered on?

HTML:

<section>
    <form id="form" name="form" action="login.php" method="post">  

    <ul>
        <li>
        <span class="er" style="display:none;">&nbsp;</span>
        </li> <br />

        <li>
        <label for="name">Name</label>  
        <input type="text" name="name" id="name" />       
        </li>

        <li> 
        <label for="pass">Password</label>  
        <input type="password" name="pass" id="pass" />  
        </li>

    </ul>
        <input type="submit" value="Log In" />  

</form>  
</section>

CSS:

section { 
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section:hover{
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

jQuery:

$('#form').bind('submit', function (e) {
            var self = $(this);

            jQuery.post(self.attr('action'), self.serialize(), function (response) {
                if ($("#name").val() == "" || $("#pass").val() == "") {
                    $("span.er").text('Field cannot be blank!');
                                    $("span.er").show();    
                }
                else if (response.success) {
                    window.location.href='home.php';
                } else {
            $("span.er").text('Invalid username or password! Please try again.');
                    $("span.er").show();
                }
            }, 'json');

            e.preventDefault(); //prevent the form being posted 
        });

I tried adding this line to above jQuery function wherever the span.er is set to show():

$("section").css('opacity', '100');

^This setting should be applied only when span.er is visible. However the problem with this is that once the error message is displayed, the opacity setting is applied regardless of whether span.er is visible or hidden.

Upvotes: 0

Views: 421

Answers (2)

clairesuzy
clairesuzy

Reputation: 27624

instead of manipulating the visibility of the span, if an error message is to come up you could add the er class to the parent section element itself

from there you can control the visibility of the actual li that contains your message e.g.

section li:first-child {display: none;}
section.er li:first-child {display: block;}

and also the hover transitions at the same time:

section { 
     display: block;
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section.er, section:hover {
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

all the jQuery would need to do is add or remove the class name from the section dependant on if the form does/doesn't pass validation

Upvotes: 1

Val
Val

Reputation: 17522

$('form').mouseover(function (){
  $('span.er').css('opacty':1);
  if(!$("span.er:visible")){
     $('form').css({'opacity',0.5});
  }
});

And you are very difficult to understand you have confused the hell out of us, put it on bullet points the actions and their priority if you find it that difficult

as for the code above when user mouses over the <form> tag it will change opacity to one unless its visible which will be 0.5 or 50%

Upvotes: 0

Related Questions