Смена размеров изображения и смещение слоя

@Samazar · Регистрация: 02.11.2011

Author24 — интернет-сервис помощи студентам

Добрый день! Столкнулся с проблемами кросс-браузерности и решил попытаться их решить через jquery (Такие как, картинка на фоне и/или круглые углы). Для установки фонового изображения решил попытаться использовать слой, на котором находится картинка + оболочка с самим контентом. Попытался написать на JQuery функции, для считывания размеров оболочки и присвоения их изображению, но ничего не вышло. Не могли бы Вы указать на ошибки? с JQuery знаком очень мало и достаточно поверхностно...

Вот код:

Javascript

        $('.bg img').each(function(){
    var height_new=$('.wrap').attr('height');
    alert("13");
    $('.bg img').attr('height', height_new);
    var temp=height_new;
    temp = temp - 10;
    $('.bg img').attr('bottom', temp);
    })

Если необходимо, пишите - скину все скрипты...

@Schtrich · 05.03.2012, 23:53

во 1-ых на своем опыте я уже убедился что круглые на jQuery, чистом js, css3pie или еще на чем-бы то ни было дело пагубное, разве-что можно скодить чуток, но все-равно потом отфотошопить чего красиво получилось.
во 2-ых какие-либо ошибки в косоли не замечали?

@Samazar · 06.03.2012, 11:30 **[ТС]**

1) у меня реализуется схема следующим образом:
если браузер на движках (не помню названия всех, но знающие, думаю, поймут) FF, Opera, WebKit, IE9+ - то используется css 3. Если используется ie 8, то используется скрипт (проверил на виртуалке - работает нормально вроде-как). Если используется ie 7, то картинка меняется на аналогичную, но с рамкой.
2) Насчет ошибок... Данный скрипт отрабатывает только в ie 7 (в остальных подобной проблемы нет). Проверяю его через IE8 в режиме IE7. Пишет отчет только о ошибке в шифровке для mailto. Но это шифровка стандартная Joomla.

PS alert вводил только для того, что бы посмотреть работает ли скрипт вообще. Не работает.

@Jay_D · 07.03.2012, 00:04

Спешу указать на ошибку !
Она в том что:
var height_new=$('.wrap').attr('height');
в переменной будет хранится допустим 100PX, а потом вы пишите:
var temp=height_new;
temp = temp - 10; - суть такая :
от строки "100PX" - 10
Все что нужно взять правильно высоту:

Javascript

$('.bg img').each(function(){
        var height_new=$('.wrap').height();
        alert("13");
        $('.bg img').attr('height', height_new);
        var temp=height_new;
        temp = temp - 10;
        $('.bg img').attr('bottom', temp);
        });

@Samazar · 07.03.2012, 13:13 **[ТС]**

Спасибо всем! Все получилось! Правда, ошибки были в других местах

Ошибка 1) Забыл поставить ; после комбинации символов закрывающих блок кода })
Ошибка 2) Использовал атрибут bottom, забыв о том, что это относится к стилям.
Ошибка 3) В коде несколько запутался в селекторах.

В общем, на всякий случай, если кому-то придется сталкиваться с подобным в дальнейшем:

HTML5

<body>
  <div class='bg'>
    <img class='backgr' src='*path*'>
      <div id='wrap'>
        *тут код сайта*
      </div>
  </div>
</body>

CSS

1	.backgr{ width: 100%;}

Javascript

$('.bg img.backgr').each(function(){
        var height_new=$('.wrap').height();
        $('.backgr').attr('height', height_new);
        $('.wrap').css({'position': 'absolute', 'right': 1});
        });
})

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	05.03.2012, 23:53	2
	во 1-ых на своем опыте я уже убедился что круглые на jQuery, чистом js, css3pie или еще на чем-бы то ни было дело пагубное, разве-что можно скодить чуток, но все-равно потом отфотошопить чего красиво получилось. во 2-ых какие-либо ошибки в косоли не замечали? 1

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	06.03.2012, 11:30 [ТС]	3
	1) у меня реализуется схема следующим образом: если браузер на движках (не помню названия всех, но знающие, думаю, поймут) FF, Opera, WebKit, IE9+ - то используется css 3. Если используется ie 8, то используется скрипт (проверил на виртуалке - работает нормально вроде-как). Если используется ie 7, то картинка меняется на аналогичную, но с рамкой. 2) Насчет ошибок... Данный скрипт отрабатывает только в ie 7 (в остальных подобной проблемы нет). Проверяю его через IE8 в режиме IE7. Пишет отчет только о ошибке в шифровке для mailto. Но это шифровка стандартная Joomla. PS alert вводил только для того, что бы посмотреть работает ли скрипт вообще. Не работает. 0

	07.03.2012, 13:13