SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Explanation of a function

    I understand this script except for the notation in: "popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';" Can you explain it for me please?

    Complete script:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    /*<![CDATA[*//*---->*/
    function popup(popup_name) {
    
    popup_elem=document.getElementById(popup_name);
    popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
    }
    /*--*//*]]>*/
    </script>
    <style type="text/css">
    #outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
    .middle {height:100%; display:table; margin:0 auto;}
    .inner {vertical-align:middle; display:table-cell;}
    
    #firstPopupDiv {width:100px;height:100px;background-color:red;margin:40px 0px 0px 0px;}
    </style>
    
    <!--[if IE]>
     <style>
    #outer {filter: alpha(opacity = 75);}
     </style>
    <![endif]-->
    
    <!--[if lte IE 7]>
     <style>
      /* centering for ie6/ie7 */
      .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}
      .inner { position:relative; top:-50%; left:-50%; }
     </style>
    <![endif]-->
    
    </head>
    <body>
    <h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>
    
    <div id="outer" onclick="popup('outer')">
    <div class="middle">
    <div class="inner">
    
    <div id="firstPopupDiv"> 
    <p>You are here.</p>
    </div>
    
    </div>
    </div>
    </div>
    
    </body>
    </html>

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    I understand this script except for the notation in: "popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';" Can you explain it for me please?
    The expression is a ternary.

    Basically it's a short form of

    Code:
    if(popup_elem.style.display == 'block' ) {
          popup_elem.style.display = 'none';
    } else {
          popup_elem.style.display = 'block';
    }

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Can you explain it for me please?
    It's a ternary statement as was said, but it really is bad form for each clause to execute different statements, because it can then be harder to understand what those parts do.

    A better solution is to use the ternary statement to assign one value or another to the CSS property itself.

    For example:
    Code Javascript:
    popup_elem.style.display = (popup_elem.style.display === 'block') ? 'none' : 'block';
    Last edited by paul_wilkins; Dec 4, 2011 at 19:42. Reason: Bad iPad auto suggest
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, based on http://www.w3schools.com/JS/js_comparisons.asp

    How does that toggle the popup?

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    OK, based on http://www.w3schools.com/JS/js_comparisons.asp

    How does that toggle the popup?
    As shown in either post 2 or post 3.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think I just got it. (popup_elem.style.display == 'block') refers to display:none; in #outer right?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    I think I just got it. (popup_elem.style.display == 'block') refers to display:none; in #outer right?
    That's right. JavaScript doesn't change the CSS code, it just adds a style attribute on to the element and updates the CSS declarations on that inline style attribute.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very very much to webdev1958 and paul_wilkins. This has been one of the most satisfying topics ever! javascript has always challenged me for reasons I don't completely understand. php, msql, css, and html seem so straight forward compared to js. This helped a lot.

    Thanks Again,

    Niche


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
  •