Tirar a DIV de acordo com a resolução.

[fmn 0]

Boa noite.

 

Não sei já repararam no site do UOL, que existe uma coluna (DIV) de publicidade e ela so aparece quando a resolução do monitor é superior a 800x600.

 

Quando a resolução é 800x600, esta coluna simplesmente some e não aparece scroll horizontal nem nada.. como se ela não existisse.

E quando a resolução é superior, ela está lá bonitinha...

 

Dei uma bisolhada no código do uol e encontrei esse js:

 

<script>

var homew=995;

if (d.getElementById&&screen.width<1000) {homew="770";}

document.write("<div style='margin-right:auto;margin-left:auto;width:"+homew+"px;position:relative'>");

</script>

 

Mas não consegui colocar no meu portal de forma alguma.

 

Poderiam me informar se estou usando este js errado ou existe alguma outra forma de tira a DIV quando a resolução for 800x600.

 

Aguardo retorno. Obrigado.

[Carutcho 0]

Cara,

Isso é bem legal de fazer,

seguinte:

 

você tem um evento que é o onResize, nele você pode por um scriptzinho que pega a resolução do navegador e se a resolução for menor que a necessária para aparecer aquela div, você da um display none nela "elemento.style.display=none" e se for maior você da um display block.

Para você pegar a resolução da tela eu tenho um código aqui que eu peguei na net e adaptei pra mim, as vezes você pode achar ele útil.

 

 

Funciona da seguinte forma, ele retorna o tamanho interno do navegador do cara, ou seja se o cara tiver a resolução da tela de 1024 e abriu o navegador com uma resolução de 800x600 não adianta você ter a resolução dele e sim a resolução do navegador, e é para isso q serve a função.

Se você passar "w" como parâmetro ele retorna a largura da pagina se você passa "h" ele retorna a altura da pagina pra você e caso você naum passar parâmetro, ele retorna um array com altura e largura pra você.

 

 

function windowIntSize (type)
	{
		var type = (type)? type : "";
		if (document.all)
		{
			//pegando o Altura tela no IE.
			if (!document.documentElement.clientHeight)
				var height = document.body.clientHeight;						
			else
				var height = document.documentElement.clientHeight;		
				
			//pegando a Largura tela no IE.				
			if (!document.documentElement.clientWidth)
				var width = document.body.clientWidth;						
			else
				var width = document.documentElement.clientWidth;						
		}
		else
		{
			//pegando a Altura tela no FF.			
				var height = window.innerHeight;
			//pegando a Largura tela no FF.			
				var width  = window.innerWidth;				
		}	

		if (type.toLowerCase()=="w")
		{
			return width;
		}
		else if (type.toLowerCase()=="h")
		{
			return height;
		}
		else
		{
			var arr = new Array(2);
			arr[0] = width;
			arr[1] = height;			
			return arr;
		}	
	}

Espero que tenha te ajudado rapaz.

Ahh um obs, você tem executar esses scripts no onLoad tb e no onresize, pq se por so no onresize, qunado abrirem a primeira vez o seu site e a resolução for menor aparece as divs.

Absss

[CLEIDE 0]

Olá Carutcho,

 

Estou precisando deste script só que eu não entendi sobre os eventos onResize e onLoad.

Na verdade, sou novata na web, poderia dar uma explicação mais detalhada de como usar estes eventos, o script e onde desenvolver a div.

Desde já agradeço.

 

 

Cara,

Isso é bem legal de fazer,

seguinte:

 

você tem um evento que é o onResize, nele você pode por um scriptzinho que pega a resolução do navegador e se a resolução for menor que a necessária para aparecer aquela div, você da um display none nela "elemento.style.display=none" e se for maior você da um display block.

Para você pegar a resolução da tela eu tenho um código aqui que eu peguei na net e adaptei pra mim, as vezes você pode achar ele útil.

 

 

Funciona da seguinte forma, ele retorna o tamanho interno do navegador do cara, ou seja se o cara tiver a resolução da tela de 1024 e abriu o navegador com uma resolução de 800x600 não adianta você ter a resolução dele e sim a resolução do navegador, e é para isso q serve a função.

Se você passar "w" como parâmetro ele retorna a largura da pagina se você passa "h" ele retorna a altura da pagina pra você e caso você naum passar parâmetro, ele retorna um array com altura e largura pra você.

 

 

function windowIntSize (type)
	{
		var type = (type)? type : "";
		if (document.all)
		{
			//pegando o Altura tela no IE.
			if (!document.documentElement.clientHeight)
				var height = document.body.clientHeight;						
			else
				var height = document.documentElement.clientHeight;		
				
			//pegando a Largura tela no IE.				
			if (!document.documentElement.clientWidth)
				var width = document.body.clientWidth;						
			else
				var width = document.documentElement.clientWidth;						
		}
		else
		{
			//pegando a Altura tela no FF.			
				var height = window.innerHeight;
			//pegando a Largura tela no FF.			
				var width  = window.innerWidth;				
		}	

		if (type.toLowerCase()=="w")
		{
			return width;
		}
		else if (type.toLowerCase()=="h")
		{
			return height;
		}
		else
		{
			var arr = new Array(2);
			arr[0] = width;
			arr[1] = height;			
			return arr;
		}	
	}

Espero que tenha te ajudado rapaz.

Ahh um obs, você tem executar esses scripts no onLoad tb e no onresize, pq se por so no onresize, qunado abrirem a primeira vez o seu site e a resolução for menor aparece as divs.

Absss

[Carutcho 0]

Seguinte,

 

O evento onResize é um evento assim como o "onclick, onblur e tals" q ele é disparado quando você muda o tamanho da sua janela e o evento onload é o evenento que é disparado assim que a sua pagina termina de ser carregada.

 

Então no seu javascript você pode fazer uma função para esconder ou mostrar a sua div de acordo que esses seus eventos forem disparados.

No onLoad você executa a função "assim que o usuário abrir a pagina", você tem q verificar a resolução da janela dele e mostrar ou esconder a div, porém o usuário pode simplesmente ter aberto o navegador sem estar maximizado então quando ele maximizar ou ampliar a área, eu uso o evento onresize para disparar a função novamente para descobrir se a resolução dele ampliou ou dominuiu para que possa mostrar ou esconder a div saca ?

 

então você pode criar uma função mais ou menos assim

 

function checkSize()
{
  chamo a função que eu passei aqui em cima , só que resgatando apenas a largura, ja que a altura não me interessa nesse caso.
  var largura = windowIntSize ("w");
  if (largura > 800)
  {
	document.getElementById("div que quero esconder/mostrar").style.display = "block";
  }
  else
  {
	document.getElementById("div que quero esconder/mostrar").style.display = "none";
  }
}

window.onresize = checkSize();
window.onload = checkSize();

faz uns testes aee e depois me fala se conseguiu, no q puder te ajudar tamos aeee

 

absss

[CLEIDE 0]

Olá colega, é o seguinte:

 

Tentei o seu código, mas não deu certo.

Consegui um script e após algumas adaptações consegui fazer funcionar. O problema que só dá certo com imagem estática

(imagem.gif) e eu gostaria de fazer com flash. Você poderia dar uma olhada no código para ver onde eu devo mudar.

 

 

<script type="text/javascript">
			<!--
			function CategsExtras() {
				if (document.getElementById("novomenu") != null) {
					for(idx=1;idx<3;idx++){
						if (document.getElementsByName("cat_extra"+idx).length > 0) {
							if (document.getElementsByName("cat_extra"+idx)[0].style.display == 'none') {
								exibir = 'block';
							}
							else {
								exibir = 'none';
							}

							for(i=0;i<document.getElementsByName("cat_extra"+idx).length;i++) {
								document.getElementsByName("cat_extra"+idx)[i].style.display = exibir;
							}
						}
					}
				}
			}
			CategsExtras();

			if(screen.width > 800)
			{
				document.write ('<style type="text/css">');
				document.write ('div.on{margin-right:191px;}');
				document.write ('div.off{margin-right:0px !important;}');
				document.write ('</style>');

				
				document.write ('<a href="http://www.asadespachante.com.br?1&=rel="nofollow"><img src="http://br.geocities.com/asadespachante/backasa.gif" width="220" height="550" border="0" /></a><br \/>');
				document.write ("<scr"+"ipt src=C:\Documents and Settings\Administrador\Desktop\CIDA\Unnamed Site 14\fcnBannerFlutuante[1].js' type='text/javascript'><\/scr"+"ipt>");
				document.write ('<\/div><\/div><\/div>');
			}
			//-->
			</script>

 

arquivo: fcnBannerFlutuante[1].js

//Rotina: Banner lateral flutuante (SkyScraper)
//Finalidade: Exibir ou ocultar o banner lateral flutuante
//Parametro: nenhum
//Retorno: nenhum
//Autor: desconhecido 
//Data Criação: 20/01/2000
//-----------------------------------------------------
var Hoffset=0 //Coordenada X a partir da direita da tela
var Voffset=38 //Coordenada Y a partir do topo da página
var thespeed=3 //Velocidade (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.right=Hoffset+"px"
cross_obj.style.top=dsoctop+Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",1)

function banner(){
	document.getElementById("estrutura").className ="off"
	document.getElementById("footer").className ="off"
	document.getElementById("staticbuttons").style.display="none"
}