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; } |
1 | position: relative; top: -5px; |
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?
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!
Hoezo?quote:Op woensdag 23 november 2011 22:26 schreef Tegan het volgende:
Plus, ik zou toch een image doen, want web-safe fonts!
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> |
1 | .kleur1 { color: #FF0000; } |
1 2 3 4 5 | $(function() { $('#tekst2').click(function(e) { $(this).toggleClass('kleur1'); }); }); |
1 | <span id='tekst2'>Klik</span> |
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: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?
Dit idd.quote:Op woensdag 23 november 2011 23:34 schreef KomtTijd... het volgende:
[..]
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:Op donderdag 24 november 2011 08:34 schreef MrNiles het volgende:
[..]
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?
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img veranderen?quote:Op donderdag 24 november 2011 10:08 schreef remi1986 het volgende:
[..]
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:Op donderdag 24 november 2011 10:23 schreef MrNiles het volgende:
[..]
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img 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:Op donderdag 24 november 2011 10:31 schreef remi1986 het volgende:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[code]
$("#my_image").attr("src","second.jpg");
[/code]
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:Op donderdag 24 november 2011 10:31 schreef remi1986 het volgende:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[..]
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 } |
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"); }); }); |
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> |
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 { ... } |
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:Op zaterdag 26 november 2011 09:37 schreef MrNiles het volgende:
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
het letterstuk werkt..maar ik wil tegelijkertijd ook een image veranderenquote:Op zaterdag 26 november 2011 09:42 schreef PimD het volgende:
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 ]
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.
Je roept in je jQuery toch al een class aan? Dan gebruik je toch gewoon je css?quote:Op zaterdag 26 november 2011 09:45 schreef MrNiles het volgende:
[..]
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
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 is de id van je div.quote:Op zaterdag 26 november 2011 09:51 schreef MrNiles het volgende:
[..]
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?
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:Op zaterdag 26 november 2011 09:58 schreef MrNiles het volgende:
[..]
je hebt een supermooie site, en veel mooie dingen gemaakt...dat heb je vast ook niet in 1 dag geleerd
goed punt...ik geef het opquote:Op zaterdag 26 november 2011 10:04 schreef PimD het volgende:
[..]
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:Op vrijdag 18 november 2011 15:47 schreef RenRen- het volgende:
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 Die ik ook al vrees, maar dat is voor later, hoeft niet in mijn plan.
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++; } } ?> |
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> |
Dat ja.quote:Op woensdag 30 november 2011 18:04 schreef QM84 het volgende:
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:Op woensdag 30 november 2011 18:04 schreef QM84 het volgende:
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.
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:Op woensdag 30 november 2011 19:11 schreef DaFan het volgende:
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?
maar hoe kan ik m slim die active class meegeven? met switch statement???quote:Op donderdag 1 december 2011 09:43 schreef QM84 het volgende:
de :active pseudoclasse werkt alleen als de link écht actief is, maw: als je er op klikt. Om de link een andere stijl mee te geven als je op de bijhorende pagina zit, dan zal je met classes moeten werken.
Met andere woorden: in het stukje waar je je menu opbouwt, zal je elke keer moeten kijken of de GET hetzelfde is als de link, zo ja: class="active" zo niet, niets..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php /* ervan uitgaande dat de variabele voor de include 'p' is, natuurlijk invullen wat jij gebruikt extra controle op het bestand om te kijken of de gebruiker geen rare dingen aan de url toevoegt Met de $p weet je dus op welke pagina je zit */ if(isSet($_GET['p'] && file_exists('include/'. $_GET['p'] .'.inc.php'))) { $p = $_GET['p'] ; } ?> //In je menu gebruik je dan zoiets: <li<?php if($p=='pagename'):?> class="active"<?php endif;?>><a href="?p=paginanaam">Paginanaam</a></li> etc.. |
Ja ik had die SDK gedownload maar wat een gedoe, veel friles, updates en dan nog krijg ik dat ding niet aan de praat. Er moet toch wel wat zijn, iets compacts, licht en geen fratsen? Tot dan maar op een klein scherm bekijken naar 't resultaat Het is ook vooral voor het oefenen maar toch, een echte simulator is wel fijn.quote:Op vrijdag 2 december 2011 12:33 schreef Catch22- het volgende:
Android heeft een SDK maar die is heel traag.
met de webdevelopertoolbar van firefox kan je het scherm wel makkelijk resize naar vaste resoluties, kan je daar niet mee spelen
Resolutiequote:Op vrijdag 2 december 2011 12:49 schreef Catch22- het volgende:
wil je mediaqueries voor het platform of de resolutie?
Daarom dus liquid voor mobilequote:Op vrijdag 2 december 2011 13:42 schreef picodealion het volgende:
Oh, en de Samsung Galaxy S2 heeft in landscape mode een breedte van 545px, ik targete nog steeds op 480px maar dat is niet meer genoeg.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
Ja dat probeer ik, maar ik snap er niets van.quote:Op vrijdag 2 december 2011 14:50 schreef Catch22- het volgende:
bij de download zitten demos, daar moet je ff kijken hoe de demo met fade wordt aangeroepen
1 2 3 | $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); |
Het hangt er een beetje vanaf van wat voor site ik aan het bouwen ben en wat het doel ervan is, maar meestal onder de 800px ga ik volledig liquid. Voor > 800 en <1000 een fixed layout, waarbij kolommen verspringen, en 1000 - 1200 ook weer liquid in dat gebied, omdat heel veel mensen wel een groter scherm hebben dan 1024px in de breedte, maar niet iedereen (plus iPad in landscape!); Maar op een fullHD-scherm is 1000px ook weer zo smal, dus vandaar de oprekking naar 1200, waar het gros nu ongeveer op zit qua schermbreedte. Zodra je nog breder gaat werken, heb je echt een volledig nieuw siteontwerp nodig qua kolom- en informatieopbouw, omdat mensen gewoon niet gemaakt zijn om zoveel informatie naast elkaar te verwerken; mensen houden van smalle kolommen en dingen in de lengte ipv breedte.quote:Op vrijdag 2 december 2011 15:12 schreef TheSeeker_NL het volgende:
vanaf hoeveel width/height zou je dan voor liquid gaan trouwens? Waar ligt voor je gevoel de grens?
bedankt alvast en als er andere opmerkingen zijn hoor ik dat graag.SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.mijn CSS
@charset "UTF-8";
/* CSS Document */
body{
background-color:#e3e3e3;
background-image:url(../images/background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
#container {
width:900px;
margin:auto;
}
#menu {
width: 50%;
height:150px;
float: right;
}
ul#nav {
float:right;
text-align:center;
margin:0;
padding:0;
}
ul#nav li {
float: right; list-style: none;
}
ul#nav li a {
display: block; width: 85px; height: 50px;
padding: 72px 0 0 0; margin-left:20px;
font: 12px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
color: #fced00; text-shadow: 0 1px 1px #000; text-decoration: none;
}
ul#nav li a:hover {
background-color: #e3e3e3;
color: #333; text-shadow: 0 1px 1px #fff; text-decoration: none;
}
#logo{
background-image:url(../images/logo2.png);
background-repeat:no-repeat;
height:150px;
width:49%;
float:left;
}
#content{
background-color:#FFF;
height:700px;
width:900px;
}
quote:Op maandag 14 november 2011 21:36 schreef boem-dikkie het volgende:
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document).ready(function() { /************************ Alle rollen genereren en op de list opnemen met een checkbox ************************/ var rollen = ["Rol 1", "Rol 2", "Rol 3", "Rol 4", "Rol 5", "Rol 6"]; for(var i=0;i < rollen.length;i+= 1) { //rollen invoeren en met eigen class :: Is dit eigenlijk wel goed of kan dit beter? $("#setup").append('<input type="checkbox" class="'+rollen[i]+'" name="rol" value="bla">'+ rollen[i]) }; //knop die rollen verstuurd naar geselecteerde div :: Hier heb ik geen idee wat te doen $("#knop").click(function($e) { $e.preventDefault(); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php $(document).ready(function() { var rollen = ["Rol 1", "Rol 2", "Rol 3", "Rol 4", "Rol 5", "Rol 6"]; $.each(rollen, function(index, value) { $("#setup").append('<input type="checkbox" class="'+this.value+'" name="rol" value="bla">'+ this.value); }); $("#knop").click(function() { console.log($("#setup:checked")); }); } ?> |
Okay, die code ziet er goed uit. En tja, ik leer net de basis van JS en een piep klein beetje JQUERY dus die .each heb ik gewoon nog niet gebruikt. Maar ziet er een stuk fijner uit zo ja.quote:Op maandag 5 december 2011 13:09 schreef Scorpie het volgende:
[ code verwijderd ]
Geen idee waarom je de preventDefault nodig hebt, dus sloop er maar uit.
1 2 3 4 5 6 7 | <?php $.each(rollen, function(index, value) { $("input").attr("type", "checkbox").class(value).attr("id", index).attr("name", "rol[]").value(index).appendTo("#setup"); $("label").attr("for", index).text(value).appendTo("#setup"); }); ?> |
Maar waar zet ik die code dan neer?quote:Op vrijdag 2 december 2011 15:08 schreef Catch22- het volgende:
ik ben ook de lulligste niet en heb hem hier op mijn hd staan dus ik kijk voor je
fx: 'fade'
als argument
[ code verwijderd ]
1 2 3 4 5 6 7 8 | <div id="left"> <pre><code class="mix">$('#fade').cycle();</code></pre> <div id="fade" class="pics"> <img data-src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" style="visibility:hidden;" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> </div> |
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> |
1 2 3 4 5 | <?php <script type="text/javascript"> $('#fade').cycle({fx: "fade"}); </script> ?> |
1 2 3 | a:after { content: attr(href); } |
Dit is precies de reden dat je je eigen posts niet kunt verwijderen.quote:Op woensdag 7 december 2011 11:52 schreef TheSeeker_NL het volgende:
@KomtTijd:
Sorry maar kan mn posts niet verwijderen dus dacht geen onnodige teksten achterlaten?
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | #nav, #nav ul { padding: 3px 0 0 0; margin: 0; list-style: none; } #nav li { float: left; width: 120px; } #nav ul { position: absolute; width: 120px; left: -1000px; } #nav li:hover ul, #nav li.ie_does_hover ul { left: auto; background-position: 0 0; } #nav a { display: block; margin: 2px 5px 3px 5px; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; } ul a{ font-weight: bold; color: #F60; cursor: default; } ul ul a:link, ul ul a:visited{ font-weight: normal; color: #CCC; cursor: pointer; } ul ul a:hover, ul ul a:active{ font-weight: normal; color: #FFF; cursor: pointer; } ul li{ background-color: #CCC; border-left: 3px solid #FFF; } ul ul li{ background-color: #666; border-top: 3px solid #FFF; border-left: 0; } /* IE only hack \*/ * html ul li, * html ul ul li{ border-bottom: 3px solid #FFF; } * html ul ul li{ border-top: 0; } /* Einde IE only hack */ |
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 | <ul id="nav"> <li><a href="#">Main item 1</a> <ul> <li><a href="#">Sub item 1.1</a></li> <li><a href="#">Sub item 1.2</a></li> <li><a href="#">Sub item 1.3</a></li> <li><a href="#">Sub item 1.4</a></li> </ul> </li> <li><a href="#">Main item 2</a> <ul> <li><a href="#">Sub item 2.1</a></li> <li><a href="#">Sub item 2.2</a></li> <li><a href="#">Sub item 2.3</a></li> <li><a href="#">Sub item 2.4</a></li> <li><a href="#">Sub item 2.5</a></li> </ul> </li> <li><a href="#">Main item 3</a> <ul> <li><a href="#">Sub item 3.1</a></li> <li><a href="#">Sub item 3.2</a></li> </ul> </li> </ul> |
Een simpele jQuery slideshow plugin:quote:Op woensdag 7 december 2011 15:25 schreef Dalando het volgende:
Ik heb een javascript array met 5 linkjes naar plaatjes, maar wat ik wil doen is iedere 200ms het volgende plaatje doen, en als het laatste plaatje is geweest even 200ms pauze, en dan opnieuw. hoe doe ik dat?
1 2 3 4 5 | <?php if($current = (int) (count($arr) / 2);) { echo "</ul><ul>"; } ?> |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |