Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   .css('background-position', '500px 0px'); не работает (https://javascript.ru/forum/jquery/15154-css-%27background-position%27-%27500px-0px%27-%3B-ne-rabotaet.html)

warobushek 15.02.2011 09:12

.css('background-position', '500px 0px'); не работает
 
Хочу в спрайте с помощью jquery менять позицию бакграунда
почему-то не работает эта конструкция у меня.

как можно это сделать?

ksa 15.02.2011 09:14

Цитата:

Сообщение от warobushek
как можно это сделать?

Как вариант сделать нужный стиль/класс в цсс и потом присвоить его элементу ДОМ...

warobushek 15.02.2011 09:32

создать стиль/класс
 
Можно ли динамически создать класс тогда.

У меня в спрайте на данный момент 50 картинок.
Меняются они довольно часто, чтобы каждый раз править css файл.

Конечно это я могу сделать и на стороне сервера, но необходимая информация уже есть у клиента => неохото лишний раз напрягать сервак.

ksa 15.02.2011 11:30

warobushek, файл цсс готовится заранее. Потом только используется...

warobushek 15.02.2011 12:26

файл цсс готовится заранее
 
в моем случае два варианта либо на стороне сервера задавать смещение , либо динамически через javascript его задавать

Поэтому и прошу помощи у профессионалов.


CSS не подойдет. (хотя его тоже можно формировать на серваке, но это уже будет слишком ...)

ksa 15.02.2011 14:14

warobushek, х/з как там в jQuery... Но можно сделать и на старом, добром js вот так

<!DOCTYPE html>
<html>
<head>
<style>
div {
	width: 200px;
	height: 100px;
	border: 1px solid;
	background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat;
	background-position: 0 0;
}
</style>
<script>
function Go() {
	document.getElementById("box").style.backgroundPosition='right bottom'
}
</script>
</head>
<body>
<div id='box'></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

walik 15.02.2011 14:30

<html>
<head>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
div {
    width: 200px;
    height: 100px;
    border: 1px solid;
    background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat;
    background-position: 0 0;
}
</style>
<script>
function Go() {
	$("#box").css({backgroundPosition: '10px 20px'});
}
</script>
</head>
<body>
<div id='box'></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>


Вот на JQuery

warobushek 15.02.2011 15:26

Отлично!!!!!
 
Спасибо Вам большое.
кстати попробовал еще раз
.css('background-position', '500px 0px');

все-таки работает, просто я не в тот момент вызывал ;)


Часовой пояс GMT +3, время: 17:38.