Avatar billede para7 Nybegynder
31. august 2010 - 15:24 Der er 12 kommentarer og
2 løsninger

Element switch skal stoppe ved mouseover

Kan nogen hjælpe mig til at få denne funktionalitet til at stoppe med at skifte idet man ruller henover med musen. Kom helst med færdige løsninger, da jeg ikke er en haj til javascript?

<div id="divBottomContentErhverv" style="position:absolute;top:394px;Zvisibility:hidden">
    Her er indhold for erhverv...
</div>
<div id="divBottomContentBolig" style="position:absolute;top:394px;visibility:hidden">
    Her er indhold for bolig...
</div>
<div id="divBottomContentButik" style="position:absolute;top:394px;visibility:hidden">
    Her er indhold for butik...
</div>
<script type="text/javascript">
index = null;
elements = [
document.getElementById('divBottomContentErhverv'),
document.getElementById('divBottomContentBolig'),
document.getElementById('divBottomContentButik')
];
function switchElement() {
if(index !== null) {
    elements[index].style.visibility = 'hidden';
    index++;
    if(index >= elements.length) {
        index = 0;
    }
} else {
    index = 0;
}
elements[index].style.visibility = 'visible';
setTimeout('switchElement()', 5000);
}
switchElement();
</script>
Avatar billede para7 Nybegynder
31. august 2010 - 15:27 #1
-og så sterte igen når man ruller væk... Det virker ellers som det skal, men en transiton mellem visningerne ville desuden være et plus.
Avatar billede para7 Nybegynder
31. august 2010 - 19:21 #2
Er det ikke rimelig enkelt?
Avatar billede majbom Novice
31. august 2010 - 20:36 #3
ved sq ikke om dette virker:

<script type="text/javascript">
var timer;
index = null;
elements = [
document.getElementById('divBottomContentErhverv'),
document.getElementById('divBottomContentBolig'),
document.getElementById('divBottomContentButik')
];
function switchElement() {
if(index !== null) {
    elements[index].style.visibility = 'hidden';
    index++;
    if(index >= elements.length) {
        index = 0;
    }
} else {
    index = 0;
}
elements[index].style.visibility = 'visible';
timer = setTimeout('switchElement()', 5000);
}
switchElement();
</script>


<div id="divBottomContentErhverv" style="position:absolute;top:394px;Zvisibility:hidden" onmouseover="clearTimeout(timer);" onmouseout="switchElement();">
    Her er indhold for erhverv...
</div>
Avatar billede para7 Nybegynder
01. september 2010 - 15:47 #4
Tak splazz
Det nærmer sig en løsning. Når jeg først får html indhold ind i div'ene, så virker onmouseout sådan at der skiftes mellem elementerne i et virvar. Jeg har prøvet onblur, men der sker intet. Så prøvede jeg onclick, og så kan man skifte til næste element, men det er ikke hensigtsmæssigt. Altså, nu må jeg slå onmouseout fra, men så stopper skiftningen kun og står stille.
Avatar billede para7 Nybegynder
01. september 2010 - 15:48 #5
PS: Det med at lægge koder ind i code tag er nok ikke godt: Opstilingen af koden går tabt, selv når jeg kopierer direkte til notepad.
Avatar billede majbom Novice
01. september 2010 - 18:53 #6
hmm, så ved jeg ikke lige hvordan det skal gøres..

mht mine tags forstår jeg ikke dit problem, jeg har lige copy-pastet ind i både min 'e' editor og notepad og begge stiller det op som det står her...
Avatar billede para7 Nybegynder
02. september 2010 - 12:26 #7
Når jeg bruger Firefox, så kan jeg godt kopiere det ordentligt. Det er ihvertfald mange point værd, det du kommer med. Men jeg har også selv lavet et forslag, der heller ikke dur ved mouseout:

<div id="divBottomContentErhverv" onmouseover="stopSwitch()" onmouseout="playSwitch()" style="position:absolute;top:394px;Zvisibility:hidden">
    Her er indhold for erhverv...
</div>
<div id="divBottomContentBolig" onmouseover="stopSwitch()" onmouseout="playSwitch()" style="position:absolute;top:394px;visibility:hidden">
    Her er indhold for bolig...
</div>
<div id="divBottomContentButik" onmouseover="stopSwitch()" onmouseout="playSwitch()" style="position:absolute;top:394px;visibility:hidden">
    Her er indhold for butik...
</div>
<script type="text/javascript">
var runSwitch=true
function stopSwitch() {
    runSwitch=false
}
function playSwitch() { //Fungerer ikke
    runSwitch=true
}
index = null;
elements = [
document.getElementById('divBottomContentErhverv'),
document.getElementById('divBottomContentBolig'),
document.getElementById('divBottomContentButik')
];
function switchElement() {
if(index !== null && runSwitch ==true) {
        elements[index].style.visibility = 'hidden';
        index++;
        if(index >= elements.length) {
            index = 0;
        }
    } else {
        index = 0;
    }
    if(runSwitch ==true) {
        elements[index].style.visibility = 'visible';
        setTimeout('switchElement()', 5000);
    } else {
        setTimeout('switchElement()', 5000000);
    }
}
switchElement();
</script>
Avatar billede majbom Novice
02. september 2010 - 13:11 #8
okay, jeg bruger osse firefox, nok derfor jeg ikke fik problemet så :)
Avatar billede para7 Nybegynder
02. september 2010 - 13:25 #9
Jeg venter lige lidt og ser om der kommer forslag til mouseout..
Avatar billede majbom Novice
02. september 2010 - 16:32 #10
der er nok nogle af de mere erfarne der kan et par tricks :)
Avatar billede para7 Nybegynder
04. september 2010 - 08:09 #11
Hej splazz
Jeg vil åbne et frisk nyt spm. Lad os dele pointene. Din løsning var halv og min var også halv, så læg lige et svar :)
Avatar billede majbom Novice
04. september 2010 - 18:54 #12
kommer her så :)
Avatar billede para7 Nybegynder
05. september 2010 - 12:26 #13
Og tak igen...
Avatar billede majbom Novice
05. september 2010 - 19:11 #14
selv 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