Please help

**crakcrack** · 05-01-2012 08:34 AM

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

**SymetriX** · 05-01-2012 10:34 AM

It sounds like you are trying to make some type of modal-like dialog window appear on top of the page. If I were you I would look into using a jQuery plugin to do this. For example take a look at the jQuery UI modal dialog:

http://jqueryui.com/demos/dialog/

Looking at some of the source code on the sample pages may also give you an idea of how to structure your HTML and your JavaScript code better.

**crakcrack** · 05-01-2012 11:46 AM

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????????

**Padonak** · 05-01-2012 02:10 PM

crakcrack, can you please describe what you want in easy words like:

this button clicked --> this div appears, this div disappears etc.

i'm not that good in english

Thread: Please help

Thread Tools

Display

Please help

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions