..:: MX Studio Fóruns ::..: Centralizar div na tela dinamicamente - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

ATENÇÃO
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Centralizar div na tela dinamicamente Tem como?

#1 User is offline   Bart 

  • Group: Membros
  • Posts: 24
  • Joined: 14-April 04

  Posted 05 June 2006 - 11:33 AM

Eu quero que quando o usuário clique no link o div vá para o centro da janela, e tem que funcionar tanto com a janela maximizada como não maximizada.
Esse exemplo não tá funcionando mas dá pra entender o que eu quero: EXEMPLO

Tem como fazer isso? Tem que ser dinâmico porque as coordenadas do centro da página podem variar dependendo de onde o cliente "está" dentro da página (por conta da barra de rolagem).

Valew galera!!
0

#2 User is offline   Giselecn 

  • Group: Membros
  • Posts: 511
  • Joined: 13-July 05

Posted 05 June 2006 - 12:26 PM

Bart,
Caso seu div tenha um tamanho exato, você pode usar esse CSS:

<style type="text/css">
.imgpos {
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
}
</style>

Nesse exemplo minha div tem o tamanho width: 400px e heigth: 300px, para que fique centralizado divida o tamanho da div por 2, no meu caso, 400/2 e 300/2 o resultado eu coloco em margin-left e margin-top porem com os valores negativos!

Qualquer duvida pergunte.
0

#3 User is offline   Bart 

  • Group: Membros
  • Posts: 24
  • Joined: 14-April 04

Posted 05 June 2006 - 12:38 PM

O meu div até tem o tamanho fixo, mas do jeito que você falow se a página tiver 5000 pixels de altura o div vai ficar posicionado a 2500pixels do topo e não é isso que eu quero. Eu quero que o JS calcule o tamanho da área visível do browser e com base nesses dados descubra quais são as coordenadas X e Y do documento que coincidem com o centro desta área visível do browser.

Fiz o que você falow e ainda assim ñ funcionou.
CODE
(...)
<style type="text/css">
.MeuDiv {
position:absolute;
left:50%;
top:50%;
margin-left:-125px;
margin-top:-75px;
}
</style>

</head>
<body bgcolor="#CCCCCC">

<div id="MeuDiv" class="MeuDiv" style="position:absolute; width:250px; height:150px; background-color:#FFFFFF; border:#000000; text-align:center;">
 <p>Quero que ao clicar o div se posicione exatamente no meio da tela (valendo tanto para o IE como para o FF) </p>
 <p>Tamb&eacute;m tem que funcionar quando o usu&aacute;rio estiver l&aacute; no canto inferior direito desta p&aacute;gina.</p>
</div>
(...)

Se você quiser dar uma olhada é só clicar no Linklink
0

#4 User is offline   Giselecn 

  • Group: Membros
  • Posts: 511
  • Joined: 13-July 05

Posted 05 June 2006 - 03:53 PM

Bom... achei vários que acompanham a barra de rolagem.. mas que fique centralizado certinho no meio da tela.. ainda não... dê uma olhada nesse:


CODE
<!-- ONE STEP TO INSTALL FLOATING EMAIL-THIS-LINK:

 1.  Copy the coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->

<BODY>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  CodeLifter -->
<!-- Web Site:  http://www.codelifter.com/ -->
<!-- Begin FloatMail Code //-->

<script>
/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */

// Insert the entire script just before the </body> tag.
// Set the following two position parameters
// Negative numbers are relative to right (hX) or bottom (vY)
// Positive numbers are relative to left (hX) or (vY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image & form in the positioning

var hX = 340;
var vY = -140;

</script>

<!-- Edit the HTML between the div tags to suit your design //-->

<div id="FloatMail" style="position: absolute;
                          background-color: #000000;
                          background-image:url('float_dots.gif');
                          width: 180px;
                          border-width: 2;
                          border-style:outset;
                          border-color:#444444;
                          padding:5px">
<center>
<form name="eMailer">
<font size="2" face="Verdana,Arial" color="#ff0056">
E-Mail This Link
<br>
Enter recipient's e-mail:
</font>
<br>
<input type="text" name="address" size="20"
style="background-color:#000000;
      color:#05fa9e;
      border-color:#ff0000;
      border-width:1;
      border-style:dashed;
      margin-top:7px;"><br>
<input type="button" value="Send this URL" onClick="mailThisUrl();"
style="color:#ff0057;
      font-family:Arial;
      font-size:10pt;      
      background-color:#000000;
      border-width:1;
      border-style:solid;
      border-color:#242424;
      margin-top:7px;">
</form>
</center>
</div>


<!-- End of editable HTML //-->

<script>
/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */
/* Caution! Do not allow linebreaks other than where shown */
var good;function checkEmailAddress(field){
var goodEmail=field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){good = true}else{alert('Please enter a valid e-mail address.');
field.focus();field.select();good=false;}}
u=window.location;m="I thought this might interest you...";
function mailThisUrl(){good=false;
checkEmailAddress(document.eMailer.address);
if (good){window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;}}
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatMail(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];  
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
floatMail(hX,vY,'FloatMail').Fm();
</script>

<!-- End FloatMail Code //-->

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  3.76 KB -->



De repente dava pra ajudar esse junto com um CSS.... vê se ajuda smile.gif
Se achar algo mais completo.. coloco aqui pra vc...
0

#5 User is offline   Bart 

  • Group: Membros
  • Posts: 24
  • Joined: 14-April 04

Posted 05 June 2006 - 07:15 PM

Pôxa... não funcionou. sad.gif
Mesmo assim valew.


Tô quase desistindo dessa solução... mas o que me indigna mais é que eu tenho certeza de que dá pra fazer. SÓ NÃO SEI COMO (rs)
0

#6 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 05 June 2006 - 10:59 PM

cara, vou dar uma olhada em casa depois pra vc.

entendi agora oq vc ker fazer, sorry

com css apenas nao da! quer dizer, da pra usar position fixed mas só rola no FF e o IE nao suporta -.-

entao vai ter que usar uma funciton em js

amanha posto pra vc se encontrar ou mando por mp.
0

#7 User is offline   Bart 

  • Group: Membros
  • Posts: 24
  • Joined: 14-April 04

Posted 06 June 2006 - 01:55 AM

valew
0

#8 User is offline   pcsilva 

  • Group: Moderadores
  • Posts: 1940
  • Joined: 23-January 05

Posted 07 June 2006 - 12:57 PM

Teste ai.
JavaScript
<style type="text/css">
.MeuDiv {
position:absolute;
left:50%;
top:50%;
margin-left:-125px;
margin-top:-75px;
}
</style>
<script>
var refreshDiv = function(){
document.getElementById('MeuDiv').className = 'MeuDiv';
}
window.onload = function(){
refreshDiv();
window.onresize = refreshDiv;
}
</script>
<a href="javascript://" onclick="document.getElementById('MeuDiv').style.visibility = (document.layers)?'show':((document.all)?'visible': ((document.getElementById)?'visible' : ''))">show</a>
<a href="javascript://" onclick="javascript:document.getElementById('MeuDiv').style.visibility = (document.layers)?'hide':((document.all)?'hidden': ((document.getElementById)?'hidden' : ''))">hide</a>
<div id="MeuDiv" class="MeuDiv" style="position:absolute; width:250px; height:150px; background-color:#FFFFFF; border:#000000; text-align:center;">
<p>Quero que ao clicar o div se posicione exatamente no meio da tela (valendo tanto para o IE como para o FF) </p>
<p>Tamb&eacute;m tem que funcionar quando o usu&aacute;rio estiver l&aacute; no canto inferior direito desta p&aacute;gina.</p>
</div>


0

#9 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 07 June 2006 - 02:00 PM

Opa!

Salve pcsilva, meu mega professor de cfml!

Bem, a questão do Bart é refletir no IE o que o atributo FIXED proporciona no FF.

Apenas com CSS é simples fazer no FF, mas no IE é necessario o auxilio do JavaScript.

Bart, sobre isso encontrei algo muito bom aqui para nós. Da uma olhada
http://web.tampabay.rr.com/bmerkey/example...tion-fixed.html

Agora creio que seu problema será solucionado com isso.


Ah, muitos links sobre isso, da uma olhada também em:
http://www.google.com.br/search?q=position+fixed+IE&hl=pt-BR

Abraços.
0

#10 User is offline   pcsilva 

  • Group: Moderadores
  • Posts: 1940
  • Joined: 23-January 05

Posted 07 June 2006 - 02:12 PM

E ai blz!?
acho que assim fica legal.
ActionScript

<script>
var refreshDiv = function(){
       document.getElementById('MeuDiv').style.top = ((((document.body.clientHeight*50)/100)+window.pageYOffset)-(parseInt(document.getElementById('MeuDiv').style.height.substr(0,document.getElementById('MeuDiv').style.width.length-2))))+'px';
       document.getElementById('MeuDiv').style.left = (((document.body.clientWidth*50)/100)-(parseInt(document.getElementById('MeuDiv').style.height.substr(0,document.getElementById('MeuDiv').style.height.length-2))))+'px';
}
window.onload = function(){
       refreshDiv();
       window.onresize = refreshDiv;
       window.onscroll = refreshDiv;
}
</script>
<div id="MeuDiv" style="position:absolute; width:250px; height:150px; background-color:#FF0000; border:#000000 solid 1px;"></div>
<script> for(var i = 0; i <100 ;i++) document.write('<br>') </script>

0

#11 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 07 June 2006 - 02:14 PM

Opa.

Enfim, creio que mais que solucionado.

Agora basta implementar Bart.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Galaxy S 4 agrada com tela mais nítida e novas capacidades Notícias Notícias 
  • 0 Replies
  • 34 Views
New Replies Centralizar animação(.exe)..
como eu faço? 		Flash & ActionScript djcontel 
  • 1 Reply
  • 721 Views
New Replies 4 Videos numa unica Tela Flash & ActionScript WilsonJF 
  • 0 Replies
  • 723 Views
New Replies Brasil tem opções de DVDs de alta definição, mas preço ainda é alto Notícias Notícias 
  • 0 Replies
  • 380 Views
New Replies Google e Sun Microsystem juntas
IDG Now! - Mercado 		Notícias TiTi Celestino 
  • 0 Replies
  • 430 Views
New Replies Transparencia
nao sei se tem mas 		Fireworks HoMeR 
  • 11 Replies
  • 1404 Views
New Replies Vídeo ironiza Apple e faz com que Steve Jobs e Bill Gates lutem com espadas de sabre de luz Notícias Notícias 
  • 0 Replies
  • 137 Views
New Replies Tuiteiros famosos transmitem Carnaval pelo microblog Notícias Notícias 
  • 0 Replies
  • 181 Views

Publicidade

2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)