Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 108
Nome: Bruno
Localização: portugal
Contato:

layer flutuante

16-12-2008 09:06

Olá pessoal.
Tenho um layer flutuante, que quero que unicamente baixe e suba consoante o scroll ga pagina em que esta inserido.
Ele ta a funcionar correctamente neste aspecto.
O problema é se a pagina e aberta com uma resolução mais pequena ao existir a scroll horizontal da mesma , o layer vai fugindo da vista do utilizador, pois tem uma coordenadas definidas.
Já tentei alterar o codigo, mas não consegui resolver a situação.
Agradecia que me ajudassem, deixo o codigo a seguir:

<SCRIPT LANGUAGE="JavaScript"> <!-- floatX=955; floatY=19; layerwidth=200; layerheight=400; halign="left"; valign="top"; delayspeed=2; NS6=false; IE4=(document.all); if (!IE4) {NS6=(document.getElementById);} NS4=(document.layers); function adjust() { if ((NS4) || (NS6)) { if (lastX==-1 || delayspeed==0) { lastX=window.pageXOffset + floatX; lastY=window.pageYOffset + floatY; } else { var dx=Math.abs(window.pageXOffset+floatX-lastX); var dy=Math.abs(window.pageYOffset+floatY-lastY); var d=Math.sqrt(dx*dx+dy*dy); var c=Math.round(d/10); if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;} if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;} if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;} if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;} } if (NS4){ document.layers['floatlayer'].pageX = lastX; document.layers['floatlayer'].pageY = lastY; } if (NS6){ document.getElementById('floatlayer').style.left=lastX; document.getElementById('floatlayer').style.top=lastY; } } else if (IE4){ if (lastX==-1 || delayspeed==0) { lastX=document.body.scrollLeft + floatX; lastY=document.body.scrollTop + floatY; } else { var dx=Math.abs(document.body.scrollLeft+floatX-lastX); var dy=Math.abs(document.body.scrollTop+floatY-lastY); var d=Math.sqrt(dx*dx+dy*dy); var c=Math.round(d/10); if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;} if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;} if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;} if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;} } document.all['floatlayer'].style.posLeft = lastX; document.all['floatlayer'].style.posTop = lastY; } setTimeout('adjust()',50); } function define() { if ((NS4) || (NS6)) { if (halign=="left") {floatX=ifloatX}; if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20}; if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)}; if (valign=="top") {floatY=ifloatY}; if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight}; if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)}; } if (IE4) { if (halign=="left") {floatX=ifloatX}; if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20} if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)} if (valign=="top") {floatY=ifloatY}; if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight} if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)} } } //--> </script>

Codigo onde e chamado o layer:

<script> if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');} if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');} </script> <table border="0" width="180" cellspacing="0" cellpadding="0" height="300" id="table77"> <tr> <td background="bgs2.jpg" align="center" width="180" height="300"> <table border="0" width="170" cellspacing="0" cellpadding="0" height="280" id="table78"> <tr> <td width="170" height="30" style="font-family: Arial; font-size: 10pt; color: #000000; font-variant: small-caps"> <p align="center" style="line-height: 150%; margin-top: 0; margin-bottom: 0"> <u> <b><font size="3">patrocinadores</font></b></u></td> </tr> <tr> <td width="170" height="215" align="center" id="VU"> <script language="javascript" type="text/javascript"> /* Visit http://www.yaldex.com/ for full source code and get more free JavaScript, CSS and DHTML scripts! */ <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 3500; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'previcol.jpg' Pic[1] = 'ass.jpg' Pic[2] = 'junta.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } window.onload=runSlideShow; // End --> </script> <img src="previcol.jpg" name='SlideShow' width=160 height=150> </td> </tr> <tr> <td width="170" height="35" style="font-family: Arial; font-size: 8pt; color: #000000; font-variant: small-caps"> <p align="center"><font size="2"><b>seja também nosso patrocinador</b></font></td> </tr> </table> </td> </tr> </table> <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p> <table border="0" width="180" cellspacing="0" cellpadding="0" height="320" id="table87"> <tr> <td width="180" height="40" style="font-family: Arial; font-size: 10pt; color: #FFFFFF; font-variant: small-caps; font-weight:bold" align="center"> <font size="3">equipamentos</font></td> </tr> <tr> <td width="180" height="280" style="font-family: Arial; font-size: 10pt; color: #000000; font-variant: small-caps" align="center"> <img border="0" src="equi_red.jpg" width="165" height="260"></td> </tr> </table> <script> if (NS4) { document.write('</LAYER>'); } if ((IE4) || (NS6)) { document.write('</DIV>'); } ifloatX=floatX; ifloatY=floatY; define(); window.onresize=define; lastX=-1; lastY=-1; adjust(); </script>

0
Cumprimentos
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

layer flutuante

16-12-2008 09:27

O que você pode fazer é o seguinte:

floatX=screen.width-220;
floatY=0;

A distância da esquerda vai ser a largura da resolução, menos 220, que seria o tamanho total da tabela do conteúdo mais 20px.

Quanto ao conteúdo, assegure-se que ele não passe da altura do navegador, limita a altura em 600px que não dá esse problema.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 108
Nome: Bruno
Localização: portugal
Contato:

layer flutuante

16-12-2008 09:36

coloquei como disseste,mas nao funciona como quero.
pk se deixar como tu disseste , se eu tiver uma resolução igual ou superior a minha que ta na pagina, ele fica a direita do meu site e tudo bem.
mas se a resolução for inferior , o layer vem para cima do meu site, o que nao quero.
eu nao sei se e possivel, mas o que queria era que ele so se movimenta-se na vertical, mantendo a distancia em pixel sempre certa da esquerda, e no caso de existir barra scroll horizontal, ele se mantive-se na mesma posição, possibilitando a sua visualização
0
Cumprimentos
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

layer flutuante

16-12-2008 13:59

Se ele vai para cima do site, ou você diminui o tamanho em largura do layer ou retira para resoluções menores. Quanto a distância em relação a direita do navegador eu fiz pela lógica, a largura da resolução, menos o tamanho da layer, o que vai dar sempre um posicionamento padrão, mas, você pode fazer:

resolução - largura da layer - alguns pixels, e testar em várias resoluções.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 108
Nome: Bruno
Localização: portugal
Contato:

layer flutuante

16-12-2008 14:42

tens para ai alguns exemplos para ver como se faz :reading
0
Cumprimentos
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

layer flutuante

16-12-2008 16:16

Esse script abaixo testei na minha resolução, 1024 x 768

<SCRIPT LANGUAGE="JavaScript"> <!-- floatX=screen.width-225; floatY=5; layerwidth=200; layerheight=400; halign="left"; valign="top"; delayspeed=2; NS6=false; IE4=(document.all); if (!IE4) {NS6=(document.getElementById);} NS4=(document.layers); function adjust() { if ((NS4) || (NS6)) { if (lastX==-1 || delayspeed==0) { lastX=window.pageXOffset + floatX; lastY=window.pageYOffset + floatY; } else { var dx=Math.abs(window.pageXOffset+floatX-lastX); var dy=Math.abs(window.pageYOffset+floatY-lastY); var d=Math.sqrt(dx*dx+dy*dy); var c=Math.round(d/10); if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;} if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;} if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;} if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;} } if (NS4){ document.layers['floatlayer'].pageX = lastX; document.layers['floatlayer'].pageY = lastY; } if (NS6){ document.getElementById('floatlayer').style.left=lastX; document.getElementById('floatlayer').style.top=lastY; } } else if (IE4){ if (lastX==-1 || delayspeed==0) { lastX=document.body.scrollLeft + floatX; lastY=document.body.scrollTop + floatY; } else { var dx=Math.abs(document.body.scrollLeft+floatX-lastX); var dy=Math.abs(document.body.scrollTop+floatY-lastY); var d=Math.sqrt(dx*dx+dy*dy); var c=Math.round(d/10); if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;} if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;} if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;} if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;} } document.all['floatlayer'].style.posLeft = lastX; document.all['floatlayer'].style.posTop = lastY; } setTimeout('adjust()',50); } function define() { if ((NS4) || (NS6)) { if (halign=="left") {floatX=ifloatX}; if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20}; if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)}; if (valign=="top") {floatY=ifloatY}; if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight}; if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)}; } if (IE4) { if (halign=="left") {floatX=ifloatX}; if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20} if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)} if (valign=="top") {floatY=ifloatY}; if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight} if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)} } } //--> </script> <script> if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');} if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');} </script> <table style="width:200px; border:1px solid black;"> <tr><td> conteúdo </td></tr> </table> <script> if (NS4) { document.write('</LAYER>'); } if ((IE4) || (NS6)) { document.write('</DIV>'); } ifloatX=floatX; ifloatY=floatY; define(); window.onresize=define; lastX=-1; lastY=-1; adjust(); </script>

0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Bing [Bot]