0

I either need to be able to close my form, or to make it not overlaid over the html page (it would be nice to have it in the body of the page), OR I will need to have my "X" on the form actually close out the form to allow access of the navigation bar.

Here is my HTML code:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Will's Grill</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
  <script>
    var __adobewebfontsappname__ = "dreamweaver"
  </script>
  <script src="js/my.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 </head>

<body>
  <header>
    <!--top navigation bar to guide the user thru the site-->
    <div class="nav">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT WILL'S GRILL</a></li>
        <li><a href="menu.html">MENU</a></li>
        <li><a href="merch.html">MERCH</a></li>
        <li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </div>
  </header>
  <aside class="asidesection">
    <h2>Contact Will's Grill</h2>
  </aside>
  <section>
              <form action="comments.php" method="post">
        <div class="shade">
          <div class="blackboard">

            <div class="form">
              <span class="closeForm">&times;</span>
              <p>
                <label>Name: </label>
                <input type="text" name="name" />
              </p>
              <p>
                <label>Email: </label>
                <input type="text" name="email" />
              </p>
              <p>
                <label>Phone: </label>
                <input type="text" name="phone" />
              </p>
              <p>
                <label>Subject: </label>
                <input type="text" name="subject" />
              </p>
              <p>
                <label>Message: </label>
                <textarea name="message"></textarea>
              </p>
              <p>
                <input type="submit" value="send">
                <input type="reset" value="reset">
              </p>
            </div>
          </div>
        </div>
      </form>
  </section>
</body>
<footer>
  <!--bottom navigation bar to guide the user thru the site-->
  <div class="nav">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT WILL'S GRILL</a></li>
      <li><a href="menu.html">MENU</a></li>
      <li><a href="merch.html">MERCH</a></li>
      <li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>
</footer>

</html>

Here is my CSS:

@charset "utf-8";
header {
    background-color: orange;
    width: 100%;
    height: 20%;
    border-radius:25px;
}
body{
    background: red;
    background: linear-gradient(140deg, red 55%, yellow 40%);
    background-repeat: repeat-x;
    background-color: yellow;
    margin-left:2%;
    margin-right:2%;
    border-right-color:black;
    border-left-color:black;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: oblique;
    font-weight: 400;
    color: #000000;
    font-size: large;
    }
.nav ul {
    list-style-type: none;
    padding: 0;
    width:100%;
}
.nav ul li {
    float: left;
}
.nav {
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    display: flex; 
    border-radius:  25px;
    background-color: orange;
    overflow: hidden;
    height: auto;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
    }
.nav ul li a {
    display: inline-block;
    font-size: 25px;
    margin: 20px;
    line-height: normal;
    vertical-align:super;
    padding: .5em;
    border-right: 1px solid #000000;
    border-radius: .5;
    color: black;
}
.nav ul a:focus {
    color: red;
    border-color: red;
}
.asidesection {
    text-align: center;
    font-size: xx-large;
}
.columns { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
div.a {
text-indent: 50px;
}
.barbecue{
    height:400px;
    width:500px;
    float:left;
    margin:2%;
}

.words{
    background: rgba(256, 256, 256, .5);
    border: 2px solid orange;
    border-radius:5px;
    width: auto;
    margin: 2%;
    overflow: auto;
    padding:1%;
}
img {
    border-radius: 20px;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
}
form {
        height: 100%;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/concrete-wall-background.jpg) center center fixed;
        background-size: cover;
}

.shade {
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient( 150deg, rgba(0, 0, 0, 0.65), transparent);
}

.blackboard {
        position: relative;
        width: 640px;
        margin: 7% auto;
        border: tan solid 12px;
        border-top: #bda27e solid 12px;
        border-left: #b19876 solid 12px;
        border-bottom: #c9ad86 solid 12px;
        box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
        background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
        background-color: #333;
}

.blackboard:before {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
        border: #2c2c2c solid 2px;
        content: "Contact Us";
        font-family: 'Permanent Marker', cursive;
        font-size: 2.2em;
        color: rgba(238, 238, 238, 0.7);
        text-align: center;
        padding-top: 20px;
}
.form {
        padding: 70px 20px 20px;
}

p {
        position: relative;
        margin-bottom: 1em;
}

label {
        vertical-align: middle;
        font-family: 'Permanent Marker', cursive;
        font-size: 1.6em;
        color: rgba(238, 238, 238, 0.7);
}

p:nth-of-type(5) > label {
        vertical-align: top;
}

input,
textarea {
        vertical-align: middle;
        padding-left: 10px;
        background: none;
        border: none;
        font-family: 'Permanent Marker', cursive;
        font-size: 1.6em;
        color: rgba(238, 238, 238, 0.8);
        line-height: .6em;
        outline: none;
}

textarea {
        height: 120px;
        font-size: 1.4em;
        line-height: 1em;
        resize: none;
}

input[type="submit"] {
        cursor: pointer;
        color: rgba(238, 238, 238, 0.7);
        line-height: 1em;
        padding: 0;
}

input[type="submit"]:focus {
        background: rgba(238, 238, 238, 0.2);
        color: rgba(238, 238, 238, 0.2);
}

::-moz-selection {
        background: rgba(238, 238, 238, 0.2);
        color: rgba(238, 238, 238, 0.2);
        text-shadow: none;
}

::selection {
        background: rgba(238, 238, 238, 0.4);
        color: rgba(238, 238, 238, 0.3);
        text-shadow: none;
}
.closeForm {
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}

Here is my jQuery:

// All CSS except the concrete wall

$('.closeForm').click(function () {
    //close action
});
J.Speer
  • 1
  • 3
  • Possible duplicate of [How to hide Bootstrap modal from javascript?](https://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-from-javascript) – Joe Sebin Jun 04 '18 at 08:44

3 Answers3

0

Just Edit your js like :

$('.closeForm').click(function () {
    $('.shade').hide();
});
segito10
  • 379
  • 6
  • 14
0

$('.closeForm').click(function () {
   $('.shade').hide();
});
header {
    background-color: orange;
    width: 100%;
    height: 20%;
    border-radius:25px;
}
body{
    background: red;
    background: linear-gradient(140deg, red 55%, yellow 40%);
    background-repeat: repeat-x;
    background-color: yellow;
    margin-left:2%;
    margin-right:2%;
    border-right-color:black;
    border-left-color:black;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: oblique;
    font-weight: 400;
    color: #000000;
    font-size: large;
    }
.nav ul {
    list-style-type: none;
    padding: 0;
    width:100%;
}
.nav ul li {
    float: left;
}
.nav {
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    display: flex; 
    border-radius:  25px;
    background-color: orange;
    overflow: hidden;
    height: auto;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
    }
.nav ul li a {
    display: inline-block;
    font-size: 25px;
    margin: 20px;
    line-height: normal;
    vertical-align:super;
    padding: .5em;
    border-right: 1px solid #000000;
    border-radius: .5;
    color: black;
}
.nav ul a:focus {
    color: red;
    border-color: red;
}
.asidesection {
    text-align: center;
    font-size: xx-large;
}
.columns { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
div.a {
text-indent: 50px;
}
.barbecue{
    height:400px;
    width:500px;
    float:left;
    margin:2%;
}

.words{
    background: rgba(256, 256, 256, .5);
    border: 2px solid orange;
    border-radius:5px;
    width: auto;
    margin: 2%;
    overflow: auto;
    padding:1%;
}
img {
    border-radius: 20px;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
}
form {
        height: 100%;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/concrete-wall-background.jpg) center center fixed;
        background-size: cover;
}

.shade {
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient( 150deg, rgba(0, 0, 0, 0.65), transparent);
}

.blackboard {
        position: relative;
        width: 640px;
        margin: 7% auto;
        border: tan solid 12px;
        border-top: #bda27e solid 12px;
        border-left: #b19876 solid 12px;
        border-bottom: #c9ad86 solid 12px;
        box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
        background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
        background-color: #333;
}

.blackboard:before {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
        border: #2c2c2c solid 2px;
        content: "Contact Us";
        font-family: 'Permanent Marker', cursive;
        font-size: 2.2em;
        color: rgba(238, 238, 238, 0.7);
        text-align: center;
        padding-top: 20px;
}
.form {
        padding: 70px 20px 20px;
}

p {
        position: relative;
        margin-bottom: 1em;
}

label {
        vertical-align: middle;
        font-family: 'Permanent Marker', cursive;
        font-size: 1.6em;
        color: rgba(238, 238, 238, 0.7);
}

p:nth-of-type(5) > label {
        vertical-align: top;
}

input,
textarea {
        vertical-align: middle;
        padding-left: 10px;
        background: none;
        border: none;
        font-family: 'Permanent Marker', cursive;
        font-size: 1.6em;
        color: rgba(238, 238, 238, 0.8);
        line-height: .6em;
        outline: none;
}

textarea {
        height: 120px;
        font-size: 1.4em;
        line-height: 1em;
        resize: none;
}

input[type="submit"] {
        cursor: pointer;
        color: rgba(238, 238, 238, 0.7);
        line-height: 1em;
        padding: 0;
}

input[type="submit"]:focus {
        background: rgba(238, 238, 238, 0.2);
        color: rgba(238, 238, 238, 0.2);
}

::-moz-selection {
        background: rgba(238, 238, 238, 0.2);
        color: rgba(238, 238, 238, 0.2);
        text-shadow: none;
}

::selection {
        background: rgba(238, 238, 238, 0.4);
        color: rgba(238, 238, 238, 0.3);
        text-shadow: none;
}
.closeForm {
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Will's Grill</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
  <script>
    var __adobewebfontsappname__ = "dreamweaver"
  </script>
  <script src="js/my.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 </head>

<body>
  <header>
    <!--top navigation bar to guide the user thru the site-->
    <div class="nav">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT WILL'S GRILL</a></li>
        <li><a href="menu.html">MENU</a></li>
        <li><a href="merch.html">MERCH</a></li>
        <li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </div>
  </header>
  <aside class="asidesection">
    <h2>Contact Will's Grill</h2>
  </aside>
  <section>
              <form action="comments.php" method="post">
        <div class="shade">
          <div class="blackboard">

            <div class="form">
              <span class="closeForm">&times;</span>
              <p>
                <label>Name: </label>
                <input type="text" name="name" />
              </p>
              <p>
                <label>Email: </label>
                <input type="text" name="email" />
              </p>
              <p>
                <label>Phone: </label>
                <input type="text" name="phone" />
              </p>
              <p>
                <label>Subject: </label>
                <input type="text" name="subject" />
              </p>
              <p>
                <label>Message: </label>
                <textarea name="message"></textarea>
              </p>
              <p>
                <input type="submit" value="send">
                <input type="reset" value="reset">
              </p>
            </div>
          </div>
        </div>
      </form>
  </section>
</body>
<footer>
  <!--bottom navigation bar to guide the user thru the site-->
  <div class="nav">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT WILL'S GRILL</a></li>
      <li><a href="menu.html">MENU</a></li>
      <li><a href="merch.html">MERCH</a></li>
      <li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>
</footer>

</html>

Not sure which element you want to hide.

Wils
  • 1,178
  • 8
  • 24
0

This will not completely solve your closing button, however it should address issues with loading your js to enable your event listener.

1) You declared the js file earlier than the jquery script in the header. The js file requires jquery. The js file will attempt to load, but unable due to lack of library.

  <script src="js/my.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Correct sequence should be:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/my.js"></script>

2) In your my.js file below, will not understand the reference because the DOM has not been loaded yet. This is due to placing the script in the head tag.

$('.closeForm').click(function () {
    //close action
});

Instead use document ready so the javascript file loads AFTER the DOM has loaded.

$(document).ready(function () {
    $('.closeForm').click(function (event) {
        //close action
        console.log("Testing.");
    });
});
Eric
  • 79
  • 4
  • With the help of other people in my group, we were able to figure out which CSS code was causing the form not to sit on the page (to allow access to the navigation bar. We had removed "shade", along with some of the background code that was creating a concrete wall, and now everything is accessible. BTW: I am a student, and this was for my Web Design class. I thought that this forum was a place to ask questions for help, but I have noticed that I have been blocked from asking further questions. It is a good thing that I am almost done with school. – J.Speer Jun 05 '18 at 20:12