Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show and hide in javascript

    hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out..
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title> </title>
        <link rel="stylesheet" type="text/css" href="styling.css"/>
        <script type="text/javascript" src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
    
            window.onload = function() { document.getElementById('first_div').style.display = 'none';}
            function toggle(link, div1id, div2id)
            {
                var div1 = document.getElementById(div1id);
                var div2 = document.getElementById(div2id);
                if (div1.style.display == 'none')
                {
                    $('#third_div').hide();
                    div1.style.display = 'block';
                    div2.style.display = 'none';
                    link.innerHTML = 'Login';
                } else {
                    $('#third_div').hide();
                    div1.style.display = 'none';
                    div2.style.display = 'block';
                    link.innerHTML = 'signin';
                }
            }
            function toggleImg(divId)
            {
               $('#first_div').hide();
                $('#second_div').hide();
                $('#third_div').show();
            }
        </script>
    
    
    
    </head>
    
    <body>
    
    <div id="first_div" class="container">
        <label for="username">
            <span>Username:*</span>
            <input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
    
        <label for="password">
            <span>Password:*</span>
            <input type="password" class="text" id="pass" placeholder="Password" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
    
        <label>
            <input type="checkbox" name="remember" id="remember" class="checkbox"  value="1" tabindex="3" /> Remember Me?
        </label>
    
        <label>
            <input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
        </label>
    </div>
    
    <div id="second_div" class="container1">
    
        <label for="username">
         <span>
         Username:*</span>
            <input type="text" id="username" class="text" placeholder="Username" maxlength="24"   onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
    
        <label for="password">
            <span>Password:*</span>
            <input type="password" id="password" class="text" placeholder="Password" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
    
        <label for="repass">
            <span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24"   onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
    
        <label for="email_id">
            <span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24"  onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
        </label>
        <label><input type="submit" name="submit" class="button1" value="Submit" /></label>
    </div>
    <div id="third_div" class="image">
    <img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
    </div>
    <div class="header">
        <button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
        <button class="button_sign"  id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
    </div>
    </body>
    </html>


    I wanted it according to this website https://www.tumblr.com
    Last edited by crakcrack; 05-01-2012 at 05:42 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


    It is your responsibility to die() if necessary….. - PHP Manual

    Thank you for letting me know..actually i was desperately looking out for a solution so it slipped my mind..

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is i have three divs one is for log in that is when i click login button log in form comes.
    Other for sign in that is when i click signin button sign in form comes.
    One is cancel div or the one i have taggged as third_div..the problem is that when im loading i shld only be able to see the div with image or div with sign in form but im able to see both together..so what am i supposed to do????????


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •