Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!-- Austin Brown -->
- <html>
- <head>
- <meta charset="utf-8">
- <title>Assignment 6</title>
- <style>
- body {
- background-color: #fff;
- font-family: arial, sans-serif;
- font-size: 100%;
- }
- a {
- color: blue;
- }
- #welcome p strong {
- color: navy;
- font-size: 1.2em;
- }
- #welcome p:first-of-type {
- margin-bottom: 50px;
- }
- section {
- margin-bottom: 50px;
- }
- /* main container */
- #main {
- width: 960px;
- margin: 50px auto;
- border: 2px solid #000;
- padding: 20px;
- background-color: #e0e0ff;
- position: relative;
- box-sizing: border-box;
- }
- /* form container */
- #loginDiv {
- width: 300px;
- position: absolute;
- left: 650px;
- top: 6px;
- z-index: 100;
- border: 1px solid navy;
- }
- /* paragraph that shows the text "Login" which is clicked on to display/remove the form */
- #login {
- margin: 0;
- cursor: pointer;
- background-color: rgb(255,255,255);
- padding: 5px 0 2px 30px;
- }
- #login:hover{
- background-color: rgb(110,138,195);
- }
- /* plus sign icon for login form */
- .plus {
- background: url(img_open.png) no-repeat 8px 7px;
- background-color: rgb(110,138,195);
- }
- /* minus sign icon for login form */
- .minus {
- background: url(img_close.png) no-repeat 8px 7px;
- }
- /*form is hidden when the page loads */
- #loginDiv form {
- padding: 10px 10px 10px 10px;
- display: none;
- background-color: rgb(255,255,255);
- }
- #loginDiv label {
- display: block;
- width: 100px;
- margin: 0 15px 0 0;
- }
- #loginDiv input {
- font-size: 1.2em;
- border: 1px solid navy;
- }
- #loginDiv input:focus {
- background-color: rgb(110,138,195);
- border: 2px solid navy;
- }
- #loginDiv input[type=button] {
- width: 100px;
- }
- footer {
- text-align: center;
- margin-top: 50px;
- margin-bottom: 10px;
- padding: 20px;
- border-top: 1px solid #000;
- }
- /* ad is not shown when the page loads */
- #ad {
- width: 300px;
- height:300px;
- border: 1px solid #000;
- background-color: yellow;
- position: absolute;
- left: 330px;
- top: -500px; /* you can change this inbitially for viewing purposes only but be sure to set it back */
- box-sizing: border-box;
- background-image: url(ad.jpg);
- background-repeat: no-repeat;
- }
- /* close button on ad */
- #adbtn {
- width: 50px;
- height: 50px;
- border: 2px solid #000;
- border-top-width: 1px;
- border-right-width: 1px;
- background-color: #fff;
- font-size:3em;
- text-align: center;
- cursor: pointer;
- box-sizing: border-box;
- position: absolute;
- top: 0px;
- right: 0px;
- }
- </style>
- <script src="http://code.jquery.com/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- //Sends the ad down after 5 seconds, over a 5 second duration
- $("#ad").delay(5000).animate({marginTop: "600px"}, 5000); //this moves it 600 px down, which puts it to the 100 mark at the page.
- //When the X is clicked on the ad, fade the ad over 5 seconds
- $("#adbtn").click(function(){
- $("#ad").fadeOut(5000);
- });//end click
- //Click method to toggle the login forum and buttons
- $("#login").click(function() {
- //changes the + to a -
- $(this).toggleClass('minus');
- //slides the form down in a 1 second duration
- $(this).next().stop(true).slideToggle(1000);
- }); // end click
- //check values entered in text box upon clicking the submit button
- $('input[value="Submit"]').click(function() {
- //assigns the values in the text box to variables used to later check what is in them
- var username = document.getElementById("username").value;
- var password = document.getElementById("pw").value;
- //checks if there is nothing in either username or password, if there is nothing, then it displays the error, otherwise the login is successful
- if (!username ||!password) {
- document.getElementById("error").innerHTML = "Please enter both login and password";
- } else {
- document.getElementById("error").innerHTML = "Please stand by";
- }//end if
- });//end click
- }); //end ready
- </script>
- </head>
- <body>
- <!-- main container -->
- <div id="main">
- <section id="loginDiv">
- <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
- <p id="login" class="plus">Login</p>
- <form>
- <p>
- <label for="username">Username:</label>
- <input type="text" name="username" id="username">
- </p>
- <p>
- <label for="pw">Password:</label>
- <input type="password" name="pw" id="pw">
- </p>
- <p>
- <input type="button" value="Submit">
- </p>
- <!-- placeholder for response if form data is correct/incorrect -->
- <p id="error"> </p>
- </form>
- </section>
- <section id="welcome">
- <h1>Welcome to the Local jQuery User Group Website</h1>
- <p>
- <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong>
- </p>
- <h2>About this page layout:</h2>
- <p>
- The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
- that main container. Otherwise, it would default to being absolutley positioned with respect to the window.
- </p>
- <p>
- In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,
- it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
- the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.
- </p>
- </section>
- <section>
- <h2>This week's agenda:</h2>
- <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
- It will be recorded! Please note that the code samples will be available on our GitHub repository.
- </p>
- </section>
- <footer>
- Copyright © Local jQuery User Group
- </footer>
- <!-- ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
- <div id="ad">
- <div id="adbtn">
- X
- </div>
- </div>
- <!-- end main container -->
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement