Delaying a script load time.

[photocode]

I'm a photographer, and I'm working on my own site, mostly using dreamweaver to do the xhtml. The documentary photography site is at

http://www.dpphoto.ca

and you can see the code there.

I don't really understand javascript, and I'm using scripts i got off the web. I use a script to create a typing text effect on my main page

http://www.dpphoto.ca/index.html

and the linked script is at

http://www.dpphoto.ca/assets/typingtext.js

.

I want to create a delay on the load that would either delay the script for a second or two, or would show a blinking cursor for a second or two before beginning the typing.

If there is a line or two of code that could be added that specifies a certain wait time, that would be awesome.

Any comments would be greatly appreciated, as I'm a beginner coder.


Thanks,
david

http://www.dpphoto.ca

 

[feherke]

Hi

Try to replace index.html line 267 :

[s]TypingText.runAll();[/s]

setTimeout('TypingText.runAll()',3000);

Feherke.

http://rootshell.be/~feherke/

 

[photocode]

I guess I ought to have posted the code as well.

this is inline in my document:

<script type="text/javascript">
new TypingText(document.getElementById("typenav"), 140, function(i){ var ar = new Array("|", "|", "|", "", "", ""); return "" + ar[i.length % ar.length]; });
TypingText.runAll();
</script>

and then this is the file:

/*
An object-oriented Typing Text script, to allow for multiple instances.
A script that causes any text inside any text element to be "typed out", one letter at a time. Note that any HTML tags will not be included in the typed output, to prevent them from causing problems. Tested in Firefox v1.5.0.1, Opera v8.52, Konqueror v3.5.1, and IE v6.
Browsers that do not support this script will simply see the text fully displayed from the start, including any HTML tags.

Functions defined:
  TypingText(element, [interval = 100,] [cursor = "",] [finishedCallback = function(){return}]):
    Create a new TypingText object around the given element.  Optionally
    specify a delay between characters of interval milliseconds.
    cursor allows users to specify some HTML to be appended to the end of
    the string whilst typing.  Optionally, can also be a function which
    accepts the current text as an argument.  This allows the user to
    create a "dynamic cursor" which changes depending on the latest character
    or the current length of the string.
    finishedCallback allows advanced scripters to supply a function
    to be executed on finishing.  The function must accept no arguments.

  TypingText.run():
    Run the effect.

  static TypingText.runAll():
    Run all TypingText-enabled objects on the page.
*/

TypingText = function(element, interval, cursor, finishedCallback) {
  if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {
    this.running = true;	// Never run.
    return;
  }
  this.element = element;
  this.finishedCallback = (finishedCallback ? finishedCallback : function() { return; });
  this.interval = (typeof interval == "undefined" ? 100 : interval);
  this.origText = this.element.innerHTML;
  this.unparsedOrigText = this.origText;
  this.cursor = (cursor ? cursor : "");
  this.currentText = "";
  this.currentChar = 0;
  this.element.typingText = this;
  if(this.element.id == "") this.element.id = "typingtext" + TypingText.currentIndex++;
  TypingText.all.push(this);
  this.running = false;
  this.inTag = false;
  this.tagBuffer = "";
  this.inHTMLEntity = false;
  this.HTMLEntityBuffer = "";
}
TypingText.all = new Array();
TypingText.currentIndex = 0;
TypingText.runAll = function() {
  for(var i = 0; i < TypingText.all.length; i++) TypingText.all[i].run();
}
TypingText.prototype.run = function() {
  if(this.running) return;
  if(typeof this.origText == "undefined") {
    setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);	// We haven't finished loading yet.  Have patience.
    return;
  }
  if(this.currentText == "") this.element.innerHTML = "";
//  this.origText = this.origText.replace(/<([^<])*>/, "");     // Strip HTML from text.
  if(this.currentChar < this.origText.length) {
    if(this.origText.charAt(this.currentChar) == "<" && !this.inTag) {
      this.tagBuffer = "<";
      this.inTag = true;
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
      this.tagBuffer += ">";
      this.inTag = false;
      this.currentText += this.tagBuffer;
      this.currentChar++;
      this.run();
      return;
    } else if(this.inTag) {
      this.tagBuffer += this.origText.charAt(this.currentChar);
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == "&" && !this.inHTMLEntity) {
      this.HTMLEntityBuffer = "&";
      this.inHTMLEntity = true;
      this.currentChar++;
      this.run();
      return;
    } else if(this.origText.charAt(this.currentChar) == ";" && this.inHTMLEntity) {
      this.HTMLEntityBuffer += ";";
      this.inHTMLEntity = false;
      this.currentText += this.HTMLEntityBuffer;
      this.currentChar++;
      this.run();
      return;
    } else if(this.inHTMLEntity) {
      this.HTMLEntityBuffer += this.origText.charAt(this.currentChar);
      this.currentChar++;
      this.run();
      return;
    } else {
      this.currentText += this.origText.charAt(this.currentChar);
    }
    this.element.innerHTML = this.currentText;
    this.element.innerHTML += (this.currentChar < this.origText.length - 1 ? (typeof this.cursor == "function" ? this.cursor(this.currentText) : this.cursor) : "");
    this.currentChar++;
    setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);
  } else {
	this.currentText = "";
	this.currentChar = 0;
        this.running = false;
        this.finishedCallback();
  }
}

thanks,
david

 

[photocode]

Feherke,

that was awesome thanks.

the only problem I have now is that the text loads before the script so everything appears, then disappears then gets typed out.

check it:

http://www.dpphoto.ca

thanks,
david

 

[feherke]

Hi

[s]TypingText.runAll();[/s]

[s]setTimeout('TypingText.runAll()',3000));[/s]

setTimeout('[red]document.getElementById("typenav").style.visibility="visible";[/red]TypingText.runAll()',3000);

[s]<td id="navbar" align="left"><div id="typenav">  <a href="[URL unfurl="true"]http://www.dpphoto.ca/contact.html">con</a></div>[/URL][/s]

<td id="navbar" align="left"><div id="typenav" [red]style="visibility:hidden"[/red]>  <a href="[URL unfurl="true"]http://www.dpphoto.ca/contact.html">con</a></div>[/URL]

Feherke.

http://rootshell.be/~feherke/

 

[photocode]

Feherke,

that is exactly what I was looking for.

Thank you very much,
david.