Twitter Bootstrap Question posted in

Twitter bootstrap – What to do with the <Empty Div>

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- Bootstrap -->
        <title>Sean Kim</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
        <![endif]-->
        <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
        <!--<![endif]-->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link type="text/css" rel="stylesheet" href="css/stylesheet.css">
        <script src="js/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <div class="custom-menu-wrapper">
    <div class="pure-menu custom-menu custom-menu-top">
      <a href="#" class="pure-menu-heading custom-menu-brand">Sean Kim</a>
      <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
    </div>
    <div class="me" id="home">
      <br><br><br>
      <h1 class="name">SEAN KIM</h1>
      <hr>
      <h6 class="intro">14 year-old programmer/student at Bergen County Academies</h6>
      <div class="element"></div>
      <img src="images/nyc.jpg" class="img-responsive nyc">
    </div>
    <div id="about">
      <h2 class="about-text">About Me</h2>
      <img src="images/golf.png" align="left"class="propic">
      <p class="info">My name is Sean Kim and I'm a freshman at 
        <a href="http://bcts.bergen.org/index.php/bergen-county-academies" class="bca">
          Bergen County Academies
        </a> in the Academy of Technology and Computer Science (ATCS).
      </p>
    </div>
    <div id="skills">
      <h2 class="skills-text">Skills</h2>
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-4 html5">
          <img src="images/logos/html5.png" alt="HTML 5" width="106" height="150">
          <p class="languages">HTML 5</p>
        </div>
        <div class="pure-u-1 pure-u-md-1-4 css3">
          <img src="images/logos/css.png" alt="CSS3" width="106" height="150">
          <p class="languages">CSS3</p>
        </div>
        <div class="pure-u-1 pure-u-md-1-4 python">
          <img src="images/logos/python.png" alt="PYTHON" width="150" height="150">
          <p class="languages">PYTHON</p>
        </div>
      </div>
    </div>
    </div>
    <div class="contact-container" id="contact">
      <h2 class="contact-text">Contact Me</h2>
      <div class="pure-g contact">
        <div class="pure-u-1 pure-u-md-1-4 Facebook">
          <a href="https://www.facebook.com/seankim327" target="_blank" class="icon">
            <i class="fa fa-facebook-square fa-5x"></i>
          </a>
        </div>
        <div class="pure-u-1 pure-u-md-1-4 Instagram">
          <a href="https://www.instagram.com/seankim.co.kr" target="_blank" class="icon">
            <i class="fa fa-instagram fa-5x"></i>
          </a>
        </div>
        <div class="pure-u-1 pure-u-md-1-4 Twitter">
          <a href="https:/www.twitter.com/sean_d_kim" target="_blank" class="icon">
            <i class="fa fa-twitter-square fa-5x"></i>
          </a>
        </div>
        <div class="pure-u-1 pure-u-md-1-4 GitHub">
          <a href="https://github.com/seankim327" target="_blank" class="icon">
            <i class="fa fa-github-square fa-5x"></i>
          </a>
        </div>
      </div>
      <script>
        function sendMail(email, subject, content) {
          $.ajax({
            type: 'POST',
            url: 'https://mandrillapp.com/api/1.0/messages/send.json',
            data: {
              'key': 'goYVUvLoJH3ICbEMgIA-ow',
              'message': {
                'from_email': email,
                'to': [
                    {
                      'email': '[email protected]',
                      'name': 'Sean Kim',
                      'type': 'to'
                    }
                  ],
                'autotext': 'true',
                'subject': subject,
                'html': content
              }
            }
           }).done(function(response) {
            if (response[0].status == "rejected") {
              document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
            } else {
              document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
            }
         });
        }
      </script>
    </div>
  </body>
</html>

I asked my friend who’s good with JavaScript to write me code that can send emails, so he used the Mandrill API and wrote me one. But he told me to replace the <Empty Div> with “empty divs” or I need a span to output to. I have no idea what that means. Can someone help?

Tags:

3

Answers


  1. 0

    He’s saying that in your html, you need to create a div tag. He’s basically saying “hey, my code is going to do something and you need to create a div tag in your html page so that my code can put it into it. Once you create this div tag, go to the code I gave you and replace the <Empty Div> with whatever you labled the id as.

    <div id="myDiv"></div>

    Then, in the code that your friend gave you, replace <Empty Div> with the id attribute (myDiv)

    Login or Signup to reply.
  2. 0

    An Empty div is one that had both an open and close but has no contents or other elements as contents between that open and close.

    The Div in question that your friend was referring to in the code is: 

    <div class="element"></div>

    It is located just under the line that has the text

    14 year-old programmer/student at Bergen County Academies
    Login or Signup to reply.
  3. 0

    In short use an id attribute, say, “email-status”, on an element in your HTML body where you want the status update to appear. Reference it using document.getElementById('email-status').

    Here is a more detailed explanation with links for more information.

    Both div, which is a block element (which by default appears separated by newlines from surrounding text), or a span, which is an inline element, are HTML tags that are regularly referenced and manipulated in Javascript.

    When you want to replace the content of a specific element you typically create a selector using an id attribute. The id value cannot have spaces and should be unique among all id values in the document.

    For example, an HTML div with an id of “mail-response” would simply be written:

    <div id="mail-status"></div>

    This div above would be placed in the HTML document body where you want your status message to appear.

    While you could use a class attribute as your selector as another reply suggested, in this case it is not ideal. The class attribute is not necessarily unique as it was initially intended to apply CSS formatting to one or more elements. Generally speaking there may be other times when you want to use Javascript to select all tags with a particular class. In your particular case, you want to target one particular location so an id is more appropriate.

    To select a div based on its id you can use document.getElementById like you did, but it simply takes a parameter of the id value you want to select.

    document.getElementById("mail-response").innerHTML = "Entry is <b>invalid</b>";

    In your example, the done function reads:

    function(response) {
    if (response[0].status == "rejected") {
        document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
    } else {
        document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
    }
}

    Note that there are two problems here. First is that the getElementById simple takes an id value as its parameter not an HTML snippet. Second, is that you had unescaped double quotes within a double-quoted string.

    A minimal correction would be to change the block to reference the existing value and skills divs directly.

    function(response) {
    if (response[0].status == "rejected") {
        document.getElementById("about").innerHTML = "Please enter valid fields";
    } else {
        document.getElementById("skills").innerHTML = "Sent!";
    }
}

    Note however, that the about and skills element currently contain content. Replacing the innerHTML will remove the content currently in those elements. Based on your other comments it sounds like rather than replacing the existing blocks you would prefer to insert the status update into an initially empty element that has been set aside for the status update.

    Finally, I would suggest that if you in fact posted your actual mandrill API key, that you change it immediately.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search