Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic
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.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Klopt. TR Gemacht.quote:
quote:
quote:Think before you act
Ik zorg gewoon voor no-cache headers bij JSON requests.quote:Op woensdag 11 september 2013 15:34 schreef Catch22- het volgende:
ik pleur er vrijwel _altijd_ een anti-cache parameter bij in
JSON en jQuery zijn toch wel de moeite waard hoor. Zou je script er (enigszins vereenvoudigd) ongeveer zo uitzien:quote:Op woensdag 11 september 2013 15:09 schreef Skunk-m het volgende:
weet niet hoe dat werkt dat JSON.. en jquery dan snap ik er helemaal niks meer van.
| 1 2 3 4 5 6 7 | function newmess(){ $.getJSON("shout/getshouts.php",{'id': id}, function(data){ $("#hoelang").html(data.hoelang); $("#shout").prepend(data.shout); setTimeout(newmess,1000); }); } |
do as I say, not as I do.quote:
Ik vertrouw die headers niet
Ie heeft een belachelijke omweg nog schijnbaar.. omdat IE weigert die zooi opnieuw te laden ofzo
nu heb ik dit ervan moeten maken.
shout.innerHTML = r[1] + shout.innerHTML;
newS = shout.cloneNode( true ) // Deep copy
shout.parentNode.replaceChild( newS, shout )
Ik snap je punt. Hoe zou jij dit probleem tackelen? Of zou je het probleem helemaal omzeilen?quote:Op woensdag 11 september 2013 10:51 schreef Tijn het volgende:
[..]
Het levert geen robuust programma op. Je moet code schrijven die je kunt vertrouwen. Als je je variabelen niet onder controle hebt, wordt het ontzettend complex om het overzicht te houden naarmate je programma groeit.
jQuery is fantastisch. Met jQuery kan ik bijna alles, terwijl m'n JS kennis heel beperkt is.quote:
Ik begrijp niet helemaal waarom je überhaupt het probleem hebt dat die functie "te vaak" wordt aangeroepen. Waarom zou dat gebeuren?quote:
[..]
Ik snap je punt. Hoe zou jij dit probleem tackelen? Of zou je het probleem helemaal omzeilen?
Het gaat om een aantal inputs die als filter voor een tabel fungeren. Die tabel wordt bij elke jQuery.change() geüpdatet door middel van AJAX. Ik probeer de requests een soort van te pipelinen, zodat de server niet continu wordt bestookt met requests wanneer het niet nodig is.quote:
[..]
Ik begrijp niet helemaal waarom je überhaupt het probleem hebt dat die functie "te vaak" wordt aangeroepen. Waarom zou dat gebeuren?
Een soort dynamische filters op tabellen ?quote:
[..]
Het gaat om een aantal inputs die als filter voor een tabel fungeren. Die tabel wordt bij elke jQuery.change() geüpdatet door middel van AJAX. Ik probeer de requests een soort van te pipelinen, zodat de server niet continu wordt bestookt met requests wanneer het niet nodig is.
Exact.quote:Op woensdag 11 september 2013 20:03 schreef Scorpie het volgende:
[..]
Een soort dynamische filters op tabellen ?
Set dan een delay op je invoervelden, dat er na een change 300 of 500 ms gewacht wordt voordat de functie afgaat.quote:
Ik heb het eerst op die manier gedaan, maar ik vond de filters niet snel genoeg aanvoelen. De tabel wordt ook niet geüpdatet bij keyup maar bij change, dus ofwel de enter moet indrukt worden of er moet buiten het veld geklikt worden. Zo'n delay heb ik wel toegepast op een naam filter die bij elke keyup een request stuurt.quote:
[..]
Set dan een delay op je invoervelden, dat er na een change 300 of 500 ms gewacht wordt voordat de functie afgaat.
Zolang er geen performance-problemen zijn, zou ik me er niet zo druk over maken.quote:
[..]
Het gaat om een aantal inputs die als filter voor een tabel fungeren. Die tabel wordt bij elke jQuery.change() geüpdatet door middel van AJAX. Ik probeer de requests een soort van te pipelinen, zodat de server niet continu wordt bestookt met requests wanneer het niet nodig is.
Dan heb ik nog een vraag voor je: in die functie wordt een andere functie van een plugin (dataTables) aangeroepen. Stel ik noem mijn table: oTable1, dan refresh ik m'n tabel met: oTable1.fnDraw(). Stel ik verander m'n tabelnaam, dan moet ik overal die functie anders aanroepen. Wat is daar een goede oplossing voor? Gewoon de functie in een andere functie stoppen?quote:
[..]
Zolang er geen performance-problemen zijn, zou ik me er niet zo druk over maken.
Uhm, het is een jQuery element(?) opgeslagen in een variabele. Zoiets als:quote:
| 1 | var oTable1 = $('#id').dataTables(); |
Ik snap de vraag niet echt
Oké, dus jij "zegt": "Sloop die timeout van de functie eruit en roep de refresh gewoon op de traditionele manier aan: oTable.fnDraw();". Toch?quote:
Daar ga je gewoon mee om zoals elke variabele toch? Als je een andere variabele van naam verandert, moet je ook overal in je code waar deze variabele wordt gebruikt de naam veranderen.
Ik snap de vraag niet echt
Eigenlijk heb ik me het dus veel te ingewikkeld gemaakt. De site draaide voorheen op ronduit belabberde shared host. Nu draait 'ie op een VPS, dus ik denk dat ik maar terug moet gaan naar basic, want de server kan dit wel aan denk ik.
Dit klinkt nogal verontrustend.quote:
Ik hoop dat je beter begrijpt wat je aan het doen bent dan ik...
Moet ik me zorgen gaan maken? 
Gooi je code eens op jsfiddle, volgens mij maak je alles veel te moeilijkquote:
[..]
Dit klinkt nogal verontrustend.
De site gaat binnenkort online, dan kun je de hele JS zien.quote:
[..]
Gooi je code eens op jsfiddle, volgens mij maak je alles veel te moeilijk
Klopt. Ik ging ervan uit dat iedereen hier de plugin wel kende. Zo niet: zeker het proberen waard. Echt super veel mogelijkheden en erg makkelijk in te stellen als je de documentatie goed doorneemt.quote:
Komt vast van http://datatables.net/
Het is de bedoeling dat de de hoogte van de website (en de kolommen) altijd 100% is, ongeacht hoeveel tekst / plaatjes de website bevat.
De container heeft wel een 100% hoogte en schikt zich naar de hoogte van het venster.
De 3 kolommen zitten in die container maar veranderen alleen van hoogte als er een regel tekst bijkomt of als ik een height opgeef.
De code is alsvolgt:
SPOILER
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
69
70
71
72
73
74
75
76
77<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
background: #ffffff;
margin: 0;
padding: 0;
height: 100%;
}
#topbalk {
background-color:#363636;
height: 32px;
width: 100%;
}
#header {
background-color:#CCCCCC;
width: 939px;
height: 131px;
}
#container {
background-color:#666666;
min-height: 100%;
width: 939px;
margin: 0 auto;
}
#linkerpaneel{
background-color: #ccccff;
width: 204px;
margin-right: 2px;
float: left;
}
#content{
background-color: #ccccff;
width: 527px;
margin-right: 2px;
float: left;
}
#rechterpaneel{
background-color: #ccccff;
width: 204px;
float: right;
}
#footer {
position: fixed;
bottom: 0;
width: 939px;
height: 53px;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="topbalk"></div>
<div id="container">
<div id="header">header</div>
<div id="linkerpaneel">links<br />links</div>
<div id="content">content</div>
<div id="rechterpaneel">rechts</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Gooi het eens in jsfiddle.quote:Op dinsdag 17 september 2013 12:21 schreef karton2 het volgende:
Ik ben bezig met het maken van een website die is opgebouwd uit 3 kolommen naast elkaar (incl. header, footer, etc).
Het is de bedoeling dat de de hoogte van de website (en de kolommen) altijd 100% is, ongeacht hoeveel tekst / plaatjes de website bevat.
De container heeft wel een 100% hoogte en schikt zich naar de hoogte van het venster.
De 3 kolommen zitten in die container maar veranderen alleen van hoogte als er een regel tekst bijkomt of als ik een height opgeef.
De code is alsvolgt:SPOILER[ code verwijderd ]
http://jsfiddle.net/H5Uyd/quote:
Die ben ik ook tegen gekomen maar ik heb begrepen dat dit niet dé manier zou zijn, achterhaald en zulks.quote:
De code uit mijn eerste post heb ik minimaal aangepast..
..#container een background-image meegegeven van 939px breed en 1px hoog.
In die afbeelding de kolommen weergegeven met kleuren en hij doet het.
En bij een .png maakt het qua bestandsgrootte waarschijnlijk geen verschil.
De centrale kolom wordt gevuld met nieuws berichten.
Het is de bedoeling dat de twee kolommen aan de zijkant niet mee bewegen zodra de bezoeker door de nieuwsberichten gaat scrollen.
Met een simpele overflow:scroll; voor het content gedeelte kan ik dat bereiken.
Gevolg is dat ik twee scrollbalken heb: één voor het content gedeelte en één aan de rechter zijde van het scherm.
De meerst rechtse scrollbalk is het gevolg van de 100% hoogte van de achtergrond.
Als ik die 100% kleiner maak dan gaat, neem ik aan, die rechter scrollbalk weg zodat ik alleen de content scrollbalk nog heb.
Het mooiste zou echter zijn als dat ik alleen een scrollbalk rechts aan de rand van het scherm zou hebben en dat ik daarmee door de centrale kolom kan scrollen.
Mijn oplossing zou zijn het vastzetten van de volledige website met uitzondering van het nieuwsdeel.
De volledige website schuift dan mee zodra de bezoeker naar beneden scrollt.
Probleem is dat ik niet weet hoe ik de 100% hoogte van de drie de faux kolommen ga bepalen in de html/css.
Ik ben benieuwd naar jullie advies.
Huidige situatie:
SPOILER
evt. in combinatie met een stukje JS, zodat ze pas fixed worden als de header weggescrold is.
Die fixed doet inderdaad wat ik zoek.quote:Op woensdag 18 september 2013 12:16 schreef KomtTijd... het volgende:
position:fixed is wat je zoekt.
evt. in combinatie met een stukje JS, zodat ze pas fixed worden als de header weggescrold is.
Het probleem is echter dat als ik het venster smaller maak de rechter kolom sneller verschuift dan de linker.
Ik ben uitgegaan van dit voorbeeld alleen is daar hetzelfde probleem. De gele balk schuift sneller naar links dan de tekst zelf.
Voorheen liet ik de 3 kolommen naast elkaar floaten binnen in een container maar dat werkt nu ook niet meer natuurlijk door die fixed.
Nu kom ik deze jsFiddle tegen en die laat, volgens mij, zien wat ik bedoel.
Echter die werkt alleen als left:50%; is... Als ik die verander naar bijv. 30% dan schuift alles weer op zijn eigen snelheid.
Hoe kan ik er dan voor zorgen dat de 2 buitenste kolommen blijven staan terwijl je door de middelste kolom kan scrollen?quote:
doet dit alsjeblieft niet... fixed height is nooit een goed idee. Gewoon lekker floaten
Dat kan met overflow, maar dan krijg ik twee scrollbalken.
Zie:
SPOILER[]
Wat ik ook doe met het venster, hij blijft altijd op de juiste plek.
Mijn linker en rechter kolom daarentegen..
Ja dat zal, maar het is geen papier he. Op het web hebben dingen variabele hoogtes. Je moet dit gewoon niet zo doen en willen.quote:
[..]
Hoe kan ik er dan voor zorgen dat de 2 buitenste kolommen blijven staan terwijl je door de middelste kolom kan scrollen?
Dat kan met overflow, maar dan krijg ik twee scrollbalken.
Zie:SPOILER[ [ afbeelding ] ]
quote:
...ik heb echt geen idee meer wat je nu allemaal aan het doen bent en wat er precies niet wil lukken.
Ik heb een .rar geüpload voor degenen die zelf willen kijken: http://www.filedropper.com/voorbeeldquote:
[..]
Ja dat zal, maar het is geen papier he. Op het web hebben dingen variabele hoogtes. Je moet dit gewoon niet zo doen en willen.
Bevat een index.html met CSS in de head + een .png die de kolommen visualiseerd.
Ik ben eerder weer opnieuw begonnen en heb geprobeerd om de basis op te zetten, maar ik kom er niet meer uit.
Het is de bedoeling dat de website uit 3 kolommen bestaat.
Links een menu, rechts polls en ander spul. Centraal komt de inhoud van de site.
De linker en rechter kolom moeten -altijd- in beeld blijven als de gebruiker naar beneden scrollt.
De linker kolom staat goed en reageert zoals het hoort, ook als ik het venster smaller maak.
De rechter kolom moet identiek reageren maar ik krijg het niet voor elkaar.. hij wil zelfs niet verschijnen.
Mijn eeuwige dank voor degene die het werkend krijgt.
| 1 2 3 4 5 6 7 8 9 10 | #rechts { background-color: #000000; height: 500px; left: 50%; /* centreren */ margin-left: 285px; /* helft van de wrapper - de breedte van het element: 970/2 - 200 */ position: fixed; right: 0; top: 0; width: 200px; } |
Is je #rechts sidebar zichtbaar en aan de rechterkant van het scherm gepositioneerd. Maar met alle respect, het is toch geen 1998 meer? Wat ga je doen als die sidebars hoger zijn dan de viewport bijvoorbeeld?
Wat hij zegt, hier is een jsfiddle met nog wat tweaks:quote:
Met
[ code verwijderd ]
Is je #rechts sidebar zichtbaar en aan de rechterkant van het scherm gepositioneerd. Maar met alle respect, het is toch geen 1998 meer? Wat ga je doen als die sidebars hoger zijn dan de viewport bijvoorbeeld?
http://jsfiddle.net/pUkT6/
http://jsfiddle.net/djqnB/
Typ: lorem20 druk op tab en je krijgt twintig woorden lorem ipsum...
Nog meer voorbeelden als je op tab drukt:
In de html-editor:
div.bladiebla wordt: <div class="bladiebla"></div>
div#hoi wordt: <div id="hoi"></div>
a wordt: <a href=""></a>
In de CSS-editor:
bg#333 wordt: background: #eee;
pr3 wordt: padding-right: 3px;
Dat is de syntax van Emmet, daar kun je nog veel meer leuks mee doen.quote:
Paar handige jsfiddle tips:
Typ: lorem20 druk op tab en je krijgt twintig woorden lorem ipsum...
Nog meer voorbeelden als je op tab drukt:
In de html-editor:
div.bladiebla wordt: <div class="bladiebla"></div>
div#hoi wordt: <div id="hoi"></div>
a wordt: <a href=""></a>
In de CSS-editor:
bg#333 wordt: background: #eee;
pr3 wordt: padding-right: 3px;
Bijvoorbeeld:
| 1 | ul>li.link$*6>a[href="#"] |
| 1 2 3 4 5 6 7 8 | <ul> <li class="link1"><a href="#"></a></li> <li class="link2"><a href="#"></a></li> <li class="link3"><a href="#"></a></li> <li class="link4"><a href="#"></a></li> <li class="link5"><a href="#"></a></li> <li class="link6"><a href="#"></a></li> </ul> |
Emmet is ook toe te voegen aan veel code editors. Erg handig om snel je code te kunnen typen.
SPOILERBeste FOK!ers,
Dit jaar informatica in mijn pakket gekozen op school, erg interessant.
Nu heb ik een opgave waarbij ik doormiddel van JavaScript (verwerkt HTML) een site moet maken met een manier om rente op rente te berekenen voor een bepaald bedrag.
Stel:
Ik heb een rekening met 150.000 euro, daar krijg ik 3% rente op en ik wil weten hoeveel ik heb over 6 jaar.
Dan voer ik dus het bedrag in, de rente, en het aantal jaar en moet dan het bedrag krijgen wat er na die 6 jaar opstaat.
Echter kom ik niet verder dan 1 jaar. Iemand die mij kan helpen?
Hier is mijn script tot nu toe (CSS script even terzijde, die is voor mijn vraag niet belangrijk):
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="opdracht32.css">
<title>Bereken rente</title>
<script>
function berekening() {
var resultaat= parseFloat(document.mijnForm.bedrag.value) / 100 *
parseFloat(document.mijnForm.rente.value) *
parseFloat(document.mijnForm.jaar.value) +
parseFloat(document.mijnForm.bedrag.value);
alert('Het bedrag is: ¤'+resultaat.toFixed(2));
}
</script>
</head>
<body>
<form name="mijnForm">
<br>
<h2>Bereken rente over bedrag</h2>
<br>
<p>Bedrag (in euro's):</p>
<input type="tekst" name="bedrag" value="">
<br>
<p>Rente (in procenten):</p>
<input type="tekst" name="rente" value="">
<br>
<p>Aantal jaren:</p>
<input type="tekst" name="jaar" value="">
<br>
<br>
<input type="button" value="Bereken" onClick="berekening()">
</form>
</body>
</html>
[ Bericht 4% gewijzigd door Lucaas op 19-09-2013 20:07:42 ]
Allereerst je kunt je code tussen code tags zetten dat leest wat fijner. Verder ben je op de goede weg. Weet je hoe je wiskundig rente op rente berekent? Verder nog een stijl tip die je code overzichtelijker maakt: maak een aparte functie bereken (startbedrag, rente, jaren) { .. } die de berekening zelf doet. Dan wordt je code ongeveer:quote:
Beste FOK!ers,
Dit jaar informatica in mijn pakket gekozen op school, erg interessant.
Nu heb ik een opgave waarbij ik doormiddel van JavaScript (verwerkt HTML) een site moet maken met een manier om rente op rente te berekenen voor een bepaald bedrag.
Stel:
Ik heb een rekening met 150.000 euro, daar krijg ik 3% rente op en ik wil weten hoeveel ik heb over 6 jaar.
Dan voer ik dus het bedrag in, de rente, en het aantal jaar en moet dan het bedrag krijgen wat er na die 6 jaar opstaat.
Echter kom ik niet verder dan 1 jaar. Iemand die mij kan helpen?
Hier is mijn script tot nu toe (CSS script even terzijde, die is voor mijn vraag niet belangrijk):
...
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function bereken (startbedrag, rente, jaren) { var resultaat = ...; return resultaat; } function berekening() { var startbedrag = parseFloat(document.mijnForm.bedrag.value); var rente = parseFloat(document.mijnForm.rente.value); var jaren = parseInt(document.mijnForm.jaar.value); var resultaat = bereken (startbedrag, rente, jaren); alert ('Het bedrag is ¤ '+resultaat) } |
Ik heb het aanstaan in PhpStorm ja.quote:
[..]
Dat is de syntax van Emmet, daar kun je nog veel meer leuks mee doen.
Bijvoorbeeld:
[ code verwijderd ]
wordt na een druk op Tab
[ code verwijderd ]
Emmet is ook toe te voegen aan veel code editors. Erg handig om snel je code te kunnen typen.
Maar ik wist niet dat het ook in JSFiddle kon.
Kwam er ook bij toeval achter omdat ik het nou eenmaal in mijn vingers heb zitten.
Toch bedankt voor je reactie, heb het uiteindelijk zelf opgelost maar je tips zijn handig.quote:
[..]
Allereerst je kunt je code tussen code tags zetten dat leest wat fijner. Verder ben je op de goede weg. Weet je hoe je wiskundig rente op rente berekent? Verder nog een stijl tip die je code overzichtelijker maakt: maak een aparte functie bereken (startbedrag, rente, jaren) { .. } die de berekening zelf doet. Dan wordt je code ongeveer:
[ code verwijderd ]
Heb de formule eindbedrag = startbedrag(1+(rente:100)^jaar gebruikt voor de code.
De code ziet er nu zo uit:
| 1 2 3 4 5 6 7 | function berekening() { var bedrag= parseFloat(document.mijnForm.bedrag.value.replace(",",".")); var rente= parseFloat(document.mijnForm.rente.value.replace(",",".")) / 100; var jaar= parseFloat(document.mijnForm.jaar.value); var resultaat= bedrag*Math.pow((rente+1),jaar); alert('Het bedrag is: ¤'+resultaat.toFixed(2)); } |
Witte vlak tussen de top en de wrapper wil ik niet, ik weet dat het wordt veroorzaakt door:
margin-top: 10px;
van #top_banner.
Maar ik wil niet dat #wrapper ook naar beneden wordt geschoven. Hoe fix ik dat?
Of moet ik de margin-top verwijderen van #top_banner en een padding-top geven aan #wrapper?
http://jsfiddle.net/yTPJC/2/quote:
http://jsfiddle.net/yTPJC/
Witte vlak tussen de top en de wrapper wil ik niet, ik weet dat het wordt veroorzaakt door:
margin-top: 10px;
van #top_banner.
Maar ik wil niet dat #wrapper ook naar beneden wordt geschoven. Hoe fix ik dat?
Of moet ik de margin-top verwijderen van #top_banner en een padding-top geven aan #wrapper?
Geen margin / padding op de body, html.
| 1 2 | a { color: #333; } nav a { color: #111; } |
Waarom wordt de kleur hier #333 wanneer mijn anchor tag in een nav-element staat?
Heb je met firebug (oid) gekeken of het ook van dat stuk css af komt? Niet dat er een ander deel css dit weer overruled.quote:
Ben ik nou achterlijk?
[ code verwijderd ]
Waarom wordt de kleur hier #333 wanneer mijn anchor tag in een nav-element staat?
En de HTML code erbij zou ook fijn zijn.
De nav a wordt overruled door de a. Het werkt overigens wel als ik <nav> vervang door een <div class="nav">, dus het heeft echt iets met het <nav> element te maken.quote:
[..]
Heb je met firebug (oid) gekeken of het ook van dat stuk css af komt? Niet dat er een ander deel css dit weer overruled.
En de HTML code erbij zou ook fijn zijn.
Hier even de versimpelde HTML erbij:
| 1 2 3 4 5 6 | <nav> <ul> <li><a href="">One</a></li> <li><a href="">Two</a></li> </ul> </nav> |
Als ik dit in een JSfiddle gooi (http://jsfiddle.net/tS6qN/) doet ie het goed. Probleem ligt ergens anders.quote:
[..]
De nav a wordt overruled door de a. Het werkt overigens wel als ik <nav> vervang door een <div class="nav">, dus het heeft echt iets met het <nav> element te maken.
Hier even de versimpelde HTML erbij:
[ code verwijderd ]
Klopt. Ik vermoed dat nav niet goed herkend wordt om de een of andere reden, aangezien het met .nav wel gewoon werkt. Vreemd.quote:
[..]
Als ik dit in een JSfiddle gooi (http://jsfiddle.net/tS6qN/) doet ie het goed. Probleem ligt ergens anders.
Zonder de rest van de code zou ik het ook niet weten. Je hebt wel Firebug gechecked voor de css hiërarchie?quote:
[..]
Klopt. Ik vermoed dat nav niet goed herkend wordt om de een of andere reden, aangezien het met .nav wel gewoon werkt. Vreemd.
Nee, gewoon Chrome. Heb 't gecheckt met Chrome Dev Tools. Vind het zo vreemd dat <div class="nav"> wel werkt maar <nav> niet.quote:
Probeer: nav ul li a als selectorquote:
Ben ik nou achterlijk?
[ code verwijderd ]
Waarom wordt de kleur hier #333 wanneer mijn anchor tag in een nav-element staat?
Dan nog lijkt het me wenselijk dat het daar ook op werkt.quote:
Waarmee kan ik dat het beste doen? Een background image met een streep of anders?
Border op de tr maakt gewoon rondom borders. Dus ook de rechter en linkerkant.quote:
/edit
Oh je kan border-left en -right op none zetten, cool
Dan is het netter om border-top en border-bottom in te stellen in plaats van eerst de hele tr een border te geven en daarna ze links en rechts weer te verwijderen.quote:
[..]
Oh je kan border-left en -right op none zetten, cool
Leuk bedacht, maar is op de gemiddelde kantoorcomputer van de gemiddelde potentiële klant niet normaal te bekijken.quote:
Paralax en infinite scrolling zijn toch echt wel de nieuwe plagen van het internet inderdaad.quote:
Sowieso word ik een beetje moe van al die sites die allerlei shit laten gebeuren tijdens het scrollen. Ik krijg een beetje Flash-flashbacks, toen ook alles geanimeerd moest worden puur omdat het kon.
Verder heeft het weinig toepassingen.
Leuk, 10 seconden wachten op inladen. Weg gebruiker.quote:
Dat is niet de hoofdpaginaquote:
[..]
Leuk, 10 seconden wachten op inladen. Weg gebruiker.
Dan nog zit niemand erop te wachten.quote:
Oja, want alles moet NU gebeuren, laadtijden zijn zeau 1990.quote:Op vrijdag 27 september 2013 09:18 schreef Scorpie het volgende:
[..]
Dan nog zit niemand erop te wachten.
In welk jaar ben jij blijven hangen?quote:
quote:
Ja, nogal ja.quote:Op vrijdag 27 september 2013 09:18 schreef xzaz het volgende:
[..]
Oja, want alles moet NU gebeuren, laadtijden zijn zeau 1990.
Het is gewoon een middelmatige site waar niet heel erg goed over is nagedacht. Leuk om te showcasen, maar om nou te zeggen briljant? Neuh.quote:
Nouja zeg, wat een reacties allemaal. Ik zeg echt niet dat iedere site dit zou moeten doen, maar ik vind het een sterk staaltje HTML. En het is toch wel anders/origineler dan de meeste van die parralax sites. Sorry dat ik 't deelde hoorquote:
[..]
In welk jaar ben jij blijven hangen?
.Dat dusquote:
Die website is perfect voor waarvoor hij bedoeld is: Een designbureau dat zijn ballen wil laten zien.
Verder heeft het weinig toepassingen.
.Een sterk staaltje HTML? Hm, dan verschillen we van mening.quote:
[..]
Nouja zeg, wat een reacties allemaal. Ik zeg echt niet dat iedere site dit zou moeten doen, maar ik vind het een sterk staaltje HTML. En het is toch wel anders/origineler dan de meeste van die parralax sites. Sorry dat ik 't deelde hoor
[..]
Dat dus
Origineel dan. Stelletje zuurpruimenquote:
[..]
Een sterk staaltje HTML? Hm, dan verschillen we van mening.
.Waarom is er niet goed over nagedacht, het is een prima showcase en een leuke manier om de werknemers voor te stellen. Is het de meest effectieve manier, natuurlijk niet.quote:
[..]
Het is gewoon een middelmatige site waar niet heel erg goed over is nagedacht. Leuk om te showcasen, maar om nou te zeggen briljant? Neuh.
Op Chrome hapert de achtegrond als een ziekte zodra je scrollt, het duurt veel te lang om alles in te laden, kijk vooral even naar de requests(1500 images ophalen a 20kb per stuk, ben je wel helemaal goed bij je hoofd?), processorverbruik schiet de lucht in want niet geoptimaliseerde code, op IE werkt dat hele ding niet eensquote:
Inderdaad zuurpruimen, natuurlijk is het een showcase van hier tot Tokio. De website (http://www.kathart.dk/) geeft alle informatie die je nodig heb; de wie, wat en waar. Prima site dus.
[..]
Waarom is er niet goed over nagedacht, het is een prima showcase en een leuke manier om de werknemers voor te stellen. Is het de meest effectieve manier, natuurlijk niet.
en dan noemt dit zichzelf een internetbureau? Sorry, maar hier is gewoon NIET goed over nagedacht. Elke zichzelf respecterende programmeur zou dit zo niet hebben gedaan.
EDIT: Ik zit nu op 25MB die die website binnen haalt. Ongelooflijk
EDIT2: 30 MB, 3 minuten laadtijd
Nee, het is niet alsof hordes mensen surfen via een onbetrouwbare 3G-verbinding met een datimiet ofzo. O, wachtquote:
Ik ben het met je eens dat de browser qua CPU een beetje te gek wordt. Maar Mb's downloaden maakt tegenwoordig niks meer uit.
En het probleem is?quote:Op vrijdag 27 september 2013 10:49 schreef Tijn het volgende:
[..]
Nee, het is niet alsof hordes mensen surfen via een onbetrouwbare 3G-verbinding met een datimiet ofzo. O, wacht
quote:
Gast, ik ga bijna denken dat je loopt te trollen. Je bent iig goed op weg om iedereen hier flink te beledigen met je onwetendheid.35MB out of the box bedoel je?quote:Op vrijdag 27 september 2013 10:47 schreef KomtTijd... het volgende:
Er zou eens een beetje outside the box gedacht worden door een ontwerpbureau zeg. Buuhuu.
Alsof websites anno 2013 nog steeds 13Kb maximaal mogen zijn, wat is dit voor onzin. Je ondersteund zeker ook nog steeds IE 1.6.quote:
[..]
Pro's:
- ze durven mensen uit te sluiten voor een showcase (website blijft gewoon beschikbaar)
- Er is laadtijd dus wanneer mensen het niet willen kunnen ze weg klikken, is dus gewoon over nagedacht.
- Leuke manier
- Een normale landingpage.
- Goede linkbuilding
enz enz.
Ja, bijvoorbeeld. Het was misschien nog niet bij je opgekomen, maar toegankelijkheid was waarschijnlijk níét een ontwerpeis voor deze showcase.quote:
Ja, want je website limiteren tot een select groepje gebruikers is altijd een goed ideequote:
[..]
Alsof websites anno 2013 nog steeds 13Kb maximaal mogen zijn, wat is dit voor onzin. Je ondersteund zeker ook nog steeds IE 1.6.
- Pro's ze durven mensen uit te sluiten voor een showcase (website blijft gewoon beschikbaar)
Er is teveel laadtijd waardoor mensen die geinteresseerd zouden kunnen zijn denken 'fuck it, dit duurt langer dan 2 seconden, ik ga ervandoor', dus er is niet over nagedacht.quote:- Er is laadtijd dus wanneer mensen het niet willen kunnen ze weg klikken, is dus gewoon over nagedacht.
Leuk is subjectief, maar vernieuwend is het niet (in 2007 werd dit ook al gedaan), goed uitgewerkt is het niet waardoor de gehele ervaring flopt, om nog maar niet te spreken over de technische limitaties van deze 'showcase'.quote:- Leuke manier
Wooptiedoo.quote:- Goede linkbuilding
Ik heb echt het idee dat je geen idee hebt waar je over praat. No offense.
Dat was allang bij me opgekomen, maar elk internetbureau dat toegangelijkheid de deur uittrapt om een showcase te maken (die overigens zeer amateuristisch is opgezet) krijgt bij mij dikke minpuntenquote:
[..]
Ja, bijvoorbeeld. Het was misschien nog niet bij je opgekomen, maar toegankelijkheid was waarschijnlijk níét een ontwerpeis voor deze showcase.
en kan ik eigenlijk ook niet echt serieus nemen.
Zeker niet gezien het feit dat die hele website opgezet is om de tour/showcase te doen, en de rest van de site er maar wat losjes omheen hangt met contactgegeventjes. Leuk, zo'n bureautje, maar met de beste wil van de wereld kan ik dit niet serieus nemen.
Een internetbureau met verstand van zaken kan beiden: EN showcasen EN toegangelijkheid > 99%.
Ja, wel als het gaat om een showcase en wanneer daar over nagedacht is. Je hebt nou eenmaal requirements die ook netjes worden afgevangen, check de screenshot hierboven.quote:
[..]
Ja, want je website limiteren tot een select groepje gebruikers is altijd een goed idee
Het hoeft ook niet, alle nuttige informatie hebben ze al want die staat op de hoofdpagina / landingpage.quote:[..]
Er is teveel laadtijd waardoor mensen die geinteresseerd zouden kunnen zijn denken 'fuck it, dit duurt langer dan 2 seconden, ik ga ervandoor', dus er is niet over nagedacht.
Hence het woord showcasequote:[..]
Leuk is subjectief, maar vernieuwend is het niet (in 2007 werd dit ook al gedaan), goed uitgewerkt is het niet waardoor de gehele ervaring flopt, om nog maar niet te spreken over de technische limitaties van deze 'showcase'.
En die mensen die daar werken ook niet,quote:[..]
Wooptiedoo.
Ik heb echt het idee dat je geen idee hebt waar je over praat. No offense.
Je bent echt geïndoctrineerd dat een website maar voor iedereen toegankelijk moet zijn, voor elk platform. Dat fluid design en dat responsive design overal geimplemteerd moet worden zodat alle gebruikers op alle platformen er toegang tot hebben.
Dat is prima voor een website waar contact gegevens op staan maar niet voor een showcase, daar mogen, zoals vermeld in de screenshot, technische requirements op zitten.
Jezus man, neem nog een slok azijn en ga weer aan het werk ofzo.quote:
[..]
Dat was allang bij me opgekomen, maar elk internetbureau dat toegangelijkheid de deur uittrapt om een showcase te maken (die overigens zeer amateuristisch is opgezet) krijgt bij mij dikke minpunten
en kan ik eigenlijk ook niet echt serieus nemen.
Zeker niet gezien het feit dat die hele website opgezet is om de tour/showcase te doen, en de rest van de site er maar wat losjes omheen hangt met contactgegeventjes. Leuk, zo'n bureautje, maar met de beste wil van de wereld kan ik dit niet serieus nemen.
Een internetbureau met verstand van zaken kan beiden: EN showcasen EN toegangelijkheid > 99%.
Je kan ook gewoon niet reageren als je niks meer inhoudelijks te melden hebt, droeftoeter.quote:
[..]
Jezus man, neem nog een slok azijn en ga weer aan het werk ofzo.
Waarom hamer je zoveel op de toegankelijkheid voor een showcase?quote:
[..]
Je kan ook gewoon niet reageren als je niks meer inhoudelijks te melden hebt, droeftoeter.
En ik zeg je dat die requirements nergens op slaan als je een beetje internetbureau van naam bent.quote:
[..]
Ja, wel als het gaat om een showcase en wanneer daar over nagedacht is. Je hebt nou eenmaal requirements die ook netjes worden afgevangen, check de screenshot hierboven.
Ja, ze hebben heel klein hun cases op de website staan (waar elke nieuwe klant direct naar gaat kijken) en dan mega groot die tour. Als ze dat zo bewust hebben gedaan kan je dat best een design faal noemen.quote:Het hoeft ook niet, alle nuttige informatie hebben ze al want die staat op de hoofdpagina / landingpage.
Dat is wel een beetje jouw magische woord om elke faal van dit bedrijf maar goed te praten he?quote:Hence het woord showcase
Heb je hem misschien zelf gemaakt?
Waarom zou een showcase per definitie ontoegankelijk moeten zijn? Dit is hun core-business, hier verdienen ze geld mee, dit is hun uithangbord en hun reclamezuil. Dit is waar de doekoe's meer binnengeharkt worden, en jij zegt eigenlijk dat het geen reet uitmaakt wie het leest of ziet, want het is een showcase.quote:
[..]
Waarom hamer je zoveel op de toegankelijkheid voor een showcase?
Het is alsof je zegt dat alleen blanke mannen van 25 jaar met G-star raw broek en hippe patta's aan en een hipsterbril op waardig zijn om jouw reclamebord te lezen, en dat je daar heus wel over nagedacht hebt, en dat het nu eenmaal een showcase is en je dus maar pech hebt als je niet in die doelgroep zit. Zo werkt dat natuurlijk niet. Een goed designbureau weet precies hoe ze 99% van hun gebruikers kunnen bereiken met een showcase. Het een sluit het ander niet uit, het is geen OF OF situatie maar een EN EN. Daar onderscheiden de pro's zich van de amateurs.
derbauer.de is VEEEEEEEEEEEEEEL beter en ziet er echt 10x beter uit.quote:
Wat een gezeik allemaal, het ziet er gewoon leuk uit klaar. Zeikerds.
Zo goed?
Dat kan je mening zijn, maar zoals die melding weergeeft hebben ze hier bewust voor gekozen. En ja een internetbureau mag en kan dat doen.quote:
[..]
En ik zeg je dat die requirements nergens op slaan als je een beetje internetbureau van naam bent.
Denk je nou echt dat die mensen die daar zitten er gewoon geen verstand van hebben en jij de waarheid in pacht heb?quote:[..]
Ja, ze hebben heel klein hun cases op de website staan (waar elke nieuwe klant direct naar gaat kijken) en dan mega groot die tour. Als ze dat zo bewust hebben gedaan kan je dat best een design faal noemen.
Dit een faal noemen, sluit asjeblieft IE6 en Dreamweaver af en ga tegeltjes leggen.quote:[..]
Dat is wel een beetje jouw magische woord om elke faal van dit bedrijf maar goed te praten he?
Heb je hem misschien zelf gemaakt?
Alsof ze de eerste prutsers zouden zijn die ik tegen ben gekomen in mijn werk. Neger alsjeblieft, ik doe dit al 10 jaar als broodwinning, beledig me niet.quote:
Denk je nou echt dat die mensen die daar zitten er gewoon geen verstand van hebben en jij de waarheid in pacht heb?
Oja, uit die tijd dat 5Kb nog veel was voor een website en toen websites nog met tabellen werden opgemaaktquote:
[..]
Alsof ze de eerste prutsers zouden zijn die ik tegen ben gekomen in mijn werk. Neger alsjeblieft, ik doe dit al 10 jaar als broodwinning, beledig me niet.
Zorg je wel dat je bij de tijd blijft.Jij zal dan toch moeten weten dat enovatie in de browsers altijd heeft geleidt tot nieuwe dingen die al in de browsers zaten en nooit optimaal werden gebruikt waarna de browsers eropin gingen spelen...
Alleen hobbyisten zeggen dat het aantal kb's niet uitmaakt en doen niets aan optimalisatie. Ben jij een hobbyist toevallig?quote:
[..]
Oja, uit die tijd dat 5Kb nog veel was voor een website en toen websites nog met tabellen werden opgemaakt
Je verhaal zou relevant zijn als die showcase iets van innovatie (correcte spelling) zou tonen. Dat doet het niet. In 2007 zag ik al de eerste website die dit mechanisme gebruikte. Gebruikers vonden het toen maar rete irritant overigens.quote:Jij zal dan toch moeten weten dat enovatie in de browsers altijd heeft geleidt tot nieuwe dingen die al in de browsers zaten en nooit optimaal werden gebruikt waarna de browsers eropin gingen spelen...
Overigens staat er nog een post voor je klaar om antwoord op te geven.quote:
[..]
Oja, uit die tijd dat 5Kb nog veel was voor een website en toen websites nog met tabellen werden opgemaakt
Jij zal dan toch moeten weten dat enovatie in de browsers altijd heeft geleidt tot nieuwe dingen die al in de browsers zaten en nooit optimaal werden gebruikt waarna de browsers eropin gingen spelen...
Toevallig nietquote:
[..]
Alleen hobbyisten zeggen dat het aantal kb's niet uitmaakt en doen niets aan optimalisatie. Ben jij een hobbyist toevallig?
Je doet gewoon helemaal geen programmeerwerk dus? Wat doe je dan precies in dit topic?quote:
Blijf je offtopic reageren? Als de discussie tussen anderen je niet aanstaat, blijf dan gewoon weg of reageer inhoudelijk.quote:Op vrijdag 27 september 2013 11:23 schreef KomtTijd... het volgende:
Heb je een keer een opdracht verloren aan KathArt, Scorpie?
Het punt is dat binnen de web wereld altijd is gedacht dat een website geoptimaliseerd moest worden voor zoveel mogelijke platvormen, devices, resolutie en versies van browsers. Wij ontwikkelen ook showcases die gewoon standaard HTML zijn waar niks mis mee is. Daarnaast doen we ook showcases die laten zien wat het bedrijf kan, helaas zitten daar wel technische limitaties aan en moet er gekozen worden. Ga je er mee door -> Prima, je sluit bezoekers uit. Aan de andere kant is wel wel weer een stukje 'profilering'.quote:
[..]
Waarom zou een showcase per definitie ontoegankelijk moeten zijn? Dit is hun core-business, hier verdienen ze geld mee, dit is hun uithangbord en hun reclamezuil. Dit is waar de doekoe's meer binnengeharkt worden, en jij zegt eigenlijk dat het geen reet uitmaakt wie het leest of ziet, want het is een showcase.
De doekoes worden overigens, als ik naar de cijfers kijk nooit via een websiteformulier gemaakt. Maar puur (zeker bij een bedrijf wat al langer bestaat) door relaties en nog steeds de ouderwedse telefoon.
Een vergelijking die niet helemaal opgaat, er is een een wezelijk verschil tussen willen uitsluiten en moeten uitsluiten vanwege technische redenen. Een autofabrikant sluit ook mensen uit op de bestuurdersstoel die geen rijbewijs hebben.quote:Het is alsof je zegt dat alleen blanke mannen van 25 jaar met G-star raw broek en hippe patta's aan en een hipsterbril op waardig zijn om jouw reclamebord te lezen
Dan is onze definitie van een showcase anders, bij mij is een showcase; kijk dit kunnen we maken de rest in peanuts. Je ontkomt nou eenmaal niet aan de minimale requirements, ook op het web niet.quote:, en dat je daar heus wel over nagedacht hebt, en dat het nu eenmaal een showcase is en je dus maar pech hebt als je niet in die doelgroep zit. Zo werkt dat natuurlijk niet. Een goed designbureau weet precies hoe ze 99% van hun gebruikers kunnen bereiken met een showcase. Het een sluit het ander niet uit, het is geen OF OF situatie maar een EN EN. Daar onderscheiden de pro's zich van de amateurs.
Als een showcase aan alle regels voor een productiewebsite moest voldoen, dan had het sowieso weinig zin om een showcase te maken. Dan kun je beter gewoon een productiewebsite maken.quote:
Dan is onze definitie van een showcase anders, bij mij is een showcase; kijk dit kunnen we maken de rest in peanuts. Je ontkomt nou eenmaal niet aan de minimale requirements, ook op het web niet.
Mwah, beetje divitus hoorquote:
[..]
ik vind het een sterk staaltje HTML
Die opvatting geld nog steeds, en terecht natuurlijk.quote:
[..]
Het punt is dat binnen de web wereld altijd is gedacht dat een website geoptimaliseerd moest worden voor zoveel mogelijke platvormen, devices, resolutie en versies van browsers.
Er zijn wat mij betreft 2 dingen die je los van elkaar moet zien; je hebt de zogenaamde 'tech demo's' die de technische capaciteiten ten volle benutten en die je graag wilt laten zien aan bijvoorbeeld collega's of concurrenten en de showcases waarbij je aan zoveel mogelijk potentiele klanten je skill set wil laten zien.quote:Wij ontwikkelen ook showcases die gewoon standaard HTML zijn waar niks mis mee is. Daarnaast doen we ook showcases die laten zien wat het bedrijf kan, helaas zitten daar wel technische limitaties aan en moet er gekozen worden. Ga je er mee door -> Prima, je sluit bezoekers uit. Aan de andere kant is wel wel weer een stukje 'profilering'.
Bij die tweede groep zou ik persoonlijk nooit doelgroepen uit gaan sluiten omdat je een technische oplossingsrichting hebt gekozen die je limiteert. Stel nou dat de klant zegt 'wow, gave showcase! Dat wil ik ook voor al mijn bezoekers voor elk OS en elke browser', dan mag jij straks uit gaan leggen waarom ze dat niet gaan krijgen. Teleurgestelde klant en jij kan niet voldoen aan de vraag.
Ouderwets. Bij ons is de conversierate van bezoekers behoorlijk hoog en doen we nauwelijks iets met telefonische acquisitie.quote:De doekoes worden overigens, als ik naar de cijfers kijk nooit via een websiteformulier gemaakt. Maar puur (zeker bij een bedrijf wat al langer bestaat) door relaties en nog steeds de ouderwedse telefoon.
Zie hierboven. De vraag is dus wat je wil laten zien aan je doelgroep; een tech demo of een showcase. In mijn wereld twee totaal verschillende dingen.quote:Een vergelijking die niet helemaal opgaat, er is een een wezelijk verschil tussen willen uitsluiten en moeten uitsluiten vanwege technische redenen. Een autofabrikant sluit ook mensen uit op de bestuurdersstoel die geen rijbewijs hebben.
Klopt.quote:Dan is onze definitie van een showcase anders
De enige reden dat ze telefoons en IE 8 uitsluiten is omdat ze hun ding zo ontworpen hebben dat het niet op die platformen werkt, niet vanwege technische limitaties van die platformen. Ze hadden best een vergelijkbare tour kunnen maken die wél had gewerkt op de systemen die ze nu uitsluiten.quote:
[..]
Een vergelijking die niet helemaal opgaat, er is een een wezelijk verschil tussen willen uitsluiten en moeten uitsluiten vanwege technische redenen. Een autofabrikant sluit ook mensen uit op de bestuurdersstoel die geen rijbewijs hebben.
True, ik spreek hier dan ook over de techdemo's wat dit naar mijn idee is. Een showcase voor HTML5.quote:
[..]
Die opvatting geld nog steeds, en terecht natuurlijk.
[..]
Er zijn wat mij betreft 2 dingen die je los van elkaar moet zien; je hebt de zogenaamde 'tech demo's' die de technische capaciteiten ten volle benutten en die je graag wilt laten zien aan bijvoorbeeld collega's of concurrenten en de showcases waarbij je aan zoveel mogelijk potentiele klanten je skill set wil laten zien.
En waarom valt dat niet uit te leggen? Ik heb tegen zoveel klanten moeten zeggen dat wat ze wouden technisch niet mogelijk is.quote:Bij die tweede groep zou ik persoonlijk nooit doelgroepen uit gaan sluiten omdat je een technische oplossingsrichting hebt gekozen die je limiteert. Stel nou dat de klant zegt 'wow, gave showcase! Dat wil ik ook voor al mijn bezoekers voor elk OS en elke browser', dan mag jij straks uit gaan leggen waarom ze dat niet gaan krijgen. Teleurgestelde klant en jij kan niet voldoen aan de vraag.
Innovatie komt toch echt door de grenzen op te zoeken; voor jouw is die grens overschreden als je mensen gaat uitsluiten. Prima.quote:[..]
Zie hierboven. De vraag is dus wat je wil laten zien aan je doelgroep; een tech demo of een showcase. In mijn wereld twee totaal verschillende dingen.
[..]
Klopt.
Als dat het doel was geweest, was het wel aardig geweest als ze ook daadwerkelijk wat meer HTML5 hadden toegepastquote:
[..]
True, ik spreek hier dan ook over de techdemo's wat dit naar mijn idee is. Een showcase voor HTML5.
badum tisquote:
[..]
Als dat het doel was geweest, was het wel aardig geweest als ze ook daadwerkelijk wat meer HTML5 hadden toegepast
Got me there, het is in ieder geval HTML5quote:
[..]
Als dat het doel was geweest, was het wel aardig geweest als ze ook daadwerkelijk wat meer HTML5 hadden toegepast
Er zit bijna geen HTML5 in.quote:
[..]
True, ik spreek hier dan ook over de techdemo's wat dit naar mijn idee is. Een showcase voor HTML5.
Omdat je in eerste instantie die klant hebt aangetrokken door je demo? Het is alsof je bij de auto dealer een auto ziet staan maar je hem niet mag kopen omdat hij de weg niet op mag.quote:En waarom valt dat niet uit te leggen? Ik heb tegen zoveel klanten moeten zeggen dat wat ze wouden technisch niet mogelijk is.
Ik heb nog nooit een website gezien die beter is gaan functioneren omdat men de grenzen opzocht van browsers of techniek.quote:Innovatie komt toch echt door de grenzen op te zoeken; voor jouw is die grens overschreden als je mensen gaat uitsluiten. Prima.
Ajaxquote:
Ik heb nog nooit een website gezien die beter is gaan functioneren omdat men de grenzen opzocht van browsers of techniek.
Hij mag de weg wel op maar kan niet harder dan 30km/uquote:Omdat je in eerste instantie die klant hebt aangetrokken door je demo? Het is alsof je bij de auto dealer een auto ziet staan maar je hem niet mag kopen omdat hij de weg niet op mag.
Mwoah, Ajax was weliswaar een doorbraak maar bestond al best een tijd:quote:
[..]
Ajax
[..]
Hij mag de weg wel op maar kan niet harder dan 30km/u
http://www.ibm.com/developerworks/library/wa-aj-ajaxhistory/quote:A brief history of Ajax
The history of Ajax is similar to many other apparent overnight sensations. Although Ajax seemed to come out of nowhere, in reality it had been percolating for a while. Several years of work spread across the Web went into creating the tools and patterns that came together under the Ajax banner. Throughout the dHTML era of the original Internet bubble and into the dark years after the dot-com crash, developers around the world were unlocking the unexpected power of JavaScript to bring new and exciting application patterns to the web.
XMLHttpRequest
The first and most important piece of the Ajax puzzle was the XMLHttpRequest (XHR) API. XHR is a JavaScript API used to transfer data messages between a web browser and a web server. It allows the browser to use an HTTP POST (to pass data to the server) or GET request (to access data from the server behind the scenes.) This API is the core of most Ajax interactions and one of the foundation technologies of modern web development.
It's also the best gift the Microsoft® Internet Explorer® team ever gave the Internet.
It's true. XHR first appeared in Internet Explorer version 5 way back in 2000. Originally written by Alex Hopmann as a Microsoft® ActiveX® control, XHR was created for use with Microsoft Outlook® Web Access, designed to smooth out the interactions between the advanced (for the time) front-end interface and Microsoft Exchange Server.
Although a software package from Microsoft doesn't exactly count as "humble beginnings," XHR has certainly grown well beyond the limited scope of that one initial product. It has since been implemented in every major browser and has even been adopted as a W3C standard.
De grenzen opzoekenquote:
[..]
Mwoah, Ajax was weliswaar een doorbraak maar bestond al best een tijd:
[..]
Rounded corners was nog zoiets, op een gegeven moment moest iedereen ronde corners hebben. Want vierkant was zeau IE 6. En iframes mochten nooit en tennimmer meer gebruikt worden. Tenzij je iets async upload natuurlijk dan kan het wel.Trouwens is dat hele HTTP protocol niet meer van deze tijd, maar goed dat is een andere discussie.
Waarom komt #right niet naast #left_menu? #right komt automatisch onder #left_menu te staan.
Omdat de breedte van het element minimaal 100% (ofwel volledige breedte is). Daardoor wordt hij na onderen gedrukt.quote:
http://jsfiddle.net/egVFy/
Waarom komt #right niet naast #left_menu? #right komt automatisch onder #left_menu te staan.
Ook als ik min-width verander in width werkt het nietquote:
[..]
Omdat de breedte van het element minimaal 100% (ofwel volledige breedte is). Daardoor wordt hij na onderen gedrukt.
width 100% kan ook niet.quote:
[..]
Ook als ik min-width verander in width werkt het niet
Over de breedte dan.
quote:
http://jsfiddle.net/egVFy/
Waarom komt #right niet naast #left_menu? #right komt automatisch onder #left_menu te staan.
Zoiets dus:quote:
Of werk alleen met procenten.
Over de breedte dan.
http://jsfiddle.net/egVFy/2/
Top left moet gelijk aan dat andere leftding:quote:
[..]
[..]
Zoiets dus:
http://jsfiddle.net/egVFy/2/
http://jsfiddle.net/egVFy/
Bij jou valt right dus er ook onderquote:
[..]
Top left moet gelijk aan dat andere leftding:
http://jsfiddle.net/egVFy/
http://jsfiddle.net/egVFy/3/quote:
[..]
Bij jou valt right dus er ook onder
Sorry had m niet opgeslagen
Thanks. Ik wist niet dat je px en % kan mixen. Jammer. Zal dit gebruiken dan.quote:
[..]
http://jsfiddle.net/egVFy/3/
Sorry had m niet opgeslagen
Lol, ik had hem geüpdatet, maar waarschijnlijk heeft hij het niet gepaktquote:
[..]
Top left moet gelijk aan dat andere leftding:
http://jsfiddle.net/egVFy/
Je moest eens weten wat je allemaal kan mixen.quote:
[..]
Thanks. Ik wist niet dat je px en % kan mixen. Jammer. Zal dit gebruiken dan.
Maar.. vind je dit een verstandige aanpak?
Zou je niet gewoon een vaste breedte pakken en alles in een wrapper gooien?
Haha, ja bij mij ging het ook fout.quote:
[..]
Lol, ik had hem geüpdatet, maar waarschijnlijk heeft hij het niet gepakt
Wat ik wil is:quote:
[..]
Je moest eens weten wat je allemaal kan mixen.
Maar.. vind je dit een verstandige aanpak?
Zou je niet gewoon een vaste breedte pakken en alles in een wrapper gooien?
Linkerkant een vaste breedte, even als de top left.
#right moet de rest vullen, vandaar die 100%, omdat je niet weet hoeveel px de resolutie is van de bezoeker.
Gewoon een wrapper eromheen dus. Veel makkelijker.quote:
[..]
Wat ik wil is:
Linkerkant een vaste breedte, even als de top left.
#right moet de rest vullen, vandaar die 100%, omdat je niet weet hoeveel px de resolutie is van de bezoeker.
Ga dan even bij jezelf na wat er daadwerkelijk helemaal tot aan de rand rechts te zien moet zijn.quote:
[..]
Wat ik wil is:
Linkerkant een vaste breedte, even als de top left.
#right moet de rest vullen, vandaar die 100%, omdat je niet weet hoeveel px de resolutie is van de bezoeker.
Als het alleen een kleur is of deel van een afbeelding, dan hoef je helemaal geen div te hebben die helemaal tot daar rekt.
Als je vaste waarden gebruikt, kun je ook nauwkeuriger margins en paddings instellen voor alle inline elementen e.d.
Nee, komt content in, o.a. een tabel, formulier..quote:
[..]
Ga dan even bij jezelf na wat er daadwerkelijk helemaal tot aan de rand rechts te zien moet zijn.
Als het alleen een kleur is of deel van een afbeelding, dan hoef je helemaal geen div te hebben die helemaal tot daar rekt.
Tabel wordt gewoon 100% van #right, net zoals de invul velden bij m'n formulier.
Maar alles zit toch wel in een wrapper? Je gaat toch niet 1920px breed de content laten zien?quote:
[..]
Nee, komt content in, o.a. een tabel, formulier..
Tabel wordt gewoon 100% van #right, net zoals de invul velden bij m'n formulier.
Jawel, 1920px contentquote:
[..]
Maar alles zit toch wel in een wrapper? Je gaat toch niet 1920px breed de content laten zien?
voorbeeld
Een tabel die heeeeeeeeeeeeelemaal tot aan de rechterkant moet strekken?quote:
[..]
Nee, komt content in, o.a. een tabel, formulier..
Tabel wordt gewoon 100% van #right, net zoals de invul velden bij m'n formulier.
oh daar is de rechtekant honderd procent met een margin left.quote:
Dus krijg jij zoiets: http://jsfiddle.net/egVFy/6/
Dus eigenlijk wil je gewoon dit: http://jsfiddle.net/egVFy/5/quote:
[..]
Wat ik wil is:
Linkerkant een vaste breedte, even als de top left.
#right moet de rest vullen, vandaar die 100%, omdat je niet weet hoeveel px de resolutie is van de bezoeker.
Ik heb dus #left en #right in de html omgedraaid en #right een negatieve margin-left gegeven.
Thanks allen!
http://csswizardry.com/2010/08/semantics-and-sensibility/
lekker bloated, is net zoiets als jquery gebruiken voor js maar dan zonder dat het nodig isquote:
Wat is dan precies het probleem? Iedereen weet toch dat de talenkeuze op Wikipedia links staat?quote:
terzijde, elementen #left en #right noemen is niet koosjer
http://csswizardry.com/2010/08/semantics-and-sensibility/
Bloated tegenover al die uren development, debuggen en browsercompatibiliteit and so on and so on.quote:
[..]
lekker bloated, is net zoiets als jquery gebruiken voor js maar dan zonder dat het nodig is
Maar goed, er vanuitgaande dat de vraagsteller in lerende fase is, is Javascript ondersteund met jQuery een goed begin.
Ik redt me prima met een css reset. <IE8 krijgt bij mij de vinkentering dat dan weer wel. Jquery is gewoon prima (en als je die van Google gebruikt vaak al in het cache).quote:
[..]
Bloated tegenover al die uren development, debuggen en browsercompatibiliteit and so on and so on.
Maar goed, er vanuitgaande dat de vraagsteller in lerende fase is, is Javascript ondersteund met jQuery een goed begin.
redtquote:
[..]
Ik redt me prima met een css reset. <IE8 krijgt bij mij de vinkentering dat dan weer wel. Jquery is gewoon prima (en als je die van Google gebruikt vaak al in het cache).
| 1 2 3 4 | <figure> <img src="/images/test.jpg"> <figcaption>Testcaption, dit staat wel goed uitgelijnd.</figcaption> </figure> |
| 1 2 | figure { float: right; width: 20%;} img {margin: 0 auto;} |
Dat werktquote:
Helder!quote:
een inline-image volgt de text-align van de parent.
Ik heb een site draaien met Joomla 2.5 en in het ledengedeelte heb ik een extensie toegevoegd genaamd Kunena-forum. In principe werkt alles naar wens, op 1 ding na.
In het reageer-scherm staan namelijk de BBcodes onder elkaar i.p.v. naast elkaar.
Volgens andere forums komt het omdat Kunena een css-instelling pakt van mijn Joomla-site. D.m.v. handmatig css toevoegen zou ik dat moeten overrulen. Alleen heb ik daar te weinig kaas van gegeten.
Ik heb via Chrome (Element inspecteren) gezocht of ik de instelling kan vinden, maar dat is me niet gelukt.
Iemand een idee wat ik moet aanpassen om die knoppen horizontaal te krijgen?
Inloggen kan op de site met gebr.naam testen en wachtwoord test
Alvast mijn dank!
Even een vraagje, met betrekking tot redirecten. Wat is de makkelijkste optie volgens jullie? Ik heb voor iemand een website gemaakt en die heb ik zolang gezet op www.xxxx.nl/wordpress . Nu wilt deze klant natuurlijk deze website op zijn handige adres hebben (www.xxxx.nl), maar nu wil ik dit gewoon eenvoudig en snel doen via redirecten.
Met welk scriptje kan ik deze actie het beste uitvoeren, zonder dat je er met het surfen wat van merkt?
verplaats gewoon de wordpress installatie een map omhoog?quote:
Ik denk dat ik mijn vraag hier beter kan stellen, dan in het Wordpress topic dus vandaar ook maar even hier mijn vraag neerzetten:
Even een vraagje, met betrekking tot redirecten. Wat is de makkelijkste optie volgens jullie? Ik heb voor iemand een website gemaakt en die heb ik zolang gezet op www.xxxx.nl/wordpress . Nu wilt deze klant natuurlijk deze website op zijn handige adres hebben (www.xxxx.nl), maar nu wil ik dit gewoon eenvoudig en snel doen via redirecten.
Met welk scriptje kan ik deze actie het beste uitvoeren, zonder dat je er met het surfen wat van merkt?
quote:
[..]
verplaats gewoon de wordpress installatie een map omhoog?
Gewoon waar de huidige website nu op staat (de gehele wordpress map neem ik aan)? Dat moet genoeg zijn? Of moet ik daarvoor nog iets veranderen in PHP my admin?quote:
[..]
verplaats gewoon de wordpress installatie een map omhoog?
style.css, regel 180:quote:
Dag heren. Ik zou graag een vraag willen stellen, aangezien ik na dagen puzzelen er niet uit kom.
Ik heb een site draaien met Joomla 2.5 en in het ledengedeelte heb ik een extensie toegevoegd genaamd Kunena-forum. In principe werkt alles naar wens, op 1 ding na.
In het reageer-scherm staan namelijk de BBcodes onder elkaar i.p.v. naast elkaar. [ afbeelding ]
Volgens andere forums komt het omdat Kunena een css-instelling pakt van mijn Joomla-site. D.m.v. handmatig css toevoegen zou ik dat moeten overrulen. Alleen heb ik daar te weinig kaas van gegeten.
Ik heb via Chrome (Element inspecteren) gezocht of ik de instelling kan vinden, maar dat is me niet gelukt.
Iemand een idee wat ik moet aanpassen om die knoppen horizontaal te krijgen?
Inloggen kan op de site met gebr.naam testen en wachtwoord test
Alvast mijn dank!
| 1 2 3 | div.clearpad li { clear: both } |
Misschien moet je de installatiedir en/of website url nog aanpassen in het config bestand van wordpress.quote:
[..]
[..]
Gewoon waar de huidige website nu op staat (de gehele wordpress map neem ik aan)? Dat moet genoeg zijn? Of moet ik daarvoor nog iets veranderen in PHP my admin?
Daar staat nuquote:
[..]
style.css, regel 180:
[ code verwijderd ]
| 1 | div.clearpad li {clear: both; margin-left:16px;} |
| 1 | div.clearpad li {clear: both;} |
Of begrijp ik je verkeerd?
quote:
clear:both is de boosdoener. Die moet je weghalen en dan controleren of de rest van je website nog correct is.
Opgelost! En de rest van de site lijkt in orde!
Thnx, KomtTijd!
En welke is dat om exact te zijn? Voordat ik weer een kansloze fout ga makenquote:
[..]
Misschien moet je de installatiedir en/of website url nog aanpassen in het config bestand van wordpress.
,...als je niet over genoeg logisch verstand beschikt om dat zelf uit te vinden, zou ik maar gewoon helemaal van die website afblijven als ik jou was.quote:
[..]
En welke is dat om exact te zijn? Voordat ik weer een kansloze fout ga maken
Hint: er ontploft niets als je een keer ctrl+z moet gebruiken.
Klopt, maar ik vraag het liever eerst goed uit voor ik eraan begin, zodat ik zeker weet dat het in een keer goed gaatquote:
[..]
...als je niet over genoeg logisch verstand beschikt om dat zelf uit te vinden, zou ik maar gewoon helemaal van die website afblijven als ik jou was.
Hint: er ontploft niets als je een keer ctrl+z moet gebruiken.
. Ik bouw ook veel liever gewoon een website gelijk op het goede adres of eerst lokaal .Als je het eerst lokaal doet, dan is er toch geen verschil in het verhuistraject behalve de bron?quote:
[..]
Klopt, maar ik vraag het liever eerst goed uit voor ik eraan begin, zodat ik zeker weet dat het in een keer goed gaat
Dat vroeg ik mezelf dus ook een beetje af, ik laat meestal dus wordpress voorinstalleren op de server en het maakt verder toch niks uit of ik hem nu naar de root verplaats als hij al op de server geïnstalleerd staat op de xxx.nl/wordpress url.quote:
[..]
Als je het eerst lokaal doet, dan is er toch geen verschil in het verhuistraject behalve de bron?
In Wordpress zet je wel de URL van je omgeving, dus als je daar eerst www.wordpress.dev hebt staan moet je dat wel even veranderen als je hem op www.wordpress.com zet. Anders gaan je URL's e.d. niet goed.quote:
[..]
Als je het eerst lokaal doet, dan is er toch geen verschil in het verhuistraject behalve de bron?
Het is heel simpel als je deze stappen volgt:quote:
[..]
Dat vroeg ik mezelf dus ook een beetje af, ik laat meestal dus wordpress voorinstalleren op de server en het maakt verder toch niks uit of ik hem nu naar de root verplaats als hij al op de server geïnstalleerd staat op de xxx.nl/wordpress url.
- Hele Wordpress map downloaden en weer uploaden naar de juiste map. Dit is altijd de root als het om een www.mijndomein.nl adres gaat
- Heb je lokaal of via een andere webhoster de testsite gebouwd? Exporteer dan je database en importeer deze bij je nieuwe webhoster
- Als je bovenstaande actie moet dan, pas dan je wp-config.php bestand aan met de nieuwe database gegevens (database naam, database user, wachtwoord en host)
- Log in op phpMyAdmin zodat je in de wp_options tabel de juiste nieuwe url kan plaatsen
- Query je database zodat alle interne links naar het juiste nieuwe domein verwijzen. Zie dit artikel http://www.mydigitallife.(...)-domain-or-location/
- Log in op je nieuwe website via www.mijndomein.nl/wp-admin
- Ga naar general settings -> algemeen en zet daar ook nog een keer het domein goed
Dat is precies wat ik bedoel. Als je in je lokale omgeving een ander adres gebruikt dan het adres van de live omgeving, dan is er geen verschil in het verhuistraject. Met beide zal je dat dan moeten doen.quote:
[..]
In Wordpress zet je wel de URL van je omgeving, dus als je daar eerst www.wordpress.dev hebt staan moet je dat wel even veranderen als je hem op www.wordpress.com zet. Anders gaan je URL's e.d. niet goed.
quote:
[..]
In Wordpress zet je wel de URL van je omgeving, dus als je daar eerst www.wordpress.dev hebt staan moet je dat wel even veranderen als je hem op www.wordpress.com zet. Anders gaan je URL's e.d. niet goed.
Thanks, met de bovenstaande antwoorden erbij moet het goed gaan komen!quote:
[..]
Het is heel simpel als je deze stappen volgt:
- Hele Wordpress map downloaden en weer uploaden naar de juiste map. Dit is altijd de root als het om een www.mijndomein.nl adres gaat
- Heb je lokaal of via een andere webhoster de testsite gebouwd? Exporteer dan je database en importeer deze bij je nieuwe webhoster
- Als je bovenstaande actie moet dan, pas dan je wp-config.php bestand aan met de nieuwe database gegevens (database naam, database user, wachtwoord en host)
- Log in op phpMyAdmin zodat je in de wp_options tabel de juiste nieuwe url kan plaatsen
- Query je database zodat alle interne links naar het juiste nieuwe domein verwijzen. Zie dit artikel http://www.mydigitallife.(...)-domain-or-location/
- Log in op je nieuwe website via www.mijndomein.nl/wp-admin
- Ga naar general settings -> algemeen en zet daar ook nog een keer het domein goed
Hier is een voorbeeld echter is dit in Wordpress gemaakt http://www.piaggio-bedrijfswagens.nl/dealers/
De site draait op Joomla.
Heeft iemand hier ervaring mee of een handleiding? Heb al gekeken op google maar nog niks gevonden wat erop lijkt.
Dat is gewoon een imagemap. Je zou eventueel de code zo kunnen kopiëren van die website.quote:
Voor een site wil ik een provinciekaart gebruiken van Nederland. Zodra je met de muis op een provincie klikt wil ik dat de dealers van deze provincies te voor schijn komen.
Hier is een voorbeeld echter is dit in Wordpress gemaakt http://www.piaggio-bedrijfswagens.nl/dealers/
De site draait op Joomla.
Heeft iemand hier ervaring mee of een handleiding? Heb al gekeken op google maar nog niks gevonden wat erop lijkt.
Zitten wel fouten in die imagemap. Beter om naar een goede te zoeken. Groningen heeft eilanden en de Noordoostpolder behoord bij Overijssel.quote:
Voor een site wil ik een provinciekaart gebruiken van Nederland. Zodra je met de muis op een provincie klikt wil ik dat de dealers van deze provincies te voor schijn komen.
Hier is een voorbeeld echter is dit in Wordpress gemaakt http://www.piaggio-bedrijfswagens.nl/dealers/
De site draait op Joomla.
Heeft iemand hier ervaring mee of een handleiding? Heb al gekeken op google maar nog niks gevonden wat erop lijkt.
Deze bijvoorbeeld: http://nl.wikipedia.org/w(...)provincies_Nederland
Alleen nu nog kijken hoe ze op kleuren en er tekst bij kan. Moet lukken, op google is genoeg te vinden.
[ Bericht 7% gewijzigd door stoeltafel op 09-10-2013 11:28:58 ]
Zit het even te inspecteren met Chrome en zij hebben dus 1 imagemap en vervolgens als je er op klikt wordt de provincie rood, dit zijn aparte png foto's zie ik.quote:
[..]
Dat is gewoon een imagemap. Je zou eventueel de code zo kunnen kopiëren van die website.
quote:
[..]
... en de Noordoostpolder behoord bij Overijssel.
De Noordoostpolder hoort al sinds 1986 bij Flevoland.
Lees het nog eens en bekijk het plaatje.quote:
[..]
De Noordoostpolder hoort al sinds 1986 bij Flevoland.
Ik gaf juist aan wat er fout was..
Wil nog niet zeggen dat de NOP ook in het servicegebied van de paggio-dealers uit de flevopolder valtquote:
[..]
De Noordoostpolder hoort al sinds 1986 bij Flevoland.
Ik zat al te twijfelen hoe ik het moest interpreteren.quote:
[..]
Lees het nog eens en bekijk het plaatje.
Ik gaf juist aan wat er fout was..
Ga even kijken. Heb nu 13 foto's, 1 landkaart en 12 provincies. Als mensen op de provincie klikken ga ik de hoger style gebruiken en dan koppel ik de dealers aan de provincie. Is nog een aardig klus. Wat is het verschil met mouseover? Blijft de dealer dan wel op de pagina staan? Mouseover werkt toch alleen als de Mouse erop staat?quote:
jup je kunt gewoon hover-style aan de area's hangen, of mouseover events als je het helemaal sjiek wilt maken.
Ben aardig op weg alleen ik moet ook javascript gebruiken om het te activeren.quote:
jup je kunt gewoon hover-style aan de area's hangen, of mouseover events als je het helemaal sjiek wilt maken.
Mommenteel heb ik dit http://www.allmotive.eu/producten/test-pagina en het moet naar dit http://www.piaggio-bedrijfswagens.nl/dealers/
Volgens mij moet ik deze code gebruiken
| 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 | <script type="text/javascript" language="javascript"> jQuery(document).ready(function() { jQuery('body').data('provincies', jQuery('#provincies').html()); jQuery('#provincies .provincie').each(function(){ if(!jQuery(this).hasClass('current')) { jQuery(this).remove(); } }); jQuery('#Map area').hover( function(){ jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0.8, function() { // Animation complete. }); }, function(){ jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0, function() { // Animation complete. }); }); jQuery('#Map area').click( function(e){ e.preventDefault(); jQuery('#provincies').html(jQuery('body').data('provincies')); jQuery('.current').removeClass('current'); jQuery('#image-'+jQuery(this).attr('hover')).addClass('current'); jQuery('#prov-'+jQuery(this).attr('hover')).addClass('current'); jQuery('#provincies .provincie').each(function(){ if(!jQuery(this).hasClass('current')) { jQuery(this).remove(); } }); }); }); </script> |
Pas je op dat je niet te veel voor pure plagiaat gaat?
Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?
http://jsfiddle.net/pascal08/JLz3y/1/
Dit gebeurt er dan:
Dit zou moeten gebeuren:SPOILER
SPOILER
Je kan het langzaam nabootsen door de 1 vast te houden en dan al op tab te drukken.quote:
Ik zit hier met het volgende probleem:
Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?
http://jsfiddle.net/pascal08/JLz3y/1/
Dit gebeurt er dan:Dit zou moeten gebeuren:SPOILER[ afbeelding ]SPOILER[ afbeelding ]
Komt er op neer dat ie dan geen 'on(keyup)' ziet in het input wara je net was, maar in de volgende waar je naartoe bent getabbed en dus de functie dus uitvoert op die input. Je zal dus of een 'keydown' of 'change' event moeten gebruiken.
Waarom zou een gebruiker dat doen? Waarom valideer je niet per veld wat er in staat? Wat maakt t uit als er rommel in komt?
Ah, top, probleem opgelost.quote:
[..]
Je kan het langzaam nabootsen door de 1 vast te houden en dan al op tab te drukken.
Komt er op neer dat ie dan geen 'on(keyup)' ziet in het input wara je net was, maar in de volgende waar je naartoe bent getabbed en dus de functie dus uitvoert op die input. Je zal dus of een 'keydown' of 'change' event moeten gebruiken.
Omdat die validatie niet nodig is. Het is geen registratieformulier.quote:
Maaruh, dit is gevolgbestrijding.
Waarom zou een gebruiker dat doen? Waarom valideer je niet per veld wat er in staat? Wat maakt t uit als er rommel in komt?
Garbage in, garbage out. Ik weet niet over welke data t gaat, maar ik zou t gewoon laten als t is.
Ik wil ingevulde velden herkenbaar maken door de achtergrondkleur te laten veranderen.quote:
Waar maak je je dan druk over? Als mensen met muisclicks eenen invullen, a tab s tab d tab f doen?
Garbage in, garbage out. Ik weet niet over welke data t gaat, maar ik zou t gewoon laten als t is.
Zie: http://wefut.com/en/player-database
Met veel velden maakt dat het wel overzichtelijk inderdaad over welke je hebt ingevuld en welke niet.quote:
[..]
Ik wil ingevulde velden herkenbaar maken door de achtergrondkleur te laten veranderen.
Zie: http://wefut.com/en/player-database
Ik heb het ook eens moeten doen voor een klant die precies dat wilde.
Jep. Het zijn nu wel iets te veel velden, wat het vooral op kleinere schermen een puinhoop maakt. Ik heb nu een klein menuutje gemaakt met labeltjes waaraan je kunt zien of er per tabblad velden zijn ingevuld.quote:
[..]
Met veel velden maakt dat het wel overzichtelijk inderdaad over welke je hebt ingevuld en welke niet.
Ik heb het ook eens moeten doen voor een klant die precies dat wilde.
Maak er dan keydown van, aangezien er 99 van de 100 keer iets wordt ingevuld.quote:
Ik zit hier met het volgende probleem:
Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?
http://jsfiddle.net/pascal08/JLz3y/1/
Dit gebeurt er dan:Dit zou moeten gebeuren:SPOILER[ afbeelding ]SPOILER[ afbeelding ]
Juist niet toch? Eerder 1/10 keer, want vaak wordt er gewoon overheen 'getabbed' en dat geldt dan ook als een keydown. Change lijkt me logischer, want die wordt alleen geactiveerd als er daadwerkelijk iets ingevuld wordt.quote:
[..]
Maak er dan keydown van, aangezien er 99 van de 100 keer iets wordt ingevuld.
Nope, tab rekent ie niet mee als keydown, maar als focus.quote:
[..]
Juist niet toch? Eerder 1/10 keer, want vaak wordt er gewoon overheen 'getabbed' en dat geldt dan ook als een keydown. Change lijkt me logischer, want die wordt alleen geactiveerd als er daadwerkelijk iets ingevuld wordt.
Oh ja, dom.quote:
Kijk zelf: http://jsfiddle.net/JLz3y/2/
Keydown dan maar doen. Maar wacht even. Als ik een random input selecteer met m'n muis en ik vul vervolgens wat in, dan doet 'ie het niet met keydown.
Dat komt omdat je checkt op !== '' ipv >= 1quote:
[..]
Oh ja, dom.
Maar wacht even. Als ik een random input selecteer met m'n muis en ik vul vervolgens wat in, dan doet 'ie het niet met keydown.
heb die van Crutch geupdate en dan pakt hij hem wel meteen als je 1 karakter in vult.
http://jsfiddle.net/JLz3y/3/
Dan heb je weer het probleem dat de achtergrond niet naar wit terugspringt als je de input weer leegmaakt.quote:
[..]
Dat komt omdat je checkt op !== '' ipv >= 1
heb die van Crutch geupdate en dan pakt hij hem wel meteen als je 1 karakter in vult.
http://jsfiddle.net/JLz3y/3/
Zo doet 'ie het wel weer:
http://jsfiddle.net/pascal08/JLz3y/4/
Ik heb hem nog een keer voor je aangepast en nu doet hij het wel.
http://jsfiddle.net/JLz3y/7/
Enigste nadeel van 'change' is dat die pas afgevuurd word zodra de focus van het betreffende veld weg is.quote:
[..]
Dan heb je weer het probleem dat de achtergrond niet naar wit terugspringt als je de input weer leegmaakt.
Zo doet 'ie het wel weer:
http://jsfiddle.net/pascal08/JLz3y/4/
[ Bericht 44% gewijzigd door stefanhaan op 12-10-2013 19:53:27 ]
Of als er enter ingedrukt wordt. Als je nu op een input klikt en een 1 invult en verder gaat, slaat 'ie de eerste addClass over.quote:
nvm ik deed op een object de .length en die is dan altijd 1.
Ik heb hem nog een keer voor je aangepast en nu doet hij het wel.
http://jsfiddle.net/JLz3y/7/
[..]
Enigste nadeel van 'change' is dat die pas afgevuurd word zodra de focus van het betreffende veld weg is.
Met simpele regex check op garbage:
http://jsfiddle.net/pascal08/JLz3y/8/
| 1 2 3 4 5 | <div class="row"> <div class="small-12 medium-4 large-3 large-offset-3 columns box1">Box1</div> <div class="small-12 medium-4 large-3 columns box2">Box2</div> <div class="small-12 medium-4 large-3 columns box3">Box3</div> </div> |
Hoe zorg ik er dan voor dat de large-offset-3 ook alleen bij een large scherm werkt. Nu springt die er al in als ik van small naar medium over ga.SPOILER: Hele codeindex.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foundation test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="small-12 medium-4 large-3 large-offset-3 columns box1">Box1</div>
<div class="small-12 medium-4 large-3 columns box2">Box2</div>
<div class="small-12 medium-4 large-3 columns box3">Box3</div>
</div>
</body>
</html>
style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19@import "compass/reset";
@import "compass";
@import "foundation.scss";
@import "foundation/components/grid-5";
.box1{
height: 100px;
background-color: #f00;
}
.box2{
height: 100px;
background-color: #0f0;
}
.box3{
height: 100px;
background-color: #00f;
}
En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.
Dat is hoe Foundation responsive webdesign uitvoert. Dit is ook niet meer dan een snel in elkaar gezet voorbeeldje om te kijken hoe ik de offset alleen voor de "large" schermen aan de praat krijg.quote:
Probeer je nu dmv voor iedere mogelijke style een classname te maken, weer met inline-styles te gaan werken?
En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.
Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?
quote:
Probeer je nu dmv voor iedere mogelijke style een classname te maken, weer met inline-styles te gaan werken?
En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.
Dit is precies de reden dat ik geen fan ben van grids/frameworks als Twitter Bootstrap. Ik moet er nu mee werken, en ik moet zeggen dat ik een aantal dingen wel heel snel voor elkaar krijg, maar het wordt er een enorme antisemantische brij van classes. Helaas wordt er op het huidige project van me verwacht dat ik me aan Bootstrap houd en dus ook alles opbouw met zulke row- en columns classes. Ik kan mijn collega's niet overtuigen van waarom ik dit geen goede basis vind om je stylesheets op te baseren.quote:
ken het niet, zo te zien ook geen behoefte aan om het te leren kennen.
Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?
Zodra je classes offset-3 of roundall gaan heten enzo, wordt het eng. Stel dat je op een gegeven moment tot de conclusie komt dat een offset van 2 pixels toch mooier is en dat rounded corners niet meer hip zijn, zit je ineens met allemaal .offset-3{ margin: 2} en .roundall{border-radius: none} declaraties.
Het zijn juist allemaal al gedefineerde classes. Een small-offset-0 bestaat niet. Dat is al wat je standaard krijgt als je geen offset class toevoegt.quote:
ken het niet, zo te zien ook geen behoefte aan om het te leren kennen.
Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?
Het idee is dat je je scherm in een grid van 12 banen verdeeld. Als je een div de hele breedte wilt laten nemen geef je het een large-12 mee. Wil je 2 divs naast elkaar geef je ze allebei large-6 enz.
Met de small/medium/large classes kun je zo je site indeling aan laten passen aan je schermgrootte.
Dan wil ik dus dit krijgen:
Die large-offset moet dus pas bij de overgang van medium naar large werken. Maar hij werkt al vanaf small naar medium waardoor je ineens dit krijgt:
Verder zijn al die classes via SASS wel netjes weg te werken in enkele, semantische classnamen maar dit is gewoon even een snel probeer bestandje. Dat hoeft er niet mooi uit te zien en nette classes te hebben. Die moeite bewaar ik wel voor mijn echte sites.
Die large-offset heeft verder niks met pixels te maken. Als ik van de 12 banen mijn div van baan 2 tm 10 wil laten laten lopen geeft ik hem een large-offset-1 mee zodat de eerste baan leeg blijft.quote:
Nouja bij bootstrap is het (voor zover ik het gebruikt heb) nog redelijk beperkt. Je hebt wel classes als big en small maar die zijn nog redelijk obvious.
Zodra je classes offset-3 of roundall gaan heten enzo, wordt het eng. Stel dat je op een gegeven moment tot de conclusie komt dat een offset van 2 pixels toch mooier is en dat rounded corners niet meer hip zijn, zit je ineens met allemaal .offset-3{ margin: 2} en .roundall{border-radius: none} declaraties.
row, span en offset zit volop in bootstrap hoor.quote:
Nouja bij bootstrap is het (voor zover ik het gebruikt heb) nog redelijk beperkt. Je hebt wel classes als big en small maar die zijn nog redelijk obvious.
Zodra je classes offset-3 of roundall gaan heten enzo, wordt het eng. Stel dat je op een gegeven moment tot de conclusie komt dat een offset van 2 pixels toch mooier is en dat rounded corners niet meer hip zijn, zit je ineens met allemaal .offset-3{ margin: 2} en .roundall{border-radius: none} declaraties.
Hier even een stukje van een collega dat ik laatst maar heb weggepoetst en vervangen met 4 regels html:
| 1 |
Dit was nog maar de helft (letterlijk), en fungeerde om drie simpele elementen (links-floatend logo, zoekbalk midden, rechts-floatende knop) te tonen die op mobiel en desktop verschillend zijn.
[ Bericht 51% gewijzigd door picodealion op 17-10-2013 23:06:47 ]
Voor deze pagina moet ik de wrapper aanpassen http://www.dfsk-citytruck.eu/nl/citytransporter/test-2.html
Via CSS heb ik het al een stuk mooier gemaakt, heb de rand erom heen weg gehaald, via HTML de tekst aangepast echter moet het blok nog wat breder. Moet ik dit nou in de HTML of CSS zoeken. Ben aan het kijken in de debuger van Firefox maar kan het niet aanpassen of kijk er over heen. Het gaat dus om twee dingen, de tekst moet naar rechts lopen en bij provincie Overijssel staan 4 dealers echter kan ik niet scrollen. Het rare is als ik de CSS witdht aanpas van iframe dan verandert het blok mee echter de tekst niet.
Dat scrollen kun je fixen door de div met id 'provincies' overflow: auto; te geven. De uitlijning van de tekst kan dmv: text-align: right;quote:
Vraagje,
Voor deze pagina moet ik de wrapper aanpassen http://www.dfsk-citytruck.eu/nl/citytransporter/test-2.html
Via CSS heb ik het al een stuk mooier gemaakt, heb de rand erom heen weg gehaald, via HTML de tekst aangepast echter moet het blok nog wat breder. Moet ik dit nou in de HTML of CSS zoeken. Ben aan het kijken in de debuger van Firefox maar kan het niet aanpassen of kijk er over heen. Het gaat dus om twee dingen, de tekst moet naar rechts lopen en bij provincie Overijssel staan 4 dealers echter kan ik niet scrollen.
De iframe staat ook nog in een div met een beperkte breedte. Maar daar was je natuurlijk al lang achter met de developmenttools van je browser.quote:
Vraagje,
Voor deze pagina moet ik de wrapper aanpassen http://www.dfsk-citytruck.eu/nl/citytransporter/test-2.html
Via CSS heb ik het al een stuk mooier gemaakt, heb de rand erom heen weg gehaald, via HTML de tekst aangepast echter moet het blok nog wat breder. Moet ik dit nou in de HTML of CSS zoeken. Ben aan het kijken in de debuger van Firefox maar kan het niet aanpassen of kijk er over heen. Het gaat dus om twee dingen, de tekst moet naar rechts lopen en bij provincie Overijssel staan 4 dealers echter kan ik niet scrollen. Het rare is als ik de CSS witdht aanpas van iframe dan verandert het blok mee echter de tekst niet.
Ja, dat zie ik in de debuger van Firefox, dat kan ik wel aanpassen maar geen nut. Even kijken waar het zit. Firefox is toch prima hiervoor of prefereer jij Chrome?quote:
[..]
De iframe staat ook nog in een div met een beperkte breedte. Maar daar was je natuurlijk al lang achter met de developmenttools van je browser.
En als je ze beide aanpast zie je dat meteen.
De iframe kan het beste een breedte van 950 hebben. Je moet dan de content en contentpane (class) div's nog even width: auto; meegeven.quote:
Thnx! Ga het direct testen, moet alleen ff kijken waarom de tekst niet door loopt. Normaal zit er twee widgets aan de rechterkant maar die heb ik al uitgezet.
Dit zocht ik, thnx! Is het dan alleen voor deze pagina of verandert het overal op de site?quote:
[..]
De iframe kan het beste een breedte van 950 hebben. Je moet dan de content en contentpane (class) div's nog even width: auto; meegeven.
Ligt eraan waar je die rules neer hebt gezet. Als het in het CSS bestand is (zoals het hoort) dan zou het overal zichtbaar moeten zijn, mits je overal dezelfde class en id referenties gebruikt.quote:
[..]
Dit zocht ik, thnx! Is het dan alleen voor deze pagina of verandert het overal op de site?
| 1 2 | <div id="provincies"> <div class="provincie current" id="prov-1" overflow:auto;> |
<div id="provincies" style="overflow: auto;">
<div class="provincie current" id="prov-1">
Als dit werkt in je CSS de volgende rule toevoegen en de inline style weghalen:
#provincies {
overflow: auto;
}
Het werkt alleen hier http://jsfiddle.net/robdegekste/P9Kgs/11/ en niet hier
Ga jou oplossing nu proberen.
Overflow moet sowieso op auto staan. Op die manier krijg je een scrollbalk te zien als de content niet binnen de ingestelde hoogte past.quote:
Heb het anders gedaan, heb in de CSS overflow: hidden; weg gehaald en nu doet die het wel, relax!
Het werkt alleen hier http://jsfiddle.net/robdegekste/P9Kgs/11/ en niet hier
Ga jou oplossing nu proberen.
Bij Joomla, wrapper staat Instellingen scrollbalken op automatish, lijkt me prima zo.
content en contentpane hebben beide width: auto ? iframe heb je ook aangepast naar breedte van 950?quote:
Verandering door gevoerd maar iets blokkeert de scrollbalken. Jsfiddle geeft het wel goed weer.
Bij Joomla, wrapper staat Instellingen scrollbalken op automatish, lijkt me prima zo.
Content op auto, contentpane staat niet in de style.css en breede is naar 950 gegaan.quote:
[..]
content en contentpane hebben beide width: auto ? iframe heb je ook aangepast naar breedte van 950?
Het werkt! Hoppa, fucking relax fokkers! Nu nog even fine tunen, tekst iets meer naar links zodat het er mooier uit ziet. Gelukkig ziet er site er nog goed uit.
Op je site zie ik het nog niet. Ik zag daar echter wel dat de content div nog geen width: auto; had.quote:
[..]
Content op auto, contentpane staat niet in de style.css en breede is naar 950 gegaan.
Het werkt! Hoppa, fucking relax fokkers! Nu nog even fine tunen, tekst iets meer naar links zodat het er mooier uit ziet. Gelukkig ziet er site er nog goed uit.
quote:
[..]
Op je site zie ik het nog niet. Ik zag daar echter wel dat de content div nog geen width: auto; had.
| 1 2 3 4 5 6 7 8 9 10 | #content { width:609px; float:left; overflow:auto; color:#545454; font-size:12px; position:relative; z-index:1; margin-top:45px; } |
Zo heb ik het aangepast en geupload. Verder heb ik de breedte 950 gemaakt. Het liefste heb ik natuurlijk dat de hele scroll balk naar rechts weg gaat, naar beneden snap ik wel. Even kijken of dit mogelijk is.
Zo moet hij, dan gaat die horizontale balk weg:quote:
[..]
[ code verwijderd ]
Zo heb ik het aangepast en geupload. Verder heb ik de breedte 950 gemaakt. Het liefste heb ik natuurlijk dat de hele scroll balk naar rechts weg gaat, naar beneden snap ik wel. Even kijken of dit mogelijk is.
#content {
width: auto;
float:left;
overflow:auto;
color:#545454;
font-size:12px;
position:relative;
z-index:1;
margin-top:45px;
}
Is het mogelijk de witdh aan het passen voor één pagina. Zie namelijk nu dat de widget Twitter/Facebook overal naar beneden is gegaan. Even kijken wat er gebeurt als ik de breedte iets aanpas.quote:
[..]
Zo moet hij, dan gaat die horizontale balk weg:
#content {
width: auto;
float:left;
overflow:auto;
color:#545454;
font-size:12px;
position:relative;
z-index:1;
margin-top:45px;
}
No prob. Voordeel wat je nu hebt is dat mocht je ooit de iframe groter maken dat de content automatisch de breedte overneemt en je die elementen niet aan hoeft te passen.quote:
Gelukt, ziet er netjes uit! Super bedankt:)
Dat kan, moet je op die pagina even een losse class toevoegen en daarvoor in je CSS de rules defineren die alleen op die pagina gebruikt moeten wordenquote:
[..]
Is het mogelijk de witdh aan het passen voor één pagina. Zie namelijk nu dat de widget Twitter/Facebook overal naar beneden is gegaan. Even kijken wat er gebeurt als ik de breedte iets aanpas.
Je kunt meerdere classes aan een element hangen, dit gescheiden met spaties. Je kunt dan eventueel styles overrulen door achter de rule !important te zetten. Als je in dit geval een extra class in je CSS definieert met alleen de rule die voor een enkele pagina moet gelden dan kun je die toevoegen aan de lijst met classes voor die pagina. Zo kun je voor de ene pagina width: auto; gebruiken en op de andere bijv. width: 50%quote:
Uhhhh losse class? Tutorial hiervoor? Begin net met CSS. Zal even kijken of google me kan helpen.
Is ook niet nodig, gewoon zelfde css bestand. Alleen ff extra class eraan toevoegen.quote:
Duidelijk, zal is kijken hoe het moet. Denk alleen dat het lastig is. Normaal zou dit prima kunnen in een artikel, dan voeg je het bovenaan in via de HTML/CSS echter is deze pagina een iframe waardoor ik volgens mij geen losse CSS kan toevoegen of toch wel?
bijvoorbeeld:
.container_auto_width {
width: auto !important;
}
.container {
width: 50%;
etc...
}
Standaard gebruik je dan:
<div id="container" class="container">
In het geval hij de gehele breedte moet benutten:
<div id="container" class="container container_auto_width">
Niet goed?quote:
ja. Behalve dat je crossbrowser gezeik krijgt en het niet onderhoudbaar is, omdat men hier geen flauw idee heeft wat ze doen.quote:
Als het werkt is het toch prima, ga het direct even testen.
Wat zou jij dan adviseren? Kijk, normaal pak je deze oplossing http://www.webmasterstart.nl/css/css-per-pagina.html dat snap ik alleen ik ben nogal beperkt door wrapper/iframe.quote:
[..]
ja. Behalve dat je crossbrowser gezeik krijgt en het niet onderhoudbaar is, omdat men hier geen flauw idee heeft wat ze doen.
Als jij het zegt....quote:
[..]
omdat men hier geen flauw idee heeft wat ze doen.
Als we je wat zouden moeten adviseren zou het zijn: Begin bij het begin, ga tutorials doen en maak ZELF een eenvoudige site om CSS e.d. onder de knie te krijgen.quote:
Maar waarschijnlijk wil je alleen even deze website in elkaar modderen en er dan zo weinig mogelijk meer mee doen, dus dan is het nogal een hoop tijd die je erin zou moeten steken om het echt goed te doen. En kun je misschien beter maar gewoon wat aanmodderen met een paar tips van hier.
Beter niet aangezien Catch22- vind dat men hier geen flauw idee heeft wat ze doen. Zo leert hij het natuurlijk helemaal fout aan.quote:
[..]
En kun je misschien beter maar gewoon wat aanmodderen met een paar tips van hier.
Dit lijkt me juist leuk en erg handig om van alles uit te testen. Zal deze week een site opzet om dingen uit te testen, makkelijk en leerzaam. En moet wat vaker hier mee kijken, genoeg te leren.quote:
[..]
Als we je wat zouden moeten adviseren zou het zijn: Begin bij het begin, ga tutorials doen en maak ZELF een eenvoudige site om CSS e.d. onder de knie te krijgen.
Maar waarschijnlijk wil je alleen even deze website in elkaar modderen en er dan zo weinig mogelijk meer mee doen, dus dan is het nogal een hoop tijd die je erin zou moeten steken om het echt goed te doen. En kun je misschien beter maar gewoon wat aanmodderen met een paar tips van hier.
Dat is vervelend als je iets wilt leren, maar als je alleen maar even éénmalig iets in elkaar wilt modderen, is het eigenlijk best wel prima zo. Het echt goed (laten) doen kost of heel veel tijd, of heel veel geld, en dat is vaak beiden niet voor handen.quote:
[..]
Beter niet aangezien Catch22- vind dat men hier geen flauw idee heeft wat ze doen. Zo leert hij het natuurlijk helemaal fout aan.
30 days to learn HTML & CSSquote:
[..]
Dit lijkt me juist leuk en erg handig om van alles uit te testen. Zal deze week een site opzet om dingen uit te testen, makkelijk en leerzaam. En moet wat vaker hier mee kijken, genoeg te leren.
Ik zou in ieder geval beginnen met het eruitslopen van de iframe, zijn pagina kan imo best zonder.quote:
[..]
Dat is vervelend als je iets wilt leren, maar als je alleen maar even éénmalig iets in elkaar wilt modderen, is het eigenlijk best wel prima zo. Het echt goed (laten) doen kost of heel veel tijd, of heel veel geld, en dat is vaak beiden niet voor handen.
In dat geval zou ik inderdaad absoluut aanraden om even van de grond af te beginnen. Niet verwachten dat je binnen een week een website als dit uit je mouw schudt, maar je moet gewoon de basisprincipes leren. Wat je nu met die website doet zijn "quick and dirty" fixes, maar absoluut geen good practices.quote:
[..]
Dit lijkt me juist leuk en erg handig om van alles uit te testen. Zal deze week een site opzet om dingen uit te testen, makkelijk en leerzaam. En moet wat vaker hier mee kijken, genoeg te leren.
Thnx, vanavond is doorlezen.quote:
[..]
30 days to learn HTML & CSS
Ja snap ik, het liefste had ik het gemaakt in HTML/CSS/jQuery maar ik was hier al zo lang bezig dat het nu even deze oplossing.quote:
[..]
In dat geval zou ik inderdaad absoluut aanraden om even van de grond af te beginnen. Niet verwachten dat je binnen een week een website als dit uit je mouw schudt, maar je moet gewoon de basisprincipes leren. Wat je nu met die website doet zijn "quick and dirty" fixes, maar absoluut geen good practices.
Met lezen ben je snel klaar, heb zijn een serie video tutorialsquote:
Het is gelukt!quote:
Als je een betere methode weet hoor ik het graag.
| 1 2 3 4 5 6 7 8 9 10 | #content { width:609px; float:left; overflow:hidden; color:#545454; font-size:12px; position:relative; z-index:1; margin-top:45px; } |
Heb overflow op hidden gezet ipv auto. Nu krijg ik alleen een scollbalk aan de zijkant bij provincie Overijssel, de rest niet. Het is misschien niet heel netjes maar het werkt perfect. Bedankt voor alle hulp. Vanavond huiswerk
Waarom doe je vervolgens margin-top?
Waarom geef je hem een z-index van 1?
Nu ben ik wel benieuwd naar die "4 regels html".quote:Op woensdag 16 oktober 2013 14:05 schreef picodealion het volgende:
[..]
row, span en offset zit volop in bootstrap hoor.
Hier even een stukje van een collega dat ik laatst maar heb weggepoetst en vervangen met 4 regels html:
[ code verwijderd ]
Dit was nog maar de helft (letterlijk), en fungeerde om drie simpele elementen (links-floatend logo, zoekbalk midden, rechts-floatende knop) te tonen die op mobiel en desktop verschillend zijn.
quote:
[..]
Nu ben ik wel benieuwd naar die "4 regels html".
| 1 2 3 4 | <div class="container-fluid"><div class="row-fluid visible-desktop"><div class="span3"><a class="brand pull-left" href="${createLink(uri:'/')}"><i class="companyLogoNav"></i></a></div><div class="span6"><form method="get" action=""><div class="row-fluid" ng-controller="SearchHeaderCtrl" ng-init="term = '${ searchParams?.term }'"><input type="text" id="term" name="term" ng-model="term" placeholder="<i18n:message code="header.search.input.placeholder" />" class="search-query validateRequired input-medium span8"><button type="submit" id="searchButton" class="btn btn-primarycolor btn-medium" ng-click="searchTerm($event)"><i18n:message code="header.search.button" /></button><div class="btn-group"><tiles:btnBewaarZoekopdracht cssClass="btn-medium" /></div></div></form></div><div class="span3"><div class="row-fluid"><div class="text-left" ng-controller="LoginCtrl" ng-init='url="${createLink(controller:'login', action:'angularLogin', params:[buttonclass:'btn-medium'])}";reload();'><div compile="html"></div></div> </div> </div> </div> |
Goed, dat was overdreven, maar het is wel een goed voorbeeld waarom ik niet zo'n fan ben van Bootstrap en soortgelijke grid frameworks. Het lokt uit tot 'luie' onsemantische HTML imo.quote:
[..]
Nu ben ik wel benieuwd naar die "4 regels html".
[ Bericht 1% gewijzigd door picodealion op 17-10-2013 21:45:13 ]
Of naja, 8 regels als je de sluittags meerekent.
Magic numbers, een van de allerergste dingen die er zijnquote:
Waarom doe je position:relative?
Waarom doe je vervolgens margin-top?
Waarom geef je hem een z-index van 1?
Naast van die jQuery-ellende met 40 methods aan elkaar gechained, zonder caching van nodes en dergelijke. Totaal onleesbaar en niet te onderhouden.| 1 | $('.list').children('li').filter(':not('.active')).first().addClass('active').on('click', function(){ setTimeout(function(){ $('.list').children('li').filter(':not('.active')).last().removeClass('.active');},129)}); |
Ofzo,al tijden niet met jQuery gewerkt. En dat dan 800 regels lang in een init-method
Briljantquote:
Ik heb leren programmeren met Bootstrap, jQuery en CodeIgniter. Héél onlogisch en achteraf gezien ook heel inefficiënt, want ik ging de frameworks pas echt goed begrijpen toen ik de ruwe talen beter leerde kennen.quote:
[..]
Goed, dat was overdreven, maar het is wel een goed voorbeeld waarom ik niet zo'n fan ben van Bootstrap en soortgelijke grid frameworks. Het lokt uit tot 'luie' onsemantische HTML imo.
Grid frameworks kunnen heel handig zijn, maar je bent altijd gebonden aan die 12 kolommen en dat kan heel onpraktisch zijn. Frameworks als Bootstrap lokken naar mijn mening niet alleen uit tot onsemantische HTML, maar ook tot eentonigheid van het web. Sinds ik de 'look and feel' van Bootstrap ging koppelen aan Bootstrap ontdekte ik hoeveel websites eigenlijk gewoon de standaard layout gebruiken. Erg jammer, want zo maak je website niet bepaald uniek.
Ik ontdekte pas geleden trouwens SASS en dat was voor mij een welkome aanvulling. Vooral de nested CSS is eigenlijk iets wat ik graag als standaard zou willen zien in CSS.
[ Bericht 26% gewijzigd door pascal08 op 18-10-2013 00:14:54 ]
OP's worden vaak snel overgeslagen, dat blijf je altijd wel houden.quote:
Er staat al eeuwen een link naar de artikelen over float en position en dat leest ook niemand...
Toch krijg ik steeds positieve reacties als ik ze post voor iemand dus blijkbaar zijn er wel mensen die ze handig vinden. Zoveel kwaad lijkt het me dus niet kunnen om zo'n stukje toe te voegen.
Heb je zin om HTML, CSS of jQuery leren, dan zijn deze video tutorials een goede plek om te beginnen
30 Days to Learn HTML & CSS
30 Days to Learn jQuery
Eens maar jQuery is mogelijk wel makkelijker om als basis te leren. Maar als je goede Javaccript tutorials hebt om bij te voegen is dat alleen maar beter natuurlijk.quote:
En begin met Javascript ipv jQuery. Basiskennis javascript voegt heel veel toe.
Dit. Tot voor 2 jaar geleden alleen met libraries gewerkt en toen langzaam aan begonnen met dingen zonder library op te lossen. Gigantisch veel van geleerd.quote:
En begin met Javascript ipv jQuery. Basiskennis javascript voegt heel veel toe.
Ook hier geldt dat ik niets tegen jQuery en andere libraries heb (behalve dan dat het in veel gevallen wordt ingezet waar het niet nodig is), het komt er natuurlijk uiteindelijk met name op neer wat je met zo'n library doet. Als je jQuery gebruikt, maar ondertussen wel alle logica mooi opsplitst, dingen generiek op zet e.d. is het probleem al een stuk minder groot. Veel van die plugins en tutorials zijn echter om te huilen
Maar zou je javascript net zo makkelijk opgepakt hebben zonder eerst via frameworks te werken die veel dingen al voor je versimpelen.quote:
Dit. Tot voor 2 jaar geleden alleen met libraries gewerkt en toen langzaam aan begonnen met dingen zonder library op te lossen. Gigantisch veel van geleerd.
Dat vind ik wel het voordeel van die tutorials die ik poste, Die zijn gemaakt door iemand die ook echt verstand heeft van de onderliggende principes van goed gestructureerde code.quote:Als je jQuery gebruikt, maar ondertussen wel alle logica mooi opsplitst, dingen generiek op zet e.d. is het probleem al een stuk minder groot. Veel van die plugins en tutorials zijn echter om te huilen
De website is geschreven door een website bouwer, best een grote partij.quote:
Waarom doe je position:relative?
Waarom doe je vervolgens margin-top?
Waarom geef je hem een z-index van 1?
prutsers dusquote:
[..]
De website is geschreven door een website bouwer, best een grote partij.
Of degene met een 'scherp tarief'. Dat soort dat eigenlijk alles wel weet, maar geen tijd heeft om het goed te doen..quote:
Ik krijg ze ook wel es onder ogen, dat soort gedrochten.
Stel ik heb een blok met 'tabs' en wil in deze tabs 'filmpjes' zetten. Pas op het moment dat de 'tab' geactiveerd wordt (en dus de content zichtbaar) wil ik pas dat het filmpje geladen wordt.
Dit kan natuurlijk met ajax, maar wil liefst zonder ajax dit voor elkaar krijgen
Waarom?quote:Dit kan natuurlijk met ajax, maar wil liefst zonder ajax dit voor elkaar krijgen
Je zou zelfs een stap verder kunnen gaan en de gebruiker gewoon zelf laten kiezen wanneer hij een filmpje wil afspelen, om vervolgens pas op dat moment de video daadwerkelijk te laden.quote:
Idd gewoon het event waarin van tab gewisseld wordt gebruiken om de video af te spelen. Wat is het probleem?
Ik laat ook altijd het motorblok thuis als ik ga autorijden. Veel leuker om Flintstone style zelf aan te trappen.quote:
Geen idee, maar wil eerst kijken of dat mogelijk is (gebruik nu namelijk geen jquery of andere scripts voor de site)
Ik zal vanavond een schetsje maken van wat ik bedoel, is in mijn geval gemakkelijkerquote:
[..]
Je zou zelfs een stap verder kunnen gaan en de gebruiker gewoon zelf laten kiezen wanneer hij een filmpje wil afspelen, om vervolgens pas op dat moment de video daadwerkelijk te laden.
moet nu verplicht met de vrouw naar de sauna.... ... ..