Div - É Possível? - Javascript / DOM / AJAX / ECMAScript

#1 Goku Jr

Nilson

Usuários
3757 posts

Sexo:Masculino

Posted 17/12/2009, 20:06

Galera estou com um pequeno probleminha!

estou montando um sistema para empresa onde trabalho na area da Saúde odne eu retorno as mensagens de erro neste simbolo -> !
que ao passar ao mouse em cima abre uma DIV contendo a mensagem de erro!

porém, ao reduzir o tamanho da janela do navegador, esta DIV fica completamente no canto da janela do navegador e fica impossível de ler a mensagem derro.

gostaria de saber se tem como fazer com que esta DIV ao "reduzir" a janela do navegador e ao abrir a DIV acompanhe o tamanho da nela e não ficando metade invisivel...

não sei se consegui explicar o que exatamente está acontecendo e como quero resolver este problema... mas caso tenham dúvidas ou já sugestão pra resolver este problema, por favor me ajudem, porque CSS conheço ainda pouco

Obrigado,

Abraços

-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#2 Augusto Saggese

12 Horas

Usuários
218 posts

Sexo:Masculino
Localidade:Rio de Janeiro
Interesses:(X)HTML, CSS, PHP, MySQL, ASP, JAVASCRIPT entre outros!

Posted 17/12/2009, 20:48

o que esta acontecendo pode ser o seguinte!

uma div tendo como propiedade absolute, deve-se ter uma div pai como relativa.

Vou explicar melhor:

CSS:

#tudo {
 position: relative;
}
#teste {
 position: absolute;
}

HTML:

<div id="tudo">
  <div id="teste"></div>
</div>

A div pai deve deve-se ter como propiedade: position: relative;
E a div filho, deve-se ter position: absolute;

Quando não se define a div pai como relative, a div filha, sendo ela absolute, passa ter a <body> como relativa. É complicado de se falar, mais é facil de se entender.

não se esqueça de usar propiedades como: left, right, float.

Vlw!

Edição feita por: Augusto Saggese, 17/12/2009, 20:54.

www.augustosaggese.com - "Na batalha da vida, só existem homens fortes, e um homem forte, sempre determina o seu destino".

#3 Victor Hugo Odo

Doutor

Administradores
779 posts

Sexo:Masculino
Localidade:São Paulo - SP
Interesses:Compartilhar conhecimentos!

Posted 17/12/2009, 22:19

Olá Kakaroto! ^_^

Se possível poste o código ou o link da página, assim poderemos resolver a questão mais facilmente.

Bons ventos!

[]'s

Fórum WMO - Administrador

#4 Goku Jr

Nilson

Usuários
3757 posts

Sexo:Masculino

Posted 18/12/2009, 07:29

Augusto Saggese e Victor Hugo Odo obrigado pela resposta, entendi o que você quiz dizer Augusto Saggese porém não funcionou. então voltei para o modo antigo. segue o link da imagem de como fica ao passar o mouse em cima da imagem -> !

queria que ao abrir a DIV e for já o "fim" da janela do navegador que fique fixo no canto sem dar "continuídade" da DIV por de trás da janela do navegador.

segue os códigos CSS e JS que utilizo:

CSS

div#viewWindowG {
 z-index: 50;
 width: 320px;
 visibility: hidden;
 position: absolute;
}

div#viewWindow {
 font-family: verdana;
 background-color: #fff;
 border: 1px solid #24618E;
}

div#viewWindow div#utilityWindow {
 height: 23px;
 background-color: #E3E4F9;
 border-bottom: 1px solid #24618E;
}

div#viewWindow div#utilityWindow div#titleWindow {
 float: left;
 width: 90%;
}

div#viewWindow div#utilityWindow div#titleWindow p {
 margin: 3px 0 3px 5px;
 color: #000;
 font-size: 15px;
 font-weight: bold;
 text-transform: uppercase;
}

div#viewWindow div#valueWindowMSG {
 padding: 5px;
}

div#viewWindow div#valueWindowMSG p {
 margin: 0;
 padding: 0;
 font-size: 12px;
 text-align: justify;
 font-family: verdana;
}

JAVASCRIPT

function WindowMsgCSS( objID, objPERM, objVALUE ) {
 
  var divName = objID; // div that is to follow the mouse

  function mouseX(evt) {
   if (!evt)
    evt = window.event;
   if (evt.pageX)
    return evt.pageX;
   else
    if (evt.clientX)
     return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else
     return 0;
  }

  function mouseY(evt) {
   if (!evt)
    evt = window.event;
   if (evt.pageY)
    return evt.pageY;
   else
    if (evt.clientY)
     return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else
     return 0;
  }

  function follow(evt) {
   if (document.getElementById) {
    var obj = document.getElementById(divName).style;
    obj.visibility = 'visible';

    obj.left = (parseInt(mouseX(evt)) - 250) + 'px';
    obj.top = (parseInt(mouseY(evt)) + 10) + 'px';
   }
  }

  document.onmousemove = follow;

  if (objPERM) {
   if (document.layers)
    document.layers[ objID ].display = "";
   else
    if (document.all)
     document.all[ objID ].style.display = "";
   else
    if (document.getElementById)
     document.getElementById( objID ).style.display = "";

  } else
   if (!objPERM) {
    if (document.layers)
     document.layers[ objID ].display = "none";
    else
     if (document.all)
      document.all[ objID ].style.display = "none";
     else
      if (document.getElementById)
       document.getElementById( objID ).style.display = "none";
   }
   
  document.getElementById('valueWindowMSG').innerHTML = (objVALUE ? '<p>' + objVALUE + '</p>' : '');
 }

JANELA viewWindowG

<div id='viewWindowG'>
   <div id='viewWindow' class='viewSombra'>
    <div id='utilityWindow'>
     <div id='titleWindow'><p>ATENÇÃO!</p></div>
    </div>
    <div id='valueWindowMSG'></div>
   </div>
  </div>

para habilitar ou ocultar a janela estou usando estes comandos:

onmouseover=\"WindowMsgCSS( 'viewWindowG', true, 'HELLO WORLD' );\"
onmouseout=\"WindowMsgCSS( 'viewWindowG', false );\"

Obrigado,

PS: este fórum ta com BUG!!! quase nem da pra escrever as mensagens.

-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#5 Victor Hugo Odo

Doutor

Administradores
779 posts

Sexo:Masculino
Localidade:São Paulo - SP
Interesses:Compartilhar conhecimentos!

Posted 18/12/2009, 08:21

Bom, vc terá que criar uma condição nesse javascript.

O raciocínio seria mais ou menos esse:

Se X > Largura Da tela - Largura da Div{ posição x da div == Largura Da tela - Largura da Div};

Se Y > Altura Da tela - Altura da Div{ posição y da div == Altura Da tela - Altura da Div};

Moverei este tópico para JavaScript, lá a galera domina o negócio e poderá te ajudar mais.

Bons ventos.

(ok2)

Fórum WMO - Administrador

#6 Goku Jr

Nilson

Usuários
3757 posts

Sexo:Masculino

Posted 18/12/2009, 08:59

Muito obrigado Victor Hugo Odo.

estarei tentando então montar algo assim no JS que conheço um pouco

Obrigado e boas festas...

-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

Div - É Possível?

#1 Goku Jr

#2 Augusto Saggese

#3 Victor Hugo Odo

#4 Goku Jr

#5 Victor Hugo Odo

#6 Goku Jr

1 user(s) are reading this topic

Entrar