Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts

    text fader works in all browsers except chrome

    Hi here is the text fader that i am using, it works in all other browsers just fine but in chrome it does not work right.

    In chrome the page loads and you see the text, but once it fades, its gone and does not come back.


    I call it in the header like this

    Code:
    <script type="text/javascript" src="textrotate.js"></script>
    and then display it in the file like this


    Code:
    <!-- added for text rotator -->
    
    <noscript>
    <div style="font-size:small;margin:0px 10px 0px 10px;">
    We can customize a plan just for your particular needs...<br /><br />Also it appears you have javascript disabled or your browser does not support JavaScript!
    </div>
    </noscript> 
    
    <div style="font-size:small;margin:0px 10px 0px 10px;" id="quotes"></div>
    
    <script type="text/javascript">
    rotateText(document.getElementById("quotes"), "quotes");
    </script>
    
    <!-- end text rotator -->

    Here is the js file.

    Code:
    // <![CDATA[
    
    function rotateText(el, textGroup) 
    {
      setOpacity(el, 0);
    
      //grab current text
      var sametext = document.getElementById('quotes').innerHTML;
    
       //get new text
       var group = rotateText.texts[textGroup];
       var t = group[Math.round(Math.random() * (group.length - 1))];
    
       //if they are the same then get another one
       if(sametext == t)
        {  
         var group = rotateText.texts[textGroup];
         var t = group[Math.floor(Math.random() * (group.length - 1))];
          }//close if
    
      el.innerHTML = t;
      unfadeText(el, textGroup);
    
    }//close function rotateText
    
    rotateText.texts = 
    {
      quotes: [
        "text1...",
        "text2...",
        "text3...",
        "text4...",
        "text5...",
        "text6...",
        "text7...",
        "text8..."
            ]
    };
    
    function setOpacity(el, value) 
    {
      el.style.opacity = value / 100;
      el.style.filter = "alpha(opacity=" + value + ")";
    }
    
    function unfadeText(el, tg) 
    {
      var v = (el.style.opacity * 100) + 1;
      if(v > 100) {
        setOpacity(el, 100);
        setTimeout(bundleFunction(null, fadeText, [el, tg]), 10000);  /* number of seconds, this is 10 sec */
        return;
      }
      setOpacity(el, v);
      setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
    }
    
    function fadeText(el, tg) 
    {
      var fadt = (el.style.opacity * 100) - 1;
    
      if(!fadt > 0) 
       {
        setOpacity(el, 0);
        rotateText(el, tg);
        //or... setTimeout(bundleFunction(null, rotateText, [el, tg]), NUMBER);
        return;
      }
    setOpacity(el, fadt);
    setTimeout(bundleFunction(null, fadeText, [el, tg]), 10);
    }//close function fadeText
    
    function bundleFunction(context, func, args) 
    {
      context = context || null;
      if(typeof func == "string")
      {
        if(context)
        {
        func = context[func];
        }//close if
      }//close if
    
      if(!args)
      {
       args = [];
         }else if(!(args instanceof Array))
           {
          args = [args];
           }//close elseif
    
    return function() 
     {
     return func.apply(context, args);
      }//close return function
    
    }//close function bundleFunction
    
    // ]]>
    Last edited by durangod; 01-03-2013 at 02:16 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    try

    Code:
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    thanks but didnt work still the same with chrome.

    i even seperated them all out just to test like this

    I also added which browser uses which, i hope i have that part correct.

    Code:
     el.style.opacity = (value / 100) - .001; //IE9, Firefox, Chrome, Opera, and Safari 
     el.style.KhtmlOpacity = (value / 100) - .001; //safari
     el.style.WebkitOpacity = value / 100) - .001; //chrome
     el.style.MozOpacity = (value / 100) - .001; //firefox
    
     el.style.filter = "alpha(opacity=" + value + ")"; //ie8 and before
    and still the same deal. Not sure what the issue is with chome we seem to be covering it so this is just strange.

    remember im using XHTML 1.0 Transitional//EN if that helps, i know there are some html5 options but i cant use those.



    Ok i did alittle testing here and i thought ok maybe its not the fadeout but the unfader function that is failing so i added some test code.


    Code:
    function unfadeText(el, tg) 
    {
      var c = (el.style.WebkitOpacity * 100) + 1; //chrome
    
      if(c > 100)
      {
       alert("this is value c:" + c);
      var v = c;
       }else{
           v = (el.style.opacity * 100) + 1;
             }//close else
    The alert on this shows c as 100.00000000000003 (13 zeros behind the decimal) so it is more than 100

    so making v equal to the value of c for chrome and normal v value for all others should work in the if statement but it does not
    Last edited by durangod; 01-02-2013 at 09:22 PM. Reason: added browser names and update

  • #4
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    i got it,

    it was this part that chrome was hangin up on

    Code:
    if(!fadt > 0) 
       {
    i changed that in the first version from if < 0 to this because of the cdata issue and i didnt change it back, i figured the result test would be the same if not > 0 or if < 0 but i guess its different.

    I discovered this because i did an alert of this up and down fade in chrome and i noticed it locked up when it faded away to neg and didnt come back after that. So i changed this line back to the original if < 0 and it works in chrome now.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function rotateText(el, textGroup)
    {
      zxcOpacity(el, 0);
      rotateText.opc=0 // bad to rely on style.opacity so use an object property
      //grab current text
      var sametext = document.getElementById('quotes').innerHTML;
    
       //get new text
       var group = rotateText.texts[textGroup];
       var t = group[Math.round(Math.random() * (group.length - 1))];
    
       //if they are the same then get another one
       if(sametext == t)
        {
         var group = rotateText.texts[textGroup];
         var t = group[Math.floor(Math.random() * (group.length - 1))];
          }//close if
    
      el.innerHTML = t;
      unfadeText(el, textGroup);
    
    }//close function rotateText
    
    rotateText.texts =
    {
      quotes: [
        "text1...",
        "text2...",
        "text3...",
        "text4...",
        "text5...",
        "text6...",
        "text7...",
        "text8..."
            ]
    };
    
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     rotateText.opc=opc;
    }
    
    function unfadeText(el, tg){
      var v = rotateText.opc+1;
      if(v > 100) {
        zxcOpacity(el, 100);
        setTimeout(bundleFunction(null, fadeText, [el, tg]), 10000);  /* number of seconds, this is 10 sec */
        return;
      }
      zxcOpacity(el, v);
      setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
    }
    
    function fadeText(el, tg){
      var fadt = rotateText.opc-1;
      if(!fadt > 0){
        zxcOpacity(el, 0);
        rotateText(el, tg);
        //or... setTimeout(bundleFunction(null, rotateText, [el, tg]), NUMBER);
        return;
      }
      zxcOpacity(el, fadt);
      setTimeout(bundleFunction(null, fadeText, [el, tg]), 10);
    }//close function fadeText
    
    function bundleFunction(context, func, args){
      context = context || null;
      if(typeof func == "string"){
       if(context){
        func = context[func];
       }//close if
      }//close if
    
      if(!args){
       args = [];
      }
      else if(!(args instanceof Array)){
       args = [args];
      }//close elseif
    
     return function(){
      return func.apply(context, args);
     }//close return function
    
    }//close function bundleFunction
    
    /*]]>*/
    </script></head>
    
    <body>
    <!-- added for text rotator -->
    
    <noscript>
    <div style="font-size:small;margin:0px 10px 0px 10px;">
    We can customize a plan just for your particular needs...<br /><br />Also it appears you have javascript disabled or your browser does not support JavaScript!
    </div>
    </noscript>
    
    <div style="font-size:20px;margin:0px 10px 0px 10px;" id="quotes"></div>
    
    <script type="text/javascript">
    rotateText(document.getElementById("quotes"), "quotes");
    </script>
    
    <!-- end text rotator -->
    </body>
    
    </html>
    Last edited by vwphillips; 01-03-2013 at 02:22 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    durangod (01-03-2013)

  • #6
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    Nice job vwphillips, works all browsers, nicely done..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •