Tutorial 4 Case 2

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jodiestjohn100
    New Member
    • Mar 2009
    • 3
    #1

    Tutorial 4 Case 2

    Hi

    My moveIt function is not working anmd I do not know why, can anyone help me

    Code:
    <html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 4
   Case Problem 2

   The Chamberlain Civic Center
   Author: Jodie St. John 
   Date:   March 4, 2009

   Filename:         ccc.htm
   Supporting files: back.jpg, ccc.gif, ccc.js, styles.css
-->
<title>This Month at the Chamberlain Civic Center</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script  type="text/javascript" src="ccc.js"></script>
<script type="text/javascript">
    function Marquee() {
      t1 = setInterval("moveIt('Text1')", 130);
      t2 = setInterval("moveIt('Text2')", 130);
      t3 = setInterval("moveIt('Text3')", 130);
      t4 = setInterval("moveIt('Text4')", 130);
      t5 = setInterval("moveIt('Text5')", 130);  
      t6 = setInterval("moveIt('Text6')", 130);
    } 
    
    function Stop() {
      alert ("stopping");
      
      clearInterval(t1);
      clearInterval(t2);
      clearInterval(t3);
      clearInterval(t4);
      clearInterval(t5);
      clearInterval(t6);
      
      alert("Stop");
    
    }
    
    function moveIt(id) {
        alert("inside moveIt");
        var y = yCoord(id);
       // alert("hi");
        if(y < -100) {
          placeIt(id, 5, 750);
        }
        else {
          shiftIt(id, 0, -5);}
    }
    
      
    
</script>
</head>

<body>
<form id="marquee_buttons" action="">

<div id="panel">
   <p>
      <img src="ccc.gif" alt="The Chamberlain Civic Center" />
   </p>
   <h2>
      Events This Month
   </h2>
   <p>To order tickets: Call the box office at (971) 555-9191<br />
   Or click <a href="#">here</a> to order online.
   </p>
</div>

<div id="BOX">

   <div id="Text1" style="position: absolute; left: 0px; top:5px">
     Coming Soon to the CCC
   </div>

   <div id="Text2" style="position: absolute; left: 0px; top: 50px">
     <b>October 2nd, 8 p.m.<br />
     Falstaff</b><hr />
     Enjoy the music of Verdi's <i>Falstaff</i>, as presented by the 
     popular Rockie Mountain Opera Company. Seating is limited.<br /><br />
     Tickets:  Box ($55), Main Floor ($45), Balcony ($35)
   </div>

   <div id="Text3" style="position: absolute; left: 0px; top: 200px">
     <b>October 7th, 8 p.m.<br />
     Taiwan Acrobats</b><hr />
     The Taiwan Acrobats return to the Carson Civic Center for another 
     evening of fun and excitment.<br /><br />
     Tickets:  Box ($40), Main Floor ($35), Balcony ($30)
   </div>

   <div id="Text4" style="position: absolute; left: 0px; top: 350px">
     <b>October 14th, 8 &amp; 10 p.m.<br />
     Roy Taylor</b><hr />
     Enjoy of the blues sound of the legendary "Slow Train" Taylor. 
     Two performances at 8 and 10 p.m.<br /><br />
     Tickets:  Box ($40), Main Floor ($35), Balcony ($30)
   </div>

   <div id="Text5" style="position: absolute; left: 0px; top: 500px">
     <b>October 21st, 8 p.m.<br />
     Celtic Dancers</b><hr />
     Enjoy an evening of Celtic music and dance, as presented by the
     Oban Dance Company of Scotland.<br /><br />
     Tickets:  Box ($30), Main Floor ($25), Balcony ($20)
   </div>

   <div id="Text6" style="position: absolute; left: 0px; top: 650px">
     <b>October 28th, 8 p.m.<br />
     An Evening with Ike</b><hr />
     David Lee presents <i>An Evening with Ike</i>, his acclaimed one-man
     show of the life and times of Dwight Eisenhower.<br /><br />
     Tickets:  Box ($35), Main Floor ($30), Balcony ($25)
   </div>
</div>

<div id="form_buttons">
      <input type="button" value="Scroll Marquee" onclick="Marquee()" />
      <input type="button" value="Stop  Marquee" onclick="Stop()"/>
      <input type="button" value="Reset" onclick="location.reload()" />
</div>

</form>
</body>

</html>
    Last edited by acoder; Mar 8 '09, 10:48 AM. Reason: Added [code] tags
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Hi, the file is working, can u pls attach the js file associated with it.. because its trowing error cant find the object placeIt and shiftIt... The function moveIt() is called and the alert is working.. can u pls bit more elaborate on your requirement.

      Regards
      Ramanan Kalirajan

        Comment

        • jodiestjohn100
          New Member
          • Mar 2009
          • 3
          #3
          java script file

          This is the code for the java script file
          Code:
          /* 
   New Perspectives on JavaScript
   Tutorial 4
   Case Problem 2

   The Chamberlain Civic Center
   Name: Jodie St. John
   Date: March 4, 2009

   Function List:
   placeIt(id, x, y)
      Places the id object at the page coordinates (x,y)

   shiftIt(id, dx, dy)
      Shifts the id object dx pixels to the left and dy pixels down

   yCoord(id)
      Returns the y-coordinate of the id object
*/



function placeIt(id, x, y) {
  object = document.getElementById(id);
  object.style.left=x+"px";
  object.style.top=y+"px";

}

function shiftIt(id, dx, dy) {
  object = document.getElementById(id);
  object.style.left= yCoord(id)+dx+"px";
  object.style.top = yCoord(id)+dy+"px";
}

function yCoord(id) {
  object=document.getElementById(id);
  yc = parseInt(object.style.top);
  return yc;

}
          Last edited by Dormilich; Mar 9 '09, 12:54 PM. Reason: added [code] tags

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              Yupe... :-( I have tested your code on both Mozilla and IE (6) it seems to be working good.. Can u pls tell me what is the error you are getting in ur browser...

              Regards
              Ramanan Kalirajan

                Comment

                • jodiestjohn100
                  New Member
                  • Mar 2009
                  • 3
                  #5
                  hi

                  Hi

                  The code is suppose to move vertical up the page and it does not do that

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      works for me (FF 3.0.7, Mac OS 10.5.6), although the CSS could need some improvement (got overlapping text)

                        Comment

                        • RamananKalirajan
                          Contributor
                          • Mar 2008
                          • 608
                          #7
                          The code is working and the marquee effect what u had given is working from right to left diagonal wise.. Its not working in Vertical direction but works in a diagonal manner....

                          Regards
                          Ramanan Kalirajan

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              The problem will most likely be (though I've only looked at and not tested your code) that you need an xCoord function:
                              Code:
                              function xCoord(id) {
  var object=document.getElementById(id);
  var xc = parseInt(object.style.left);
  return xc;
}
                              which you need to use in place of yCoord for style.left in ShiftIt().

                                Comment

                                • rexdreamer
                                  New Member
                                  • Aug 2009
                                  • 3
                                  #9
                                  did anyone get this to work? I am having the same problem, its not scrolling and i cant figure this xcord out.
                                  Code:
                                  function xCoord(id) { 
  var object=document.getElementById(id); 
  var xc = parseInt(object.style.left); 
  return xc; 
}

                                    Comment

                                    • Fewtam
                                      New Member
                                      • Feb 2010
                                      • 1
                                      #10
                                      The solution was very simple; you just need to remove a line from your shiftIt() function so it reads:

                                      Code:
                                              function shiftIt(id, dx, dy) {
                 object = document.getElementById(id);
                 object.style.top = yCoord(id)+dy+"px";
        }
                                      The problem was that the second yCoord line was creating two scrolling points on the y-axis, therefore it was scrolling diagonally. So take it out and it will only scroll vertically.
                                      Last edited by Dormilich; Feb 18 '10, 08:27 PM. Reason: Please use [code] tags when posting code

                                        Comment

                                        Previous template Next
                                        Working...