Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

jQuery slide gaat de eerste keer fout

Anoniem
Ger
3 antwoorden
  • Ik ben bezig om secties te maken voor op een website. Blokjes waar straks een inleidende tekst over een onderwerp in komt, en waar je dan op kunt klikken om verder naar een pagina te gaan met meer informatie.

    'Als opleuk' heb ik een jQuery slidertje gemaakt, dat bij een hover over het blokje, vanuit de onderkant omhoog komt.

    Nu werkt dat wel, maar het rare is dat de eerste keer dat je hovert, het blokje maar ten dele tevoorschijn komt (het lijkt wel rechts van de <p>;), zie de eerste afbeelding. Doe je het een tweede keer dan gaat het prima. Totdat je de pagina refreshed, of in JSFiddle weer opnieuw op 'Run' klikt. Dan gaat heet weer een keer fout en daarna weer goed.

    Ik ben al met z-indexen aan de gang geweest, ik heb het betreffende balkje gecleared om eventueel floaten op te heffen, maar ik kom er maar niet vanaf.

    Bij eerste Hover (fout):
    [img:45e98df352]https://imageshack.com/a/img11/525/ygz8.png[/img:45e98df352]
    Bij alle volgende hovers (goed):
    [img:45e98df352]https://imageshack.com/a/img22/9505/ylh.png[/img:45e98df352]

    De hele code:
    http://jsfiddle.net/Gooly/sFprC/16/
  • Ik kan je niet drect aanwijzen waar de fout ligt, ik heb even zitten stoeien maar kwam er niet uit. Omdat het toch moest kunnen heb ik wat dingen aangepast aan hoe ik het zelf zou doen. Dus minder position en iets meer de flow van de pagina volgen. Daar is dit uitgekomen:

    http://jsfiddle.net/sFprC/19/

    Belangrijke wijzigingen:
      [*:e2c02994fc]Niet meer een <a> rondom een <img> en een <p>, maar afzonderlijk [*:e2c02994fc]En click() event op de hele section [*:e2c02994fc]De <h2> naar boven (waar die thuishoort volgens de document flow) [*:e2c02994fc]Een <p> rondom de slider en daar het hover() event aan gekoppeld (en de styling verplaatst) [*:e2c02994fc]Wat position en z-indexen weggehaald[/list:o:e2c02994fc] Bij mij werkt het nu zoals je volgens mij bedoelt. Het click() event op de section kun je volgens mij ook dynamisch laten gebeuren door te kijken naar de eerste child('a'), maar daar ben ik nooit zo goed in. :)
  • Tnx, volgens mij heb ik het opgelost.
    (Weet je overigens zeker dat je de juiste link hebt geplaatst, want bij mij gaat het nog steeds fout, als ik op je link klik)

    Ik ben even stapsgewijs met jou overwegingen aan de gang gegaan, en nu werkt het prima.
    Alleen heb ik nu (nog) geen link onder de tekst, maar wel op het slide balkje en op de afbeelding (straks op de tablet komt er geen slidebalkje omhoog natuurlijk)

    Ik heb de code gecleaned, en op een meer logische volgorde gezet, en wat de truuk volgens mij helemaal deed, was dat ik nu voor het slide balkje een div gebruik. De link heb ik in de div gezet. Logischer eigenlijk ook :)

    http://jsfiddle.net/Gooly/TV2az/5/

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.