anoniem Geplaatst: 26 juni 2013 Delen Geplaatst: 26 juni 2013 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): [URL=http://imageshack.com/i/0bygz8p/][img:45e98df352]https://imageshack.com/a/img11/525/ygz8.png[/img:45e98df352][/URL] Bij alle volgende hovers (goed): [URL=http://imageshack.com/i/0mylhp/][img:45e98df352]https://imageshack.com/a/img22/9505/ylh.png[/img:45e98df352][/URL] De hele code: [url]http://jsfiddle.net/Gooly/sFprC/16/[/url] Quote Link naar reactie
anoniem Geplaatst: 26 juni 2013 Auteur Delen Geplaatst: 26 juni 2013 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: [list=1:e2c02994fc][*: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. :) Quote Link naar reactie
anoniem Geplaatst: 27 juni 2013 Auteur Delen Geplaatst: 27 juni 2013 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/ Quote Link naar reactie
anoniem Geplaatst: 27 juni 2013 Auteur Delen Geplaatst: 27 juni 2013 Ik zat gisteren op een Mint machine te kijken, misschien dat dat het verschil maakte. Anyhow: jouw code ziet er hier (op Fx22/W7) goed uit :) Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen