quote:Op zaterdag 27 april 2013 12:02 schreef InTrePidIvity het volgende:
[..]
Dankjewel! Ik snap wat je bedoelt en heb het op zich wel werkend weten te krijgen, maar ik vraag me af of dit de 'mooiste' manier is. Ik ben het mezelf allemaal aan het aanleren en probeer het semantisch meteen goed onder de knie te krijgen. En zo efficiënt mogelijk natuurlijk, zou je er naar willen kijken?
http://intel.comli.com/index.html
De blokjes zijn CSS, maar kan ik de span elementen daar makkelijk naast krijgen, i.p.v. dat ze zoals nu in het blok zelf beginnen? Kan uiteraard met margin, maar kan het ook anders?
ja dat bedoel ik. dat de site die je noemde wel een goede tip was want ik kende hem nog nietquote:
Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:quote:Op zaterdag 27 april 2013 14:15 schreef karton2 het volgende:
Ik wil een vertikaal scrollende website maken zoals in het voorbeeld hieronder:
[ afbeelding ]
Op de Welkompagina staat het menu statisch weergegeven zodat de bezoeker snel het deel kan bezoeken wat hij wil.
Zodra het beeld naar beneden scrollt en voorbij de rode lijn raakt is het de bedoeling dat linksboven een menu tevoorschijn komt (bijv. het beeld inglijden of via transparency).
Verder moet dat menu reageren op mousovers en laten zien op welke pagina de bezoeker zich bevindt.
Dat laatste wil ik doen dmv van underline. Maar de lijn van underline moet glijden ipv van menu-woord naar men-woord springen.
Ik heb al begrepen dat die glijdende underline javascript werk gaat worden. Over de rest van het menu heb ik nog niks zinvols kunnen vinden, hopelijk dat jullie hier meer over kunnen vertellen.
De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.quote:Op zaterdag 27 april 2013 14:22 schreef Maringo het volgende:
[..]
Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:
http://cssdeck.com/labs/wwahaw2y
Maar verder, wat heb je zelf al geprobeerd of opgezocht?
Mijn eerste hit van google:quote:Op zaterdag 27 april 2013 14:46 schreef karton2 het volgende:
[..]
De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.
Het menu ineens tevoorschijn laten komen zodra de site voorbij een bepaald punt scrollt heb ik nog niks over kunnen vinden.
boeit niet veel. JS en CSS is wel minimizedquote:Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.quote:Op maandag 29 april 2013 15:06 schreef Catch22- het volgende:
[..]
boeit niet veel. JS en CSS is wel minimized
Maakt dat uit?quote:Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
Ach, anno 2013 is de impact beperkt.quote:Op maandag 29 april 2013 15:08 schreef KomtTijd... het volgende:
[..]
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.
De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.quote:Op maandag 29 april 2013 18:46 schreef Devv het volgende:
En toch blijf ik het "bad practice" vinden om de opmaak van je code niet even netjes te maken. Maar verder boeit het inderdaad ook niet.
Inderdaad. Zolang de sourcecode waar je dagelijks mee moet werken maar fatsoenlijk is. Wat je uiteindelijk naar de client stuurt moet vooral klein en snel zijn, leesbaarheid van de code is daarbij nauwelijks relevant.quote:Op maandag 29 april 2013 22:01 schreef Light het volgende:
[..]
De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.
Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.quote:Op maandag 29 april 2013 18:28 schreef Scorpie het volgende:
[..]
Ach, anno 2013 is de impact beperkt.
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.quote:Op woensdag 1 mei 2013 10:33 schreef KomtTijd... het volgende:
[..]
Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.
En dan reken ik de html-comments nog niet mee.
Ja mij maakt het ook niet uit, maar ik hoef ook het dataverkeer van FOK! niet te managen.quote:Op woensdag 1 mei 2013 10:37 schreef Scorpie het volgende:
[..]
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <header> <a href=""><img src="logo.png"></a> <nav> <ul> <li><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/cases">cases</a></li> <li><a href="/blog">blog</a></li> </ul> </nav> <div> <!-- hier staat het rode gebeuren --> </div> </header> |
quote:Op donderdag 2 mei 2013 09:02 schreef mstx het volgende:
Zwarte achtergrond in de <ul> of <a> die je bij de hover vervangt door een PNG waar dat driehoekje transparant is.
Moet je wel zorgen dat daar achter niet nog een zwarte achtergrond zit van de container.
Maar hoe zorg ik dan dat de rest van de balk ook donker wordt zonder dat-ie achter het menu zit?quote:Op donderdag 2 mei 2013 09:03 schreef KomtTijd... het volgende:
background-color of image op de Li's zetten ipv de ul? en een andere truc verzinnen om de balk door te laten lopen over de hele breedte
Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.quote:Op donderdag 2 mei 2013 09:08 schreef Catch22- het volgende:
Ik zou heel nasty verschillende achtergrondplaatjes gebruiken voor de verschillende items
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?quote:Op donderdag 2 mei 2013 09:12 schreef Tijn het volgende:
[..]
Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.
Ik kan ook 1 plaatje maken met een heel brede donkere balk en een driehoekje eruit en de positie hiervan verschuiven op basis van het geselecteerde item. Ik denk alleen dan dat ik de positie met JS moet bepalen en ik zou het mooier vinden als het met CSS zou kunnen. Het voordeel van deze optie is wel dat het mogelijk wordt om het driehoekje te laten bewegen naar een andere plek wanneer een ander item wordt gekozen, dat is misschien wel een tof effect.
Dat glijden is niet per se nodig, ik bedacht me gewoon dat dat kan als het 1 groot plaatje is waarvan ik de positie verander.quote:Op donderdag 2 mei 2013 10:59 schreef Dimauro het volgende:
[..]
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?
1 2 3 4 5 6 7 8 | <nav id="menu"> <ul> <li id="first"><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/cases">cases</a></li> <li id="last"><a href="/blog">blog</a></li> </ul> </nav> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #menu { text-align: center; width: 100%; } ul { list-style: none; display: inline-block; margin: 0; padding: 0; } li { background-color: rgba(244,134,78,0.5); width: 50px; height: 50px; float: left; margin: 0; padding: 0; } #first:before{ content: ''; width: 100%; height: 50px; background-color: rgba(255,0,255,0.5); position: absolute; z-index: -1; right: 50%; margin-right: 100px; } #last:after{ content: ''; width: 50%; height: 50px; background-color: rgba(0,0,255,0.5); position: absolute; z-index: -1; left: 50%; margin-left: 100px; } |
Hm, dat zou misschien wel werken, maar is er geen mooiere manier om het voor elkaar te krijgen?quote:Op donderdag 2 mei 2013 12:40 schreef Tijn het volgende:
Is het een optie om aan de andere li's ook een (lege) <em> toe te voegen? Dan staan ze automatisch op dezelfde hoogte.
1 2 3 | <style type="text/css"> body, html, #map { margin: 0; width: 100%; height: 80%; } </style> |
1 2 3 4 5 | body, html, #map { margin: 0; width: 100%; height: 80%; } |
Iets dat wij niet kunnen zien met deze beperkte informatie.quote:
Sorry voor de beperkte informatie, maar dat was idd het probleemquote:Op zaterdag 4 mei 2013 15:22 schreef Alfje het volgende:
link je in je html bestand wel naar je css bestand?
Een dirty oplossing:quote:Op zondag 5 mei 2013 11:17 schreef DutchErrorist het volgende:
Oke nog een vraagje dan een paar dagen geleden had ik een vraag met betrekking tot lijsten sorteren en javascript nu was ik daar heel goed mee geholpen, maar ik had nog 1 vraag.
Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?
Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.
Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was
http://jsfiddle.net/maxx0r/uKHXs/55/
1 | return $(this).hasClass(fruitColor) && $(this).hasClass(fruitType) && $(this).hasClass('always'); |
Dat werkt niet goedquote:Op zondag 5 mei 2013 11:40 schreef Maringo het volgende:
[..]
Een dirty oplossing:
Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
[ code verwijderd ]
Ach, ik zet het ook helemaal verkeerd neer. Ik was nog niet helemaal wakker...quote:Op zondag 5 mei 2013 11:59 schreef DutchErrorist het volgende:
[..]
Dat werkt niet goedMaar hij moet ook maar op een select altijd laten zien. Dus bij fruit en berry en niet bij kleur of andersom.
1 | return ($(this).hasClass(fruitColor) && $(this).hasClass(fruitType)) + $(this).hasClass('always'); |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |