Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript required

    I dont have much experience with javascript. Please provide javascript to create something like the image below:

    http://www.coolmicroscope.com/java.jpg

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    There's no JavaScript required for that.

    In fact, JavaScript would be useless.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getElements()
      {
      var peter=document.getElementsByTagName("input");
      alert(peter.length);
      }
    </script>
    <style type="text/css">
    table { border: none; font-family: arial; font-size: x-small; }
    td { background-color: #0088DD; 
         color: white; 
         width: 160px; height: 30px; 
         vertical-align: top; 
         margin: 0;
         border: solid 3px #003399;
    }
    th { background-color: #003399; 
         color: white; 
         width: 160px; height: 10px; 
         vertical-align: top; text-align: left;
         margin: 0;
         border: solid 3px #003399;
    }
    </style>
    </head>
    <body>
    <table cellpaddin="0" cellspacing="0">
    <tr><th>1:00 AM</th></tr>
    <tr><td>Client Name</td></tr>
    </table>
    </body>
    </html>
    That's not *exactly* what you showed, but if I took a few minutes longer I could get it closer.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    There's no JavaScript required for that.

    In fact, JavaScript would be useless.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getElements()
      {
      var peter=document.getElementsByTagName("input");
      alert(peter.length);
      }
    </script>
    <style type="text/css">
    table { border: none; font-family: arial; font-size: x-small; }
    td { background-color: #0088DD; 
         color: white; 
         width: 160px; height: 30px; 
         vertical-align: top; 
         margin: 0;
         border: solid 3px #003399;
    }
    th { background-color: #003399; 
         color: white; 
         width: 160px; height: 10px; 
         vertical-align: top; text-align: left;
         margin: 0;
         border: solid 3px #003399;
    }
    </style>
    </head>
    <body>
    <table cellpaddin="0" cellspacing="0">
    <tr><th>1:00 AM</th></tr>
    <tr><td>Client Name</td></tr>
    </table>
    </body>
    </html>
    That's not *exactly* what you showed, but if I took a few minutes longer I could get it closer.
    Thanks for the code. Could you please help me format the code below to look like the image below?



    Things I can't workout are:

    1. top and bottom background colors
    2. add two blinking text
    3. border color same as top background color
    4. Opacity like the image

    Code:
    "data:text/html,<html>
    <head>
    
    <script type='text/javascript'>
    function blinkIt() {
     if (!document.all) return;
     else {
       for(i=0;i<document.all.tags('blink').length;i++){
          s=document.all.tags('blink')[i];
          s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
       }
     }
    }
    </script>
    
    <style type="text/css">
    html, body {
    height: 100%;
    width: 100%;
    }
    
    body
    {
    margin  : 0px 0px 0px 0px;
    border : 0px;
    }
    
    table 
    {
    border-collapse: collapse;
    width : 100%;
    height : 100%;
    }
    
    td {
    text-align: center;
    vertical-align : top;
    
    font: bold 11px arial;
    
    color:rgb(0,0,0);
    background-color:rgb(255,255,0);
    
    }
    </style>
    </head>
    <body  onload=\"setInterval('blinkIt()',500)\">
    <table><tr><td><blink>"
    Some Text
    "</td></tr></table></blink>
    </body>
    </html>"
    Last edited by slamdunk; 08-25-2010 at 03:52 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •