Detectar o tamanho da tela do

[Jessi_1412 0]

Boa Tarde.

 

tenho o seguinte codigo

<div class="corpo">
		<div class="corpo_tabela">
			<table border="1" style="width:100%">
			  <tr>
				<td>Registro</td>
				<td>Descriçao</td>		
				<td>Estado</td>
					
			  </tr>
			   <tr> 
				<td>1111111</td>
				<td>Tetjskkdkskjdskjsdhkjsdhj</td>		
				<td>
					<div class="circulo_verde">
						 <div class="descricao">Passa o mouse e aparece o que conteudo da div, porem essa div 
						 precisa ter o tamanho da tela do usuario</div>
					</div>
				</td>
							
			  </tr>
			  
</table>
		</div>
	</div>

@charset "utf-8";

*{font-family:Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:14px; margin:0; padding:0;}

.corpo {
	/*background-color:blue;
	min-width:1024px;
	min-width:1024px;
	border-style: solid;
	border-color: #CFCFCF;*/
	width:100%;
	height:100%;
	text-align: center;
	position: relative;

	}
	
.circulo_verde, .circulo_amarelo, .circulo_vermelho{
	border-radius: 100%;
    width: 20px;
    height: 20px;
    margin: auto;
	}
.circulo_verde{
	background-color:#32CD32;
}
.circulo_amarelo{
	background-color:#FFD700;
}
.circulo_vermelho{
	background-color:#FF0000;
}

.conteudo{
	background-color:#191970;
}

.descricao{
	background-color:blue;
    display: none;
	
}
.circulo_verde:hover .descricao{
    display: block;
}

Na segunda linha da coluna chamada estado, tenho uma div em verde, quando passo o mouse aparece outra div, porém preciso que essa div que aparecer fique do tamanho da tela do usuario, como posso fazer isso?

 

Obs: Precisa funcionar em todos os navegadores.

 

[wilnet 92]

Veja se da certo

.descricao{
 background-color:blue;
 display: none;
 float:left;	
 position:absolute;
 width: 100%;
 height: 100%;
}

[allex_carvalho 124]

A largura você pode definir no css width 100%. Para pegar a altura da tela use jQuery:

jQuery(document).ready(function () {
    var alturaTela = jQuery(window).height();
    alert(alturaTela);
});

[Douglas Julião 34]

Eu ja usei esse código aqui a um tempo atras:

$(document).ready(function() {

	//pega a resolução
	var w = screen.availWidth;
	var h = screen.availHeight;
	//resolução
	//define o sistema operacional
	var OSName="Unknown OS";
	if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
	if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
	if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
	if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
	//sistema operacional

	//navegadores
	// mozilla firefox
	if ($.browser.mozilla == true) {
		alert('sistema operacional: '+ OSName +'\n'+ w +'x'+ h +'\n'+'  Firefox / Versão:' + $.browser.version);
		// internet explorer
	} else if($.browser.msie == true) {
	        alert('sistema operacional: '+ OSName +'\n'+ w +'x'+ h +'\n'+'  Internet Explorer / Versão:' + $.browser.version);
	// webkit
	} else if($.browser.webkit == true) {
		alert('sistema operacional: '+ OSName +'\n'+ w +'x'+ h +'\n'+'  Navegador baseado em WebKit / Versão:' + $.browser.version);
	// outros navegadores
	} else {
		alert('sistema operacional: '+ OSName + 'Outros nevegadores');
	}
});
//navagadores

Ele verifica qual o browser e qual a resolução que o usuário está usando, talvez te ajude!

[Jessi_1412 0]

Bom dia,

 

Resolvi usando css, mesmo assim obrigado a todos :D

<div class="corpo">
		<div class="corpo_tabela">
			<table border="1" style="width:100%">
			  <tr>
				<td>Registro</td>
				<td>Descriçao</td>		
				<td>Estado</td>
					
			  </tr>
			   <tr> 
				<td>1111111</td>
				<td>Tetjskkdkskjdskjsdhkjsdhj</td>		
				<td>
					<div class="circulo_verde"></div>
                    <div class="descricao">Passa o mouse e aparece o que conteudo da div, porém essa div 
						 precisa ter o tamanho da tela do usuario</div>
				</td>
							
			  </tr>
			  
               </table>
		</div>
	</div>
 

@charset "utf-8";

*{font-family:Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:14px; margin:0; padding:0;}

.corpo {
	/*background-color:blue;
	min-width:1024px;
	min-width:1024px;
	border-style: solid;
	border-color: #CFCFCF;*/
	width:100%;
	height:100%;
	text-align: center;
	position: relative;

	}
	
.circulo_verde, .circulo_amarelo, .circulo_vermelho{
	border-radius: 100%;
    width: 20px;
    height: 20px;
    margin: auto;
	}
.circulo_verde{
	background-color:#32CD32;
}
.circulo_amarelo{
	background-color:#FFD700;
}
.circulo_vermelho{
	background-color:#FF0000;
}

.conteudo{
	background-color:#191970;
}

.descricao{
	background-color:blue;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   display: none;
   
	
}
.circulo_verde:hover + .descricao{
    display: block;
}

[wilnet 92]

Legal Jessi,

 

Se já está Resolvido, pode marcar como tal.