DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
[html, css, js] Voor Dummies
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/
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/
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
dit shirt vorige week besteld.
http://allmotive.eu/offerte-aanvragen
Bij de onderste vraag zijn 6 opties te kiezen. Is het mogelijk hiervan 2 rijen van 3 te maken?
Heb al zitten kijken met float left / right maar dit werkt niet goed.
Bij de onderste vraag zijn 6 opties te kiezen. Is het mogelijk hiervan 2 rijen van 3 te maken?
Heb al zitten kijken met float left / right maar dit werkt niet goed.
wrapper om elke checkbox en label, 50% breedte geven (of de linker 50% en de rechter 45% + 4% margin-left) en links floaten 
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Nog steeds dat form waarvan je de HTML niet kunt wijzigen?quote:Op vrijdag 8 februari 2013 10:29 schreef stoeltafel het volgende:
http://allmotive.eu/offerte-aanvragen
Bij de onderste vraag zijn 6 opties te kiezen. Is het mogelijk hiervan 2 rijen van 3 te maken?
Heb al zitten kijken met float left / right maar dit werkt niet goed.
misschien dat input:nth-child(odd) {clear: left;} werkt? (en die andere clear:left weghalen dus)
Dit form werkt wel prima maar het is voor een nieuw formulier.
Ga weer even verder prutsen
Thnx Catch22 / KomtTijd
Ga weer even verder prutsen
Thnx Catch22 / KomtTijd
Als je bij de HTML kan, dan de oplossing van Catch22 gebruiken. Al zou ik gewoon de label zelf als wrapper gebruiken.
Vraagje over het aanpassen van CSS buttons.
http://www.allmotive.eu/producten/test-pagina
De button rechts heet pdf-button.png
Nu wil ik de button per rij aanpassen in hoogte is dit mogelijk?
Kan de button wel aanpassen in stylesheet.css alleen dan verandert die voor elke pagina.
Heb gekeken naar height maar dat lost niks op.
http://www.allmotive.eu/producten/test-pagina
De button rechts heet pdf-button.png
Nu wil ik de button per rij aanpassen in hoogte is dit mogelijk?
Kan de button wel aanpassen in stylesheet.css alleen dan verandert die voor elke pagina.
Heb gekeken naar height maar dat lost niks op.
Ja, dat kan. Noem de class per button anders.quote:
Vraagje over het aanpassen van CSS buttons.
http://www.allmotive.eu/producten/test-pagina
De button rechts heet pdf-button.png
Nu wil ik de button per rij aanpassen in hoogte is dit mogelijk?
Kan de button wel aanpassen in stylesheet.css alleen dan verandert die voor elke pagina.
Heb gekeken naar height maar dat lost niks op.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Heb het nu zo staan
| 1 2 | <td style="width: 250px;"> <p> <a class="pdf" href="images/pdf/DFSK/1%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Epower%201.pdf">download de pdf</a></p> |
De class kun je toch aanpassen?quote:
Heb het nu zo staan
[ code verwijderd ]
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Ja.
Class verwijst naar pdf en dit is pdf-button.png
Maar ik kan het dus toch per regel aanpassen? Begin net met CSS.
Class verwijst naar pdf en dit is pdf-button.png
Maar ik kan het dus toch per regel aanpassen? Begin net met CSS.
Als de hoogte echt per button uniek moet zijn (afhankelijk van content), zou ik adviseren een inline-style te gebruiken.
Als je bijv. twee mogelijke hoogtes hebt maak je gewoon twee classes aan die je aan de button meegeeft (high of low). Of je kiest bijvoorbeeld een standaard hoogte, en maakt alleen een class high voor de buttons die hoger moeten zijn, waarin je de height overruled.
Als je bijv. twee mogelijke hoogtes hebt maak je gewoon twee classes aan die je aan de button meegeeft (high of low). Of je kiest bijvoorbeeld een standaard hoogte, en maakt alleen een class high voor de buttons die hoger moeten zijn, waarin je de height overruled.
Tja moet, het punt is dat het er nu slordig uit ziet of vind je van niet?
Check de regel DFSK Pick Up E-Power en dan de button download de pdf, die is uit verhouding.
Ga even zoeken hoe ik inline-style kan toepassen.
[ Bericht 33% gewijzigd door stoeltafel op 12-02-2013 11:41:45 ]
Check de regel DFSK Pick Up E-Power en dan de button download de pdf, die is uit verhouding.
Ga even zoeken hoe ik inline-style kan toepassen.
[ Bericht 33% gewijzigd door stoeltafel op 12-02-2013 11:41:45 ]
Heb de pagina klaar http://allmotive.eu/producten/test-pagina
Het gaat nu om milimeterwerk, kan de tekst wel gecentreerd staan van de button? Dat zou natuurlijkste het mooiste zijn.
Het gaat nu om milimeterwerk, kan de tekst wel gecentreerd staan van de button? Dat zou natuurlijkste het mooiste zijn.
Meer info (informatie vind ik beter maar is wat langer)quote:
[..]
Te slecht? Iedereen moet het begrijpen he
Of weet jij een betere tekst?
quote:
[..]
Te slecht? Iedereen moet het begrijpen he
Of weet jij een betere tekst?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Beter ja, aangepast.quote:
[..]
Meer info (informatie vind ik beter maar is wat langer)
Tijdje geleden heb ik een enquête laten invullen voor mijn bedrijf. Ik heb daar dingen mee gemaakt, dat geloof je niet. Vandaar mijn wantrouwen maar het is nu aangepast.quote:
Waarom niet van de hele balk een knop maken? Dan klik je gewoon op de bus die je hebben wil.quote:
[..]
Te slecht? Iedereen moet het begrijpen he
Of weet jij een betere tekst?
"Klik hier" is behalve weinig informatief ook niet erg toegankelijk. Daar help je zowel Google als blinde bezoekers niet mee. Ik zou voor een wat beschrijvendere linktekst gaan
quote:Op donderdag 7 februari 2013 21:37 schreef Scorpie het volgende:
[ afbeelding ] dit shirt vorige week besteld.
Hi, wellicht kan iemand me een stapje verder helpen. Ik probeer een 'Jump to' menu zoals hier: https://dev.twitter.com/docs/api/1.1 te coden.
Ben nu met een beetje rommelen met dit gekomen: http://jsfiddle.net/vWX2T/14/ Maar dat werkt bijvoorbeeld nog niet als ik 'click' door 'hover' vervang.
Excuus voor de js scribble (redelijk rommelig)
Iemand een ideetje, wat zie ik over het hoofd.
Mijn kennis van JS is bijna 0.
Ben nu met een beetje rommelen met dit gekomen: http://jsfiddle.net/vWX2T/14/ Maar dat werkt bijvoorbeeld nog niet als ik 'click' door 'hover' vervang.
Excuus voor de js scribble (redelijk rommelig)
Iemand een ideetje, wat zie ik over het hoofd.
Mijn kennis van JS is bijna 0.
Ben ik weer.
Ben nu aan het werk http://htmledit.squarefree.com/ echt super relax. Nu zie je tenminste realtime wat er gebeurt.
In de HTML Editor oogt het wel netjes naast elkaar maar hoe krijg ik de bovenste regel nou precies naast de button?
Ben nu aan het werk http://htmledit.squarefree.com/ echt super relax. Nu zie je tenminste realtime wat er gebeurt.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table> <tbody> <tr> <td> <img style="vertical-align: middle;" alt="1 DFSK Citytruck Pick up K01" src="images/pdf/DFSK/1%20DFSK%20Citytruck%20Pick%20up%20K01.jpg" height="100" width="175" /></td> <td> <p>DFSK Pick Up E-Power</p> <p>DFSK Pick Up E-Power</p> </td> <td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier! </a> <p><a class="pdf" href="images/pdf/DFSK/1%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Epower%201.pdf">Klik hier!</a></p> </td> </tr> </tbody> </table> |
In de HTML Editor oogt het wel netjes naast elkaar maar hoe krijg ik de bovenste regel nou precies naast de button?
Dat heb ik gedaan omdat er straks 4 rijen van ongeveer 6 items komen te staan.
K werk vanuit Joomla en daar is een Editor waar je in kan werken. Tabellen leek mij een makkelijke oplossing om alles netjes onder elkaar te krijgen. Heb jij een betere oplossing?
http://allmotive.eu/voertuigen/specificaties
Zo komt het eruit te zien alleen dit is nog niet mooi uitgelijnd.
Ben weer iets verder, dit knoppen staan netjes onder en naast elkaar. Nu nog de foto er netjes voor alleen dit gelijk het grootste probleem.
[ Bericht 28% gewijzigd door stoeltafel op 13-02-2013 11:09:39 ]
K werk vanuit Joomla en daar is een Editor waar je in kan werken. Tabellen leek mij een makkelijke oplossing om alles netjes onder elkaar te krijgen. Heb jij een betere oplossing?
http://allmotive.eu/voertuigen/specificaties
Zo komt het eruit te zien alleen dit is nog niet mooi uitgelijnd.
Ben weer iets verder, dit knoppen staan netjes onder en naast elkaar. Nu nog de foto er netjes voor alleen dit gelijk het grootste probleem.
| 1 2 3 4 | <table><tbody> <tr><td>DFSK Pick Up E-Power</td><td><td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a></td></tr> <tr><td>DFSK Pick Up Groengas</td><td><td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a></td></tr> </tbody></table> |
[ Bericht 28% gewijzigd door stoeltafel op 13-02-2013 11:09:39 ]
Holy shit, Opera dumpt Presto en stapt over op Webkit.
Op korte termijn wel relaxed natuurlijk, maar op lange termijn wel zorgelijk dat het web weer een monopoliespeler lijkt te hebben
Op korte termijn wel relaxed natuurlijk, maar op lange termijn wel zorgelijk dat het web weer een monopoliespeler lijkt te hebben
ja. Alleen zitten hier iets meer bedrijven achter dan in de tijd met IE en volgt Webkit de standaarden vrij goed. Ik ben er blij mee.
Iedereen dezelfde renderengine en je onderscheiden met features/UI
Iedereen dezelfde renderengine en je onderscheiden met features/UI
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Een WebKit-monopolie is niet zo erg als een Trident-monopolie, maar een monopolie blijft hoe dan ook niet wenselijk vind ik. Het platformonafhankelijke karakter van het web is juist een van z'n beste eigenschappen en dat komt wel in gevaar op deze manier.
dat denk ik niet, want er zijn teveel bedrijven betrokken bij de development met goede connecties bij het w3c, dus ik ben er niet bang voorquote:Op woensdag 13 februari 2013 11:45 schreef Tijn het volgende:
Een WebKit-monopolie is niet zo erg als een Trident-monopolie, maar een monopolie blijft hoe dan ook niet wenselijk vind ik. Het platformonafhankelijke karakter van het web is juist een van z'n beste eigenschappen en dat komt wel in gevaar op deze manier.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Was dat maar zo... Webkit heeft er nogal een handje van om te veel experimentele features in te bouwen (dus lang voor het ook maar in de buurt komt van een standaard). Met als resultaat, dat steeds meer websites 'webkit only' worden. Waarschijnlijk ook een reden waarom Opera de keuze voor Webkit heeft gemaakt en waarom Gecko steeds meer Webkit-features gaat ondersteunen.quote:Op woensdag 13 februari 2013 11:43 schreef Catch22- het volgende:
en volgt Webkit de standaarden vrij goed.
Op zich zal het marktaandeel van ±1% van Opera/Presto nu niet het verschil maken.
dat dus.
Presto is toch ook de renderengine die dreamweaver gebruikt? Die zullen dan ook wel op Webkit overgaan.quote:Op woensdag 13 februari 2013 12:30 schreef QM84 het volgende:
[..]
Was dat maar zo... Webkit heeft er nogal een handje van om te veel experimentele features in te bouwen (dus lang voor het ook maar in de buurt komt van een standaard). Met als resultaat, dat steeds meer websites 'webkit only' worden. Waarschijnlijk ook een reden waarom Opera de keuze voor Webkit heeft gemaakt en waarom Gecko steeds meer Webkit-features gaat ondersteunen.
Op zich zal het marktaandeel van ±1% van Opera/Presto nu niet het verschil maken.
Niet dat ik fan was van Opera, maar het is wel jammer dat er dus een browser verdwijnt en een zoveelste chromium-smaakje bijkomt.
En experimentele features zijn niet zo'n probleem, die hoeven de standaard niet in de weg te zitten. Ook Mozilla en Microsoft implementeren experimentele features. Soms komen die overeen met webkit-features, soms niet. En andersom. Uiteindelijk kiest W3C een recomendation en dan nemen de andere browsers dat in de regel over. Op die manier blijft de ontwikkeling erin.
Het nadeel met die experimentele features is alleen, dat veel webbouwers ze in (productie)sites gebruiken, zonder fatsoenlijke fallback te gebruiken (ofwel is die er nog niet, ofwel houden ze er geen rekening mee). Zie bvb ook dit artikel: http://www.pcmag.com/article2/0,2817,2397158,00.asp , al gaat deze specifiek over Chome en niet Webkit in zijn geheel.quote:Op woensdag 13 februari 2013 12:39 schreef KomtTijd... het volgende:
En experimentele features zijn niet zo'n probleem, die hoeven de standaard niet in de weg te zitten.
Ik ben overigens wel groot Opera-fan
dus ik wacht de veranderingen in spanning af. Hopelijk komt het de browser als totaalpakket ten goede.Overigens wordt in Dreamweaver sinds CS4 Webkit gebruikt als engine.
[ Bericht 3% gewijzigd door QM84 op 13-02-2013 12:50:14 ]
dat dus.
Voor gebruikers van Opera is deze zet ongetwijfeld heel positief. Presto kon al jaren de ontwikkelingen eigenlijk niet meer bijbenen, dus dat Opera nu op een moderner framework met een modernere render engine wordt uigevoerd is alleen maar goed nieuws.quote:
[..]
Ik ben overigens wel groot Opera-fan
Op korter termijn is het voor web developers ook goed nieuws. Minder engines om rekening mee te houden is immers minder hoofdpijn.
Het probleem is mogelijk de lange termijn. Het zou jammer zijn als het web uiteindelijk zo transformeert dat het alleen met WebKit nog goed werkt.
Gelukkig is Webkit in ieder geval open-source, en is bovendien de drijvende kracht erachter er alleszins bij gebaat de vooruitgang erin te houden. In tegenstelling tot concurrent MS waar vooruitgang alleen maar betekent dat je meer code moet schrijven voor het zelfde geld.
Wat moet je doen als de site prime werkt in Chrome alleen in Firefox / IE zie de uitlijning er anders uit.
[ Bericht 94% gewijzigd door stoeltafel op 13-02-2013 16:36:55 ]
[ Bericht 94% gewijzigd door stoeltafel op 13-02-2013 16:36:55 ]
Hallo, CSS-kneus hier.
Hoe zorg ik ervoor dat de 'Meer informatie' altijd op dezelfde positie in zo'n blok staat? Dus altijd onderaan uitgelijnd, ongeacht de lengte van de tekst.
Hoe zorg ik ervoor dat de 'Meer informatie' altijd op dezelfde positie in zo'n blok staat? Dus altijd onderaan uitgelijnd, ongeacht de lengte van de tekst.
Halloquote:Op woensdag 13 februari 2013 19:13 schreef InTrePidIvity het volgende:
Hallo, CSS-kneus hier.
Hoe zorg ik ervoor dat de 'Meer informatie' altijd op dezelfde positie in zo'n blok staat? Dus altijd onderaan uitgelijnd, ongeacht de lengte van de tekst.
[ afbeelding ]
http://jsfiddle.net/Ka4r4/2/
container relative positioneren en daarbij het blokje met de CTA absolute positioneren.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
De uitlijning fixen in Firefox en IE.quote:
Wat moet je doen als de site prime werkt in Chrome alleen in Firefox / IE zie de uitlijning er anders uit.
Niet, het is tenslotte geen 1998 meer toen we nog fixed height blokken gebruikten.quote:
Hallo, CSS-kneus hier.
Hoe zorg ik ervoor dat de 'Meer informatie' altijd op dezelfde positie in zo'n blok staat? Dus altijd onderaan uitgelijnd, ongeacht de lengte van de tekst.
[ afbeelding ]
Nee.
quote:
Daar kan ik wat mee, merciquote:
[..]
Hallo
http://jsfiddle.net/Ka4r4/2/
container relative positioneren en daarbij het blokje met de CTA absolute positioneren.
Hiermee iets minder. Toch bedankt voor de moeite.quote:
[..]
Niet, het is tenslotte geen 1998 meer toen we nog fixed height blokken gebruikten.
Ik heb een vraag over de SIGE (image viewer) plugin voor joomla.
Installeren en het instellen van de plugin gaan goed. Het is overigens ook de enigste plugin die ik draai.
Het probleem wat ik heb is dat de plugin het niet doet in mijn template.
Als ik een standaard joomla template zoals Beez instel dan doet hij het zonder problemen.
Mijn site bestaat uit eenvoudige html/css, zonder extra's en gekoppeld aan joomla.
Links is dus mijn template en rechts een standaard joomla template:
Zodra ik van een standaard joomla template terugstap naar mijn eigen template kapt hij ermee.
Bij mij leest hij de CSS niet en ook de JS bestanden vindt hij niet. Zodra ik op een thumbnail klik wordt de afbeelding gewoon in hetzelfde venster geopened ipv dat een 'animatie' wordt afgespeeld.
Via google heb ik een uitleg gevonden over hoe dergelijke conflicten op te lossen.
In Chrome en Firebug heb ik geen errors gevonden (?) Stap 2 van die site gaat al over het uitzetten van JS compression in mijn template, maar die instelling heb ik niet (de joomla templates hebben die overigens ook niet)
Verder heb ik ook het volgende gevonden om een conflict op te lossen:
Mijn vragen die ik heb zijn:
1. Heb ik een gigantische error in firebug over het hoofd gezien die er direct voor zorgt dat die plugin het niet doet?
2. Over de quote in deze post: Moet ik gewoon in de JS code "jQuery" vervangen door "$" en de "();" bij noConflict weghalen en dat is het dan?
3. Zit ik überhaupt wel in de goede richting met mijn JS conflict vermoeden?
Versies die ik gebruik:
Joomla! 2.5.9
Firefox v.18
SIGE plugin voor joomla 2.5
De site gaf geen errors aan in de validators.
Site staat hier: http://...
toevoeging:
opgelost!
[ Bericht 3% gewijzigd door karton2 op 14-02-2013 14:14:26 ]
Installeren en het instellen van de plugin gaan goed. Het is overigens ook de enigste plugin die ik draai.
Het probleem wat ik heb is dat de plugin het niet doet in mijn template.
Als ik een standaard joomla template zoals Beez instel dan doet hij het zonder problemen.
Mijn site bestaat uit eenvoudige html/css, zonder extra's en gekoppeld aan joomla.
Links is dus mijn template en rechts een standaard joomla template:
Zodra ik van een standaard joomla template terugstap naar mijn eigen template kapt hij ermee.
Bij mij leest hij de CSS niet en ook de JS bestanden vindt hij niet. Zodra ik op een thumbnail klik wordt de afbeelding gewoon in hetzelfde venster geopened ipv dat een 'animatie' wordt afgespeeld.
Via google heb ik een uitleg gevonden over hoe dergelijke conflicten op te lossen.
In Chrome en Firebug heb ik geen errors gevonden (?) Stap 2 van die site gaat al over het uitzetten van JS compression in mijn template, maar die instelling heb ik niet (de joomla templates hebben die overigens ook niet)
Verder heb ik ook het volgende gevonden om een conflict op te lossen:
Ik denk dat er dus een javascript conflict optreedt zodra ik mijn template aanzet. Gek eigenlijk omdat mijn template alleen maar bestaat uit html/css. De plugin werkt wel als ik een ander template aanzet.. wel/geen/wel/geen conflict..?quote:use jQuery instead of $ and
give
jQuery.noConflict();
jQuery.noConflict
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():
Mijn vragen die ik heb zijn:
1. Heb ik een gigantische error in firebug over het hoofd gezien die er direct voor zorgt dat die plugin het niet doet?
2. Over de quote in deze post: Moet ik gewoon in de JS code "jQuery" vervangen door "$" en de "();" bij noConflict weghalen en dat is het dan?
3. Zit ik überhaupt wel in de goede richting met mijn JS conflict vermoeden?
Versies die ik gebruik:
Joomla! 2.5.9
Firefox v.18
SIGE plugin voor joomla 2.5
De site gaf geen errors aan in de validators.
Site staat hier: http://...
toevoeging:
opgelost!
[ Bericht 3% gewijzigd door karton2 op 14-02-2013 14:14:26 ]
Oh?quote:
[..]
Niet, het is tenslotte geen 1998 meer toen we nog fixed height blokken gebruikten.
Wil hij toch ook niet? Hij wil de hoogte bepalen door de content.quote:
Vooruit, fixed height content blokken dan.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
een parent child kneus hier, ik heb me echt een halve dag hier aan zitten knagen:
de bedoeling is dat de link
<li class="topfooter"><a href="troll.html">Contract</a></li>
een andere color:; en andere font-size:; krijgt maar ik heb gewoon problemen om uberhaupt ID en classes goed te benaderen
met css
is er uberhaupt iemand bereid om mij af en toe via skype (deel scherm en voice chat) af en toe bij te staan? zeg maar een minuut of 5 per dag?
Groetjes
[ Bericht 8% gewijzigd door maturon op 14-02-2013 08:44:42 ]
de bedoeling is dat de link
<li class="topfooter"><a href="troll.html">Contract</a></li>
een andere color:; en andere font-size:; krijgt maar ik heb gewoon problemen om uberhaupt ID en classes goed te benaderen
met css| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="footer"> <div id="footer1"> <ul> <li class="topfooter"><a href="troll.html">Contract</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> dit is mijn css li.topfooter a {tex-align:right; font-size:40px; color:#ffcaa6; text-decoration:underline;} |
Groetjes
[ Bericht 8% gewijzigd door maturon op 14-02-2013 08:44:42 ]
dit li.topfooter declareer je
En in de effectieve footer heb je het over footer1 met de li daarin... volgens mij zit daar ergens je fout
En in de effectieve footer heb je het over footer1 met de li daarin... volgens mij zit daar ergens je fout
Avatar mede-mogelijk gemaakt door buurpoes
heb je ook een jip en janneke versie voor mij? <3quote:
dit li.topfooter declareer je
En in de effectieve footer heb je het over footer1 met de li daarin... volgens mij zit daar ergens je fout
Het is voor mij te lang geleden om je echt een duidelijk (en kloppend) antwoord te kunnen geven... Maar ik zie ook dat je Divs niet afgesloten zijn en je hebt div footer met daarin div footer1 volgens mij kan je beter die eerste weghalen (footer) en na de </ul> je div sluiten </div> dan daaronder die CSS declareren als li.footer1 ... Maar ik zou afwachten tot je reactie hebt van iemand die er echt verstand van heeft...quote:
[..]
heb je ook een jip en janneke versie voor mij? <3
Avatar mede-mogelijk gemaakt door buurpoes
De divs zijn juist gesloten, daar heb ik geen problemen mee, had het alleen niet meegenomen in de code! heb de code aangepast
Hmm strange het is mij uiteindelijke gelukt via ditquote:
Werkt prima bij mij.
http://jsfiddle.net/LzshX/
#footer1 ul li.topfooter a
hmmm wel vreemd want jouw code werkte wel
Specificity. Doe dat eens googlen.
Eén van de redenen dat stylen op ID's lang niet altijd praktisch is. #footer a overruled namelijk .topfooter a
Eén van de redenen dat stylen op ID's lang niet altijd praktisch is. #footer a overruled namelijk .topfooter a
Dit is een goede test of je CSS een beetje snapt: http://net.tutsplus.com/a(...)icity-and-cascading/
| 1 2 3 4 5 6 | div#footer div#footer1 ul li.topfooter a { text-align:right; font-size:40px; color:#ffcaa6; text-decoration:underline; } |
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ik had niet alles goedquote:
Dit is een goede test of je CSS een beetje snapt: http://net.tutsplus.com/a(...)icity-and-cascading/
.
Iemand enig idee waarom ik in oude versies van Safari een blauw lijntje krijg onder p's en h(1)'s?
text-decoration al bekeken, daar zou het niet moeten zitten.
text-decoration al bekeken, daar zou het niet moeten zitten.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Vraagje over de button op deze pagina http://allmotive.eu/offerte-aanvragen
De verstuur button wil ik naar links verplaatsen.
Heb de button opgezocht in stylesheet.css echter kan ik de button niet links krijgen.
Heb float;left en position geprobeerd echter werkt dat niet.
Waar ik bang voor ben als ik de button naar links verplaats, deze site niet meer mooi eruit ziet http://allmotive.eu/voertuigen/specificaties
De button wil ik dus voor 1 pagina naar links halen alleen hoe? Zit al een uur alles te proberen maar nog zonder succes.
http://gathering.tweakers(...)ge/36963307#36963307 Met deze bron vol informatie moet het wel lukken
De verstuur button wil ik naar links verplaatsen.
Heb de button opgezocht in stylesheet.css echter kan ik de button niet links krijgen.
Heb float;left en position geprobeerd echter werkt dat niet.
Waar ik bang voor ben als ik de button naar links verplaats, deze site niet meer mooi eruit ziet http://allmotive.eu/voertuigen/specificaties
De button wil ik dus voor 1 pagina naar links halen alleen hoe? Zit al een uur alles te proberen maar nog zonder succes.
http://gathering.tweakers(...)ge/36963307#36963307 Met deze bron vol informatie moet het wel lukken
<br style="clear: both;" /> voor de button plaatsen? is wel een vieze oplossing maar zou kunnen werken..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Ga het gelijk even testen, dus dan verander ik het formulier in HTML. Even fixen
Het rare is dat het aan de voorkant, dus in Joomla/chronoforms gewoon goed uit ziet. Als ik vervolgens de HTML hier test http://htmledit.squarefree.com/ dan staat alles netjes onder elkaar. Echter niet op de website.
Het rare is dat het aan de voorkant, dus in Joomla/chronoforms gewoon goed uit ziet. Als ik vervolgens de HTML hier test http://htmledit.squarefree.com/ dan staat alles netjes onder elkaar. Echter niet op de website.
Staan ze niet toevallig in een link-tag?quote:
Iemand enig idee waarom ik in oude versies van Safari een blauw lijntje krijg onder p's en h(1)'s?
text-decoration al bekeken, daar zou het niet moeten zitten.
dat dus.
Er zit eenquote:
Vraagje over de button op deze pagina http://allmotive.eu/offerte-aanvragen
De verstuur button wil ik naar links verplaatsen.
Heb de button opgezocht in stylesheet.css echter kan ik de button niet links krijgen.
Heb float;left en position geprobeerd echter werkt dat niet.
Waar ik bang voor ben als ik de button naar links verplaats, deze site niet meer mooi eruit ziet http://allmotive.eu/voertuigen/specificaties
De button wil ik dus voor 1 pagina naar links halen alleen hoe? Zit al een uur alles te proberen maar nog zonder succes.
http://gathering.tweakers(...)ge/36963307#36963307 Met deze bron vol informatie moet het wel lukken
| 1 2 3 4 | .cfdiv_submit { float: right; margin-right: 60px; } |
Style in, die moet je of naar left zetten. Of overriden voor deze pagina met een float: left !important;
It was an opportunity to honour our memories and to make room for new ones
Zo makkelijk dus, damn voel me dom. Thnx! Heb hem verandert naar float;nonequote:
[..]
Er zit een
[ code verwijderd ]
Style in, die moet je of naar left zetten. Of overriden voor deze pagina met een float: left !important;
Nu ziet het er nog iets mooier uit.
Geen probleem, vaak vind je zulke dingen eenvoudig met "Inspect element" in Chrome of IE of externe plugins in FF.quote:
[..]
Zo makkelijk dus, damn voel me dom. Thnx! Heb hem verandert naar float;none
Nu ziet het er nog iets mooier uit.
It was an opportunity to honour our memories and to make room for new ones
Dat gebruik ik steeds meer maar als ik op inspect klik komt er dit uit
Dus voortaan duik ik sneller in het .css zodat ik de positie er boven kan checken.
| 1 2 3 4 5 6 7 8 9 10 11 12 | .cfdiv_submit input { background: url(../images/pdf-button.png); width: 130px; display: inline-block; height: 29px; font-family: Droid Sans; font-size: 12px; color: #fff; font-weight: 700; text-align: left; border: 1px solid #5f9726; text-transform: uppercase; |
Dus voortaan duik ik sneller in het .css zodat ik de positie er boven kan checken.
Als je in chrome een element inspecteerd krijg je alle toegepaste stijlen, ik vond die er gewoon tussen.quote:
Dat gebruik ik steeds meer maar als ik op inspect klik komt er dit uit
[ code verwijderd ]
Dus voortaan duik ik sneller in het .css zodat ik de positie er boven kan checken.
It was an opportunity to honour our memories and to make room for new ones
5.1.quote:
Wat bedoel je met "oud"? Safari 2? Of Safari 5?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Heeft iemand hier wel eens met DataTables gewerkt? Ik vind het een ontzettend goed project, maar wel enorm ingewikkeld. 
Ik maak gebruik van server-sided processing en ik wil aan elke rij een link hangen. Ik heb al de hele dag wat aangekloot en gegoogled en ik heb 't een en ander daardoor werkend gekregen.
Kan iemand mij vertellen hoe ik href-tags om de row-tags krijg?
Mijn script dat DataTables activeerd:
aData[0] bevat een uniek nummer voor elke rij en is onderdeel van de link.
EDIT:
Ik heb de volgende oplossing die in ieder geval werkt. Heeft iemand een betere?
[ Bericht 1% gewijzigd door pascal08 op 25-02-2013 22:22:50 ]
Ik maak gebruik van server-sided processing en ik wil aan elke rij een link hangen. Ik heb al de hele dag wat aangekloot en gegoogled en ik heb 't een en ander daardoor werkend gekregen.
Kan iemand mij vertellen hoe ik href-tags om de row-tags krijg?
Mijn script dat DataTables activeerd:
| 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 | <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var oTable = $('#datatables').dataTable({ "aoColumnDefs": [{ "aTargets": [0], "bVisible": false }], "sDom": "Rlfrtip", "bDeferRender": true, "sPaginationType": "bootstrap", "sScrollY": "1000px", "sScrollX": "400px", "bProcessing": true, "bServerSide": true, "sServerMethod": "GET", "sAjaxSource": '<?php echo base_url(); ?>main/getTable', "iDisplayLength": 50, "aLengthMenu": [[10, 25, 50], [10, 25, 50]], "aaSorting": [[0, 'desc']] }); $("#datatables tbody tr").live('click',function(){ var aData = $('#datatables').dataTable().fnGetData(this); alert(aData[0]); }); }); </script> |
aData[0] bevat een uniek nummer voor elke rij en is onderdeel van de link.
EDIT:
Ik heb de volgende oplossing die in ieder geval werkt. Heeft iemand een betere?
| 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 | <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var oTable = $('#datatables').dataTable({ "aoColumnDefs": [{ "aTargets": [0], "bVisible": false }], "sDom": "Rlfrtip", "bDeferRender": true, "sPaginationType": "bootstrap", "sScrollY": "1000px", "sScrollX": "400px", "bProcessing": true, "bServerSide": true, "sServerMethod": "GET", "sAjaxSource": '<?php echo base_url(); ?>main/getTable', "iDisplayLength": 50, "aLengthMenu": [[10, 25, 50], [10, 25, 50]], "aaSorting": [[0, 'desc']] }); $("#datatables tbody tr").live('click',function(){ var aData = $('#datatables').dataTable().fnGetData(this); window.location = 'http://../'+aData[0]; }); }); </script> |
[ Bericht 1% gewijzigd door pascal08 op 25-02-2013 22:22:50 ]
EDIT:
Niemand?
Ik zal m'n vraag even inkorten.
Ik wil dit filtersysteem overnemen: http://www.datatables.net/examples/plug-ins/range_filtering.html . Ik heb beide stukken code tussen <script>-tags gezet tussen de <head>-tags, maar het werkt niet. In de spoiler is m'n code te vinden.
Mijn JS-kennis is echt belabberd, dus ik zoek eigenlijk gewoon iemand die mij gewoon hapklaar het antwoord kan geven.
Niemand?
Ik zal m'n vraag even inkorten.
Ik wil dit filtersysteem overnemen: http://www.datatables.net/examples/plug-ins/range_filtering.html . Ik heb beide stukken code tussen <script>-tags gezet tussen de <head>-tags, maar het werkt niet. In de spoiler is m'n code te vinden.
Mijn JS-kennis is echt belabberd, dus ik zoek eigenlijk gewoon iemand die mij gewoon hapklaar het antwoord kan geven.
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
[ Bericht 0% gewijzigd door pascal08 op 26-02-2013 19:30:09 ]
Ik begrijp niet helemaal waar die PHP-code goed voor is. Het idee is toch dat je alle data aan je frontend geeft en dan het filteren/sorteren in de client doet mbv DataTables? Het is toch niet de bedoeling dat het kiezen van een andere sortering of filteren zorgt voor een trip naar de server, of wel?
[edit] Ik snap op zich ook wel dat je niet 12000 rijen aan je frontend wil geven als je alleen de top 10 wil laten zien. Maar als je toch client/server-communicatie wil bij het filteren en sorteren, wat is dan het voordeel van zoiets als DataTables? Waarom laat je dan niet alle filtering/sortering doen door je backend en stop je met een Ajax-call gewoon nieuwe data in de tabel?
[ Bericht 39% gewijzigd door Tijn op 26-02-2013 21:20:22 ]
[edit] Ik snap op zich ook wel dat je niet 12000 rijen aan je frontend wil geven als je alleen de top 10 wil laten zien. Maar als je toch client/server-communicatie wil bij het filteren en sorteren, wat is dan het voordeel van zoiets als DataTables? Waarom laat je dan niet alle filtering/sortering doen door je backend en stop je met een Ajax-call gewoon nieuwe data in de tabel?
[ Bericht 39% gewijzigd door Tijn op 26-02-2013 21:20:22 ]
Volgens mij zeg je in je edit precies wat ik al vermoedde, maar dan begrijp ik nog niet waarom er custom filters mogelijk zijn waarbij je bepaalde waardes onder de ingegeven waarde kan wegfilteren.quote:
Ik begrijp niet helemaal waar die PHP-code goed voor is. Het idee is toch dat je alle data aan je frontend geeft en dan het filteren/sorteren in de client doet mbv DataTables? Het is toch niet de bedoeling dat het kiezen van een andere sortering of filteren zorgt voor een trip naar de server, of wel?
[edit] Ik snap op zich ook wel dat je niet 12000 rijen aan je frontend wil geven als je alleen de top 10 wil laten zien. Maar als je toch client/server-communicatie wil bij het filteren en sorteren, wat is dan het voordeel van zoiets als DataTables? Waarom laat je dan niet alle filtering/sortering doen door je backend en stop je met een Ajax-call gewoon nieuwe data in de tabel?
Zover ik uit de PHP-code kan opmaken is dat alle rijen worden opgevraagd. Mij lijkt het dus dat er 2 opties zijn:
- de rijen worden niet meer opgevraagd middels een aanpassing in de sql-query (back-end)
- de rijen worden niet meer getoond, maar zijn wel ingeladen (front-end)
Het grote euvel is dat ik eigenlijk te weinig kennis wat van dit soort ingewikkelde constructies. Ik ben nu dus eigenlijk heel brutaal aan het vragen om hulp. Ik ben absoluut bereid van alles en nog wat te lezen en te leren hiervoor, maar ik weet gewoon niet waar ik moet beginnen.
Wat is precies de data die je wilt tonen? Waarom wil je een datatable gebruiken? Wat is er mis met een normale table ?
Laten we eerst eens duidelijk zien te krijgen wat je input is en wat je wilt bereiken.
?Laten we eerst eens duidelijk zien te krijgen wat je input is en wat je wilt bereiken
.
2000 light years from home
Wat enorm helpt is het probleem opdelen in kleinere problemen. Niemand kan in 1x een groot probleem oplossen, maar als je het opdeelt in kleinere problemen, wordt het een stuk beter te overzien.
Het helpt ook om je probleem goed te omschrijven, omdat eigenlijk je probleem in woorden uitleggen niet zo heel anders is dan het in code opschrijven.
Dus vertel, wat is precies de bedoeling? Wat voor data heb je, wat wil je tonen en wat wil je dat de gebruiker met deze data kan doen?
Het helpt ook om je probleem goed te omschrijven, omdat eigenlijk je probleem in woorden uitleggen niet zo heel anders is dan het in code opschrijven.
Dus vertel, wat is precies de bedoeling? Wat voor data heb je, wat wil je tonen en wat wil je dat de gebruiker met deze data kan doen?
In aanvulling op Tijn zou ik je alleszins aanraden dit eerst eens te bouwen met klassieke technieken. Gewoon een simpele query maken met een limit en order by statement en html outputten.
Juist, daar gaat 'ie dan:
Wat heb ik:
Ik heb een SQL-table met 11.500 entries. Mijn site is opgebouwd met het CodeIgniter framework.
Wat wil ik:
Een tabel die records uitpoept op basis van de wensen van de gebruiker. In eerste instantie zal de gebruiker nog niets hebben ingevoerd. De output in de tabel zal zich direct aanpassen op het moment dat de gebruiker wenst dat er bepaalde waardes weggefilterd moeten worden.
Voorbeeld:
ID-----Dier-----Leeftijd
1------Kat------8
2------Vis------1
3------Hond-----12
4------Aap------23
5------Paard----17
De gebruiker typt in de veld minimum_leeftijd: 5. Vervolgens moeten alle dieren met de leeftijd onder de 5 worden weggefilterd. Zo kan de gebruiker voor ieder veld een minimum en een maximum invoeren.
Op zich is dat natuurlijk heel makkelijk te bewerkstelligen met een simpele HTML tabel en een query in m'n PHP-code. En wat ik me nu besef is dat ik DataTables dus eigenlijk niet nodig heb. Wat ik me steeds wel afvraag is wat het grote voordeel dan is van DataTables. In eerste instantie dacht ik dat het zonder DataTables veel te intensief zou worden voor de server, maar in het aantal requests dat de server aankan heb ik me al vaker vergist.
Ik zit op dit moment niet achter mijn computer, maar zodra ik thuis ben ga ik het eens proberen zoals KomtTijd zei; gewoon met pure HTML en PHP.
Tot vanmiddag
Wat heb ik:
Ik heb een SQL-table met 11.500 entries. Mijn site is opgebouwd met het CodeIgniter framework.
Wat wil ik:
Een tabel die records uitpoept op basis van de wensen van de gebruiker. In eerste instantie zal de gebruiker nog niets hebben ingevoerd. De output in de tabel zal zich direct aanpassen op het moment dat de gebruiker wenst dat er bepaalde waardes weggefilterd moeten worden.
Voorbeeld:
ID-----Dier-----Leeftijd
1------Kat------8
2------Vis------1
3------Hond-----12
4------Aap------23
5------Paard----17
De gebruiker typt in de veld minimum_leeftijd: 5. Vervolgens moeten alle dieren met de leeftijd onder de 5 worden weggefilterd. Zo kan de gebruiker voor ieder veld een minimum en een maximum invoeren.
Op zich is dat natuurlijk heel makkelijk te bewerkstelligen met een simpele HTML tabel en een query in m'n PHP-code. En wat ik me nu besef is dat ik DataTables dus eigenlijk niet nodig heb. Wat ik me steeds wel afvraag is wat het grote voordeel dan is van DataTables. In eerste instantie dacht ik dat het zonder DataTables veel te intensief zou worden voor de server, maar in het aantal requests dat de server aankan heb ik me al vaker vergist.
Ik zit op dit moment niet achter mijn computer, maar zodra ik thuis ben ga ik het eens proberen zoals KomtTijd zei; gewoon met pure HTML en PHP.
Tot vanmiddag
11.500 records naar de frontend gooien is vragen om problemen. Gewoon een serverside selectie maken en dat aan de voorkant tonen. Zoiets als datatables is leuk tot een record of 100.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Het voordeel van datatables is zo te zien dat het een functieset levert die ditsoort dingen een stuk makkelijker maakt. Maar zoals wel vaker geldt voor frameworks en plugins, als je de basis al niet onder de knie hebt, ga je het framework ook niet begrijpen. Beginnen bij het begin dus.quote:Op woensdag 27 februari 2013 09:50 schreef pascal08 het volgende:
Op zich is dat natuurlijk heel makkelijk te bewerkstelligen met een simpele HTML tabel en een query in m'n PHP-code. En wat ik me nu besef is dat ik DataTables dus eigenlijk niet nodig heb. Wat ik me steeds wel afvraag is wat het grote voordeel dan is van DataTables. In eerste instantie dacht ik dat het zonder DataTables veel te intensief zou worden voor de server, maar in het aantal requests dat de server aankan heb ik me al vaker vergist.
Als je dit gemaakt hebt, zou je daarna vrij eenvoudig je tabel kunnen updaten dmv AJAX. Dan heb je niet voor elke filter/sorteeractie een page request. Maar wat je sowieso moet maken is de backend.quote:
Ik zit op dit moment niet achter mijn computer, maar zodra ik thuis ben ga ik het eens proberen zoals KomtTijd zei; gewoon met pure HTML en PHP.
Wat vinden jullie van de site http://validator.w3.org/ ?
Zit even wat sites te kijken bv http://emixion.nl/
Zij maken zelf sites en dan komt dit eruit, uhhhh apart.
Result: 115 Errors, 116 warning(s)
Of is de validator heel streng?
Zit even wat sites te kijken bv http://emixion.nl/
Zij maken zelf sites en dan komt dit eruit, uhhhh apart.
Result: 115 Errors, 116 warning(s)
Of is de validator heel streng?
Die validator werkt prima, houdt zich gewoon aan de specificatie. Daar is weinig subjectiefs aan dus er bestaat niet zoiets als "heel streng" of "minder streng".
Of de errors een probleem zijn moet je natuurlijk als developer zelf bepalen.
Of de errors een probleem zijn moet je natuurlijk als developer zelf bepalen.
Dat laatste is inderdaad het belangrijkste. Het kan dus zijn dat er honderden errors zijn maar de site prima draait. Neem aan dat een site door veel errors langzamer kan zijn.
In de site van mijn werk zitten 7 kleine errors. Zal die is proberen te fixxen.
In de site van mijn werk zitten 7 kleine errors. Zal die is proberen te fixxen.
Er zitten bij die site wel een flink deel onnodige/knullige errors tussen trouwens, XHTML gebruiken en dan je tags niet afsluiten enzo 
.
SEO-technisch wil je ook zo min mogelijk errors, maar het bitneuken tot je site 100% valid is, is wel een beetje achterhaald.
. SEO-technisch wil je ook zo min mogelijk errors, maar het bitneuken tot je site 100% valid is, is wel een beetje achterhaald.
validator smellidator
ik gebruik liever een deprecated target='_blank' dan een vunzig JSje
ik gebruik liever een deprecated target='_blank' dan een vunzig JSje
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Ja, dat doe ik ook. Wat vooral handig is van de validator is om slordigheidjes te spotten die je anders niet waren opgevallen. En voor nieuwe ontwikkelaars is het een toegankelijkere manier om de standaard te leren kennen dan alle documenten te gaan zitten doorlezen.quote:
validator smellidator
ik gebruik liever een deprecated target='_blank' dan een vunzig JSje
Ja, dit is denk ik wat ik wil. Ik ben bijna thuis en ik kan niet wachten om aan de slag te gaan. Bij een page request wordt de hele pagina opnieuw geladen, wat intensiever is dan alleen een Ajax-call, toch?quote:
[..]
Als je dit gemaakt hebt, zou je daarna vrij eenvoudig je tabel kunnen updaten dmv AJAX. Dan heb je niet voor elke filter/sorteeractie een page request. Maar wat je sowieso moet maken is de backend.
Nauwelijks. Misschien als je een hele zware pagina hebt met veel dynamische content, maar vrijwel iedere website wisselt vloeiend van pagina zonder dat je het als gebruiker "ziet".quote:
[..]
Ja, dit is denk ik wat ik wil. Ik ben bijna thuis en ik kan niet wachten om aan de slag te gaan. Bij een page request wordt de hele pagina opnieuw geladen, wat intensiever is dan alleen een Ajax-call, toch?
Maar dan alsnog is het beter om gewoon Ajax te gebruiken in plaats van complete pagereloads toch?quote:
[..]
Nauwelijks. Misschien als je een hele zware pagina hebt met veel dynamische content, maar vrijwel iedere website wisselt vloeiend van pagina zonder dat je het als gebruiker "ziet".
quote:
In aanvulling op Tijn zou ik je alleszins aanraden dit eerst eens te bouwen met klassieke technieken. Gewoon een simpele query maken met een limit en order by statement en html outputten.
Oké, dat heb ik gedaan.quote:
Hier mijn code:
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Het is moeilijk om een soort algemeen advies te geven over wanneer je een Ajax request zou moeten doen en wanneer niet, maar ik denk dat in dit specifieke geval het wel gebruiksvriendelijker is om je table met Ajax te updaten dan elke keer de hele pagina opnieuw te laden.quote:
[..]
Maar dan alsnog is het beter om gewoon Ajax te gebruiken in plaats van complete pagereloads toch?
Maar dat wil niet zeggen dat het geen goed idee is om, zoals KomtTijd voorstelt, eerst een "ouderwetse" variant te bouwen zonder Javascript-fratsen. Die basis heb je sowieso nodig namelijk en het is ook belangrijk om iets dat je toch al een beetje ingewikkeld vindt niet nog ingewikkelder te maken dan nodig. Dat bedoelde ik ook eerder met het opdelen van je probleem in kleinere problemen. Je moet niet proberen alles in 1 keer op te lossen, maar stap voor stap af te vinken wat er gedaan moet worden.
Ik snap precies wat je bedoelt hoor. Ik heb nu door dat ik iets te snel ging, door gelijk een ingewikkeld framework te pakken zonder eerst de basis te begrijpen.quote:
[..]
Het is moeilijk om een soort algemeen advies te geven over wanneer je een Ajax request zou moeten doen en wanneer niet, maar ik denk dat in dit specifieke geval het wel gebruiksvriendelijker is om je table met Ajax te updaten dan elke keer de hele pagina opnieuw te laden.
Maar dat wil niet zeggen dat het geen goed idee is om, zoals KomtTijd voorstelt, eerst een "ouderwetse" variant te bouwen zonder Javascript-fratsen. Die basis heb je sowieso nodig namelijk en het is ook belangrijk om iets dat je toch al een beetje ingewikkeld vindt niet nog ingewikkelder te maken dan nodig. Dat bedoelde ik ook eerder met het opdelen van je probleem in kleinere problemen. Je moet niet proberen alles in 1 keer op te lossen, maar stap voor stap af te vinken wat er gedaan moet worden.
Ik heb KomtTijd z'n advies opgevolgd en een simpele model- en controller functie gemaakt met een view waar de HTML table in staat. Ik heb inmiddels een nuttige video gevonden waar het een en ander uitgelegd wordt over sorteren van tabellen etc. Ik laat zo weten hoe ver ik gekomen ben.
EDIT:
In de video zegt de maker: "It is not going to be like Ajax/Javascript trig. We are just going to reload the page, because there is hidden data that is not inside this page. So sorting with Ajax may not be a good idea here."
Ik wil nu eigenlijk van jullie wel weten wat ik het beste kan doen met betrekking tot het sorteren. Page reloads via CodeIgniter, Ajax of iets anders?
[ Bericht 6% gewijzigd door pascal08 op 27-02-2013 18:09:13 ]
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |