Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

willwalker

[Resolvido] jQuery - Resize de elementos pelo tamanho da janela o

By willwalker, in Javascript

Recommended Posts

willwalker    2

willwalker
Posted 

$(document).ready(function() {

$(window).load(medidas);
$(window).resize(medidaz);

$(document).resize(medidaz); <-- Tentei usar no lugar de window mas não funcionou.

});

function medidas() {
var minus = -23;

var altura = $(window).height() + minus;

$("#body_div").show().css({'height': altura+"px"});

}

function medidaz() {
var minus = -23;

var altura = $(document).height() + minus;

$("#body_div").show().css({'height': altura+"px"});

}

Esse script pega o tamanho usável do navegador e redimensiona o div: body_div

 

Só que eu tenho um menu accordeon dentro desse div, e quando abro o menu accordeon, o div body_div não aumenta seu tamanho, passando o conteudo do menu accordeon por cima dele, porque sua altura está fixa. Eu gostaria de pegar altura do documento quando houver mudança e passar para o height desse div.

 

Alguem pode me ajudar ?

 

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Share this post

Link to post
Share on other sites

Henrique Barcelos    290

Henrique Barcelos
Posted

Esta função retorna um array com a largura e a altura da janela e a altura e a largura da página...

 

function getPageSize(){

	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) { // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) { // all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	
	// for small pages with total height less then height of the viewport
	if (yScroll < windowHeight) {
		pageHeight = windowHeight;
	}
	else {
		pageHeight = yScroll;
	}
	
	// for small pages with total width less then width of the viewport
	if (xScroll < windowWidth) {
		pageWidth = windowWidth;
	}
	else {
		pageWidth = xScroll;
	}
	
	arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
	
}

Share this post

Link to post
Share on other sites

Paulino100    0

Paulino100
Posted

<script src="jquery-1.3.2.min.js"></script>

<script>

$(document).ready(function(){

$("img.source-image").hide();

var $source = $("img.source-image").attr("src");

var largura = $(window).width()-23;

var altura = $(window).height()-23;

$('#source-image').css({

'backgroundImage':'url(' + $source+')',

'backgroundRepeat': 'no-repeat',

'backgroundPosition': 'top center',

'background-color':'#333',

'height': altura+'px',

'width':largura+'px'

});

});

</script>

<body id="page-body">

<img id="source-image" src="0257.gif" alt=""/>

 

</body>

Share this post

Link to post
Share on other sites

Robert Fernando Schweppe    1

Robert Fernando Schweppe
Posted

Olá galera,

 

Para solucionar esse problema de aumentar o TEXTAREA conforme digitação, tem uma forma mais prática:

 

<style type="text/css">
textarea {
overflow:hidden;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("textarea").keyup(function(){
$(this).scrollTop(1000000);
$(this).height($(this).scrollTop()+$(this).height());
});
</script>

 

Abs,

Robert Zastrich

Code200 Desenvolvimento Web (www.code200.com.br)

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept