Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / событие загрузки js / 9 сообщений из 9, страница 1 из 1
20.04.2013, 13:56
    #38233796
taaamerlan
taaamerlan
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
Начну из далека ибо потом мне будут писать - "зачем делать такой бред?".

Я верстаю страницу. Хочу ее сделать полностью резиновой. На фоне лежит изображение, его я не могу пихать в background-image т.к. тогда изображение не будет растягиваться. Изображение я кладу на слой ниже и все получается отлично.
Дошел до ситуации, когда (как мне кажется) без помощи js не обойтись. У меня изображение меняет heigth в зависимости от размера экрана (heigth:100%), а width соответственно меняется в соответствии с соотношением сторон изображения. Затем мне нужно для контейнера лежащего на слой выше сделать такую же ширину. Я писал код

Код: javascript
1.
2.
3.
4.
5.
$('document').ready( function() {
		var iwidth = $('#back').css('width');
		alert(iwidth);
		$('#calc').css('width', iwidth);
	});


в таком случае изображение не успевает загрузиться и мне выводится ширина 0px.
Код: javascript
1.
2.
3.
4.
5.
$('#back').load( function() {
		var iwidth = $(this).css('width');
		alert(iwidth);
		$('#calc').css('width', iwidth);
	});


В таком случае сообщение вообще не выходит т.е. событие не срабатывает. Видимо я чего-то не понимаю в этом событии.

Помогите мне пожалуйста. Какое событие применить в моей ситуации?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2013, 15:03
    #38233836
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
taaamerlanДошел до ситуации, когда (как мне кажется) без помощи js не обойтись.
Это далеко не факт...

Все зависит от требований ко всей странице. А их мы не знаем и верстки самой не видели...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2013, 15:17
    #38233843
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
Как вариант...

 
Код: 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.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<!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">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
html,
body {
	height: 100%;
}
#body {
	position: relative;
	min-height: 100%;
}
#background {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 3px;
	width: 100%;
	/*height: 100%;*/
	z-index: 1;
}
#background > img{
	width: 100%;
	height: 100%;
}
#content {
	position: relative;
	z-index: 2;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='body'>
	<div id='background'>
		<img src='http://cdn.sql.ru/css/images/logo.gif' />
	</div>
	<div id='content'>
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, 
			дизайнеров и журналистов, создателей научных заявок и отчетов — 
			для всех, кто относится к тексту, как к количеству знаков.
		</p>
		<p>
			Нажав на кнопку «Написать реферат» вы лично создаете уникальный 
			текст, причем именно от вашего нажатия на кнопку зависит, какой 
			именно текст получится — таким образом, авторские права на реферат 
			принадлежат только вам.
		</p>
		<p>
			Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
			Яндекс.Рефератов неповторим.
		</p>
		<p>
			Текстами рефератов можно пользоваться совершенно бесплатно, однако 
			при транслировании и предоставлении текстов в массовое пользование 
			ссылка на Яндекс.Рефераты обязательна.
		</p>
		<p>
			А если вы просто искали весну, то вам сюда.
		</p>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2013, 16:37
    #38233886
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
Я использую похожий подход в проектах:
Код: html
1.
<div class="background"><img src="images/background.jpg"/></div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
.background {
	height:200%;
	left:-50%;
	position:fixed;
	top:0;
	width:200%;
}
.background img {
	border:none;
	bottom:0;
	left:0;
	margin:0 auto auto;
	min-height:50%;
	min-width:50%;
	position:absolute;
	right:0;
	top:0;
}


Суть его сводится к тому, что а) изображение всегда в центре; б) при изменении пропорций экрана "лишние" части изображения прячутся.
И да, данный div идет первым в body (чтобы не добавлять z-index).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2013, 19:41
    #38233974
taaamerlan
taaamerlan
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
Если я что-то понял, то в обоих кодах изображение растягивается по вертикали и все хорошо и легко. В моем случае изображение растягивается по горизонтали, а контейнер с содержимым должен иметь ширину этого изображения, которая динамическая.

Кстати, что значит
#background > omg я вообще не понял.

Либо вы не поняли чего я хочу, либо мне требуется ликбез
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2013, 23:42
    #38234080
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
Ты ошибаешься. Попробуй и вопросы отпадут.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2013, 12:55
    #38234201
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
taaamerlanЕсли я что-то понял, то в обоих кодах изображение растягивается по вертикали и все хорошо и легко. В моем случае изображение растягивается по горизонтали, а контейнер с содержимым должен иметь ширину этого изображения, которая динамическая.
Ты вообще пример-то запускал?

taaamerlanКстати, что значит
#background > omg я вообще не понял.
Ты его даже скопировал с ошибкой...

taaamerlanлибо мне требуется ликбез
В буквари однозначно!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2013, 19:17
    #38234349
taaamerlan
taaamerlan
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
krvsa,

не имел возможности запустить код. А в ошибке не вижу нечего смешного. Я заходил со смартфона, а он не хотел копировать код
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2013, 19:47
    #38234364
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
событие загрузки js
taaamerlan , но "оценку" свою таки вынес...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / событие загрузки js / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 489ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448423]:
 0ms
get settings:
 4ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 179ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 58ms
get tp. blocked users:
 1ms
others: 213ms
total:  489ms
x
x
Закрыть


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