Avatar billede Mette81 Juniormester
19. oktober 2009 - 08:47 Der er 4 kommentarer og
1 løsning

Pop-up position..

Hej.

Jeg har fundet nedenstående script og vil gerne høre om der er en der kan fortælle mig om det er muligt at styre hvor pop-up'en popper up henne... Pt popper de frem centreret ud for det billede der er onmouseover på men jeg ville gerne hvis de kunne poppe up samme sted alle sammen.. Giver det mening?

<script type="text/JavaScript">
       
        var margin = 2;
        var hideDelay = 0.1;
        var clickable = true;
       
        var curDiv;
        var timeoutDate;
        var performHide;
               
        function Show(elm, divId, position)
        {
            catchEvent(elm, "mouseout", StartTimeout);
           
            if(curDiv != null)
                Hide(curDiv.id);

            curDiv = document.getElementById(divId);
           
            var elmPos = findPos(elm);
           
            //Get element dimensions
            var elmPosX = elmPos[0];
            var elmPosY = elmPos[1];
            var elmWidth = elm.offsetWidth;
            var elmHeight = elm.offsetHeight;
           
            //Get div dimensions
            var popupWidth = curDiv.offsetWidth;
            var popupHeight = curDiv.offsetHeight;
           
            var posX = 0;
            var posY = 0;
           
            switch(position)
            {
                case 'top':
                    posX = (elmPosX + elmWidth/2) - (popupWidth/2);
                    posY = elmPosY - popupHeight - margin;
                    break;
                case 'bottom':
                    posX = (elmPosX + elmWidth/2) - (popupWidth/2);
                    posY = elmPosY + elmHeight + margin;
                    break;
                case 'left':
                    posX = elmPosX - popupWidth - margin*2;
                    posY = (elmPosY + elmHeight/2) - (popupHeight/2);
                    break;                   
                default: // 'right'
                    posX = elmPosX + elmWidth + margin*2;
                    posY = (elmPosY + elmHeight/2) - (popupHeight/2);
                    break;
            }
           
            posX = Math.max(posX, 0);
            posY = Math.max(posY, 0);
           
            curDiv.style.left = posX + "px";
            curDiv.style.top = posY + "px";
            curDiv.style.visibility = 'visible';
           
            StopTimeout();   
           
            if(clickable)
            {
                catchEvent(curDiv, "mouseout", StartTimeout);
                catchEvent(curDiv, "mouseover", StopTimeout);
            }
        }
       
        function StartTimeout()
        {
            performHide = true;
            timeoutDate = new Date();           
            timeout = setTimeout("Timeout()", 100); 
        }
       
        function StopTimeout()
        {
            performHide = false;
        }
       
        function Timeout()
        {
            if(!performHide)
                return;
               
            var date = new Date();
            var diff = (date - timeoutDate)/1000;
       
            if(diff > hideDelay)
            {
                if(curDiv != null)
                    Hide(curDiv.id);
                return;
            }

            timeout = setTimeout("Timeout()", 100); 
        }
       
        //Hides div-tag
        function Hide(divId)
        {
            var popup = document.getElementById(divId);
            popup.style.visibility = 'hidden'; 
        }
       
        //Returns the position of an object
        function findPos(obj)
        {
            var curleft = curtop = 0;
            if (obj.offsetParent)
            {
                curleft = obj.offsetLeft;
                curtop = obj.offsetTop;
               
                while (obj = obj.offsetParent)
                {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                }
            }
           
            return [curleft,curtop];
        }
       
        function catchEvent(elm, strEvent, Function)
        {
            if (elm.addEventListener) // FireFox
                elm.addEventListener(strEvent, Function, false);
            else if (elm.attachEvent) // IE
                elm.attachEvent("on"+strEvent, Function);
            else // IE can do this, maybe some XYZbrowser has none of the above.
            {
                elm["on"+strEvent] = Function;
                elm[strEvent] = Function;
            }
        }

        </script>
Avatar billede Mette81 Juniormester
19. oktober 2009 - 11:39 #1
Er der ingen der vil hjælpe? Jeg kan godt give flere point hvis det er det der er galt..
Avatar billede ebusiness Nybegynder
19. oktober 2009 - 15:10 #2
Det lyder som om at det du leder efter er noget meget simplere, i stil med:

<img src="billede" onmouseover="vis('tekst1')" onmouseout="skjul('tekst1')">

<div id="tekst1" style="display:none">Tekst</div>

<script type="text/javascript">
function vis(id){
    document.getElementById(id).style.display=""
}
function skjul(id){
    document.getElementById(id).style.display="none"
}
</script>


Så kan du placere diven hvor du ønsker.
Avatar billede Mette81 Juniormester
20. oktober 2009 - 10:07 #3
Ja okay.. Kan godt se hvad du mener :) Det du har lavet fungerer fint men jeg skal have muligheden for at bruge pop-up'en som et link så jeg skal vel bruge den der if(clickable)..

Gider du evt tilføje den funktion?
Avatar billede ebusiness Nybegynder
20. oktober 2009 - 14:06 #4
Således.

<img src="keyboard0.bmp" onmouseover="vis('tekst1')" onmouseout="skjul('tekst1',500)">
<div id="tekst1" style="display:none" onmouseover="vis('tekst1')" onmouseout="skjul('tekst1',500)">Tekst</div>

<script type="text/javascript">
bliverskjult={}
function vis(id){
    document.getElementById(id).style.display=""
    clearTimeout(bliverskjult[id])
}
function skjul(id,tid){
    if(tid){
        clearTimeout(bliverskjult[id])
        bliverskjult[id]=setTimeout("skjul('"+id+"')",tid)
    }
    else{
        document.getElementById(id).style.display="none"
    }
}
</script>
Avatar billede Mette81 Juniormester
27. oktober 2009 - 11:13 #5
Mange tak..
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