Como hacer un mensaje Flotante?

abigor66 · #1 (**permalink**) 18/10/2008, 11:25

Buenas Tardes Foreros, quisiera saber si alguien conoce la forma de hacer un mensaje flotante tipo Floating Guest Notify de VBulletin.

Gracias por su tiempo

buzu · #2 (**permalink**) 18/10/2008, 12:50

nunca eh visto eso de lo que hablas, pero para hacer algo "flotante" puedes usar simple CSS.

abigor66 · #3 (**permalink**) 18/10/2008, 13:04

Gracias Buzu por tu tiempo. para los interesados acá un código en bruto que hace lo que estaba buscando. Digo en bruto porque lo hice fucionando codigos de diferentes aplicaciones y hasta ahora es que lo voy a personalizar y pulir.

Si alguien conoce una mejor manera de hacer esto, por favor publiquela acá para mejorar este codigo. jejeje

Código HTML:

<html>
<head>
<title>Dynamic Drive DHTML Scripts- Floating Menu Script</title>
<script language="JavaScript1.2">
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
 topDog=isIE ? "BODY" : "HTML";
 whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
 hotDog=isIE ? event.srcElement : e.target;  
 while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
   hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
 }  
 if (hotDog.id=="titleBar"){
   offsetx=isIE ? event.clientX : e.clientX;
   offsety=isIE ? event.clientY : e.clientY;
   nowX=parseInt(whichDog.style.left);
   nowY=parseInt(whichDog.style.top);
   ddEnabled=true;
   document.onmousemove=dd;
 }
}

function hideMe(){
 if (isIE||isNN) whichDog.style.visibility="hidden";
 else if (isN4) document.theLayer.visibility="hide";
}


document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

</script>

</head>

<body style="height:1000px">
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
<table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
 <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
 <tr>
 <td id="titleBar" width="100%">
 <ilayer width="100%" onSelectStart="return false">
 <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
 <font face="Arial" color="#FFFFFF">Layer Title</font>
 </layer>
 </ilayer>
 </td>
 <td style="cursor:pointer" valign="top">
 <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
 </td>
 </tr>
 <tr>
 <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->  
Contenido Aki
<!-- END OF CONTENT AREA //-->
 </td>
 </tr>
 </table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
<!-- END OF CONTENT AREA //-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>

</html>

buzu · #4 (**permalink**) 18/10/2008, 15:25

no se como es exactamente lo que quieres hacer, pero si es lo que me imagino, entonces tienes demasiado código.

abigor66 · #5 (**permalink**) 18/10/2008, 16:30

Que más Buzu, el codigo completo muestra lo que quiero, pero si quieres ver un ejemplo en funcionamiento, visita www.elforro.com. (perdon por el spam) me interesa mostrar un mensaje igual a como aparece el mensaje de registro en esa página.

Si tengo mucho código, te agradecería me ayudaras a depurarlo.

Gracias por su tiempo

#6 (**permalink**) 19/10/2008, 09:22

este codigo me interesa, tal cual como aparece en codigo en elforro.com y es flotante, y al llenar un campo de un formulario con el mail va a una bae de datos, yo se el codigo del .asp pero no se lo de .php para enviarlo a un mail.
como va cada parte del codigo arriba escrito, van en hojas distintas? o todo en la misma?
gracias

abigor66 · #7 (**permalink**) 19/10/2008, 10:32

Que más CapitanK, no sé si ya lo habras leido, pero el codigo mejorado lo encuentras en este post

http://www.forosdelweb.com/f4/proble...-ayuda-635626/

Suerte

#8 (**permalink**) 21/10/2008, 20:32

gracias abigor66

#9 (**permalink**) 21/10/2008, 20:51

estoy prbando estye codigo de esa web :
http://www.jtricks.com/javascript/na.../floating.html
y no me anda
no flota nada
soloqueda el div ahi quieto, me podes dar una manito?

<script type="text/javascript"></script>

<div id="floatdiv" style="
position:absolute;
width:200px;height:50px;left:0px;top:0px;
padding:16px;background:#FFFFFF;
border:2px solid #2266AA">
This is a floating javascript menu.
</div>

#10 (**permalink**) 23/10/2008, 08:06

hola alguiej sabe como solucionar este codigo algo mejor,gracias.