.js problem

Discussion in 'JavaScript' started by tomiko, Jul 5, 2010.

  1. #1
    is there any code that addresses font and colour in this .js?

    function startFloatTitle() {
    
        var cnt=0;
        var allTableIDs = new Array();
        allTables = document.getElementsByTagName("table");
        
        // Scan page for all tables with a class of "FloatTitle"
        for (i=0;i<allTables.length; i++) {
          if (allTables[i].className == "FloatTitle") {
            
            // Get the ID. If no ID exists then assign one
            tableID = allTables[i].id;
            if ( tableID == "") {
              tableID = "tmpFloatTitleTableId" + cnt;
              allTables[i].id = tableID;
            } 
            
            // Save ID's
            allTableIDs[cnt] = tableID;    
            cnt++;
          }
        }
        
        // Start floating the tables title
        for (i=0;i<allTableIDs.length; i++) {
          floatTitle(allTableIDs[i],i);
        }
      }
    
    
      //////////////////////////////////////////////////////////////////////////////
      // floatTitle - Start the float process
      //  @param tableID - ID of table that floating title will be created for
      //  @param cnt - Number representing table - for tracking seperate float events
      //  
      //  This function calls the functions which create the floating title and 
      //  start the floating process 
      //////////////////////////////////////////////////////////////////////////////
      
      var floatTitleTimer = new Array();
      function floatTitle(tableID,cnt) {
      
        // Stop any old Loops
        if (typeof(floatTitleTimer[cnt])== 'undefined') floatTitleTimer[cnt] = 0;
        clearTimeout(floatTitleTimer[cnt]);
        
        // Create title object then start float loop
        titleID = createTitleObj(tableID);   
        floatTitleLoop(tableID,titleID,cnt);
      
      }
    
    
      //////////////////////////////////////////////////////////////////////////////
      // createTitleObj - Create the floating object for this table
      //  @param tableID - ID of table that floating title will be created for
      //  @return titleWrapperID - ID of div which contains a copy of tables THEAD
      //
      //  Clone the THEAD from the table, create a new table to place it in then 
      //  create a DIV wrapper to place it in. The ID for the DIV is returned to 
      //  the calling function so it can be used to position the object in the 
      //  floating function.
      //////////////////////////////////////////////////////////////////////////////
      
      function createTitleObj (tableID) {
      
        var titleWrapperID = tableID + "Title";
        var titleTableID = tableID + "TitleTable";
        
        // If Title has not been created yet
        if (document.getElementById(titleWrapperID)==null) {
          
          // "clone" the Table's thead 
          tableObj = document.getElementById(tableID);
          clonedtHead=tableObj.tHead.cloneNode(true);
          
          // Create wrapper div
          titleWrapperObj = document.createElement("div");
          titleWrapperObj.setAttribute("id", titleWrapperID);
          
          // Create the Title table
          TitleTable = document.createElement("table");
          TitleTable.setAttribute("id", titleTableID);
          
          // Append Cloned thead to the Title table
          TitleTable.appendChild( clonedtHead );
          
          // Append table to div container
          titleWrapperObj.appendChild(TitleTable);
          
          // Insert wrapper div into the DOM before Table
          parentDiv = tableObj.parentNode;
          parentDiv.insertBefore(titleWrapperObj, tableObj);
          
          // Initially position container
          titleWrapperObj.style.position="absolute";
          titleWrapperObj.style.top = "0px";
          titleWrapperObj.style.zIndex="1";	
        }
        
        tableObj = document.getElementById(tableID);
        titleTableObj = document.getElementById(titleTableID);
          	
        // Set Title width to be the same as Table
        titleWrapperObj = document.getElementById(titleWrapperID);
        titleWrapperObj.style.width = tableObj.offsetWidth + 'px';
        
        // Set widths of Title TD's to same as Table TD's
        tableCells = tableObj.tHead.rows[0].cells;
        titleTableCells = titleTableObj.tHead.rows[0].cells;
        
        for (var i=0; i != tableCells.length; i++) {
          titleTableCells[i].style.width = (tableCells[i].clientWidth)+ 'px';
          titleTableCells[i].style.cursor = 'normal';
        }
        
        return titleWrapperID;
      }
    
    
      //////////////////////////////////////////////////////////////////////////////
      // floatTitleLoop - Float the titles up and down the table as the page scrolls
      //  @param tableID - ID of table that wants floating title
      //  @param titleID - ID of div that will float (contains copy of tableID's THEAD)
      //  @param cnt - Number representing table - for tracking seperate float events
      //
      //  Keep the title object in view as the table postion changes as a user 
      //  scrolls up and down in the window
      //////////////////////////////////////////////////////////////////////////////
      
      function floatTitleLoop(tableID,titleID,cnt) {
      	
        // If Table and Title objects exist
        if (document.getElementById(tableID) !=null && document.getElementById(titleID) !=null) {
    
          // Set value to be number of pixels from screen top that you wish
          // scrolling to start at. 0=top, 10=10 pixels down from top, etc..
          // Useful for those who happen to have top screen banners
          var	startOffsetTop = 0;
    
          // Get start and stop float positions from table
          var tableObj = document.getElementById(tableID);
          var tablePos = FindPosition(tableObj);
          var startTop = tablePos[1] - startOffsetTop;
          var endTop = startTop + tableObj.clientHeight;		
        
          // Get new positon of body scroll top and keep it in bounds
          var newTop =(document.documentElement.scrollTop>0) ? document.documentElement.scrollTop : document.body.scrollTop;
          if (newTop < startTop) newTop = startTop;		
          if (newTop > endTop) newTop = endTop;
          
          // Move the title to new postion
          var titleObj = document.getElementById(titleID);
          if (newTop > startTop && newTop < endTop) {
          
            // Display "Title" if it is not all ready being displayed
            if (titleObj.style.display != 'block') titleObj.style.display='block';
            
            // Apply offset to get newTop position
            newTop = newTop + startOffsetTop;
            
            // Apply Ease-In effect
            easeInWanted=true;
            if (easeInWanted) {
            
              // Get current location and get the difference from where it's 
              // at to where you want it to go
              oldTop = parseInt(titleObj.style.top); 
              topDiff=newTop-oldTop; 
              
              // Calaculate how far you want to move it - then set that to new postion
              moveTop=0;
              if ( (topDiff < (-1) ) || (topDiff > (1) ) ) { moveTop=Math.round(topDiff/3);}
              newTop = oldTop + moveTop;
            }
          	
          	// Move to new top position
          	if (newTop < 0) newTop = 0;
          	titleObj.style.top = newTop + "px";
          } else {
            // Else hide "Title" if it is not all ready hidden
            if (titleObj.style.display != 'none') {
              titleObj.style.display='none';
              titleObj.style.top = "0px";
              titleObj.style.zIndex="1";	
            }
          }
        
        }
        
        // Execute this function again in 40 milliseconds (thousandths of a second)
        cmd = "floatTitleLoop('" + tableID + "','" + titleID + "','" + cnt + "')";
        floatTitleTimer[cnt] = window.setTimeout(cmd, 40); 
      
      }
      
    
      //////////////////////////////////////////////////////////////////////////////
      // FindPosition - find the Top and Left postion of an object on the page
      //  @param obj - object of element whose position needs to be found
      //  @return array - Array whoose first eleemnt is the left postion and whoose 
      //                  second is the top position
      //////////////////////////////////////////////////////////////////////////////
      
      
      function FindPosition(obj) {
        // Figure out where the obj object is in the page by adding
        // up all the offsets for all the containing parent objects   
        if (obj == null) return [0,0];
        
        // Assign the obj object to a temp variable
        tmpObj = obj;
        
        // Get the offsets for the current object
        var obj_left = tmpObj.offsetLeft;
        var obj_top = tmpObj.offsetTop;
        
        // If the current object has a parent (ie contained in a table, div, etc..)
        if (tmpObj.offsetParent) {
        
          // Loop through all the parents and add up their offsets
          // The while loop will end when no more parents exist and a null is returned
          while (tmpObj = tmpObj.offsetParent) {
          	obj_left += tmpObj.offsetLeft;
          	obj_top += tmpObj.offsetTop;
          }
        }
        return [obj_left , obj_top];
      }
    
    
      //////////////////////////////////////////////////////////////////////////////
      // Start floating titles after window finishes loading
      ////////////////////////////////////////////////////////////////////////////// 
      
      window.onload = startFloatTitle;
    
      //////////////////////////////////////////////////////////////////////////////
      // Start floating titles when window is resized
      ////////////////////////////////////////////////////////////////////////////// 
      
      window.onresize = startFloatTitle;
    
    Code (markup):
    the above js is attached to this table

    http://mt4brokersreview.com/mt4brokers1f.html

    somehow, that .js picks the times new roman font and i want to change that and the colour too. when you scroll down you see the time new roman font with the .js effect.

    source of table:

    http://tinypaste.com/1664b

    ;)
     
    tomiko, Jul 5, 2010 IP
  2. Rainulf

    Rainulf Active Member

    Messages:
    373
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    85
    #2
    Hmm.. Have you tried using CSS? With CSS, you can easily change font, colour or whatever.
     
    Rainulf, Jul 5, 2010 IP
  3. tomiko

    tomiko Member

    Messages:
    156
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #3
    yeah...sounds like a good idea. always good to have another thought. thanks :)
     
    tomiko, Apr 30, 2011 IP