Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. OnResize. offset(). При загрузке элемент встает криво. / 22 сообщений из 22, страница 1 из 1
23.01.2013, 03:36
    #38120658
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Почему криво работает такая простая конструкция?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
function moveBox(){
  var Box = $("#box");
  var leftOfColumn = $("#CenterColumn").offset().left;
  	FormSubscr.offset({top:Box.offset().top,left:leftOfColumn});
  }
}

function initResize(){
  $(window).resize(
      function(){ 
        moveBox();
      }
  );
}

function initLoad(){
   $(window).load(
      function() {
	moveBox();
	  }
	);
}



initLoad И initResize стоят в секции <head>.
После загрузки, вместо положенного положения, объект #box вместо 400пикс встает на 200пикс. Хотя alert показывает, leftOfColumn = 400, однако alert для #box показывает 200.

При дальнейшей работе (тоесть при ресайзе), moveBox() все делает исправно.

Вариации с setTimeout - тоже не канают. В чем собственно дело-то?
...
Рейтинг: 0 / 0
23.01.2013, 05:54
    #38120678
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_,

Вообще простая html-страничка, с нуля, не нагруженная, отрабатывает.
Да, и надо признаться, такая хрень только в Хроме . В мозилле и даже в ИЕ - работает на ура.

В чем затык может быть у хрома?
...
Рейтинг: 0 / 0
23.01.2013, 08:38
    #38120709
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
var moveBox function (){
  var Box = $("#box");
  var leftOfColumn = $("#CenterColumn").offset().left;
  	FormSubscr.offset({top:Box.offset().top,left:leftOfColumn});
  }
}
   $(document).ready(moveBox);
   $(window).resize(moveBox);



Модератор: Тема перенесена из форума "PHP, Perl, Python".
...
Рейтинг: 0 / 0
23.01.2013, 08:57
    #38120733
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_В чем собственно дело-то?
Начнём с того, что

Код: javascript
1.
FormSubscr.offset({top:Box.offset().top,left:leftOfColumn});



не указаны единицы измерения...

И по огрызку кода, без самого контента особо сказать нечего...
...
Рейтинг: 0 / 0
23.01.2013, 13:41
    #38121331
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Ренат
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
var moveBox function (){
  var Box = $("#box");
  var leftOfColumn = $("#CenterColumn").offset().left;
  	Box.offset({top:Box.offset().top,left:leftOfColumn});
  }
}
   $(document).ready(moveBox);
   $(window).resize(moveBox);


Думаете это что-то поменяет для Хрома или правда меняет?

krvsa , то есть единицы измерения для Хрома именно в момент загрузки страницы очень важны, а потом сразу он передумывает?
...
Рейтинг: 0 / 0
23.01.2013, 16:22
    #38121773
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_единицы измерения для Хрома именно в момент загрузки страницы очень важны, а потом сразу он передумывает?
На моей памяти только один постулат связаный с размерами, позициями и пр. - обязательное наличие единиц измерения.
Исключение делаю только для 0 (нулей). Ноль он и в Африке - ноль.
...
Рейтинг: 0 / 0
23.01.2013, 18:50
    #38122101
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Вот исходник.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
		function moveBox(){
		  var Box = $("#box");
		  var leftOfColumn = $("#CenterColumn").offset().left;
			Box.offset({top:Box.offset().top,left:leftOfColumn});
		}

		function initResize(){
		  $(window).resize(
			  function(){ 
				moveBox();
			  }
		  );
		}

		function initLoad(){
		   $(window).load(
			  function() {
			setTimeout('moveBox()',3000);
			  }
			);
		}
		initLoad();
		initResize();
	</script>
	<style>
		#box{
      	position: absolute; 
        background-color: #C5aaC5;
        background-repeat:no-repeat;
        left: 30%;
        width: 180px;
        height: 120px;
        top: 0px;
        color: #FFF;
        font-family: Tahoma, Geneva, Arial;
        font-size: 11pt;
        font-weight: bold;        
        text-align: center;
        z-index: 5;
		}
	</style>
</head>
<body>
	<div id="box">text</div>
	<div id="CenterColumn" style="left:50%;position:absolute;top:200px;">some text</div>
</body>
</html>	



Затык в хроме в указанном в стиле left:30%. Если указаны px, то нет проблем. А если указано - то скачет при загрузке влево от нужного. Как победить?
...
Рейтинг: 0 / 0
23.01.2013, 22:36
    #38122348
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_скачет при загрузке влево от нужного. Как победить?
Потестить и посмотреть какие идут координаты элементу...
...
Рейтинг: 0 / 0
24.01.2013, 15:20
    #38123331
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
krvsa_Промешан_скачет при загрузке влево от нужного. Как победить?
Потестить и посмотреть какие идут координаты элементу...дык так и делаю. координаты идут нормальные, а вот объект получает все равно другие. Берется что ли 30% от ширины. Непонятная математика.
...
Рейтинг: 0 / 0
24.01.2013, 15:28
    #38123352
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Код: javascript
1.
2.
3.
4.
5.
6.
function moveBox(){
  var Box = $("#box");
  var leftOfColumn = $("#CenterColumn").offset().left;
  Box.offset({top:Box.offset().top,left:leftOfColumn});
      $("#CenterColumn").html('real='+leftOfColumn+'| Box='+Box.offset().left);
		}



Для дебага. Там еще таймаут поменьше сделать, чтобы не ждать.

Получаются разные значения.
А уже при ресайзе - одинаковые.
...
Рейтинг: 0 / 0
24.01.2013, 15:34
    #38123362
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_Берется что ли 30% от ширины. Непонятная математика.
Тут-то все как раз понятно. 30% это ширина родителя.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container {
	width: 300px;
	height: 100px;
	position: relative;
	padding: 0;
	border: 1px solid;
}
#box {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	left: 30%;
	background-color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='box'></div>
</div>
</body>
</html>



Весь вопрос в том - какова на тот момент ширина родителя!
...
Рейтинг: 0 / 0
24.01.2013, 16:11
    #38123425
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
krvsa_Промешан_Берется что ли 30% от ширины. Непонятная математика.
Весь вопрос в том - какова на тот момент ширина родителя! Все это коненчо наверное весело. Но не понятно не это. Это как бы очень даже понятно. Не в детском саду же)

Почему такая хрень только в Хроме.

Пробуйте сами:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
		function moveBox(){
		  var Box = $("#box");
		  var leftOfColumn = $("#CenterColumn").offset().left;
			Box.offset({top:Box.offset().top,left:leftOfColumn});
      $("#CenterColumn").html('real='+leftOfColumn+'| Box='+Box.offset().left);
		}

		function initResize(){
		  $(window).resize(
			  function(){ 
				moveBox();
			  }
		  );
		}

		function initLoad(){
		   $(window).load(
			  function() {
			setTimeout('moveBox()',1000);
			  }
			);
		}
		initLoad();
		initResize();
	</script>
	<style>
		#box{
      	position: absolute; 
        background-color: #C5aaC5;
        background-repeat:no-repeat;
        left: 30%;
        width: 180px;
        height: 120px;
        top: 0px;
        color: #FFF;
        font-family: Tahoma, Geneva, Arial;
        font-size: 11pt;
        font-weight: bold;        
        text-align: center;
        z-index: 5;
		}
	</style>
</head>
<body>
	<div id="box">text</div>
	<div id="CenterColumn" style="left:50%;position:absolute;top:200px;">some text</div>
</body>
</html>	

...
Рейтинг: 0 / 0
24.01.2013, 16:16
    #38123436
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
...
Рейтинг: 0 / 0
24.01.2013, 16:21
    #38123446
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_Почему такая хрень только в Хроме.
Пробуйте сами:
Вот это уже тестовый пример!
Посмотрел... Во всех моих 4-х браузерах box прыгает после загрузки...

Вот мой вариант "без прыжка".

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#box {
	position: absolute; 
	background-color: #C5aaC5;
	background-repeat:no-repeat;
	left: 30%;
	width: 180px;
	height: 120px;
	top: 0px;
	color: #FFF;
	font-family: Tahoma, Geneva, Arial;
	font-size: 11pt;
	font-weight: bold;        
	text-align: center;
	z-index: 5;
}
</style>
<script type="text/javascript">
function moveBox(){
	var Box = $("#box");
	var leftOfColumn = $("#CenterColumn").offset().left;
	Box.offset({top:Box.offset().top,left:leftOfColumn});
	$("#CenterColumn").html('real='+leftOfColumn+'| Box='+Box.offset().left);
}
function initResize(){
	$(window).resize(
		function(){ 
			moveBox();
		}
	);
}
function initLoad(){
	$(document).ready(
		function() {
			moveBox();
		}
	);
}
initLoad();
initResize();
</script>
</head>
<body>
	<div id="box">text</div>
	<div id="CenterColumn" style="left:50%;position:absolute;top:200px;">some text</div>
</body>
</html>

...
Рейтинг: 0 / 0
24.01.2013, 16:23
    #38123451
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
Может я так и не понял на что именно смотреть?
Твой пример таки у меня одинаково работает. Сначала стоит на своих 30%, а после паузы скачет в позицию другого элемента (который 50%)...
Так происходит и в Опере, и в ФФ, и в ИЕ8, и Хроме - везде одинаково у меня.
...
Рейтинг: 0 / 0
24.01.2013, 16:44
    #38123487
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
krvsa_Промешан_ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
Может я так и не понял на что именно смотреть?
Твой пример таки у меня одинаково работает. Сначала стоит на своих 30%, а после паузы скачет в позицию другого элемента (который 50%)...
Так происходит и в Опере, и в ФФ, и в ИЕ8, и Хроме - везде одинаково у меня.

Привожу примеры. Имеется в виду, что так сразу после загрузки и после того, что отрабатывает MoveBox(). setTimeout для наглядности, чтобы видеть что куда. А вы его просто убрали.
...
Рейтинг: 0 / 0
24.01.2013, 23:32
    #38123973
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_ , повторюсь, у меня во всех 4-х браузерах поведение одинаковое - сначало как на первой картинке, а потом как на второй.
Везде.
...
Рейтинг: 0 / 0
25.01.2013, 11:45
    #38124354
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
krvsa _Промешан_ , повторюсь, у меня во всех 4-х браузерах поведение одинаковое - сначало как на первой картинке, а потом как на второй.
Везде.Хм... У меня что на работе, что дома - в Хроме одинаково работает криво.
У вас какая версия хрома?
...
Рейтинг: 0 / 0
25.01.2013, 11:46
    #38124359
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_krvsa _Промешан_ , повторюсь, у меня во всех 4-х браузерах поведение одинаковое - сначало как на первой картинке, а потом как на второй.
Везде.Хм... У меня что на работе, что дома - в Хроме одинаково работает криво.
У вас какая версия хрома?
Я повторюсь - криво работает, если left установлено в %, а не в px.
...
Рейтинг: 0 / 0
25.01.2013, 14:25
    #38124733
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
_Промешан_У вас какая версия хрома?
Версия 24.0.1312.56 m
...
Рейтинг: 0 / 0
25.01.2013, 14:39
    #38124773
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Вот что показывает...
...
Рейтинг: 0 / 0
25.01.2013, 17:20
    #38125090
_Промешан_
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. OnResize. offset(). При загрузке элемент встает криво.
Ну незнаю. У меня все так же.

Но кажет криво. Именно когда %.

Может как то с настройками фаервола связано. Впрочем дома то у меня другой, чем на работе.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. OnResize. offset(). При загрузке элемент встает криво. / 22 сообщений из 22, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]