...

View Full Version : Adjusting a script... Need some help.



dommy
09-06-2006, 01:10 PM
Hi, I'm trying to use this script to popup a text box, however its only designed for one popup. What if I want more?

http://www.codeproject.com/jscript/transparentpopup.asp

My idea was to add multiple ids to the javascript code styling, and then create multiple div id's in the body each with different text, however I do not know how to tell a javascript code to style multiple id's rather than just one...

The code is


<script>
/* this function shows the pop-up when
user moves the mouse over the link */


function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft + 20;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + -35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x;
/* set the pop-up's top */
Popup.style.top = y;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>

What I'd like is something like


<div id="Popup" class="speech">Some textdiv>
<div id="Popup2" class="speech">Different text</div>

and reflect this in the js script... i.e. instead of

Popup.style.display="block"; I could use Popup,Popup2.style.display="block";

BUT that isn't the correct wat to implement this. Anyone know the correct way?

dungsport
09-06-2006, 01:36 PM
That's no way right. You could set up a function like this.


function setVisible(show) {
var showblock = show?'block':'none';
popup1.style.display = showblock;
popup2.style.display = showblock;
popup3.style.display = showblock;
popup4.style.display = showblock;
// so on
}

then you can call setVisible(true) or setVisible(false)

vwphillips
09-06-2006, 01:39 PM
or


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function zxcPop(zxcobj,zxcid,zxcxos,zxcyos,zxcopc){
zxcpop=document.getElementById(zxcid)
if (zxcopc){ zxcOpacity(zxcpop,zxcopc); }
zxcpop.style.left=(zxcPos(zxcobj)[0]+(zxcxos||50))+'px';
zxcpop.style.top=(zxcPos(zxcobj)[1]+(zxcyos||0))+'px';
zxcpop.style.visibility='visible';
}

function zxcHide(zxcid){
document.getElementById(zxcid).style.visibility='hidden';
}

function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


//-->
</script>
</head>

<body>

<center>
<span onmouseover="zxcPop(this,'PopUp1',50,0,50);" onmouseout="zxcHide('PopUp1');">Link1</span>
<br>
<br>
<span onmouseover="zxcPop(this,'PopUp2',-210,-20,90);" onmouseout="zxcHide('PopUp2');">Link2</span>

</center>
<div id="PopUp1" style="position:absolute;z-index:10;visibility:hidden;width:200px;height:100px;background-color:#FFCC66;" >
Text PopUp 1
</div>
<div id="PopUp2" style="position:absolute;z-index:10;visibility:hidden;width:200px;height:100px;background-color:#FFCC66;" >
Text PopUp 2
</div>

</body>

</html>

dommy
09-06-2006, 02:01 PM
Thank you very much guys -

vwphillips - Your script doesn't implement the popup moving with the mouse position whilst over the link though does it?

Isn't there an easy option for grouping like in css where you can do this...


#div1, #div2,# div3 {}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum