DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
ander vraagje
om 2 heel verschillende lettertypes te gebruiken heb ik een font-face gebruikt
nu zijn staat 1 lettertype lager dan het andere.
Hoe kan ik dit oplossen
dit is de code:
css:
of beter image van maken??
om 2 heel verschillende lettertypes te gebruiken heb ik een font-face gebruikt
nu zijn staat 1 lettertype lager dan het andere.
Hoe kan ik dit oplossen
dit is de code:
| 1 2 3 | <div id="textheader"> <span class="eroded">tekst1</span><span class="loco"> tekst2</span> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @font-face { font-family: eroded; src: url('28days.eot'); src: local(" 28days "), url( 28days.ttf ) format("truetype"); /* non-IE */ } @font-face { font-family: loco; src: url('loco.eot'); src: local(" loco"), url( loco.ttf ) format("truetype"); /* non-IE */ } span.eroded { font-family: eroded, sans-serif; font-size:80px; } span.loco { font-family: loco, sans-serif; font-size:80px; } |
of beter image van maken??
Euh... Is de makkelijkste oplossing niet gewoon de lage tekst wat omhoog plaatsen, met bv zoiets?
| 1 | position: relative; top: -5px; |
Als het trouwens een header moet voorstellen, waarom gebruik je dan een div en niet gewoon een h-element?
je eerste werkt iggquote:Op woensdag 23 november 2011 22:22 schreef Tijn het volgende:
Als het trouwens een header moet voorstellen, waarom gebruik je dan een div en niet gewoon een h-element?
2de..uhm tja...waarom ook niet
maar met @font-face heb je daar toch geen last van?quote:Op woensdag 23 november 2011 22:26 schreef Tegan het volgende:
Plus, ik zou toch een image doen, want web-safe fonts!
ik heb de fonts erbij staan als file
Hoezo?quote:
Plus, ik zou toch een image doen, want web-safe fonts!
.
nog 1 vraagje...en dan is het weer mooi geweest
met js onclick laat ik switchen tussen 2 css files
om tekst2 van andere kleur te voorzien
like so
het is niet zo mooi om als code te zien..want tekst2 is nogal een lang woord...maar het werkt
...enigzins
als ik op het woord klik..dan duurt het nogal lang voordat de letters van kleur veranderen
iets van een halve seconde en niet echt vloeiend, zwart beeld enzo
is hier een andere javascript (oid) oplossing voor
met js onclick laat ik switchen tussen 2 css files
om tekst2 van andere kleur te voorzien
like so
| 1 2 3 4 5 6 7 8 9 10 | <div class="eroded"> <a href="#" onclick="changeStyle('css/tekst1.css'); return false;" >tekst</a> </div> <div class="loco"> <a href="#" onclick="changeStyle('css/tekst2.css'); return false;" > <span><span class="rood"> a</span><span class="oranje">b</span></a> </div> |
het is niet zo mooi om als code te zien..want tekst2 is nogal een lang woord...maar het werkt
...enigzins
als ik op het woord klik..dan duurt het nogal lang voordat de letters van kleur veranderen
iets van een halve seconde en niet echt vloeiend, zwart beeld enzo
is hier een andere javascript (oid) oplossing voor
Omdat hij die andere CSS file moet downloaden. Dat kost tijd en server load, en is zeker niet handig.
Waarom doe je niet gewoon met bijvoorbeeld jQuery een class togglen on click? Dan doe je het bijv zo:
tekst.css
mijnSite.js
HTML
Waarom doe je niet gewoon met bijvoorbeeld jQuery een class togglen on click? Dan doe je het bijv zo:
tekst.css
| 1 | .kleur1 { color: #FF0000; } |
mijnSite.js
| 1 2 3 4 5 | $(function() { $('#tekst2').click(function(e) { $(this).toggleClass('kleur1'); }); }); |
HTML
| 1 | <span id='tekst2'>Klik</span> |
Of toch du vader?
Dit is niet zo'n fraaie oplossing, MrNiles 
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
Je kunt (afhankelijk van je doel) toch gewoon je body een andere class geven?quote:Op woensdag 23 november 2011 22:46 schreef Tijn het volgende:
Dit is niet zo'n fraaie oplossing, MrNiles
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
i know..maar hoe anders?quote:
Dit is niet zo'n fraaie oplossing, MrNiles
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
wat ik wil is in de header TEKST2 van kleur laten veranderen.
en dan elke letter een andere kleur + 1 img veranderen,
van z-w naar een kleur...misschien makkelijker met een hover?
Dit idd.quote:
[..]
Je kunt (afhankelijk van je doel) toch gewoon je body een andere class geven?
Als je alleen de kleur wil veranderen is de oplossing van Luchtkoker een mooie (met jQuery).quote:
[..]
i know..maar hoe anders?
wat ik wil is in de header TEKST2 van kleur laten veranderen.
en dan elke letter een andere kleur + 1 img veranderen,
van z-w naar een kleur...misschien makkelijker met een hover?
Als je echt elke letter apart wil veranderen, moet je denk ik dan aan elke letter een aparte class hangen.
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img veranderen?quote:
[..]
Als je alleen de kleur wil veranderen is de oplossing van Luchtkoker een mooie (met jQuery).
Als je echt elke letter apart wil veranderen, moet je denk ik dan aan elke letter een aparte class hangen.
wat bedoel je met img veranderen?quote:
[..]
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
quote:$("#my_image").attr("src","second.jpg");
Als je image een vaste hoogte/breedte heeft, en altijd dezelfde states (normaal en hover), dan is het beter en handiger om er een sprite van te maken, dus ze in 1 plaatje te zetten, die je met background-position goed zet.quote:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[code]
$("#my_image").attr("src","second.jpg");
[/code]
Met de jQuery-oplossing (of kan zelfs met puur css dan), kan je de bgpos veranderen. Het voordeel is, dat als je er voor de eerste keer over hovert, het nieuwe plaatje niet ingeladen hoeft te worden en dus direct getoond wordt. Plus, het scheelt weer een request naar de server.
dat dus.
Sprites zijn heel makkelijk. Je hoeft in principe alleen maar bij een :hover de position te veranderen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
bij een hover of click op TEKST2 dat tekst2 veranderd in verschillende kleuren (verschillende classes) en tegelijkertijd dat er een image veranderd, deze image is precies hetzelfde alleen wat aangepast met photoshope, lengte/breedte blijven gelijkquote:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[..]
sprites ken ik...maar werkt dat ook als ik over iets anders hover/click dan het plaatje?
Ja, dat kan. Dan heb je wel jQuery (of plain old JS) nodig. Je krijgt dan zoiets:
| 1 2 3 4 5 6 7 | $('#tekst2').hover() { $('#img').css('background-position','bottom left'); //en andere stuff die je wilt doen. }, { $('#img').css('background-position','top left'); /// etc } |
dat dus.
JS niet nodig als het een parent is, dan gebruik je natuurlijk gewoon: parent:hover img { wijziging }
“Specialization is for insects”.—Robert Heinlein
tis lastig spul...zeker als je er nog niet heel veel van snapt 
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
| 1 2 3 4 5 6 7 8 | $(document).ready(function() { $("#letters").hover(function() { $(".letter1").toggleClass("rood"); $(".letter2").toggleClass("blauw"); $(".letter3").toggleClass("geel"); $(".letter4").toggleClass("oranje"); }); }); |
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
Zijn letter1/letter2/letter3/letter4 children van #letters? Zo ja, dan kun je het toch gewoon met CSS doen...?
en in je CSS
| 1 2 3 4 5 6 | <div id="letters"> <span class="letter1">A</span> <span class="letter2">B</span> <span class="letter3">C</span> <span class="letter4">D</span> </div> |
en in je CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #letters span { .... } .letter1 { ... } .letter2 { ... } .letter3 { ... } .letter4 { ... } #letters:hover span { .... } #letters:hover .letter1 { ... } #letters:hover .letter2 { ... } #letters:hover .letter3 { ... } #letters:hover .letter4 { ... } |
Nee.
Je zet dat plaatje normaal als background met een position. En als je hovert zorg je dat de position zo staat dat je een ander deel van het plaatje te zien krijgt. Je maakt dus bijv. de normal en hover boven elkaar en met background-position zorg je dat je eerst het bovenste deel van die afbeelding te zien krijgt en als je hovert het tweede deel.quote:
tis lastig spul...zeker als je er nog niet heel veel van snapt
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
[ code verwijderd ]
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
het letterstuk werkt..maar ik wil tegelijkertijd ook een image veranderenquote:
Zijn letter1/letter2/letter3/letter4 children van #letters? Zo ja, dan kun je het toch gewoon met CSS doen...?
[ code verwijderd ]
en in je CSS
[ code verwijderd ]
hier werd aangeraden dmv sprites...
sprites werkt wel met css...maar hoe te combineren met jQuery
againquote:Op zaterdag 26 november 2011 09:44 schreef boem-dikkie het volgende:
[..]
Je zet dat plaatje normaal als background met een position. En als je hovert zorg je dat de position zo staat dat je een ander deel van het plaatje te zien krijgt. Je maakt dus bijv. de normal en hover boven elkaar en met background-position zorg je dat je eerst het bovenste deel van die afbeelding te zien krijgt en als je hovert het tweede deel.
het hoveren werkt...letters...en image...APART
moet kan ik dit tegelijk triggeren...dus hover over tekst, change tekst EN image
Je roept in je jQuery toch al een class aan? Dan gebruik je toch gewoon je css?quote:
[..]
het letterstuk werkt..maar ik wil tegelijkertijd ook een image veranderen
hier werd aangeraden dmv sprites...
sprites werkt wel met css...maar hoe te combineren met jQuery
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
kijk..en dat gaat m me nou net een stukje te snelquote:Op zaterdag 26 november 2011 09:46 schreef boem-dikkie het volgende:
[..]
Je roept in je jQuery toch al een class aan? Dan gebruik je toch gewoon je css?
$("#letters").hover(function() {
letters is dan de class?
dus als ik dan #letters gebruik in css bij de image...en in html ook deze class bij de image zet...maar moet ik dan nog iets in de jquery toevoegen?
#letters is de id van je div.quote:
[..]
kijk..en dat gaat m me nou net een stukje te snel
$("#letters").hover(function() {
letters is dan de class?
dus als ik dan #letters gebruik in css bij de image...en in html ook deze class bij de image zet...maar moet ik dan nog iets in de jquery toevoegen?
$(".letter1").toggleClass("rood");
Hier zet je dat als je in de div #letters hovert over .letter1 hij de class 'rood' moet krijgen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
je hebt een supermooie site, en veel mooie dingen gemaakt...dat heb je vast ook niet in 1 dag geleerdquote:
Oh absoluut, maar als je al bezig gaat met jQuery, font-faces e.d. terwijl je nog niet eens het verschil kent tussen een class en een ID...quote:
[..]
je hebt een supermooie site, en veel mooie dingen gemaakt...dat heb je vast ook niet in 1 dag geleerd
Nee.
goed punt...ik geef het opquote:
[..]
Oh absoluut, maar als je al bezig gaat met jQuery, font-faces e.d. terwijl je nog niet eens het verschil kent tussen een class en een ID...
.
Nou, het mag sowieso niet met wordpress. |Dan wordt je plan afgewezen. Dus ik ga snel lynda af denk ik.quote:
Mooi getekend zo
[ afbeelding ]
Dit is het overzicht, met thumbnails die ik ga tekenen gok ik.
[ afbeelding ]
Als je op een thumbnail of titel klikt kom je bij het daadwerkelijke recept terecht.
Wat er dus geupload moet gaan worden is platte tekst, 2 afbeeldingen en een titel.
Verder komt er op de site nog een home met (denk ik) een slider, wat leuke artikelen uit de nieuwspagina, nieuwe recepten, dat soort dingen. Contactformulier komt er ook uiteraard, en een zoekfunctie
Ik wil een rechthoek van 720px bij 360px maken, elke pixel moet individueel aangestuurd kunnen worden. Ik had al een oplossing gemaakt in PHP die er als volgt uit ziet:
Probleem hierbij is dat er dus zo'n 260.000 divjes aangemaakt worden wat natuurlijk niet echt ten goede komt aan de snelheid/performance. Hebben jullie misschien iets van suggesties waarin ik dit het beste kan maken? jQuery of iets?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php $pix=1; $divId=1; $var="px"; for($i=0; $i<360; $i ++) { for($j=0; $j<720; $j++) { echo "<div id=\"$divId\" style=\"position:absolute; height:$pix$var; width:$pix$var; background:#000000; top:$i$var; left:$j$var;\"></div>"; $divId++; } } ?> |
Probleem hierbij is dat er dus zo'n 260.000 divjes aangemaakt worden wat natuurlijk niet echt ten goede komt aan de snelheid/performance. Hebben jullie misschien iets van suggesties waarin ik dit het beste kan maken? jQuery of iets?
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe. 
dat dus.
In het PHP topic werd mij ook al de vraag gesteld waarom ik het niet in Canvas maak.
Alleen kom ik er niet helemaal uit bij Canvas, de enige manier die ik tot dusver heb kunnen vinden om een pixel te tekenen is als volgt:
Lijkt mij volgens mij niet de bedoeling om een simpele pixel te tekenen met een lineTo...
Ik kan ook niet echt tutorials vinden die het hebben over pixels, tutorials gaan meteen over allemaal "fancy" dingen met allemaal toeters en bellen er op.
Alleen kom ik er niet helemaal uit bij Canvas, de enige manier die ik tot dusver heb kunnen vinden om een pixel te tekenen is als volgt:
| 1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(1,1); ctx.stroke(); </script> |
Lijkt mij volgens mij niet de bedoeling om een simpele pixel te tekenen met een lineTo...
Ik kan ook niet echt tutorials vinden die het hebben over pixels, tutorials gaan meteen over allemaal "fancy" dingen met allemaal toeters en bellen er op.
Dat ja.quote:
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe.
Elke pixel is gelijk aan een bepaald gebied gebaseerd op gps coördinaten. Aan de hand van de gps coördinaten wil ik bijvoorbeeld met de flickr api nagaan hoeveel foto's er geposts zijn in een bepaalde tijd in dat gebied. Vervolgens moet de kleur van de pixel gebaseerd worden op het aantal geplaatste foto's in een bepaald gebied. Voorbeeld van wat mijn eindresultaat ongeveer moet gaan worden: linkquote:
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe.
Maar even voor de duidelijkheid, ik zit nog helemaal in de beginfase, het eerste wat ik nu wil nagaan is hoe ik op een snelle manier een rechthoek op mijn scherm tover.
Als je begint met en basiskleur en daar pixels / divs eroverheen zet om de kleur sterker te maken scheelt het al een boel pixels als je leeg begint, toch?
Daar heb je wel een goed punt inderdaad, zo'n 70% van de aarde bestaat uit water, denk dat er vanuit die gebieden niet echt gepost wordt op Flickr bijvoorbeeld. Blijft er zo'n 30% over wat land is, en van die 30% heb je dan ook nog grote gebieden waar geen activiteit is. Als ik een schatting moet maken wordt slechts 15 a 20 % van het rechthoek ingevuld met gekleurde pixels.quote:
Als je begint met en basiskleur en daar pixels / divs eroverheen zet om de kleur sterker te maken scheelt het al een boel pixels als je leeg begint, toch?
Ik ga me nu weer wat verder inlezen over wat je allemaal met HTML5 Canvas kan doen, lijkt me toch beter dan met divjes werken, als ik 20% van het rechthoek moet invullen zit ik namelijk nog steeds met +- 50.000 divjes wat natuurlijk niet echt snel is.
