SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jscript conflict.. help..

    whenever i use the stopwatch on my page, i cant undo (ctrl+z) things inside the text area.. im using IE6 but with firefox its working properly, i prefer using IE though coz i like it.

    any help would be appreciated.

    heres my code:

    Code:
    <html>
    <head><title>Notes maker</title>
    <STYLE type="text/css">
    body {background-color: 000000}
    
    
    input    {
          font-family:Verdana, sans-serif;
          font-size:9px;
          font-style: normal;
          line-height: normal;
          color: #333333;
           }
    
    a      {
        font-family:Verdana, sans-serif;
        font-size:10px;
        font-style: normal;
        line-height: normal;
        color: CC9933;
        }
    
    p      {
        font-family:Verdana, sans-serif;
        font-size:10px;
        font-style: normal;
        line-height: normal;
        color: CC9933;
        }
    
    input.time     {
              font-family:Verdana, sans-serif;
            }
    
    td.time         {
              font-family:Verdana, sans-serif;
              font-weight: bold;
              font-size:15px;
    
    
              background-color: 004000;
              color: red;
            }
    
    a:link {text-decoration: none; text-transform: none; }
    a:visited {color: CC9933; text-decoration: none; text-transform: none; }
    
    </STYLE>
    
    
    <script language="JavaScript">
    <!-- hide
    function openNewWindow() {
      popupWin = window.open('http://www.twcvault.com/tkm/ModemLibrary/ModemLibrary.asp',
      'open_window',
      'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0')
    }
    // done hiding -->
    </script>
    
    <style type="text/css">
             .default{
                width: 310px;
                padding: 3px;
                text-align:left;
                font:bold 10pt sans-serif;
                background-color:F2F2F2;
                font-size:11px;
                border:1px solid #000000;
             }
             .calcAvgInput{
                float:right;
                background-color:#FFFFFF;
                border:1px solid #7F9DB9;
                font:normal 10pt sans-serif;
             }
          </style>
    
    </head>
    
    
    <body>
    
           <div align="left">
            <form name="notepad">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:
    
    collapse">
    
                <tr>
                <td>
                <textarea name="commentbox" rows="14" cols="38" wrap="">
    issue: Unable to connect to the Internet 
    tel: 
    caller: 
    p.email: 
    os: XP 
    modem: 
    router: none 
    
    t/s
    
    
                </textarea>
                </tr>
    
                </td>
    
     
    
    
            <tr>
            <td>
            <input type="reset" name="reset3" value="RESET" style="font-family: Verdana font-size: 9.0pt">
            </td>
            </tr>
            </form>
    
     
                <form name="notepad2">
    
                <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:
    
    collapse">
    
     
                <tr>
                <td>
                    <textarea name="commentbox" rows="5" cols="38" wrap="">
    
                </textarea>
                </tr>
                     </td>
    
                <tr>
    
                <td>
                <input type="reset" name="reset4" value="RESET" style="font-family: Verdana font-size:
    
    9.0pt" >
    
                </td>
                </tr>
                </form>
    
    <tr>
    <td>
    
    
    <br>
    
    <!()()()()()()()()()()()()()()()----------------COMPUTE BOX-----------------------()()()()()()()()()()()()()()()()>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
    <form name="AHT">
    
    <td>
    <tr>
      <div class="default" style="background-color:#D9EDDD;">
        <b>Daily Average Handle Time </b>
          <div class="default">
             <input type="text" name="value" id="valueID" value="" class="calcAvgInput" size='6'
    
    'highlight' /> Last Call :
          </div>
    
          <div class="default">
             <input type="text" name="divisor" id="divisorID" value="0" class="calcAvgInput"
    
    style="background-color:#D9EDDD;font:bold 10pt sans-serif;" size='1' maxlength='6' readonly />
    
    Number's of call :
          </div>
          <div class="default">
             <input type="text" name="total" id="totalID" value="0" class="calcAvgInput"
    
    style="background-color:#D9EDDD;font:bold 10pt sans-serif;" size='6' maxlength='6' readonly /> Total
    
    Handle Time :
          </div>
          <div class="default">
             <input type="text" name="average" id="averageID" value="0" class="calcAvgInput"
    
    style="background-color:#D9EDDD;font:bold 10pt sans-serif;" maxlength='6' readonly /> AHT :
          </div>
    
        <div class="default">
    
             <input type="button" value="Calculate Average" class="calcAvgInput" onclick="calcAverage();"
    
    />
          </div>
    <script type="text/javascript">
             function calcAverage(){
                if(isNaN(parseFloat(objAmount.value))){
                   alert("Enter only numbers and try again.");
                } else {
                   objDivisor.value = parseFloat(objDivisor.value) + 1;
                   objTotal.value = parseFloat(objTotal.value) + parseFloat(objAmount.value);
                   objAverage.value = (objTotal.value / objDivisor.value);
                }
             }
     
             var objTotal = document.getElementById("totalID");
             var objAmount = document.getElementById("valueID");
             var objAverage = document.getElementById("averageID");
             var objDivisor = document.getElementById("divisorID");
          </script>
    
    </div>
    
    </td>
    </tr>
    </form>
    </table>
    
    <br>
    
    <!()()()()()()()()()()()()()()()----------------STOP WATCH-----------------------()()()()()()()()()()()()()()()()>
    
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
      
    <div align="left">
    <left>
    <table border="1">
      <tr bgcolor="#a1b39c">
        <td valign="center" align="center" colspan="3">
          <form name="clock" action="0" onSubmit="0">
            <font color="#FF3333">
              <input type="text" name="facehr" size="6">
              <input type="text" name="facemn" size="6">
              <input type="text" name="facesc" size="6">
    
            </font>
          </form>
        </td>
      </tr>
      <tr bgcolor="#a1b39c">
        <td align="left"><font color="#FF3333"><input type="button" size="1" value="Start" onClick="startclock()" name="button"> </font></td>
        <td align="left"><font color="#FF3333"><input type="button" size="1" value="Stop"  onClick="stopclock()" name="button"> </font></td>
        <td align="left"><font color="#FF3333"><input type="button" size="1" value="Reset" onClick="resetclock()" name="button"> </font></td>
    
      </tr>
    </table>
    </left>
    </div>
    </table>
    
    <script type="text/javascript" language="JavaScript">
    
    <!--
    var seconds = 0
    var minutes = 0
    var hours = 0
    var timerID = null
    var timerRunning = false
    var startClicked = false
    
    
    function resetclock(){
        seconds = 0
        minutes = 0
        hours = 0
        timerID = null
        timerRunning = false
        startClicked = false
        document.clock.facehr.value = "00 hr"
        document.clock.facemn.value = "00 min" 
        document.clock.facesc.value = "00 sec"
    }
    
    function stopclock(){
        if(timerRunning)
            clearTimeout(timerID)
        timerRunning = false
        startClicked = false
    }
    
    function startclock(){
        if (startClicked != true){
           showtime()
           startClicked = true
        }
    }
    
    function showtime(){
        seconds = seconds + 1
        if (seconds == 60)
          {
            seconds = 0
            minutes = minutes+1
          }
        if (minutes == 60)
            {
            minutes = 0
            hours = hours+1
            }
        var timeValuehr = "" + ((hours < 10) ? "0" : "") + hours
        var timeValuemin = "" + ((minutes < 10) ? "0" : "") + minutes
        var timeValuesec = "" + ((seconds < 10) ? "0" : "") + seconds
    
        document.clock.facehr.value = timeValuehr + " hr"
        document.clock.facemn.value = timeValuemin + " min"
        document.clock.facesc.value = timeValuesec + " sec"
    
        timerID = setTimeout("showtime()",1000)
        timerRunning = true
    }
    
    
    </script>
    </head>
    
    </table>
    
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's an IE thing.

    If the page content is changed in any way, IE resets the undo buffer.

    You could try implementing undo yourself, saving the text content on focus and putting it back when an undo button is clicked. Alternatively, IE doesn't mind CSS changes, so you could implement the timer display with an image containing all digits and just move different ones into view using CSS positioning.

    Not very nice.
    Last edited by r51; Jul 31, 2008 at 18:08.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example of a CSS powered counter. It's only single digit but it could easily be expanded.
    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=UTF-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    p#counter{background:url(../images/numbers.gif) center top no-repeat;width:40px;height:40px;}
    </style>
    
    </head>
    
    <body>
    <textarea name="comments"></textarea>
    
    <p id="counter"></p>
    
    <script type="text/javascript">
    var el = document.getElementById("counter");
    var counter = -1;
    var digitSize = 40;
    
    function loop() {
      counter = ++counter &#37; 10;
      el.style.backgroundPosition = "center " + (-counter * digitSize) + "px"
      setTimeout(function(){loop();}, 1000);
    }
    
    loop();
    </script>
    
    </body>
    </html>
    It's working at http://www.room51.co.uk/javascript/s...ounterCSS.html
    Last edited by r51; Jul 31, 2008 at 19:19.

  4. #4
    SitePoint Member
    Join Date
    May 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx of the suggestion... maybe i should rest my case wit IE and use it in firefox.


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
  •