www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to add CSS to this JS?

  1. #1
    Join Date
    Nov 2012
    Posts
    5

    How to add CSS to this JS?

    Hello,

    As I mentioned in this post: http://www.webdeveloper.com/forum/sh...bar-is-pressed, I am a beginner at JS, and I want to add CSS to the piece of code vwphillips gave me

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <
    head>
      <
    title></title>
    </
    head>

    <
    body>
    <
    span id="tst" >Word</span>

    <
    script type="text/javascript">


    function 
    zxcFadeWord(o){
     
    this.obj=document.getElementById(o.ID);
     
    this.ary=o.WordArray;
     
    this.ms=o.FadeDuration;
     
    this.fin=o.FadeIn;
     
    this.fout=o.FadeOut;
     
    this.cnt=0;
     
    this.run=true;
     
    this.addevt(document,'keypress','space');
     
    this.addevt(document,'keydown','space');
    }

    zxcFadeWord.prototype={

     
    space:function(e){
      var 
    char=e.which?e.which:event.keyCode ;
      if (
    char==32&&this.run){
       
    this.run=false;
       
    clearTimeout(this.dly);
       
    this.fade(this.obj,this.fin,this.fout,new Date(),this.ms,true);
      }
     },

     
    fade:function(obj,f,t,srt,mS,nxt){
      var 
    oop=this,ms=new Date().getTime()-srt,now=[],z0=0//=(t-f)/mS*ms+f;
      
    for (;z0<3;z0++){
       
    now[z0]=Math.round((t[z0]-f[z0])/mS*ms+f[z0]);
      }
      if (
    isFinite(now[0])&&isFinite(now[1])&&isFinite(now[2])){
       
    obj.style.color='rgb('+now[0]+','+now[1]+','+now[2]+')';
      }
      if (
    ms<mS){
       
    oop.dly=setTimeout(function(){ oop.fade(obj,f,t,srt,mS,nxt); },10);
      }
      else {
       
    obj.style.color='rgb('+t[0]+','+t[1]+','+t[2]+')';
       if (
    nxt){
        
    obj.innerHTML=oop.ary[oop.cnt];
        
    oop.fade(obj,oop.fout,oop.fin,new Date(),this.ms,false);
        
    oop.cnt=++oop.cnt%oop.ary.length;
       }
       else {
        
    oop.run=true;
       }
      }
     },

     
    addevt:function(o,t,f,p){
      var 
    oop=this;
      if (
    o.addEventListener){
       
    o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (
    o.attachEvent){
       
    o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }


    }

    new 
    zxcFadeWord({
     
    ID:'tst',
     
    WordArray:['Tom','Dick','Harry'],
     
    FadeIn:[0,0,0],
     
    FadeOut:[255,255,255],
     
    FadeDuration:1000
    });


    </script>
    </body>

    </html> 
    The CSS I want to add is this:

    PHP Code:
    <style type="text/css">
    body
    {
    background-color:#FFFFFF;
    }
    h1
    {
    color:#999999;
    text-align:center;
    font-family:"Cambria";
    font-size:40px;
    }
    p
    {
    text-align:center;
    font-family:"Cambria";
    font-size:20px;
    }
    </
    style
    however, it doesn't work when I add it into the first piece of code.

    Any help would be appreciated, thank you all!

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    simply put it in the head of your page


    <head>
    <title></title>
    <style type="text/css">
    body
    {
    background-color:#FFFFFF;
    }
    h1
    {
    color:#999999;
    text-align:center;
    font-family:"Cambria";
    font-size:40px;
    }
    p
    {
    text-align:center;
    font-family:"Cambria";
    font-size:20px;
    }
    </style>
    </head>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Change to your HTML code to display the words in a H1 or P tag and not a SPAN !

  4. #4
    Join Date
    Nov 2012
    Posts
    5
    Thanks for your answers, I initially put the CSS in the wrong section AND didn't change the span haha! Now it works perfectly fine!

    Good day to you all

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