Avatar billede sungdk Nybegynder
16. april 2005 - 18:27 Der er 6 kommentarer og
1 løsning

Draggable layer osv.

Hej med jer!

Jeg søger et script som kan dette:

Når man kommer ind på siden, så skal der poppe et vindue frem. Evt. centreret position af hele skærmen.

Desuden skal vinduet kunne flyttes, have en transp. farve og kunne lukkes.

Jeg søger IKKE et alm. javascript popup vindue osv. Men havde tænkt på CSS layer. Nogle som har et liggende jeg evt. kan rode lidt med?

Tak!
Avatar billede sungdk Nybegynder
16. april 2005 - 18:34 #1
Har selv fundet sådan en her:

http://www.codelifter.com/main/javascript/dragablelayer.html

Men nogle som kan se hvordan jeg kan gøre baggrunden gennemsigtig?
Avatar billede webcreator Nybegynder
16. april 2005 - 18:43 #2
opacity: 0.75;
Avatar billede sungdk Nybegynder
16. april 2005 - 18:44 #3
Hvor?
Avatar billede sungdk Nybegynder
16. april 2005 - 18:45 #4
og teksten skal selvfølgelig være tydelig
Avatar billede webcreator Nybegynder
16. april 2005 - 18:45 #5
Hvis du vil være sikker på at det spiller, så brug alle 3 :

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;

Så virker det også i de lidt ældre browsere :)
Avatar billede webcreator Nybegynder
16. april 2005 - 18:45 #6
I dit CSS dokument - på den klasse der styrer udseendet på dit layer
Avatar billede sungdk Nybegynder
16. april 2005 - 18:58 #7
<script language="JavaScript1.2">

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

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 dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false; 
}

function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}

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

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

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

</script>

</head>

<body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible;filter : alpha(opacity=60);">
<table border="0" width="250" bgcolor="#FFFF99" cellspacing="0" cellpadding="2">
<tr>
<td width="100%">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
  <tr>
  <td id="titleBar" style="cursor:move" width="100%">
  <ilayer width="100%" onSelectStart="return false">
  <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <b>INFO BOKS</b>
  </layer>
  </ilayer>
  </td>
  <td style="cursor:hand" valign="top">
  <a href="#" onClick="hideMe();return false">X</a>
  </td>
  </tr>
  <tr align="center">
  <td width="100%" colspan="2" bgcolor="#FFFFFF" style="padding:2px;">
<!-- PLACE YOUR CONTENT HERE //--> 
Vil du se hvor hurtig din scooter er, hvor mange hestekr&aelig;fter (hk) den har, og meget mere, s&aring; er det her!<br><br>
HUSK! Det koster 50 MM's at få sin scooter på rullefelt pr. gang!
<!-- END OF CONTENT AREA //-->
  </td>
  </tr>
  </table>
</td>
</tr>
</table>
</div>

Denne kode virker perfekt! Det eneste som den ikke laver er centrering af vinduet. Men det går nok!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester