Скрипт работает только в IE как исправить?

Тема в разделе "JavaScript", создана пользователем Doctor_zlo, 2 ноя 2012.

Модераторы: ZiX
  1. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    464
    Симпатии:
    1.027
    Есть скрипт, с градиентным текстом, в выпадающем окошке выбираешь исходный и конечный цвет, и скрипт обновляет текст и показывает его в виде градиента. Работает только в IE.
    Кто подскажет как сделать чтобы работало в других браузерах? В js я нуб.
    Сам скрипт -
    HTML:
    
                              <script>
    function AnimationIterator(strElementName , fForvard , r1 , g1 , b1 , r2, g2, b2 , nMilliSecondsTimeout)
    {
        var currentElement = null;
        var nAnimationCounter = 0;
        var nFinalElement = arrayColorsHolder[strElementName].length - 1;
        var fInnerDirection = null;
       
        //Define the moving direction
        if(fForvard)
        {
            fInnerDirection = !arrayAnimationDirectionHolder[strElementName];
        }
        else
        {
            fInnerDirection = arrayAnimationDirectionHolder[strElementName];
        }
       
        nAnimationCounter = arrayAnimationCountersHolder[strElementName];
        for(var j = 0; j <= nFinalElement ; j++ )
        {
            //Get element within the text container
            currentElement = document.getElementById(strElementName + '_animated_child_' + j);
           
           
            if(currentElement) // if current element exists
            {
                //set span's color
                currentElement.style.color = 'rgb(' +
                    arrayColorsHolder[strElementName][nAnimationCounter]['red']  + ','+
                    arrayColorsHolder[strElementName][nAnimationCounter]['green'] + ','+
                    arrayColorsHolder[strElementName][nAnimationCounter]['blue']  +
                    ')';
               
                // Rule of painting.  -- BEGIN
                if(fInnerDirection)
                {
                    if(nAnimationCounter < nFinalElement )
                    {
                        nAnimationCounter ++ ;
                    }
                    else
                    {
                        fInnerDirection = ! fInnerDirection;
                    }
                }
                else
                {
                    if(nAnimationCounter > 0 )
                    {
                        nAnimationCounter --;
                    }
                    else
                    {
                        fInnerDirection = ! fInnerDirection;
                    }
                }
                // Rule of painting.  -- END
            }
            else
            {
                window.status = 'Text container "' + strElementName + '" is modified or not initialized';
                return;
            }
        }       
       
        // Rule of painting.  -- BEGIN
        if(arrayAnimationDirectionHolder[strElementName])
        {
            if(arrayAnimationCountersHolder[strElementName] < nFinalElement )
            {
                arrayAnimationCountersHolder[strElementName] ++ ;
            }
            else
            {
                arrayAnimationDirectionHolder[strElementName] = ! arrayAnimationDirectionHolder[strElementName];
            }
        }
        else
        {
            if(arrayAnimationCountersHolder[strElementName] > 0 )
            {
                arrayAnimationCountersHolder[strElementName] --;
            }
            else
            {
                arrayAnimationDirectionHolder[strElementName] = ! arrayAnimationDirectionHolder[strElementName];
            }
        }
        // Rule of painting.  -- END
       
        //Launch the next iteration
        if(nMilliSecondsTimeout > 0 )
        {
            window.setTimeout('AnimationIterator("' +
            strElementName +
            '", '+ fForvard.toString() +
            ', ' + r1.toString() +
            ', ' + g1.toString() +
            ', ' + b1.toString() +
            ', ' + r2.toString() +
            ', ' + g2.toString() +
            ', ' + b2.toString() +   
            ', ' + nMilliSecondsTimeout.toString() +     
            ' )', nMilliSecondsTimeout);
        }
    }
     
    function parse_rgb(rgb){
        var r=0;
        var g=0;
        var b=0;
    //    alert(rgb.charAt(1));
        r=hexToDec(rgb.charAt(1)+rgb.charAt(2));
        g=hexToDec(rgb.charAt(2)+rgb.charAt(3));
        b=hexToDec(rgb.charAt(4)+rgb.charAt(5));
    }
    var convert = new Array();
    var hexbase = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
    var value=0;
    for (x=0; x<16; x++)
    for (y=0; y<16; y++) {
        convert[value] = hexbase[x] + hexbase[y];
        value++;
    }
    function hexToDec(hex){
        value=0;
        while (true){
            if (convert[value].toUpperCase()== hex.toUpperCase()) break;
            value++;
        }
        return value;
    }
    function redraw(start_c,end_c){
        ColorGradientText('tested_disp',hexToDec(start_c.charAt(1)+start_c.charAt(2)),hexToDec(start_c.charAt(3)+start_c.charAt(4)),hexToDec(start_c.charAt(5)+start_c.charAt(6)),hexToDec(end_c.charAt(1)+end_c.charAt(2)),hexToDec(end_c.charAt(3)+end_c.charAt(4)),hexToDec(end_c.charAt(5)+end_c.charAt(6)));
    }
    var arrayColorsHolder            = new Array(); 
    var arrayAnimationDirectionHolder = new Array(); 
    var arrayAnimationCountersHolder  = new Array(); 
     
    function ColorGradientText(strElementName , r1 , g1 , b1 , r2, g2, b2)
    {
       
        var textContainer = document.getElementById(strElementName);
        if(textContainer === null)
        {
            window.status += 'Text container "' + strElementName + '" is not defined.';
            return;
        }
     
        var strText  = textContainer.innerText || textContainer.textContent ;
        if(!strText)
        {
            window.status += 'Text container "' + strElementName + '" is empty.';
            return;
        }
     
        arrayColorsHolder            [strElementName] = new Array();
       
        var nLetersCount = strText.length;
       
        // Define steps for creating color gradient
        var steps = new Array ();
        steps['red']  = (r2 - r1) / nLetersCount ;
        steps['green'] = (g2 - g1) / nLetersCount ;
        steps['blue']  = (b2 - b1) / nLetersCount ;
     
        // Generate array of color values
        for( var  i = 0; i < strText.length ; i++ )
        {
            arrayColorsHolder[strElementName][i]          = new Array();
            arrayColorsHolder[strElementName][i]['red']  = Math.round(r1 + steps['red']*i)  ;
            arrayColorsHolder[strElementName][i]['green'] = Math.round(g1 + steps['green']*i); 
            arrayColorsHolder[strElementName][i]['blue']  = Math.round(b1 + steps['blue']*i) ;           
        }
       
        // Set initial values for harmonic oscillations emulator
        arrayAnimationDirectionHolder[strElementName] = true;
        arrayAnimationCountersHolder [strElementName] = 0;
       
        //Split original string. Result of this operation is the chain of span elements.
        var strResultString = '';
        for(var j = 0; j < strText.length ; j++ )
        {
           
            strResultString += '<span id="'+
                    strElementName + '_animated_child_' + j +
                    '"  >' + strText.charAt(j)  +'</span>';
                   
        }           
       
        //Fill container by <span>s
        document.getElementById(strElementName).innerHTML = "<b>"+strResultString+"</b>";
       
        AnimationIterator(strElementName ,  0, r1 , g1 , b1 , r2, g2, b2 , 0);
    }
    </script>
    <form action="act_submit.php" method="post" name="actions">
     
    <table>
            <tr>
                <td colspan="2"><b>Градиентный цвет текста</b></td>
            </tr>
            <tr>
                <td colspan="2">(задается 1 раз)</td>
            </tr>
     
            <tr>
                    <td>Стартовый цвет:</td>
                    <td><select name="start_color" style="{width:70px;height: 25px;}" onchange="redraw(this.options[this.selectedIndex].style.backgroundColor,end_color.options[end_color.selectedIndex].style.backgroundColor);">
    <option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
    <option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
    <option value="11" style="background:#808000; color:#808000">Оливковый</option>
    <option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
    <option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
    <option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
    <option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
    <option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
    <option value="17" style="background:#808080; color:#808080">Серый</option>
    <option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
    </select>
                    </td>
    <td>Конечный цвет:</td>
                    <td><select name="end_color" style="{width:70px;height: 25px;}" onchange="redraw(start_color.options[start_color.selectedIndex].style.backgroundColor,this.options[this.selectedIndex].style.backgroundColor);">
    <option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
    <option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
    <option value="11" style="background:#808000; color:#808000">Оливковый</option>
    <option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
    <option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
    <option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
    <option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
    <option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
    <option value="17" style="background:#808080; color:#808080">Серый</option>
    <option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
    </select>
                    </td>
                    <Td id="tested_disp"><strong>Съешь еще этих мягких французских булочек</strong></TD>
                    <Td><input type="Submit" class="input_button" value="OK"></TD>
            </tr>
    </table>
    </form>
     
                                  
     
  2. begemot3

    begemot3 Постоялец

    Регистр.:
    18 янв 2009
    Сообщения:
    52
    Симпатии:
    13
    А в консоли в FireBug что пишет если смотреть в Firefox?
     
  3. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    464
    Симпатии:
    1.027
    TypeError: convert[value] is undefined
    if (convert[value].toUpperCase()== hex.toUpperCase()) break;
     
  4. mr.Voodoo

    mr.Voodoo Создатель

    Регистр.:
    31 мар 2008
    Сообщения:
    28
    Симпатии:
    9
    В массиве convert нет элемента с индексом value. Скорее всего ослик тупо сожрал эту ошибку.
     
  5. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    464
    Симпатии:
    1.027
    Угу с английского я переводить тоже умею и название ошибок читать, еще бы кто багфикс подсказал цены бы не было
     
  6. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    Привет, довольно сложная ошибка, на самом деле как сказал mr.Voodoo, у тебя convert[value] пустой и для того что бы избежать ошибки, попробуй так:

    if ( !convert[value] && convert[value].toUpperCase()== hex.toUpperCase()) break;

    или

    if ( convert[value] != undefined && convert[value].toUpperCase()== hex.toUpperCase()) break;

    либо

    if ( convert[value] != "undefined" && convert[value].toUpperCase()== hex.toUpperCase()) break;
     
    Doctor_zlo нравится это.
  7. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    464
    Симпатии:
    1.027
    первая третья строки не работает
    вторая вешает браузер
     
  8. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    Надо будет код править, а то что-то мне не нравится там, а что функция hexToDec(hex) делает или должна делать, смсысл какой?
     
  9. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    464
    Симпатии:
    1.027
    Да хз по функции, код чужой, пишу же что я нуб в JS.
    Фрагмент указанный в 1 посте, выдернут из скрипта градиентного текста для на чатах voc++
    скрипт асинхронно без перезагрузки страницы обновляет текст в зависимости от выбора цвета юзера.
    выдернутый код полностью работоспособен в IE. см скриншот

    grad.jpg
     
  10. xpert13

    xpert13 <(*_*)>

    Moderator
    Регистр.:
    7 ноя 2008
    Сообщения:
    182
    Симпатии:
    456
    Хотел попробовать исправить, но код, мягко говоря, ужасный. Вот вариант решения этой задачи с использованием готовой библиотеки (http://www.thomasfrank.se/text_color_gradients.html) :

    HTML:
    <script type="text/javascript" src="http://www.thomasfrank.se/downloadableJS/gradientText.js"></script>
     
    <script>
    function rgb2hex(rgb){
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
    }
     
    function redraw()
    {
        var start_color_el = document.getElementById('start_color');
        var i = start_color_el.selectedIndex;
        var start_color = rgb2hex( start_color_el.options[i].style.backgroundColor );
     
        var end_color_el = document.getElementById('end_color');
        var i = end_color_el.selectedIndex;
        var end_color = rgb2hex( end_color_el.options[i].style.backgroundColor );
     
        tested_disp = document.getElementById('tested_disp');
        gradientText.set(tested_disp, start_color, end_color);
    }
    </script>
     
    <table>
            <tr>
                <td colspan="2"><b>Градиентный цвет текста</b></td>
            </tr>
            <tr>
                <td colspan="2">(задается 1 раз)</td>
            </tr>
     
            <tr>
                <td>Стартовый цвет:</td>
                <td>
                <select id="start_color" style="{width:70px;height: 25px;}" onchange="redraw();">
                    <option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
                    <option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
                    <option value="11" style="background:#808000; color:#808000">Оливковый</option>
                    <option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
                    <option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
                    <option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
                    <option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
                    <option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
                    <option value="17" style="background:#808080; color:#808080">Серый</option>
                    <option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
                </select>
                </td>
                <td>Конечный цвет:</td>
                <td>
                <select id="end_color" style="{width:70px;height: 25px;}" onchange="redraw();">
                    <option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
                    <option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
                    <option value="11" style="background:#808000; color:#808000">Оливковый</option>
                    <option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
                    <option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
                    <option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
                    <option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
                    <option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
                    <option value="17" style="background:#808080; color:#808080">Серый</option>
                    <option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
                </select>
                </td>
                <td><div id="tested_disp">Съешь еще этих мягких французских булочек</div></td>
            </tr>
    </table>
     
    Doctor_zlo и antiterror нравится это.