5 Replies - 752 Views - Last Post: 07 August 2014 - 09:13 PM

#1 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Adding a shadow to a pop up table cell

Posted 06 August 2014 - 10:42 AM

I get no error but the shadow is at the bottom of the file and not attached to the description table cell. There are two javascript files and one html. Would this be the problem
document.body.appendChild(this.divElem);??


/*
   New Perspectives on Javascript, 2nd Edition
   Tutorial 11
   Case Problem 2

   Author:    
   Date:      

   Functions List:

   addOverlay()
      Adds a detail overlay to table cells in the KPAF
      schedule table

*/

addEvent(window, "load", addOverlay, false);


function addOverlay() {

   var allOverlayTargets = document.getElementsByTagName("td");

   for (var i = 0; i < allOverlayTargets.length; i++) {


      var overlayID = allOverlayTargets[i].id + "Overlay";
      var overlay = document.getElementById(overlayID);

      allOverlayTargets[i].onmouseover = function(e) {
         this.style.backgroundColor = "rgb(255, 225, 255)";
      }
      allOverlayTargets[i].onmouseout = function(e) {
         this.style.backgroundColor = "rgb(255, 255, 255)";
      }

      allOverlayTargets[i].onmousedown = function(e) {
         var evt = e || window.event;
         var overlay = document.getElementById(this.id + "Overlay");
         overlay.style.display = "block";
         
         if (evt.pageX) {
            overlay.style.left = evt.pageX + 5 + "px";
            overlay.style.top = evt.pageY + 5 + "px";
         } else {
            var offX = document.documentElement.scrollLeft + document.body.scrollLeft;
            var offY = document.documentElement.scrollTop + document.body.scrollTop;
            overlay.style.left = evt.clientX + offX + 5 + "px";
            overlay.style.top = evt.clientY + offY + 5 + "px";
         }

      }
      
//create myShadow with specific values 
      
      myShadow = new shadow(overlay, 13, 13, 0, 0, 0, 30);

//add addtopage method 
       
       myShadow.addtoPage();
       
//set the display style to block
       
       myShadow.divElem.style.display = "block";
       
//set left style of divElem using offsetX
       
       myShadow.divElem.style.left = overlay.style.left + myShadow.offsetX + "px"; 
       
//set top style of divElem using offsety 
       
       myShadow.divElem.style.top = overlay.style.top + myShadow.offsetY + "px"; 
    


      allOverlayTargets[i].onmouseup = function(e) {
         var evt = e || window.event;
         var overlay = document.getElementById(this.id+"Overlay");
         overlay.style.display = "none";
          
//declare shawodElem variable whose is is equal to overlay id plus text string
          
          
          var shadowElem = document.getElementById(overlay.id + "DropShadow"); 
          
//remove shadowElem on mouse Up 
          
          
          while (shadowElem.hasChildNodes()) {
   shadowElem.removeChild(shadowElem.lastChild);
} 


      }

   }
}






/*
   New Perspectives on Javascript, 2nd Edition
   Tutorial 11
   Case Problem 2

   Author: 
   Date:   


   Custom objects and methods

   shadow(source, offX, offY, r, g, b, op)
      Constructs a shadow object for the source object
      with horizontal and vertical offsets offX and offY, and color
      value r,g,b and opacity op.

*/
//create shadow 
function shadow(source, offX, offY, r, g, b, op) {
    
//definne srcObject 
    
    srcObject = source;
    
//define offsetX 
    
    offsetX = offX;
    
//define offsetY 
    
    offSetY = offY;
    
//define color 
    
    color = "rgb(" + r + ", " + g + ", " + b + ")";
    

//define opacity 

    opacity = op;
}

//create addtopage shadow prototype 

shadow.prototype.addtoPage = function() {

//create divElem object 
    
    this.divElem = document.createElement("div");
    
//append the divElem to document 

//possibly the issue    
    document.body.appendChild(this.divElem);

//set the id of shadow div element equal to the id of the source plus text "DropShadow" 
    
    this.divElem.id = srcObject.id + "DropShadow"; 

//set the bacground color 
    
    this.divElem.style.backgroundColor = color;

//use get style to set width
    
    this.divElem.style.width = getStyle(srcObject, "width"); 
    
//use get style to set height
    
    this.divElem.style.height = getStyle(srcObject, "height"); 

//set the opacity of divElem 
    
    setOpacity(this.divElem, opacity); 

//set the position to absolute 
    
    this.divElem.style.position = "absolute"; 

//set the style display
    
    this.divElem.style.display = "none"; 
    
//create objectZ variable  use getStyle()

    var objectZ = getStyle(srcObject, "z-index"); 

//define objectZ value if auto or undefined to be equal to 1
    
    if (objectZ == "auto" || objectZ == "undefined") 
    
   { objectZ = 1; }

//set the z-index style of srcObject to object Z plus 1
    
    srcObject.style.zIndex = objectZ + 1; 

//set the z index of divElem to objct Z 
    
    this.divElem.style.zIndex = objectZ; 


    
}




and html. This came with the assignment and has no been edited except adding scripts on top.



<?xml version="1.0" encoding="UTF-8" ?>

<!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>
<!-- 
   New Perspectives on Javascript, 2nd Edition
   Tutorial 11
   Case Problem 2

   KPAF Nightly Schedule
   Author:         
   Date:        

   Filename:         schedule.htm
   Supporting files: kpaf.css, kpaf.jpg, overlay.js, 
                     shadows.js, tables.css
-->

   <title>KPAF Nightly Schedule</title>
   <link href="kpaf.css" rel="stylesheet" type="text/css" />
   <link href="tables.css" rel="stylesheet" type="text/css" />
   <link href="overlay.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="kpaflib.js"></script>
   <script type="text/javascript" src="overlay.js"></script>
    <script type="text/javascript" src="shadows.js"></script>

</head>

<body>
   <div id="heading">
      <h2>| Listener supported <i>since</i> 1966</h2>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Schedule</a></li>
         <li><a href="#">Programs</a></li>
         <li><a href="#">Music</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#">Events</a></li>
         <li><a href="#">Listen Live</a></li>
         <li><a href="#">Contact Us</a></li>
         <li><a href="#">Support KPAF</a></li>
      </ul>
   </div>

   <div id="page_content">
      <h1><img src="kpaf.jpg" alt="KPAF" /></h1>

      <h2>KPAF Nightly Schedule</h2>
      <p>KPAF airs listener-supported public radio in Bismarck, North Dakota from 
         5:00 a.m. to 10:30 p.m. You can <a href="#">Listen Live</a> to streaming audio 
         of our broadcast. Please refer below for our current nightly schedule.
      </p>

      <table class="schedule">
         <caption>All broadcasts listed in Central time</caption>

         <colgroup>
            <col class="firstCol" />
            <col class="dayCols" span="7" />
         </colgroup>

         <thead>
         <tr>
            <th>Time</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
         </tr>
         </thead>

         <tbody>
         <tr>
            <th>6:00</th>
            <td colspan="7" id="nnshow">National News</td>
         </tr>

         <tr>
            <th>6:30</th>
            <td colspan="7" id="lnshow">Local News</td>
         </tr>
         <tr>
            <th>7:00</th>
            <td rowspan="2" id="ofshow">Opera Fest</td>
            <td rowspan="2" id="rushow">Radio U</td>
            <td rowspan="2" id="swshow">Science Week</td>
            <td rowspan="2" id="tlwshow">The Living World</td>
            <td id="wpshow">Word Play</td>
            <td id="awshow">Agri-Week</td>
            <td rowspan="2" id="ffshow">Folk Fest</td>
         </tr>
         <tr>
            <th>7:30</th>
            <td id="bsshow">Brain Stew</td>
            <td id="bfshow">Bismarck Forum</td>
         </tr>
         <tr>
            <th>8:00</th>
            <td rowspan="4" colspan="4" id="cmcshow">The Classical Music Connection</td>
            <td rowspan="4" id="otrshow">Old Time Radio</td>
            <td rowspan="4" id="snjshow">Saturday Nite Jazz</td>
            <td rowspan="4" id="icshow">The Indie Connection</td>
         </tr>
         <tr>
            <th>8:30</th>
         </tr>
         <tr>
            <th>9:00</th>
         </tr>

         <tr>
            <th>9:30</th>
         </tr>
         <tr>
            <th>10:00</th>
            <td colspan="7" id="wnfshow">World News Feed</td>
         </tr>
         </tbody>

      </table>


      <address>
         KPAF  
         4300 Magnolia Lane 
         Bismarck, ND 58504 
         (701) 555 - 5611
      </address>
  
   </div>


   <!-- Overlay Boxes -->

   <div id="nnshowOverlay" class="overlay">
      <h1>National News</h1>
      <p>Get the latest in national and regional
         news from the LSN (Listener-Supported Network) with
         your hosts Gary Li and Karen Kurthoven.
      </p>
   </div>

   <div id="lnshowOverlay" class="overlay">
      <h1>Local News</h1>
      <p>Keep up with the latest news from North Dakota with your
         hosts Steve Greene and Marty Miller.
      </p>
   </div>

   <div id="ofshowOverlay" class="overlay">
      <h1>Opera Fest</h1>
      <p>This week Opera Fest presents extended excerpts from
         <em>Turandot</em> by Giacomo Puccini. Join us for the
         fun.
      </p>
   </div>

   <div id="rushowOverlay" class="overlay">
      <h1>Radio U</h1>
      <p>Novelist Karen Graves reads from her latest work,
         <em>Hellion of Troy</em> and discusses how to get
         started in the publishing world.
      </p>
   </div>

   <div id="swshowOverlay" class="overlay">
      <h1>Science Week</h1>
      <p>Prof. Thomas Glass from UND Dept. of Physics
         discusses <em>String Theory and Spooky Action 
         at a Distance</em>.
      </p>
   </div>

   <div id="tlwshowOverlay" class="overlay">
      <h1>The Living World</h1>
      <p>Join us for a panel discussion on 
         the <i>Return of the Electric Car</i> and 
         the latest in eco-news.
      </p>
   </div>

   <div id="wpshowOverlay" class="overlay">
      <h1>Word Play</h1>
      <p>Join Kent Whyte, Donna Verdann, Bill
         Trudea, and Linda Jacobsen for game about
         words.
      </p>
   </div>

   <div id="bsshowOverlay" class="overlay">
      <h1>Brain Stew</h1>
      <p>Expand your mind with the 
         latest news from the world of speculative
         science and alternate realities presented by host
         Yale Crawford.
      </p>
   </div>

   <div id="awshowOverlay" class="overlay">
      <h1>Agri-Week</h1>
      <p>Keep informed and up-to-date on the
         latest agricultural news and trends from
         North Dakota with your host Harold Hawkes.
      </p>
   </div>

   <div id="bfshowOverlay" class="overlay">
      <h1>Bismarck Forum</h1>
      <p>Join us for a discussion of land use issues
         and the future of sustainable growth in
         North Dakota.
      </p>
   </div>

   <div id="ffshowOverlay" class="overlay">
      <h1>Folk Fest</h1>
      <p>Join host Fiona McKenzie with the latest in
         traditional and contempory folk music, live
         from the Bismarck Auditorium.
      </p>
   </div>

   <div id="cmcshowOverlay" class="overlay">
      <h1>Classical Music Connection</h1>
      <p>Bob Lee plays a nightly selection of classical
         music favorites. A KPAF standard for the past
         twenty years.
      </p>
   </div>

   <div id="otrshowOverlay" class="overlay">
      <h1>Classical Music Connection</h1>
      <p><em>The Shadow</em>, <em>Fibber McGee</em>,
         <em>Little Orphan Annie</em> and many others
         live again for your listening pleasure.
      </p>
   </div>

   <div id="snjshowOverlay" class="overlay">
      <h1>Saturday Nite Jazz</h1>
      <p>Tune in for the best of Jazz: from Swing
         and Be-Bop to contempory favorites; all 
         served up with fun facts and stories
         by Jazz historian, Deke Pauls.
      </p>
   </div>

   <div id="icshowOverlay" class="overlay">
      <h1>The Indie Connection</h1>
      <p>Keep up with the latest trends and newest
         stars as we explore the new voices of
         independent music with your host, Gale Sweeney.
      </p>
   </div>

   <div id="wnfshowOverlay" class="overlay">
      <h1>World News Feed</h1>
      <p>End the day with a global perspective as we report
         news from the BBC, International Wire Service, and
         other global news organizations.
      </p>
   </div>

</body>

</html>





Is This A Good Question/Topic? 0
  • +

Replies To: Adding a shadow to a pop up table cell

#2 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: Adding a shadow to a pop up table cell

Posted 06 August 2014 - 01:23 PM

You can't just dump near 500 lines of code here. Isolate the problem. I'm sure you will find the answer by yourself if you do it.
Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 1,816
  • Joined: 15-January 14

Re: Adding a shadow to a pop up table cell

Posted 06 August 2014 - 02:44 PM

An example online might help also. I'm not sure what "the shadow" or "the description table cell" indicate.
Was This Post Helpful? 0
  • +
  • -

#4 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Adding a shadow to a pop up table cell

Posted 06 August 2014 - 05:14 PM

My link

Thats the table cell that pops up and the shadow behind it. The shadow I get is at the bottom of the page. Bottom left corner.
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 1,816
  • Joined: 15-January 14

Re: Adding a shadow to a pop up table cell

Posted 07 August 2014 - 09:46 AM

Do you have your code online somewhere, that's what I meant. Are you checking for Javascript errors?
Was This Post Helpful? 0
  • +
  • -

#6 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Adding a shadow to a pop up table cell

Posted 07 August 2014 - 09:13 PM

There are no errors on the error console. There code is not online there is quite a bit of it posted earlier. I am not sure what the issue is at this point other than it doest not append to element it needs to be at.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1