SHARE
TWEET

Untitled

a guest Apr 27th, 2016 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!-- Austin Brown -->
  3.  
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <title>Assignment 6</title>
  8.  
  9.  
  10.  
  11. <style>
  12.  
  13. body {
  14.        background-color: #fff;
  15.        font-family: arial, sans-serif;
  16.        font-size: 100%;
  17. }
  18.  
  19. a {
  20.     color: blue;
  21. }
  22.  
  23. #welcome p strong {
  24.                    color: navy;
  25.                    font-size: 1.2em;
  26. }
  27.  
  28. #welcome p:first-of-type {
  29.                           margin-bottom: 50px;
  30. }
  31.  
  32. section {
  33.          margin-bottom: 50px;
  34. }
  35.  
  36.  
  37. /* main container */
  38. #main {
  39.         width: 960px;
  40.     margin: 50px auto;
  41.     border: 2px solid #000;
  42.     padding: 20px;
  43.     background-color: #e0e0ff;
  44.     position: relative;
  45.     box-sizing: border-box;
  46. }
  47.  
  48.  
  49. /* form container */
  50. #loginDiv {
  51.        width: 300px;
  52.        position: absolute;
  53.        left: 650px;
  54.        top: 6px;
  55.        z-index: 100;
  56.        border: 1px solid navy;
  57. }
  58.  
  59.  
  60.  /* paragraph that shows the text "Login" which is clicked on to display/remove the form */
  61. #login {
  62.     margin: 0;
  63.     cursor: pointer;
  64.     background-color: rgb(255,255,255);
  65.     padding: 5px 0 2px 30px;
  66. }
  67.  
  68. #login:hover{
  69.          background-color: rgb(110,138,195);
  70. }
  71.  
  72.  
  73.  /*  plus sign icon for login form */
  74. .plus {
  75.     background: url(img_open.png) no-repeat 8px 7px;
  76.     background-color: rgb(110,138,195);
  77. }
  78.  
  79.  /* minus sign icon for login form */
  80. .minus {
  81.     background: url(img_close.png) no-repeat 8px 7px;
  82. }
  83.  
  84.  
  85. /*form is hidden when the page loads */
  86. #loginDiv form {
  87.             padding: 10px 10px 10px 10px;
  88.             display: none;
  89.             background-color: rgb(255,255,255);
  90. }
  91.  
  92. #loginDiv label {
  93.              display: block;
  94.              width: 100px;
  95.              margin: 0 15px 0 0;
  96. }
  97.  
  98. #loginDiv input {
  99.              font-size: 1.2em;
  100.          border: 1px solid navy;
  101. }
  102.  
  103. #loginDiv input:focus {
  104.                        background-color: rgb(110,138,195);
  105.                border: 2px solid navy;
  106. }
  107.  
  108. #loginDiv input[type=button] {
  109.                           width: 100px;
  110. }
  111.  
  112.  
  113.  
  114. footer {
  115.         text-align: center;
  116.         margin-top: 50px;
  117.     margin-bottom: 10px;
  118.     padding: 20px;
  119.     border-top: 1px solid #000;
  120. }
  121.  
  122.  
  123. /* ad is not shown when the page loads  */
  124.  #ad {
  125.        width: 300px;
  126.        height:300px;
  127.        border: 1px solid #000;
  128.        background-color: yellow;
  129.        position: absolute;
  130.        left: 330px;
  131.        top: -500px;  /* you can change this inbitially for viewing purposes only but be sure to set it back */
  132.        box-sizing: border-box;
  133.        background-image: url(ad.jpg);
  134.        background-repeat: no-repeat;
  135. }
  136.  
  137. /* close button on ad */
  138. #adbtn {
  139.        width: 50px;
  140.        height: 50px;
  141.        border: 2px solid #000;
  142.        border-top-width: 1px;
  143.        border-right-width: 1px;
  144.        background-color: #fff;
  145.        font-size:3em;
  146.        text-align: center;
  147.        cursor: pointer;
  148.        box-sizing: border-box;
  149.        position: absolute;
  150.        top: 0px;
  151.        right: 0px;
  152. }
  153.  
  154. </style>
  155.  
  156. <script src="http://code.jquery.com/jquery.min.js"></script>
  157. <script>
  158. $(document).ready(function(){
  159.   //Sends the ad down after 5 seconds, over a 5 second duration
  160.   $("#ad").delay(5000).animate({marginTop: "600px"}, 5000); //this moves it 600 px down, which puts it to the 100 mark at the page.
  161.   //When the X is clicked on the ad, fade the ad over 5 seconds
  162.   $("#adbtn").click(function(){
  163.     $("#ad").fadeOut(5000);
  164.   });//end click
  165.  
  166. //Click method to toggle the login forum and buttons
  167.   $("#login").click(function() {
  168.     //changes the + to a -
  169.     $(this).toggleClass('minus');
  170.     //slides the form down in a 1 second duration
  171.     $(this).next().stop(true).slideToggle(1000);
  172.   }); // end click
  173.  
  174. //check values entered in text box upon clicking the submit button
  175.   $('input[value="Submit"]').click(function() {
  176.     //assigns the values in the text box to variables used to later check what is in them
  177.     var username = document.getElementById("username").value;
  178.     var password = document.getElementById("pw").value;
  179.     //checks if there is nothing in either username or password, if there is nothing, then it displays the error, otherwise the login is successful
  180.     if (!username ||!password) {
  181.       document.getElementById("error").innerHTML = "Please enter both login and password";
  182.     } else {
  183.       document.getElementById("error").innerHTML = "Please stand by";
  184.     }//end if
  185.   });//end click
  186.  
  187. }); //end ready
  188.  
  189. </script>
  190.  
  191. </head>
  192.  
  193. <body>
  194.  
  195. <!-- main container -->
  196. <div id="main">
  197.  
  198. <section id="loginDiv">
  199.        <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
  200.        <p id="login" class="plus">Login</p>
  201.  
  202.        <form>
  203.        <p>
  204.           <label for="username">Username:</label>
  205.           <input type="text" name="username" id="username">
  206.        </p>
  207.  
  208.        <p>
  209.           <label for="pw">Password:</label>
  210.           <input type="password" name="pw" id="pw">
  211.        </p>
  212.  
  213.        <p>
  214.           <input type="button" value="Submit">
  215.        </p>
  216.  
  217.        <!-- placeholder for response if form data is correct/incorrect -->
  218.       <p id="error"> </p>
  219.        </form>
  220. </section>
  221.  
  222.  
  223. <section id="welcome">
  224.     <h1>Welcome to the Local jQuery User Group Website</h1>
  225.        <p>
  226.           <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong>
  227.        </p>
  228.  
  229.    <h2>About this page layout:</h2>
  230.       <p>
  231.     The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
  232.     that main container. Otherwise, it would default to being absolutley positioned with respect to the window.
  233.       </p>
  234.  
  235.      <p>
  236.        In order for the login panel to be placed on top of the page  we need to use  absolute positioning, otherwise,
  237.        it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
  238.        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.
  239.     </p>
  240. </section>
  241.  
  242.  
  243. <section>
  244.     <h2>This week's agenda:</h2>
  245.     <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
  246.        It will be recorded! Please note that the code samples will be available on our GitHub repository.
  247.     </p>
  248. </section>
  249.  
  250.  
  251. <footer>
  252.     Copyright &copy; Local jQuery User Group
  253. </footer>
  254.  
  255.  
  256.  <!--  ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
  257.  <div id="ad">
  258.    <div id="adbtn">
  259.        X
  260.    </div>
  261.  </div>
  262.  
  263.  <!-- end main container -->
  264. </div>
  265.  
  266.  
  267. </body>
  268. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top