Dynamicaly change text font, size and colour.

@RetroFiestaJan 15.2008

Hi,

I’m trying to do a simple bit of code in JS. Where after a function has run, some text will be highlighted by it’s colour, font and size being changed.

But how do I do this?
I suspect it’s a GetelementbyId command, but beyond that…..

Thanks in advance.

Jason.

to post a comment

JavaScript

@magentaplacentaJan 15.2008 — #Not sure if this will help, http://www.nsftools.com/misc/SearchAndHighlight.htm

@RetroFiestaauthorJan 15.2008 — #No. Not exactly.

But I'll see if I can adapt the code for my own use.

Jason.

@magentaplacentaJan 15.2008 — #What text do you want changed? Can you post up say a paragraph of text and indicate what text you want changed? If it's static text, it's easy to do.

@RetroFiestaauthorJan 15.2008 — #I'm doing a 'Windows 98 install screen type spoof'.

So.

As each part 'installs', the text is changed from a standard white text to a Bold Yellow text, with any previously highlighted text changed back to standard white.

Preparing to run Setup.

Collecting information about your Computer.

Copying files to your computer.

Initialise hardware drivers.

Each one being changed after an animation or some-such has happened on screen.

Thanks,

Jason.

@magentaplacentaJan 16.2008 — #Probably not the best way to do this, but it works? It's a 3 second delay between transitions.

[CODE]<script type="text/javascript">
 function cycleSteps() {
 var step1 = document.getElementById("step1");
 step1.style.color = "#ffff00";
 step1.style.fontSize   = "125%";
 step1.style.fontWeight = "bold";
 
  window.setTimeout(cycleStep2, 3000);
 }
 
 function cycleStep2() {
 var step1 = document.getElementById("step1");
 step1.style.color = "#fff";
 step1.style.fontSize   = "100%";
 step1.style.fontWeight = "normal";
 
  var step2 = document.getElementById("step2");
  step2.style.color = "#ffff00";
  step2.style.fontSize   = "125%";
  step2.style.fontWeight = "bold";
 
  window.setTimeout(cycleStep3, 3000);
 }
 
 function cycleStep3() {
 var step2 = document.getElementById("step2");
 step2.style.color = "#fff";
 step2.style.fontSize   = "100%";
 step2.style.fontWeight = "normal";
 
  var step3 = document.getElementById("step3");
  step3.style.color = "#ffff00";
  step3.style.fontSize   = "125%";
  step3.style.fontWeight = "bold";
 
  window.setTimeout(cycleStep4, 3000);
 }
 
 function cycleStep4() {
 var step3 = document.getElementById("step3");
 step3.style.color = "#fff";
 step3.style.fontSize   = "100%";
 step3.style.fontWeight = "normal";
 
  var step4 = document.getElementById("step4");
  step4.style.color = "#ffff00";
  step4.style.fontSize   = "125%";
  step4.style.fontWeight = "bold";
 
  window.setTimeout(end, 3000);
 }
 
 function end() {
 var step4 = document.getElementById("step4");
 step4.style.color = "#fff";
 step4.style.fontSize   = "100%";
 step4.style.fontWeight = "normal";
 
  var finish = document.createElement("div");
  finish.className = "complete";
  finish.appendChild(document.createTextNode("Installation Complete!"));
  document.body.appendChild(finish);
 }
 
 window.onload = function() {
 window.setTimeout(cycleSteps, 3000);
 }
 
 </script>
 
 <style type="text/css">
 .steps {
 width:400px;
 margin:20px;
 padding:10px;
 border:1px solid #ccc;
 background:#000;
 color:#fff;
 }
 
 .complete {
 width:400px;
 margin:20px;
 padding:10px;
 border:1px solid #ccc;
 background:green;
 color:#fff;
 font-weight:bold;
 }
 </style>
 
 <div id="step1" class="steps">Preparing to run Setup.</div>
 
 <div id="step2" class="steps">Collecting information about your Computer.</div>
 
 <div id="step3" class="steps">Copying files to your computer.</div>
 
 <div id="step4" class="steps">Initialise hardware drivers.</div>[/CODE]

@RetroFiestaauthorJan 16.2008 — #That is brilliant!

I'm sure I can use that to fill my needs.

Thank you.

( I've learnt something new too.. I didn't know you could do a timer. ) ?

Jason.

Dynamicaly change text font, size and colour.

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Dynamicaly change text font, size and colour.

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴