Web Analytics Made Easy -
StatCounter Problems with JS Popup - CodingForum

Announcement

Collapse
No announcement yet.

Problems with JS Popup

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problems with JS Popup

    Hey all, Im trying to add a feature to one of my webpages where when you scroll over a specific word, a popup appears. However, for some reason the code im using isnt working. Can someone please take a look at it and let me know what im doing wrong?

    Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
        <title>JavaScript-based Pop-Up Div</title>
        <style type="text/css">
          body{
            padding: 0;
            margin: 0;
            background: #fff;  
    	}
          h1{
            font: bold 24px Arial, Helvetica, sans-serif;
            color: #000;
          }
          .popupcontainer{
            width: 300px;
            padding: 10px;
            background: #eee;
            border: 1px solid #ccc;
            font: normal 12px Arial, Helvetica, sans-serif;
            color: #000;
          }
          .popupdiv{
            position: absolute;
            width: 200px;
            padding: 5px;
            background: #ffc;
            border: 1px solid #ccc;
            font: normal 12px Arial, Helvetica, sans-serif;
            color: #000;
    }
        </style>
        <script language="javascript">
          // display Pop Up div element
          function displayPopupDiv(e){
            var posx=0;
            var posy=0;
            if(!e){var e=window.event};
            // determine target DIV
            var targ=e.target?e.target:e.srcElement;
            // calculate mouse coordinates
            if(e.pageX||e.pageY){
              posx=e.pageX;
              posy=e.pageY;
            }
            else if(e.clientX||e.clientY){
              posx=e.clientX;
              posy=e.clientY;
            }
            // assign attributes to pop-up DIV element and append it
            // to web document tree
            var div=document.getElementById('popup');
            if(!div){
              var div=document.createElement('div');
              div.setAttribute('id','popup');
              div.className='popupdiv';
              div.appendChild(document.createTextNode('This is a
    sample content for pop-up DIV element.'));
              document.getElementsByTagName('body')[0].appendChild
    (div);    
            }
            // move pop-up DIV element
            div.style.top=posy+5+'px';
            div.style.left=posx+5+'px';
          }
          // remove pop-up DIV element
          function hidePopupDiv(){
            var div=document.getElementById('popup');
            if(!div){return};
            div.parentNode.removeChild(div); 
          }
          // display pop-up DIV element when web page has 
          // been loaded
          window.onload=function(){
            if(document.getElementById && document.createElement &&
    document.createTextNode){
              var div=document.getElementById('container');
              if(!div){return};
              // display pop-up DIV element
             div.onmousemove=displayPopupDiv;
             // hide pop-up DIV element
             div.onmouseout=hidePopupDiv;
           }
         }
       </script>
      </head>
      <body>
        <h1>JavaScript-based Pop-up Div</h1>
        <div class="popupcontainer" id="container">
          <p>Content for containing DIV goes here...<br />
             Content for containing DIV goes here...<br />
             Content for containing DIV goes here...<br />
             Content for containing DIV goes here...<br />
             Content for containing DIV goes here...<br />
             Content for containing DIV goes here...</p>
        </div>
      </body>
    </html>

  • #2
    Originally posted by ajhp3 View Post

    Code:
          function displayPopupDiv(e){
         ...
              div.appendChild(document.createTextNode([COLOR="Red"]'This is a
    sample content for pop-up DIV element.'[/COLOR]));
     ...
         }
       </script>
    javascript string literals cannot be defined as multi line strings. you have to open and close the quote in the same line or use string concatenation
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

    Comment

    Working...
    X