SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: First Popup Div

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    First Popup Div

    I can't figure out what to put in the function to make id="firstPopupDiv" to display. What method should I use? Is my script setup right to popup the nondisplayed div (except for the empty function)?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function popup(popup_name) {
    }
    </script>
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="firstPopupDiv" style="display:none;">
    <p>You are here.</p>
    </div>
    <h1><a href="#" onclick="popup('firstPopupDiv')">Click Here To Open The Pop Up</a></h1>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's ugly, but it works and I'm learning. How do I get the 100 x 100 red background to display and how do I get the popup to display for more than a second?

    My work so far:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language=javascript type='text/javascript'>
    function popup(popup_name) {
    var myDivId = document.getElementById('firstPopupDiv');
    document.write(myDivId.innerHTML);
    }
    
    </script> 
    <style type="text/css">
    </style>
    </head>
    <body>
    
    <div id="firstPopupDiv" style="width:100px;height:100px;background-color:red;display:none;">
    <p>You are here.</p>
    </div>	
    <h1><a href="#" onclick="popup()">Click Here To Open The Pop Up</a></h1>
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Have a much improved script, but still a work in progress.

    I thought it would be displayed out of the flow like a true popup. So, I put in some positioning, but it's still displacing the link. How should I change my thinking to keep the link from moving and make the popup act like a true js popup?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language=javascript type='text/javascript'>
    function popup(popup_name) {
     document.getElementById(popup_name).style.display = 'block';
    }
    
    </script> 
    <style type="text/css">
    </style>
    </head>
    <body>
    
    <h1 style="float:left;"><a href="#" onclick="popup('firstPopupDiv')">Click Here To Open The Pop Up</a></h1>
    <div id="firstPopupDiv" style="width:100px;height:100px;background-color:red;display:none;margin:40px 0px 0px 0px;">
    <p>You are here.</p>
    </div>	
    </body>
    </html>

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In order to get the box to show, you can update the display property of its style object:

    Code JavaScript:
    function popup() {
        var myDiv = document.getElementById('firstPopupDiv');
        myDiv.style.display = 'block'; // no more document.write! :D
    }

    But while you're learning, here are a few other suggestions:

    1. Are you using XHTML or HTML? XHTML is supposed to be a subset of XML. That's why XHTML documents have an xmlns attribute on their <html> node. However, you're using an HTML4 doctype. (Yes, this is an absurdly unimportant point.)
    2. Don't use the "language" attribute. There's no need for it. (Again, kind of silly, but there you go.)
    3. Move the <script> to the bottom of the <body>. There are various reasons for this, but the most relevant in this case is that we're going to be messing with the DOM, and this is the easiest way to ensure that the DOM is available.
    4. Don't use HTML's "onclick". Again, there are various reasons for this, but it's mostly because it is ugly and an affront unto the Front End Lord. The problem is that events are really complicated in JavaScript. For simplicity, simply use an event handler:

      Code JavaScript:
      function popup() { /* ... */ }
      var myLink = document.getElementsByTagName('h1')[0].
          getElementsByTagName('a')[0]; // using an id would (obviously) be easier here
      myLink.onclick = popup;
    I'm the web overlord for Graphic Business Systems

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by sdleihssirhc View Post
    1. Don't use HTML's "onclick". Again, there are various reasons for this, but it's mostly because it is ugly and an affront unto the Front End Lord. The problem is that events are really complicated in JavaScript. For simplicity, simply use an event handler:

    Not sure what you're on about here.

    In this case the event handler is the popup() function which is called when an onclick event is triggered.

    The only question then is whether the event handler should be assigned directly in the html or separately in the javascript. Yes, inline javascript is generally frowned upon nowadays, but since the op is learning the basics there is nothing wrong with assigning the onclick in the html, especially if you want to KISS


  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what i have so far. How do I get the inner div to align vertically? I cant get vertical-align:middle; to work.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language=javascript type='text/javascript'>
    function popup(popup_name) {
     document.getElementById(popup_name).style.display ='block';
    }
    </script> 
    <style type="text/css">
    #firstPopupDivOuter {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75;}
    #firstPopupDivInner{width:100px;height:100px;background-color:white;vertical-align:middle;margin: 0 auto;}
    </style>
    </head>
    <body>
    <div id="firstPopupDivOuter" >
      <div id="firstPopupDivInner" >
        <a href="http://localhost/first_popup_div.html">close popup</a> 
        <p>You are here.</p>
      </div>		
    </div>	
    <h1 style="float:left;"><a href="#" onclick="popup('firstPopupDivOuter')">Click Here To Open The Pop Up</a></h1>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •