[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как поменять background с помощью jquery ?
Форум PHP программистов > JavaScript
st_matros
22.06.2010 - 21:34
Здравствуйте.
Скрипт на javascript со вставкой jquery.

В начале объявляю
<style type="text/css">
ul.srBlur {
background: url('selectbg.png') no-repeat;
border:0px;
}
</style>

далее при нек. условии пытаюсь заменить
$('ul.srBlur').css(background: url('sbgukr.PNG') );

Не заменяет.



Спустя 56 минут, 40 секунд (22.06.2010 - 21:31) SlavaFr написал(а):
попробуй на прямую
$('ul.srBlur').style.backgroundImage="url('sbgukr.PNG')";

Спустя 4 часа, 16 секунд (23.06.2010 - 01:31) Guest написал(а):
Цитата (SlavaFr @ 22.06.2010 - 18:31)
попробуй на прямую
$('ul.srBlur').style.backgroundImage="url('sbgukr.PNG')";


Неа, не хочет.

Спустя 2 часа, 8 минут, 52 секунды (23.06.2010 - 03:40) dr_Lev написал(а):
Кавычки поставь : $('ul.srBlur').css(background: "url('sbgukr.PNG')" );

Спустя 4 часа, 49 минут, 50 секунд (23.06.2010 - 08:30) Michael написал(а):
Цитата (dr_Lev @ 23.06.2010 - 02:40)
Кавычки поставь : $('ul.srBlur').css(background: "url('sbgukr.PNG')" );

и скобочки {} не забываем:
$('ul.srBlur').css({background:"url('sbgukr.PNG')"} );

Спустя 3 часа, 53 минуты, 19 секунд (23.06.2010 - 12:23) Guest написал(а):
Всем спасибо, заработало.
Но возникла другая проблемка-если в javascript вставляю фрагменты
jquery, Opera такую смесь не понимает и не грузит ни то, ни другое.
ИЕ8 - все нормально.

Спустя 1 час, 16 минут, 8 секунд (23.06.2010 - 13:39) Michael написал(а):
jQuery это и есть JavaScript поэтому не говорим ерунды. Ищи обычную ошибку.

Спустя 14 минут, 17 секунд (23.06.2010 - 13:54) Guest написал(а):
Тем не менее,
последовательно убирал из скрипта строчки,
javascript в Operе(10.53) заработал, когда в нем исчез последний оператор $(' ...

Спустя 9 минут, 57 секунд (23.06.2010 - 14:04) Michael написал(а):
возможно проблемы с подключением самой библиотеки ?
У оперы там кеш очистить можно попробовать - она с чудесами часто.

Спустя 11 минут, 50 секунд (23.06.2010 - 14:15) Guest написал(а):
Возможно, как чистить кеш?

Спустя 19 минут, 54 секунды (23.06.2010 - 14:35) Michael написал(а):
настройки->удалить личные данные

А так вообще и

ctrl+F5

Спустя 11 минут, 14 секунд (23.06.2010 - 14:46) Guest написал(а):
Не помогает.

Спустя 41 минута, 28 секунд (23.06.2010 - 15:28) Michael написал(а):
на хостинг выстави - посмотреть в чем причина.

Спустя 2 минуты, 24 секунды (23.06.2010 - 15:30) Guest написал(а):
Хорошо.

Спустя 35 минут, 52 секунды (23.06.2010 - 16:06) Guest написал(а):
А как хостить и что именно( в скрипте 385 строк) ?

Спустя 16 минут, 10 секунд (23.06.2010 - 16:22) Michael написал(а):
то что ты делаешь и покажи в работе. Где в ie8 работает, а в опере - нет. И скажи что не работает и желательно в какой строке.

Спустя 7 минут, 42 секунды (23.06.2010 - 16:30) Guest написал(а):

<!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" lang="en" xml:lang="en">
<head>
   <title>Drop down</title>

<script type="text/javascript" src="C:\Server\Apache2.2\htdocs\zf-1.0\public\js\jquery-1.4.2.min.js"></script>



<style type="text/css">
.styled {
    display: block;
    margin: 0 0 10px;
    width: 105px;    
}
select.srReplacedSelect {
    width: 1px;
    position: absolute;
    left: -999px;
}

ul.srList, ul.srList2 {
    list-style:none;
    padding:0 0 0 10px;
    width: 105px;
    margin: 0 0 10px;
    height:24px;
    border:0px;
color:blue;
text-decoration:underline;
}
ul.srList li{
    display:none;
    border:0px;
    background:white;
    background:repeat-y url('selectbgli.gif');
    line-height:25px; /*1.5em;*/
    padding:0 10px;
    width:105px;
    cursor:pointer; cursor:hand;
}
ul.srList2 li {
    display:none;
    background:white;
    background:repeat-y url('selectbgli.gif');
    line-height:25px; /*1.5em;*/
    padding:0 10px;
    width:105px;
    cursor:pointer; cursor:hand;
}
ul.srList li.srHoverLi, ul.srList2 li.srHoverLi {
    background:white;
    background:repeat-y url('selectbglih.gif');
    cursor:pointer; cursor:hand;
}
ul.srBlur {
    background: url('selectbg.png') no-repeat;
    border:0px;    
}
ul.srFocus, ul.srHoverUl {
    /* чтобы при наведении мышки
       или получении фокуса элемент
       не оставался на некоторое время без фона,
       и для ускорения загрузки, совмещаем
       два фоновых изображения в одном и изменяем его
       подвигая на X пикслей влево если захотите */
    background: url('selectbg.png') no-repeat 0px 0px;
    border:0px;
}
ul.srBlur li.srSelectedLi {
    display:block;
    background: url('transparent.png') no-repeat 0px 100%;
    cursor:pointer; cursor:hand;
}
ul.srFocus li.srSelectedLi, ul.srHoverUl li.srSelectedLi {
    display:block;
    background: url('transparent.png') no-repeat 0px 100%;
    cursor:pointer; cursor:hand;
}
ul.srExpanded li.srSelectedLi {
    display:block;
    background:white;
    background:repeat-y url('selectbglih.gif');
    cursor:pointer; cursor:hand;
}
ul.srExpanded li.srFirstLi, ul.srList li.srFirstLi, ul.srList2 li.srFirstLi {
    display:block;
    background: url('selectbg2.png') no-repeat;
    cursor:pointer; cursor:hand;
}
ul.srExpanded li.srLastLi, ul.srList li.srLastLi, ul.srList2 li.srLastLi {
    border-bottom:1px solid white;
}
ul.srExpanded {
    position:relative;
    background: url('selectbg3.png') no-repeat 0px 100%;
    z-index:1000;
}

ul.srExpanded li {
    display:block;
}
</style>


<script type="text/javascript">
function rsSelectReplace(sel)
{
    var ie6 = (navigator.userAgent.search('MSIE 6.0') != -1);
    var ul = document.createElement('ul');
    if (!ie6) {
        ul.className = 'srList';
    } else {
        ul.className = 'srList2';
    }
    ul.className += ' srCollapsed';
    ul.className += ' srBlur';

    ul.srSelect = sel;
    sel.srReplacement = ul;

    sel.className += ' srReplacedSelect';
    sel.onfocus = function() { this.srReplacement.className = this.srReplacement.className.replace(/[\s]?srBlur/, ' srFocus'); }

    sel.onblur = function() {
        this.srReplacement.className = this.srReplacement.className.replace(/[\s]?srFocus/, ' srBlur');
    }

    sel.onchange = function()
    {
        var ul = this.srReplacement;
        ul.srSelectLi(ul.childNodes[this.selectedIndex]);
    }

    sel.onkeypress = function(e)
    {
        var i = this.selectedIndex;
        var ul = this.srReplacement;
        switch (e.keyCode) {
            case 9:
                this.srReplacement.srCollapse();
            break;

            case 37:
            case 38:
                if (i - 1 >= 0)
                    ul.srSelectLi(ul.childNodes[i - 1]);
            break;

            case 40:
                if(e.altKey)
                {
                    //ul.srExpand();
                    //break;
                }
            case 39:

                if (i + 1 < ul.childNodes.length)
                    ul.srSelectLi(ul.childNodes[i + 1]);
            break;

            case 33: // Page Up
            case 36: // Home
                ul.srSelectLi(ul.firstChild);
            break;

            case 34: // Page Down
            case 35: // End
                ul.srSelectLi(ul.lastChild);
            break;
        }
    }
    ul.onmouseover = function() { this.className += ' srHoverUl'; }
    ul.onmouseout = function() { this.className = this.className.replace(/[\s]?srHoverUl/, ''); }

    ul.srSelectLi = function(li)
    {
        var ul = li.parentNode;

        if(ul.srSelectesIndex != null)
            ul.childNodes[ul.srSelectesIndex].className = '';

        ul.srSelectesIndex = li.srIndex;

        ul.childNodes[li.srIndex].className = 'srSelectedLi';
        return li.srIndex;
    }

    ul.srFirstLi = function()
    {
        var ul = this;
        ul.childNodes[0].className += ' srFirstLi';
        ul.childNodes[ul.childNodes.length-1].className += ' srLastLi';
        return true;
    }

    ul.repFirstLi = function()
    {
        var ul = this;
        var len = ul.childNodes.length-1;
        ul.childNodes[0].className = ul.childNodes[0].className.replace(/[\s]?srFirstLi/, '');
        ul.childNodes[len].className = ul.childNodes[len].className.replace(/[\s]?srLastLi/, '');
        return true;
    }

    ul.srExpand = function()
    {
        if(!this.srExpanded)
        {
            if(document.srExpandedList)
                document.srExpandedList.srCollapse();

            this.srFirstLi();

            document.srExpandedList = this;

            this.className  = this.className.replace(/[\s]?srCollapsed/, ' srExpanded');
            this.srExpanded = true;

            this.srSelect.focus();

            if(ie6)
            {
                var node = this.firstChild;
                var offset = 0;
                var height = node.clientHeight;
                while(node)
                {
                    node.style.position = 'absolute';
                    node.style.top = offset;
                    offset += height;
                    node = node.nextSibling;
                }
            }
        }
    }

    ul.srCollapse = function(li)
    {
        if(this.srExpanded)
        {
            document.srExpandedList = null;
            this.repFirstLi();

            if(li) {
                this.srSelect.selectedIndex = this.srSelectLi(li);
            }

            this.srSelect.focus();
            this.className = this.className.replace(/[\s]?srExpanded/, ' srCollapsed');
            this.srExpanded = false;

            if(ie6)
            {
                var node = this.firstChild;
                while(node)
                {
                    node.style.position = '';
                    node = node.nextSibling;
                }
            }
        }
    }


    var options = sel.options;
    var len = options.length;

    for(var i = 0; i < len; i++)
    {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(options[i].text));
        li.srIndex = i;
        li.onmouseover = function() { this.className += ' srHoverLi'; }
        li.onmouseout = function() { this.className = this.className.replace(/[\s]?srHoverLi/, ''); }
        ul.appendChild(li);
    }

    if(sel.selectedIndex == null)
        sel.selectedIndex = 0;

    ul.srSelectLi(ul.childNodes[sel.selectedIndex]);
    sel.parentNode.insertBefore(ul, sel);
}

function srAddEvent(obj, type, fn)
{
    if (obj.addEventListener)
        obj.addEventListener(type, fn, false);
    else if (obj.attachEvent)
        obj.attachEvent( "on"+type, fn );
}

function srOnDocumentClick(e)
{
   $('ul.srBlur').css({background:"url('selectbg0.png')"} ); 

    var target = (window.event) ? window.event.srcElement : e.target;

    if(document.srExpandedList)
    {
        if((target.srIndex || target.srIndex === 0) && document.srExpandedList == target.parentNode )
            document.srExpandedList.srCollapse(target);
        else
            document.srExpandedList.srCollapse(); 

/*alert ($('select.kuk').val());*/
     switch ($('select.kuk').val()) {
            case '1':
        $('ul.srBlur').css({background:"url('selectbg.png')"} );    break;
            case '2':
        $('ul.srBlur').css({background:"url('sbgukr.png')"} );    break;
            case '3':
        $('ul.srBlur').css({background:"url('sbgfr.png')"} );    break;
                                    }


    }
    else
    {
        if(target.srIndex || target.srIndex === 0)
            target.parentNode.srExpand();
    }




}







function srReplaceSelects()
{
/*    var s = document.getElementsByTagName('select');*/


     var s = $('select.kuk');
   
    var len = s.length
    for (var i = 0; i < len; i++)
        rsSelectReplace(s[i]);

    srAddEvent(document, 'click', srOnDocumentClick);

}

srAddEvent(window, 'load', srReplaceSelects);
</script>


</head>
<body>


<select class="kuk">
   <option option selected value="1">Русский</option>
   <option value="2">Українська</option>
   <option value="3">France</option>

</select>
</body></html>

Спустя 2 минуты, 14 секунд (23.06.2010 - 16:32) Michael написал(а):
- это ты что - на хостинг выставил ? ph34r.gif

Спустя 5 минут, 39 секунд (23.06.2010 - 16:38) Guest написал(а):
Строки на jquery :


 $('ul.srBlur').css({background:"url('selectbg0.png')"} );

чуть ниже 

     switch ($('select.kuk').val()) {
            case '1':
        $('ul.srBlur').css({background:"url('selectbg.png')"} );    break;
            case '2':
        $('ul.srBlur').css({background:"url('sbgukr.png')"} );    break;
            case '3':
        $('ul.srBlur').css({background:"url('sbgfr.png')"} );    break;
                                    }

еще чуть ниже 

     var s = $('select.kuk');


Спустя 45 секунд (23.06.2010 - 16:39) Guest написал(а):
Все - в нижней половине скрипта.


Спустя 1 минута (23.06.2010 - 16:40) Guest написал(а):
Что значит "выставить на хостинг" ?

Спустя 17 минут, 27 секунд (23.06.2010 - 16:57) Michael написал(а):
Цитата (Guest @ 23.06.2010 - 15:40)
Что значит "выставить на хостинг" ?

разместить в интернете и скинуть сюда ссылку.

Вот тут:
src="C:\Server\Apache2.2\htdocs\zf-1.0\public\js\jquery-1.4.2.min.js">


возможно и проблема.

Скопируй jquery-1.4.2.min.js туда же где и твой файл и измени:
src="jquery-1.4.2.min.js">


Пробуй - авось заработает.

Спустя 6 минут, 27 секунд (23.06.2010 - 17:04) Guest написал(а):
Спасибище.
Скрипт в Опере загрузился, правда не работает подмена
background.

Спустя 10 минут, 11 секунд (23.06.2010 - 17:14) Michael написал(а):
код тот для background - рабочий. Смотри в чем другом дело. Так по самому коду сложно понять, что вообще делается. Например в одном месте кода ты обращаешся к select.kuk как к единичному элементу на странице:
switch ($('select.kuk').val()) {

, а в другом - так как будто их несколько:
 var s = $('select.kuk');
 var len = s.length


Спустя 5 минут, 2 секунды (23.06.2010 - 17:19) Guest написал(а):
В любом случае, элемент <select class="kuk"> единственный.
Но спасибо за замечание.

Спустя 7 минут, 33 секунды (23.06.2010 - 17:26) Guest написал(а):
Хронология такая.
Нужен "красивый" выпадающий список для смены языка на странице.
В инете нашел подходящий исходник , "затачиваю" его под свои условия
с пом. jquery.

var s = $('select.kuk'); -

здесь "целюсь" на свой <select class="kuk"> ,
но похоже скрипт предполагает наличие более одного
тега <select>
( var len = s.length).

Спустя 1 минута, 9 секунд (23.06.2010 - 17:28) Guest написал(а):
более одного тега,
которые нужно обрабатывать скриптом

Спустя 5 минут, 58 секунд (23.06.2010 - 17:33) Guest написал(а):
точнее допускает такую возможность,
типа универсальный и все такое

Спустя 1 день, 20 часов, 55 минут, 55 секунд (25.06.2010 - 14:29) Guest написал(а):
А как попробовать заменить background с помощью javascript ?

document.getElementByName ('ul.srBlur').style.background="url 'css/jaz/sbgukr.png')";

Спустя 20 минут, 30 секунд (25.06.2010 - 14:50) Michael написал(а):
getElementByID('id')
при этом у этого элемента должен быть атрибут id.

getElementByName - не помню, вроде для элементов форм только ...

Спустя 12 минут, 43 секунды (25.06.2010 - 15:03) Guest написал(а):
Спасибо.Буду пробовать.
Opera не меняет операторами jquery почемуто.

Спустя 3 минуты, 33 секунды (25.06.2010 - 15:06) Guest написал(а):
Задача максимум-переписать все в jquery,
но пока н маловато знаний.

Спустя 14 минут, 31 секунда (25.06.2010 - 15:21) Guest написал(а):
document.getElementByName

работает в том числе с "select" -
http://javascript.ru/tutorial/dom/search#p...telementsbyname

Спустя 56 минут, 26 секунд (25.06.2010 - 16:17) Guest написал(а):
Вот видимо причина
alert($('ul.srBlur').length);

Opera-0
IE8 -1

Спустя 2 дня, 19 часов, 31 минута, 58 секунд (28.06.2010 - 11:49) Guest написал(а):
Отличия Opera - IE8:

IE8

alert($('ul.srBlur').length)  = 1
alert($('ul.srFocus').length) =0


Opera

alert($('ul.srBlur').length)  = 0
alert($('ul.srFocus').length) =1

пришлось менять дважды

$('ul.srBlur').css({background:"url('css/jaz/selectbg.png') "} ); 
$('ul.srFocus').css({background:"url('css/jaz/selectbg.png') "} );

так работает и в Опере и в ИЕ8.


Теперь столкнулся с тем, что обработчик
sel.onchange = function()

работает только от клавиатуры, а при изменениях от мышки - нет.


Спустя 2 дня, 8 часов, 54 минуты, 37 секунд (30.06.2010 - 20:44) Guest написал(а):
Кстати, отличия поведения в частности ИЕ и Оперы в
при мышиных действиях рядом обсуждалось.

http://phpforum.ru/index.php?showtopic=17608
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.