www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need Help Fast!

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Location
    California
    Posts
    7

    Need Help Fast!

    Can someone tell me if there is a way in javascript to globally make text in certain fields, RED, BOLD and a certain font.

    Any help would be very appreciated!

    Thanks,

    Ron

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Use CSS settings along with element ID settings to specify areas affected.

  3. #3
    Join Date
    Apr 2013
    Location
    California
    Posts
    7
    Thanks, I appreciate the help and the quick reply!!

    Ron

  4. #4
    Join Date
    Apr 2013
    Location
    California
    Posts
    7

    Question One More Quick Question...

    Could I impose upon you one more time to ask a quick question? How long would it take an experienced js coder to write this code? Just a ballpark estimate would be appreciated.



    http://www.freedomquestrealtysolutio...tor-jscode.pdf




    Thank You!

    Ron

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Quote Originally Posted by ronlove View Post
    Can someone tell me if there is a way in javascript to globally make text in certain fields, RED, BOLD and a certain font.

    Any help would be very appreciated!

    Thanks,

    Ron
    A few minutes ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Example </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    </style>
    
    </head>
    <body>
    
    <table border="0">
     <tr>
      <td>&nbsp;</td>
      <td><input type="text" id="rc11" value="Row 1 - Col 1"></td>
      <td><input type="text" id="rc12" value="Row 1 - Col 2"></td>
     </tr>
    
     <tr>
      <td> Font-color </td>
      <td><select onchange="adjust('rc11',this.value)">
           <option value="Black"> Black </option>
           <option value="Red"> Red </option>
           <option value="Green"> Green </option>
           <option value="Blue"> Blue </option>
          </select>
    
      </td>
      <td><select onchange="adjust('rc12',this.value)">
           <option value="Black"> Black </option>
           <option value="Red"> Red </option>
           <option value="Green"> Green </option>
           <option value="Blue"> Blue </option>
          </select>
      </td>
     </tr>
    
     <tr>
      <td> Background </td>
      <td><select onchange="adjust('rc11',this.value)">
           <option value="White"> White </option>
           <option value="Yellow"> Yellow </option>
           <option value="Orange"> Orange </option>
           <option value="Cyan"> Cyan </option>
          </select>
    
      </td>
      <td><select onchange="adjust('rc12',this.value)">
           <option value="White"> White </option>
           <option value="Yellow"> Yellow </option>
           <option value="Orange"> Orange </option>
           <option value="Cyan"> Cyan </option>
          </select>
      </td>
     </tr>
    
     <tr>
      <td> Weight </td>
      <td><select onchange="adjust('rc11',this.value)">
           <option value="Normal"> Normal </option>
           <option value="Bold"> Bold </option>
           <option value="Bolder"> Bolder </option>
           <option value="Lighter"> Lighter </option>
          </select>
      </td>
      <td><select onchange="adjust('rc12',this.value)">
           <option value="Normal"> Normal </option>
           <option value="Bold"> Bold </option>
           <option value="Bolder"> Bolder </option>
           <option value="Lighter"> Lighter </option>
          </select>
      </td>
     </tr>
    
     <tr>
      <td> Size </td>
      <td><select onchange="adjust('rc11',this.value)">
           <option value="Small"> Small </option>
           <option value="Medium"> Medium </option>
           <option value="Large"> Large </option>
          </select>
      </td>
      <td><select onchange="adjust('rc12',this.value)">
           <option value="Small"> Small </option>
           <option value="Medium"> Medium </option>
           <option value="Large"> Large </option>
          </select>
      </td>
     </tr>
    
    </table>
    
    <script type="text/javascript">
    function adjust(IDS,action) {
      var sel = document.getElementById(IDS);
      switch (action) {
        case 'Normal': sel.style.fontWeight = 'normal'; break;
        case 'Bold': sel.style.fontWeight = 'bold'; break;
        case 'Bolder': sel.style.fontWeight = '900'; break;
        case 'Lighter': sel.style.fontWeight = '200'; break;
    
        case 'Black': sel.style.color = 'black'; break;
        case 'Red': sel.style.color = 'red'; break;
        case 'Green': sel.style.color = 'green'; break;
        case 'Blue': sel.style.color = 'blue'; break;
    
        case 'White': sel.style.backgroundColor = 'white'; break;
        case 'Yellow': sel.style.backgroundColor = 'yellow'; break;
        case 'Orange': sel.style.backgroundColor = 'orange'; break;
        case 'Cyan': sel.style.backgroundColor = 'cyan'; break;
    
        case 'Small': sel.style.fontSize = 'small'; break;
        case 'Medium': sel.style.fontSize = 'medium'; break;
        case 'Large': sel.style.fontSize = 'large'; break;
      }
    }
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles