ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. OnResize. offset(). При загрузке элемент встает криво.
22 сообщений из 22, страница 1 из 1
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38120658
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
Почему криво работает такая простая конструкция?

Код: 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, 03:36
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38120678
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
_Промешан_,

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

В чем затык может быть у хрома?
...
Рейтинг: 0 / 0
23.01.2013, 05:54
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38120709
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Код: 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:38
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38120733
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_В чем собственно дело-то?
Начнём с того, что

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



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

И по огрызку кода, без самого контента особо сказать нечего...
...
Рейтинг: 0 / 0
23.01.2013, 08:57
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38121331
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
Ренат
Код: 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, 13:41
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38121773
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_единицы измерения для Хрома именно в момент загрузки страницы очень важны, а потом сразу он передумывает?
На моей памяти только один постулат связаный с размерами, позициями и пр. - обязательное наличие единиц измерения.
Исключение делаю только для 0 (нулей). Ноль он и в Африке - ноль.
...
Рейтинг: 0 / 0
23.01.2013, 16:22
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38122101
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
Вот исходник.

 
Код: 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, 18:50
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38122348
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_скачет при загрузке влево от нужного. Как победить?
Потестить и посмотреть какие идут координаты элементу...
...
Рейтинг: 0 / 0
23.01.2013, 22:36
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123331
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
krvsa_Промешан_скачет при загрузке влево от нужного. Как победить?
Потестить и посмотреть какие идут координаты элементу...дык так и делаю. координаты идут нормальные, а вот объект получает все равно другие. Берется что ли 30% от ширины. Непонятная математика.
...
Рейтинг: 0 / 0
24.01.2013, 15:20
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123352
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
Код: 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:28
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123362
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_Берется что ли 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, 15:34
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123425
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
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:11
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123436
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
...
Рейтинг: 0 / 0
24.01.2013, 16:16
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123446
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_Почему такая хрень только в Хроме.
Пробуйте сами:
Вот это уже тестовый пример!
Посмотрел... Во всех моих 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:21
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123451
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
_Промешан_ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
Может я так и не понял на что именно смотреть?
Твой пример таки у меня одинаково работает. Сначала стоит на своих 30%, а после паузы скачет в позицию другого элемента (который 50%)...
Так происходит и в Опере, и в ФФ, и в ИЕ8, и Хроме - везде одинаково у меня.
...
Рейтинг: 0 / 0
24.01.2013, 16:23
| Ответить | Цитировать | Написать  
jQuery. OnResize. offset(). При загрузке элемент встает криво.
    #38123487
_Промешан_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Промешан_
Гость
krvsa_Промешан_ТО есть вопрос в том, почему после присваивания через jQuery объект left для потомка, продолжает работать CSS правило в Хроме?
Может я так и не понял на что именно смотреть?
Твой пример таки у меня одинаково работает. Сначала стоит на своих 30%, а после паузы скачет в позицию другого элемента (который 50%)...
Так происходит и в Опере, и в ФФ, и в ИЕ8, и Хроме - везде одинаково у меня.

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

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

Может как то с настройками фаервола связано. Впрочем дома то у меня другой, чем на работе.
...
Рейтинг: 0 / 0
25.01.2013, 17:20
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. OnResize. offset(). При загрузке элемент встает криво.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38120658&tid=1448815]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 57ms
get topic data:
 13ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 1ms
others: 215ms
total:  368ms
созд. / загр.: 368ms
x
x
Закрыть


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