25.08.2010, 15:18
|
|
Новичок на форуме
|
|
Регистрация: 16.08.2010
Сообщений: 1
|
|
|
подгон изображения под размер окна браузера
Здраствуйте недавно начал изучение веб програмированиея и jQuery в частвности. Пытаюсь написать код который берет размеры окна браузера и ставит их размерами изображения, вот что получилось, но не работает, подскажите пожалуйста в чем ошибка, заранее спасибо
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
return [pageWidth,pageHeight,windowWidth,windowHeight];
$('#images img').attr("width",windowWidth);
$('#images img').attr("height",pageHeight);
$('#images img').width(windowWidth);
$('#images img').height(pageHeight);
Последний раз редактировалось Diablo69, 25.08.2010 в 15:22.
|
|
25.08.2010, 15:52
|
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
Во-первых, в следующий раз пиши отформатированный код. А во-вторых, если занялся веб програмированием, подбери под себя инструментарий для отлова ошибок. Например, Firebug под FireFox. И сначала сам попробуй все исправить, а не флудить на форуме. |
|
25.08.2010, 23:20
|
 |
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
$("#images img").width($(window).width()).height($(window).height())
Но, вообще говоря, тут лучше использовать css. |
|
27.08.2010, 09:56
|
 |
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
|
width: 100%;
height: 100%;
__________________
.
|
|
27.08.2010, 12:42
|
|
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
Сообщение от Skipp
|
width: 100%;
height: 100%;
|
…и далее небольшая лекция про то, что размеры элемента определяются от его родителя, или от Initially Containing Block, если такового нет, либо у элемента установлен position: fixed, не включают в себя отбивку и бордюры, а также то, что 100% по высоте от auto — 0.  |
|
27.08.2010, 13:32
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
|
subzey,
эт я вкратце описал решение)))
__________________
.
|
|
18.11.2010, 21:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Ищу скрипт определяющий размер окна браузера коретно во всех основных браузерах в с DOCTYPE и без него, цель таже что в топике растянуть картинку на весь документ ровно не изменяя стили самой страницы.
|
Сообщение от subzey
|
|
$("#images img").width($(window).width()).height($(window).he ight())
|
Пробовал это решение но по моему оно не работает без
<style type="text/css">
body{
margin: 0px
}
</style>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ $("#images").width($(window).width()).height($(window).height()).css({"position": "absolute","left":"0px","top":"0px","margin": "0px"})
});
</script>
</head>
<body>
<img id="images" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
</body>
</html>
Внизу остаётся незакрытое место.
Буду признателен за решение как на jquery так и без него.
На всякий случай ))) дорогу на гугл и сюда знаю, но может чего не оглядел.
Ссылки по теме:
http://javascript.ru/blog/Andrej-Par...enta-elementov
http://javascript.ru/blog/subzey/Oto...L-kopaem-vglub
http://easywebscripts.net/javascript/height.php
http://www.howtocreate.co.uk/tutoria.../browserwindow
Последний раз редактировалось рони, 18.11.2010 в 21:58.
|
|
18.11.2010, 22:30
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
function getViewportSize(doc) {
doc = doc || document;
var elem = getRootElement(doc);
return [elem.clientWidth, elem.clientHeight];
}
function getRootElement(doc) {
doc = doc || document;
return doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
|
|
18.11.2010, 22:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Kolyaj,
Спасибо за скрипт но это даёт размер вьюпорта а не размер окна браузера
Внизу снова пусто ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function getViewportSize(doc) {
doc = doc || document;
var elem = getRootElement(doc);
return [elem.clientWidth, elem.clientHeight];
}
function getRootElement(doc) {
doc = doc || document;
return doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
</script>
<style type="text/css">
img{
display: none;
}
</style>
<script type="text/javascript">
function set()
{ div = document.getElementById('div3');
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width= getViewportSize()[0]+"px";
div.style.height=getViewportSize()[1]+"px";
div.style.zIndex=-999;
div.style.display='block';
}
</script>
</head>
<body>
<img id="div3" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" border="0" alt="" />
<input type="button" name="" value="go" onclick="set()"/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Последний раз редактировалось рони, 18.11.2010 в 23:08.
|
|
19.11.2010, 09:13
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от рони
|
|
Спасибо за скрипт но это даёт размер вьюпорта а не размер окна браузера
|
Размер окна браузера вместе с тулбарами, заголовком и прочим чтоли? Или что вообще надо, какой-то вопрос сумбурный
|
Сообщение от рони
|
|
скрипт определяющий размер окна браузера
|
|
Сообщение от рони
|
|
растянуть картинку на весь документ
|
|
|
|
|
