jQuery issue perhaps or CSS issue

Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
NOTE: I have decided to change the way the form is displayed due to extra fields being added. However, I am still interested in fixing this issue, so I know how to fix it should I require to in future.

Hey Guys,
I am developing a website. No idea what for or why, just felt like designing a website. I am using jQuery to hide two divs, one with a login form and one with a reg form hidden in them. If you look at the page, when you click the link and it slides down, it slides down in the correct size and then shrinks. I don't know if its a CSS issue or the jQuery code? I have included the code for each file. You can view it here: http://tedderzdesign.x10.mx/1/layout1/

PHP: 
<?phpsession_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!-- jQuery Call --><script type="text/javascript" src="jquery.js"></script><!-- Script to create the fading effect --><script type="text/javascript" src="fadingEffect.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
    <div id="loginBar">
        <ul>
            <li><a href="javascript:void(0);" class="reg">Register</a></li>
           <li><a href="javascript:void(0);" class="login">Login</a></li>
        </ul>
     </div>
     <div id="reg">
        <div class="hiddenContent"><?php require_once("reg_form.php"); ?></div>  
     </div>
        <div id="login">
        <div class="hiddenContent"><?php require_once("login_form.php"); ?></div>
    </div>    


</div>
</body></html>

fadingEffect.js
Code: 
<!-- This is a script that creates the sliding effect for the login/registration forms. It uses jQuery, which is referenced from a different file. -->

$(document).ready(function() {
    $("div#login").slideUp("fast");
    $("div#reg").slideUp("fast");
    
    $("a.closeReg").click(function() {
        $("div#reg").slideUp("fast");
    });


    $("a.closeLogin").click(function() {
        $("div#login").slideUp("fast");
    });
    
    $("a.login").click(function() {
        $("div#login").slideDown("slow");
        $("div#reg").slideUp("fast");
    });


    $("a.reg").click(function() {
        $("div#reg").slideDown("slow");
        $("div#login").slideUp("fast");
    });
    


    
});

reg_form.php
HTML: 
<form method="post" action="reg.php">    Username: <input name="user_reg" type="text" value="" size="20" />    <br />    Password: <input name="pass_reg" type="password" value="" size="20"  />    <br />    <input type="submit" name="reg_button" value="Register!" /></form>

I am using google chrome if that applies?? Just want it to slide down and stay the same size.
 
Last edited:
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
Ultimately, the problem lies with the HTML and CSS; jQuery merely exposes it.

During the slideUp() and slideDown() transitions, jQuery temporarily gives the target element a CSS style that includes overflow: hidden;. That allows the box to change size without the content leaking out of it onto the rest of the page. The problem, in this case, is that the size of the box in CSS can't actually be resolved completely until the temporary overflow: hidden; style is removed at the end of the transition and the content is forced to wrap. (And note that the "register" form doesn't completely fit inside the box even after the wrapping is resolved.) You'll need to ensure that the static CSS forces the content of the forms to fit inside the box at all times (using max-width will help here, as will making the wrap happen explicitly).

A couple of notes: The label text for the fields should be <label> elements. Not only is that better semantically and an aid to accessibility, it will allow you to make them display: block; in your CSS, which will ensure wrapping. The size attribute for the fields is pretty much useless unless you force a monospaced font (and it's been deprecated), so you can eliminate that and control the display size better with a CSS width setting.
 
Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
Fair enough. Thanks for the reply, I will amend the code to make sure that it works better. I didn't know about the label fields bit, so I have learned something new there :) I am modifying it so that it is going to sit in the entire page, rather than the slide down boxes, as I am adding more fields and it seems that it would be too much work, and look a little weird to have it like that. Thanks again for the helpful advice mate :D
 
You must log in or register to reply here.
Top