Results 1 to 4 of 4

Thread: How to get a custom font to work in a script

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default How to get a custom font to work in a script

    1) Script Title: Fireworks Effect

    2) Script URL (Not on DD; on another website): http://www.mf2fm.com/rv/dhtmlfireworks.php

    3) Describe problem: The following "Fireworks" script works just fine, but my efforts to use the custom font "Great Vibes" have failed. How can I use a custom font in this script when it seems to use it's own font?

    Test Page

    Code:
    <script type="text/javascript">
    // <![CDATA[
    var bits=9; // how many bits
    var speed=15; // how fast - smaller is faster
    var bangs=15; // how many can be launched simultaneously (note that using too many can slow the script down)
    var colours=new Array("#f0c", "#ff0", "#fff", "#f03", "#ff0", "#f03", "#f0c"); 
    //                     pink    yellow  white    red    yellow   red    pink
    
    /****************************
    *      Fireworks Effect     *
    *(c)2004-14 mf2fm web-design*
    *  http://www.mf2fm.com/rv  *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    var bangheight=new Array();
    var intensity=new Array();
    var colour=new Array();
    var Xpos=new Array();
    var Ypos=new Array();
    var dX=new Array();
    var dY=new Array();
    var stars=new Array();
    var decay=new Array();
    var swide=50;
    var shigh=1000;
    var boddie;
    
    if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
      var oldonload=window.onload;
      if (typeof(oldonload)!='function') window.onload=funky;
      else window.onload=function() {
        if (oldonload) oldonload();
        funky();
      }
    }
    
    addRVLoadEvent(light_blue_touchpaper);
    
    function light_blue_touchpaper() { if (document.getElementById) {
      var i;
      boddie=document.createElement("div");
      boddie.style.position="fixed";
      boddie.style.top="0px";
      boddie.style.left="0px";
      boddie.style.overflow="visible";
      boddie.style.width="1px";
      boddie.style.height="1px";
      boddie.style.backgroundColor="transparent";
      document.body.appendChild(boddie);
      set_width();
      for (i=0; i<bangs; i++) {
        write_fire(i);
        launch(i);
        setInterval('stepthrough('+i+')', speed);
      }
    }}
    
    function write_fire(N) {
      var i, rlef, rdow;
      stars[N+'r']=createDiv('|', 12);
      boddie.appendChild(stars[N+'r']);
      for (i=bits*N; i<bits+bits*N; i++) {
        stars[i]=createDiv('Renée', 13);
        boddie.appendChild(stars[i]);
      }
    }
    
    function createDiv(char, size) {
      var div=document.createElement("div");
      div.style.font=size+"px monospace";
      div.style.position="absolute";
      div.style.backgroundColor="transparent";
      div.appendChild(document.createTextNode(char));
      return (div);
    }
    
    function launch(N) {
      colour[N]=Math.floor(Math.random()*colours.length);
      Xpos[N+"r"]=swide*0.5;
      Ypos[N+"r"]=shigh-5;
      bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
      dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
      if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
      else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
      else stars[N+"r"].firstChild.nodeValue="|";
      stars[N+"r"].style.color=colours[colour[N]];
    }
    
    function bang(N) {
      var i, Z, A=0;
      for (i=bits*N; i<bits+bits*N; i++) { 
        Z=stars[i].style;
        Z.left=Xpos[i]+"px";
        Z.top=Ypos[i]+"px";
        if (decay[i]) decay[i]--;
        else A++;
        if (decay[i]==15) Z.fontSize="7px";
        else if (decay[i]==7) Z.fontSize="2px";
        else if (decay[i]==1) Z.visibility="hidden";
    	if (decay[i]>1 && Math.random()<.1) {
    	   Z.visibility="hidden";
    	   setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
    	}
        Xpos[i]+=dX[i];
        Ypos[i]+=(dY[i]+=1.25/intensity[N]);
    
      }
      if (A!=bits) setTimeout("bang("+N+")", speed);
    }
    
    function stepthrough(N) { 
      var i, M, Z;
      var oldx=Xpos[N+"r"];
      var oldy=Ypos[N+"r"];
      Xpos[N+"r"]+=dX[N+"r"];
      Ypos[N+"r"]-=4;
      if (Ypos[N+"r"]<bangheight[N]) {
        M=Math.floor(Math.random()*3*colours.length);
        intensity[N]=5+Math.random()*4;
        for (i=N*bits; i<bits+bits*N; i++) {
          Xpos[i]=Xpos[N+"r"];
          Ypos[i]=Ypos[N+"r"];
          dY[i]=(Math.random()-0.5)*intensity[N];
          dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
          decay[i]=16+Math.floor(Math.random()*16);
          Z=stars[i];
          if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
          else if (M<2*colours.length) Z.style.color=colours[colour[N]];
          else Z.style.color=colours[i%colours.length];
          Z.style.fontSize="100px";
          Z.style.visibility="visible";
        }
        bang(N);
        launch(N);
      }
      stars[N+"r"].style.left=oldx+"px";
      stars[N+"r"].style.top=oldy+"px";
    } 
    
    window.onresize=set_width;
    function set_width() {
      var sw_min=999999;
      var sh_min=999999;
      if (document.documentElement && document.documentElement.clientWidth) {
        if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
        if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
      }
      if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
        if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
        if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
      }
      if (document.body.clientWidth) {
        if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
        if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
      }
      if (sw_min==999999 || sh_min==999999) {
        sw_min=200;
        sh_min=1160;
      }
      swide=sw_min;
      shigh=sh_min;
    }
    // ]]>
    </script>
    Last edited by KennyP; 04-22-2016 at 04:42 PM.

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    A couple of hints:

    1. Your </head> tag at line 100 is in the wrong place. There are lines of code after it which should be inside the <head></head> block.

    2. At line 111 you have <P style="font-family:Great Vibes;"> (note upper case "P") and it has no matching closing tag. Instead, at line 277 you have another opening <p> tag.

    Also this link may help.

  3. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Thanks for the response styxlawyer. I had added that extra code only here to show what I had done and failed. It's now edited out.

    I only would like to know (as I already asked) how to add a custom font (Great Vibes) to the above script.

    The Test Page

  4. #4
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Thanks anyway. I figured out how to do it.

Similar Threads

  1. Use a Custom Font HELP
    By alaia in forum HTML
    Replies: 3
    Last Post: 01-04-2012, 01:45 PM
  2. Slick Custom Scrollbar script - does not work in IE
    By moal in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-22-2011, 07:26 AM
  3. @font-face does not work in firefox
    By James Church in forum CSS
    Replies: 1
    Last Post: 05-25-2011, 10:07 AM
  4. my custom cursor script can't work!
    By masked in forum JavaScript
    Replies: 0
    Last Post: 02-06-2010, 12:59 AM
  5. Replies: 2
    Last Post: 02-12-2007, 09:14 AM

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
  •