Avatar billede mcclaud Nybegynder
09. marts 2012 - 22:06 Der er 11 kommentarer og
1 løsning

Pop-up-div

Hej alle eksperter

Jeg arbejder på en pop-up-div, men jeg oplever et lille problem.

Jeg har på min side 15 billeder placeret i 3 rækker. Jeg vil gerne have, at en hidden div bliver synlig, når man bevæger musen henover billederne, og det virker sådan set helt fint, men kun for en øverste række. Der sker ikke noget, når man bevæger musen henover de andre rækker...

Kan nogen hjælpe med en løsning?

:o) mcclaud
Avatar billede mcclaud Nybegynder
09. marts 2012 - 22:07 #1
Jeg glemte vist en sti til siden:

http://www.halfmen.dk/!TEST2!/referencer.htm

:o) mcclaud
Avatar billede madslundholm Novice
10. marts 2012 - 08:50 #2
Måske er det fordi du ikke lukker alle dine div-tags
Avatar billede mcclaud Nybegynder
10. marts 2012 - 10:07 #3
Hej MadsLundholmDk

Jeg forstår ikke, hvad du mener. Jeg lukker da mine div-tags med </div>. Har jeg overset noget?

:o) mcclaud
Avatar billede madslundholm Novice
10. marts 2012 - 10:23 #4
Ups, nej det er mig der ikke har fået kigget ordenligt på den.

Ved ikke hvad der skulle være fejlen. Det er ligesom om der ikke er et link på i de sidste to rækker. Men det kan jeg se i kildekoden at der er.
Har du prøvet at float: left på dem?
Avatar billede mcclaud Nybegynder
10. marts 2012 - 11:12 #5
Når man hover over billederne i den øverste række, vises den skjulte div netop under billederne. Problemet, som jeg forstår det, er, at de her divs ligger ovenpå billederne i række to, hvorfor det ikke er muligt at hover over billeder i netop række to, selvom de skjulte divs er skjulte.

På en eller anden måde ligger de alligevel ovenpå billederne i række to. Måske det har noget med css at gøre?
Avatar billede DeeDawg Nybegynder
10. marts 2012 - 11:45 #6
At du skjuler en boks med opacity, gør den jo kun usynlig. Det bliver den jo ikke fjernet af.

Ret derfor dette i pop-up-box.css

.pop-up{
    margin: 122px 0 0 -75px;
    padding: 15px;
    width: 300px;
    display: none;
    position: absolute;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 13px;
    text-align: justify;
}

og dette i pop-up-box.css

$(document).ready(function(){
    $("a.trigger").hover(
        function(){
            $(this).prev().stop().show(500);
        },
        function(){
            $(this).prev().stop().hide(200);
        }
    );
});
Avatar billede DeeDawg Nybegynder
10. marts 2012 - 11:48 #7
Ved godt at det nok ikke bliver den samme animation, men hvis dette løser dit nuværende problem, kan vi altid sørge for at få lavet den samme effekt. ;)
Avatar billede mcclaud Nybegynder
10. marts 2012 - 12:10 #8
Hej DeeDawg

Mange tak for hjælpen. Det har helt bestemt hjulpet, men det virker ikke helt godt endnu. Nogle gange åbner de skjulte divs sig kun delvist. Problemet synes tilstede i både IE, FF og Chrome.

Ved du, hvad der mangler?

:o) mcclaud
Avatar billede DeeDawg Nybegynder
10. marts 2012 - 12:42 #9
Hvis du skriver følgende

$(document).ready(function(){
    $("a.trigger").hover(
        function(){
            $(this).prev().stop().fadeIn(500);
        },
        function(){
            $(this).prev().stop().fadeOut(200);
        }
    );
});

skulle du meget gerne få den ønskede effekt. ;)
Avatar billede DeeDawg Nybegynder
10. marts 2012 - 12:45 #10
Eller, fjern stop() fra begge. Bliver ved med at glemme og fjerne det, når jeg bare kopiere det fra tidligere. ;P
Avatar billede mcclaud Nybegynder
10. marts 2012 - 12:55 #11
Hej DeeDawg

Nu virker det, ligesom det skal... Mange tak for hjælpen.

Tjek det her: http://www.halfmen.dk/!TEST2!/referencer.htm

Hvis du poster et svar, giver jeg med glæde points.

:o) mcclaud
Avatar billede DeeDawg Nybegynder
10. marts 2012 - 12:58 #12
Super. :)
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