CSS и Java Script - изменение фоновой картинки

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

CSS и Java Script - изменение фоновой картинки

» » Сообщение:

Подскажите, что нужно добавить/изменить в скрипте для того чтобы скрипт проверял:
Если пользователь оценивал фото, то фоновая картинка была одного цвета, а если нет то другого.

Подробнее:

1) На этой странице sergeykov.usite.pro/photo/priroda_tomskoj_oblasti/zima/imag1051/5-0-3#casing есть форма для оценки фото

2) Там стоит скрипт на странице

html Код: Выделить всё Развернуть
<?if($RATING$) and ($USER_LOGGED_IN$)?>
<div class="likepos_full">
<div class="likeplus_full" title="Мне нравится!"
 onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данную фотографию!','Спасибо за оценку',{w:250,h:85,t:8000}); else {_uWnd.alert('Спасибо за оценку фотографии!','Вы успешно оценили',{w:260,h:70,t:8000})};});">
 </div></div>
 <?if($RATED$)>0?><div class="likex_full">+$RATED$</div><?endif?>
 <?else?>
 <div class="likepos_full">
<div class="like_nfull" title="Мне нравится!" onclick="rating();">
</div></div>
 <?if($RATED$)>0?><div class="likex_nfull">+$RATED$</div><?endif?>
<?endif?>
script Код: Выделить всё Развернуть
<script>
 function rating() {
 new _uWnd('loginuser',' ',300,200,{header:1,close:1,resize:0},$('#login_user').html());
 }
</script>

3) Стили

css Код: Выделить всё Развернуть
/* Оценка фотографий */
.likex, .likex_full, .likex_nologin, .likex_nfull, .likepos, .likepos_full {position:absolute!important;}
.
likex, .likex_full, .likex_nologin, .likex_nfull {width:auto;min-width:15px;}
.
likeplus, .likeplus_full, .like_nologin, .like_nfull {font-size:1pt;background:url('/img/like_.png') top;width:24px;height:24px;overflow:hidden;cursor:pointer;}
.
likeplus_full:hover {background-position:0 24px;}
.
likeplus, .like_nologin {background:url('/img/like_2.png') top;width:20px;height:20px;}
.
likeplus:hover {background-position:0 20px;}
.
likex, .likex_full, .likex_nologin, .likex_nfull {font-size:13px;font-weight:bold;padding:2px 6px;background:rgba(234, 97, 42, 0.9);color:#fff;text-shadow:0px 0px 4px #fff;border-radius:10px;cursor:default;}
.likex, .likex_nologin {margin-top:-3px;right:33px;font-size:12px;}
.
likeplus_full, .likex, .likex_full, .likex_nologin, .likex_nfull {display: inline-block;}
.
likex_nologin, .likex_nfull {background: rgba(185, 185, 185, 0.7);color: #595959;}
.likepos, .likepos_full {cursor:pointer;height:20px;width:20px;margin-top:-19px;right:10px;}
.
likepos_full {margin-top:-23px;height:24px;width:24px;right:10px;}
.
likex_nfull, .likex_full {right:37px;margin-top:-3px;}

Нужно, чтобы скрипт проверил, если пользователь оценивал фото то в css стилях было это:

css Код: Выделить всё Развернуть
.likeplus_full {background-position:0 24px;}

т.е. смещение фоновой картинки на цветную

css, javascript, background, фон, изменение

Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 17.05.2016, 20:38:Нужно, чтобы скрипт проверил, если пользователь оценивал фото то в css стилях было это:

Проверял как? при просмотре страницы или?

Код: Выделить всё Развернуть
<script type="text/javascript">
function is_rate(id){
   if($('#uStarRating'+id+' > li').size() == 1){
      $('.likeplus_full').css({'background-position':'0 24px'});
   }
};
is_rate($ID$);
</script>

Ну и заменить это:

Код: Выделить всё Развернуть
_uWnd.alert('Спасибо за оценку фотографии!','Вы успешно оценили',{w:260,h:70,t:8000})

на это:

Код: Выделить всё Развернуть
_uWnd.alert('Спасибо за оценку фотографии!','Вы успешно оценили',{w:260,h:70,t:8000});$('likeplus_full').css({'background-position':'0 24px'});

в вашем скрипте


Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 17.05.2016, 22:18:Проверял как? при просмотре страницы или?

Да, при просмотре страницы пользователем уже оценившим фото...

Admin писал(а) › 17.05.2016, 22:18:<script type="text/javascript">
function is_rate(id){
if($('#uStarRating'+id+' > li').size() == 1){
$('likeplus_full').css({'background-position':'0 24px'});
}
};
is_rate($ID$);
</script>

Этот скрипт не меняет картинку :(


Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 18.05.2016, 18:31:Этот скрипт не меняет картинку

Ну .. как бы, вот:

Re CSS и Java Script - изменение фоновой картинки
Fearfire писал(а) › 18.05.2016, 18:31:Этот скрипт не меняет картинку

Ой, точку забыл..)
Вот тут:

plain Код: Выделить всё Развернуть
$('.likeplus_full').css({'background-position':'0 24px'});

---


Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 19.05.2016, 03:10:Ну .. как бы, вот:

Посмотрите пожалуйста на примере этой странички

Разместил скрипт в начале страницы, только вот не работает он у меня... может в знаках всё дело, запятые точки там...? :)


Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 20.05.2016, 20:00:Разместил скрипт в начале страницы

Ну у вас же там звездочек нет..
Скрипт на том и основан, что ищет звездочки и если они там есть, то вы еще не голосовали.
Тогда так попробуйте:

Код: Выделить всё Развернуть
<?if($RATING$) and ($USER_LOGGED_IN$)?>
<div id="is_rate" style="display:none;height:0;overflow:hidden;"><?$RSTARS$('12','i.png','1','float')?></div>
<div class="likepos_full" id="likepos_full">
   <div class="likeplus_full" title="Мне нравится!"
 onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1){ _uWnd.alert('Вы уже оценивали данную фотографию!','Спасибо за оценку',{w:250,h:85,t:8000}); } else {is_rate($ID$);_uWnd.alert('Спасибо за оценку фотографии!','Вы успешно оценили',{w:260,h:70,t:8000})};});">
 </div></div>
 <?if($RATED$)>0?><div class="likex_full">+$RATED$</div><?endif?>
 <?else?>
 <div class="likepos_full">
<div class="like_nfull" title="Мне нравится!" onclick="rating();">
</div></div>
<?if($RATED$)>0?><div class="likex_nfull">+$RATED$</div><?endif?>
<script type="text/javascript">
function is_rate(id){
setTimeout(function(){
if($('#uStarRating'+id+' > li').size() == 1){$('#likepos_full').css({'background-position':'0 24px'});}
},1500);
};is_rate($ID$);
</script>
<?endif?>

Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 20.05.2016, 21:20:Тогда так попробуйте:

Скрипт не делает задуманное((

Admin писал(а) › 20.05.2016, 21:20:Ну у вас же там звездочек нет..
Скрипт на том и основан, что ищет звездочки и если они там есть, то вы еще не голосовали.

Может тогда заменить условие

Код: Выделить всё Развернуть
if($('#uStarRating'+id+' > li').size() == 1)

на это

Код: Выделить всё Развернуть
if($(data).text().indexOf('уже оценивали')>-1)

??? (Я пробовал менять, у меня не получается :unknown: )


Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 22.05.2016, 12:42:Скрипт не делает задуманное(

А так:

Код: Выделить всё Развернуть
<?if($RATING$) and ($USER_LOGGED_IN$)?>
<div id="is_rate" style="display:none;height:0;overflow:hidden;"><?$RSTARS$('12','i.png','1','float')?></div>
<div class="likepos_full" id="likepos_full">
<div class="likeplus_full" title="Мне нравится!"
onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1){ _uWnd.alert('Вы уже оценивали данную фотографию!','Спасибо за оценку',{w:250,h:85,t:8000}); } else {$('#likepos_full').css({'background-position':'0 24px'});_uWnd.alert('Спасибо за оценку фотографии!','Вы успешно оценили',{w:260,h:70,t:8000})};});">
</div></div>
<?if($RATED$)>0?><div class="likex_full">+$RATED$</div><?endif?>
<?else?>
<div class="likepos_full" id="likepos_full">
<div class="like_nfull" title="Мне нравится!" onclick="rating();">
</div></div>
<?endif?>
<?if($RATED$)>0?><div class="likex_nfull">+$RATED$</div><?endif?>
<script type="text/javascript">
function is_rate(){
setTimeout(function(){
if($('#is_rate li').size() == 1){$('#likepos_full').css({'background-position':'0 24px'});}
},1500);
};is_rate();
</script>
Fearfire писал(а) › 22.05.2016, 12:42:Может тогда заменить условие

Нет, так нельзя

Вы бы сделали аккаунт, я бы сам все сделал и проверил бы, а так получается как пальцем в небо.
--


Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Да, теперь код почти рабочий

Код: Выделить всё Развернуть
<?if($RATING$) and ($USER_LOGGED_IN$)?>
    <div id="is_rate" style="display:none;height:0;overflow:hidden;"><?$RSTARS$('12','i.png','1','float')?></div>
    <div class="likepos_full">
    <div class="likeplus_full" title="Мне нравится!" id="likeplus_full"
    onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1){ _uWnd.alert('Вы уже оценивали данную фотографию!','Спасибо за оценку',{w:250,h:85,t:8000}); } else {$('#likeplus_full').css({'background-position':'0 24px'});_uWnd.alert('Спасибо за оценку [anchor=http://likbezz.ru/viewtopic.php?t=1803|Качество демо фотографии на юкозе. Как улучшить?]фотографии[/anchor]!','Вы успешно оценили',{w:260,h:70,t:8000})};});">
    </div></div>
    <?if($RATED$)>0?><div class="likex_full">+$RATED$</div><?endif?>
    <?else?>
    <div class="likepos_full" id="likepos_full">
    <div class="like_nfull" title="Мне нравится!" onclick="rating();">
    </div></div>
    <?if($RATED$)>0?><div class="likex_nfull">+$RATED$</div><?endif?>
    <?endif?>
   
    <script type="text/javascript">
    function is_rate(){
    setTimeout(function(){
    if($('#is_rate li').size() == 1){$('#likeplus_full').css({'background-position':'0 24px'});}
    },1500);
    };is_rate();
    </script>

Только для новых добавленных фото скрипт почему-то не действует... !?

....

Нашел почему скрипт не работал для новых фото!

Вывел на экран значение id is_rate через alert

Код: Выделить всё Развернуть
alert( $('#is_rate li').size() );

у старых фото значение равно 1, а у новых 6, и оно не меняется, оценили фото или нет !!!

Почему так получилось? :help:


Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 22.05.2016, 20:40:у старых фото значение равно 1, а у новых 6, и оно не меняется, оценили фото или нет !!!
Почему так получилось?

Что-то я не наблюдаю такого..
У меня все ровно.
Дайте ссылку на фото, где не меняется, оценили фото или нет.


Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 24.05.2016, 12:20:Что-то я не наблюдаю такого..
У меня все ровно.
Дайте ссылку на фото, где не меняется, оценили фото или нет.

Вот на этих... (я их добавлял позже):
первое, второе, третье, на остальных всё норм!

За что именно отвечает id is_rate?

И параллельно другой вопрос: Что нужно изменить в этой строчке скрипта для определения ширины окна браузера?

Код: Выделить всё Развернуть
{if(scr_w=screen.width)<500{$('#likeplus_full').css({'background-position':'0 20px'});}
else {$('#likeplus_full').css({'background-position':'0 24px'});}}

Скрипт:

script Код: Выделить всё Развернуть
<script type="text/javascript">
 function is_rate(){
 setTimeout(function(){
     if($('#is_rate li').size() == 1){if(scr_w=screen.width)<500{$('#likeplus_full').css({'background-position':'0 20px'});}
else {$('#likeplus_full').css({'background-position':'0 24px'});}}
 },1500);
 };is_rate();
 </script>

Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 24.05.2016, 20:10:Вот на этих... (я их добавлял позже):
Fearfire писал(а) › 24.05.2016, 20:10:первое, второе, третье, на остальных всё норм!

У мня там везде 1, тк проголосовал... )) - кружочек красный

Fearfire писал(а) › 24.05.2016, 20:10:За что именно отвечает id is_rate?

Чет не очень понял о чем вы спросили.
Функция просто проверяет есть звездочки для голосования или нет.
Ели только одна - вы голосовали и меняет стиль в блоке с id likeplus_full

Fearfire писал(а) › 24.05.2016, 20:10:Что нужно изменить в этой строчке скрипта для определения ширины окна браузера?

А откуда это такое?
Как-то так должно быть:

Код: Выделить всё Развернуть
if(screen.width<500){
   $('#likeplus_full').css({'background-position':'0 20px'});
}else{
   $('#likeplus_full').css({'background-position':'0 24px'});
}

Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 24.05.2016, 20:39:Функция просто проверяет есть звездочки для голосования или нет.
Ели только одна - вы голосовали и меняет стиль в блоке с id likeplus_full

А как тогда понимать если функция возвращает значение равное 6 до оценки и после?
До:

После:


Re: CSS и Java Script - изменение фоновой картинки

Admin » » Сообщение:

Fearfire писал(а) › 24.05.2016, 21:39:А как тогда понимать если функция возвращает значение равное 6 до оценки и после?

после она никак не может возвращать 6.
возможно данные из кеша..
Вы откройте исходник - CTRL+U и нажмите CTRL + F введите "is_rate" и посмотрите сколько в блоке элементов «li».

Fearfire писал(а) › 24.05.2016, 21:39:После:

То бишь, после голосования, даже при перегрузке страницы все равно выводит 6?

Вот код до голосования:

Код: Выделить всё Развернуть
<ul id="uStarRating715" class="uStarRating715 u-star-rating-12" title="Рейтинг: 0.0/0">
<li class="u-current-rating uCurStarRating715" id="uCurStarRating715" style="width:0%;"></li>
<li class="u-star-li-715"><a href="#" onclick="ustarrating('715',1);return false;" class="u-one-star">1</a></li>
<li class="u-star-li-715"><a href="#" onclick="ustarrating('715',2);return false;" class="u-two-stars">2</a></li>
<li class="u-star-li-715"><a href="#" onclick="ustarrating('715',3);return false;" class="u-three-stars">3</a></li>
<li class="u-star-li-715"><a href="#" onclick="ustarrating('715',4);return false;" class="u-four-stars">4</a></li>
<li class="u-star-li-715"><a href="#" onclick="ustarrating('715',5);return false;" class="u-five-stars">5</a></li>
</ul>

Вот после голосования:

Код: Выделить всё Развернуть
<ul id="uStarRating715" class="uStarRating715 u-star-rating-12" title="Рейтинг: 0.0/0">
<li class="u-current-rating uCurStarRating715" id="uCurStarRating715" style="width: 100%; visibility: visible;"></li>
<li class="u-star-li-715" style="display: none;"><a href="#" onclick="ustarrating('715',1);return false;" class="u-one-star">1</a></li>
<li class="u-star-li-715" style="display: none;"><a href="#" onclick="ustarrating('715',2);return false;" class="u-two-stars">2</a></li>
<li class="u-star-li-715" style="display: none;"><a href="#" onclick="ustarrating('715',3);return false;" class="u-three-stars">3</a></li>
<li class="u-star-li-715" style="display: none;"><a href="#" onclick="ustarrating('715',4);return false;" class="u-four-stars">4</a></li>
<li class="u-star-li-715" style="display: none;"><a href="#" onclick="ustarrating('715',5);return false;" class="u-five-stars">5</a></li>
</ul>

А вот такой после голосования и перегрузки страницы:

Код: Выделить всё Развернуть
<ul id="uStarRating715" class="uStarRating715 u-star-rating-12" title="Рейтинг: 5.0/1">
<li class="u-current-rating uCurStarRating715" id="uCurStarRating715" style="width:100%;"></li>
</ul>

Ну, как вариант, можно еще проверять не просто наличия, а наличие видимых звездочек:

Код: Выделить всё Развернуть
if($('#is_rate li:visible').size() == 1){

Так же, можно попробовать увеличить там-аут - вдруг звездочки еще не успели сменится до проверки:
вместо

Код: Выделить всё Развернуть
},1500);

поставить

Код: Выделить всё Развернуть
},3000);

...

Специально добавил фотку, сработало нормально.
Добавлял мозиллой


Re: CSS и Java Script - изменение фоновой картинки

Fearfire » » Сообщение:

Admin писал(а) › 25.05.2016, 07:31:после она никак не может возвращать 6.
возможно данные из кеша..
Вы откройте исходник - CTRL+U и нажмите CTRL + F введите "is_rate" и посмотрите сколько в блоке элементов «li».

Оценивал фото через мобильную версию Firefox - полёт нормальный...
Но стоило зайти на компе в свой профиль и скрипт начинает выводить значение id = 6, то есть будто я не оценивал, очистил кэш, не помогло....

Admin писал(а) › 25.05.2016, 07:31:Ну, как вариант, можно еще проверять не просто наличия, а наличие видимых звездочек:
Admin писал(а) › 25.05.2016, 07:31:Так же, можно попробовать увеличить там-аут

... также... если я уже оценил например через свой профиль с одного браузера и хочу оценить с другого, то пишет что я уже оценивал, и не меняет background-position :unknown:

А можно вместо проверки звёздочек сделать условие на основе этой части скрипта?

Код: Выделить всё Развернуть
$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1)

След.



Похожие темыКомментарии ПросмотрыПоследнее сообщение
01268Сброс настроек кук, изменение настр...
Сообщение от: Admin
0717Изменение пользовательских настроек...
Сообщение от: Admin
0529Изменение диапазона поиска для Акти...
Сообщение от: Admin
0766PictureResize - Пакетное изменение ...
Сообщение от: Admin
02230Предпросмотр картинки перед загрузк...
Сообщение от: Admin