Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

How to blur the entire page except the form once user clicks into an input, select or textarea field?

I would like to blur the whole page out when the user clicks into an input, slect or textarea field. so its as if the page is focusing in on the form. And then when they click out of the form element the page un-blurs.

Any help would be really appreciated.

index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
  <body>

    <header class="above-form">
      <div class="banner">
        <h1>THE CODE REVIEW</h1>
      </div>
      <div class="head-page">
        <div class="border">
          <h2>Signup for our newsletter</h2>
          <p>Get the latest news on how your code is doing right in your inbox</p>
        </div>  
      </div>

    </header>

    <div class="main">
      <legend><strong>Contact Information</strong></legend>

      <form action='index.html' method='post'>

        <fieldset class="details">
          <div class="f-element">
            <label for="name">Full Name</label>  
            <input type="text" id="name" name="username" placeholder="Required" required>
          </div>
          <div class="f-element">
            <label for="email">Email Address</label> 
            <input type="email" id="mail" name="email" placeholder="Required" required>
          </div>
          <div class="f-element">
            <label for="number">Phone Number</label> 
            <input type="tel" id="number" name="number" placeholder="Required" required>  
          </div>
          <div class="f-element">
            <label for="street">Street Address</label> 
            <input type="text" id="street" name="street"> 
          </div>
          <div class="f-element">
            <label for="city">City</label> 
            <input type="text" id="city" name="city"> 
          </div>
          <div class="f-element">
            <label for="county">County</label>
            <select id="county" name="county" placeholder="Choose County">
              <option value="" disabled selected hidden>Choose County</option>
              <option value="Avon">Avon</option>
              <option value="Bedfordshire">Bedfordshire</option>
              <option value="Berkshire">Berkshire</option>
              <option value="City of Bristol">City of Bristol</option>
              <option value="Buckinghamshire">Buckinghamshire</option>
              <option value="Cambridgeshire">Cambridgeshire</option>
              <option value="Cheshire">Cheshire</option>
              <option value="Cleveland">Cleveland</option>
              <option value="Cornwall">Cornwall</option>
              <option value="City of London">City of London</option>
              <option value="Cumberland">Cumberland</option>
              <option value="Cumbria">Cumbria</option>
              <option value="Derbyshire">Derbyshire</option>
              <option value="Devon">Devon</option>
              <option value="Durham">Durham</option>
              <option value="East Suffolk">East Suffolk</option>
              <option value="East Sussex">East Sussex</option>
              <option value="Essex">Dorset</option>
              <option value="Gloucestershire">Gloucestershire</option>
              <option value="Greater London">Greater London</option>
              <option value="Greater Manchester">Greater Manchester</option>
              <option value="Hampshire">Hampshire</option>
              <option value="Hereford and Worcester">Hereford and Worcester</option>
              <option value="Herefordshire">Herefordshire</option>
              <option value="Hertfordshire">Hertfordshire</option>
              <option value="Humberside">Humberside</option>
              <option value="Huntingdon and Peterborough">Huntingdon and Peterborough</option>
              <option value="Isle of Ely">Isle of Ely</option>
              <option value="Isle of Wight">Isle of Wight</option>
              <option value="Kent">Kent</option>
              <option value="Lancashire">Lancashire</option>
              <option value="Leicestershire">Leicestershire</option>
              <option value="Lincolnshire">Lincolnshire</option>
              <option value="London">London</option>
              <option value="Merseyside">Merseyside</option>
              <option value="Middlesex">Middlesex</option>
              <option value="Norfolk">Norfolk</option>
              <option value="Northamptonshire">Northamptonshire</option>
              <option value="Northumberland">Northumberland</option>
              <option value="Nottinghamshire">Nottinghamshire</option>
              <option value="Oxfordshire">Oxfordshire</option>
              <option value="Rutland">Rutland</option>
              <option value="Shropshire">Shropshire</option>
              <option value="Somerset">Somerset</option>
              <option value="Staffordshire">Staffordshire</option>
              <option value="Suffolk">Suffolk</option>
              <option value="Surrey">Surrey</option>
              <option value="Sussex">Sussex</option>
              <option value="Tyne and Wear">Suffolk</option>
              <option value="Warwickshire">Suffolk</option>
              <option value="Westmorland">Westmorland</option>
              <option value="Wiltshire">Wiltshire</option>
              <option value="Worcestershire">Worcestershire</option>
              <option value="Yorkshire">Yorkshire</option> 
            </select>
          </div>
          <div class="f-element">
            <label for="post-code">Post Code</label> 
            <input type="text" id="post-code" name="post-code"> 
          </div>
        </fieldset>  

        <fieldset class="newsletter">
          <legend><strong>Newsletter</strong></legend>
          <label>Select the newsletters you would like to recieve</label>

          <input type="checkbox" id="html" value="html" name="html">
          <label for"html" class="checkbox">HTML News</label><br>

          <input type="checkbox" id="css" value="css" name="css">
          <label for"css" class="checkbox">CSS News</label><br>
          <input type="checkbox" id="javascript" value="javascript" name="javascript">
          <label for"javascript" class="checkbox">Javascript News</label>

          <label>Newsletter format</label>

          <input type='radio' id='html' value='html' name='format'>
          <label for='html' class='radio'>Under 13</label><br>
          <input type='radio' id='plain' value='plain' name='format'>
          <label for='plain' class='radio'>13 or older</label>

          <label>Other topics you'd like to hear about</label>   
          <textarea id="comments" name="comments"></textarea>

          <button type='submit'>Sign Up</button>  
        </fieldset>  
      </form>  
    </div>

    <footer>
      <p>Copyright The Code Review</p>
    </footer>

  </body>
</html>
styles.css 
body {
  margin: 0;
}

header {
  width: 100%;
}

.above-form {
  text-align: center;
  width: 100%;
}

.banner {
  background-color: #3b444c;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.head-page {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  border-bottom: 2px solid #3b444c;
}

.border {
  width: 100%;
  border-bottom: 4px solid #3b444c;
  margin-bottom: 2px;
}

h1, h2, h3, p {
  padding: 0;
  margin: 0;
}

h1 {
  color: #ffffff;
}

h2 {
  color: #3b444c;
} 

legend {
  color: #3b444c;
  font-size: 1.2em;
}

p {
  color: #bbc3cc;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.2em;
}

div {
  display: block;
}

.main {
  width: 90%; 
  margin-top: 20px;
  margin-left: 5%;
  margin-right: 5%;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.details {
  border-bottom: 2px solid #3b444c;
  width: 100%;
  padding-bottom: 20px;
}

label {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #939393;
  font-size: 1.1em;
}

input, select, textarea {
  width: 90%;
  text-align: left;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #e4e4e4;
  border: none;
  font-style: italic;
  border-radius: 3%;
  border: 2px solid #e4e4e4;
}

::-webkit-input-placeholder {
  text-align: right;
}

textarea {
  min-height: 100px;
  padding: 0;
  border: none;
}

input:hover, select:hover {
  border: 2px solid #2c4358;
}

#post-code {
  width: 40%;
}

.newsletter {
  margin-top: 20px;
}

input[type="checkbox"], input[type="radio"] {
  width: 10%;
  text-align: left;
  padding: 0;
  margin: 0;
  margin-left: -3%;
}

input[type="checkbox"]:checked {
  border: 2px solid #2c4358;
}

.checkbox, .radio {
  display: inline; 
}

button[type="submit"] {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #0dc69d;
  width: 100%;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 20px;
  font-size: 18px;
  display: block;
  outline: none;
  transition: background-color .2s, transform .2s;
}

footer {
  text-align: center;
  font-style: italic;
}

@media (min-width: 768px) {
  .head-page, .main {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .border {
    margin-top: 50px;
    padding-bottom: 50px;
  }

  .details label {
    float: left;
    width: 20%;
  }

  input[type="text"], input[type="email"], input[type="tel"], select {
    width: 77%;
    float: left;
  }

  textarea {
    width: 100%;
  }

  .f-element {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: auto;
  }

  .newsletter label {
    margin-top: 20px;
    margin-bottom: 20px;
  }

}

@media (min-width: 1024px) {

  .head-page, .main {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
  }

}

1 Answer

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

So there is two efficient ways of doing this using Javascript or SASS. Im going to show you a simple example with Javascript. For this I am using a library called Zepto because it's lighter then jQuery and the same thing because we are only using the blur and focus methods.

Here is a JSFIDDLE Example I made

HTML

<html>

  <body>

    <div class="container">
      <h1>Welcome Home</h1>
      <p>This is some dummy text to fill up space. This is some dummy text to fill up space. This is some dummy text to fill up space. This is some dummy text to fill up space.</p>
    </div>

    <form>
      <fieldset>
        <legend>Personal information:</legend>
        First name:
        <br>
        <input type="text" name="firstname" value="Mickey">
        <br> Last name:
        <br>
        <input type="text" name="lastname" value="Mouse">
        <br>
        <br>
        <input type="submit" value="Submit">
      </fieldset>
    </form>

  </body>

</html>

CSS

.blur{
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

Javascript (with zepto)

$("input").focus(function(){
//we add the css class blur to the elements that we would like to blur on focus
    $("h1").addClass("blur");
    $("p").addClass("blur");
}).blur(function(){
//we remove the blur class which will remove the blur from the elements specified when we are no longer focused on an input
    $("h1").removeClass("blur");
    $("p").removeClass("blur");
});

This is a simple concept that you can apply to your code and should work pretty well. Key here is defining your css with the proper blur styles then assigning them and removing them with the focus() and blur() methods and the addClass method as well.

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

How would I apply the blur class to a div but a specific div so say,

index.html 
<div class='main'></div>

something like

blur.js 
$("input").focus(function(){
    $(".main").addClass("blur");
})
Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

You would do 

$("input").focus(function(){
    $(".main").addClass("blur");
}); //dont forget this semicolon

add the period before the class name just like css.