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.
Ik heb de volgende JSON data die ik moet weergeven in een HTML pagina dmv JSON.parse, dit gaat goed behalve bij de nummers...daar kunnen er meerdere in zitten...
Alle data roep ik gewoon aan via json.simkaarten[simkaartnummer].veld na JSON.parse, maar hoe loop ik door de telefoonnummers? Ik wil namelijk alle telefoonnummers weergeven in 1 veld netjes komma gescheiden als er meerdere zijn.
| 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 | { "simkaarten": { "89313101709500437161": { "nummers": [ "0612345678", "0698765432" ], "valid": "valid", "puk1": "12345678", "pin": "0000", "order": "14938", "type": "Abbo Y", "referentie": "Niels", "porteerdatum": "14-12-2014" }, "89313101709560237223": { "nummers": [ "0655443322" ], "valid": "valid", "puk1": "12345678", "pin": "0000", "order": "14938", "type": "Abbo X", "referentie": "Leoni", "porteerdatum": "29-12-2014" } } } |
Alle data roep ik gewoon aan via json.simkaarten[simkaartnummer].veld na JSON.parse, maar hoe loop ik door de telefoonnummers? Ik wil namelijk alle telefoonnummers weergeven in 1 veld netjes komma gescheiden als er meerdere zijn.
Simkaarten.each(function() {
this.nummerString = this.nummers.join(', ');
;
this.nummerString = this.nummers.join(', ');
;
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?
Ik heb allemaal probeersels gedaan, maar ik kom er niet helemaal uitquote:Op donderdag 13 november 2014 13:56 schreef Catch22- het volgende:
Simkaarten.each(function() {
this.nummerString = this.nummers.join(', ');
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var json = JSON.parse(data); for (var iccid in json.simkaarten ) { // Het loop gedeelte werkt, alleen onderstaande resulteert in niks :( json.simkaarten[iccid].each(function() { this.nummerString = this.nummers.join(', '); }); alert ( nummerString ); }; |
Heb je wel een .each functie?
Probeer het anders even zo:
En misschien is console.log() wat handiger dan alert() trouwens
Probeer het anders even zo:
| 1 2 3 4 5 6 7 | var ccid, nummers; for(ccid in json.simkaarten) { nummers = json.simkaarten[ccid].nummers.join(', '); alert(nummers); }; |
En misschien is console.log() wat handiger dan alert() trouwens
Je doet een alert op een losse variable "nummerString" maar waar heb je die geset? Zo te zien nergens.quote:Op donderdag 13 november 2014 14:10 schreef wobbel het volgende:
[..]
Ik heb allemaal probeersels gedaan, maar ik kom er niet helemaal uit
[ code verwijderd ]
Ik snapte werkelijk ook niet wat die functie deedquote:Op donderdag 13 november 2014 14:44 schreef KomtTijd... het volgende:
[..]
Je doet een alert op een losse variable "nummerString" maar waar heb je die geset? Zo te zien nergens.
Ja oke, maar firebug staat niet de hele dag openquote:Op donderdag 13 november 2014 14:42 schreef Tijn het volgende:
Heb je wel een .each functie?
Probeer het anders even zo:
[ code verwijderd ]
En misschien is console.log() wat handiger dan alert() trouwens
Dit werkt btw, bedankt!
Development zonder devtools moet je niet eens willen
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?
Screeps
The world's first MMO strategy sandbox game for programmers
JavaScripting as gameplay
Screeps is about scripting your creeps. No point’n’clicking any longer!
You write real JavaScript which controls your units autonomously. Any time, everywhere, even while you are offline.
The world's first MMO strategy sandbox game for programmers
JavaScripting as gameplay
Screeps is about scripting your creeps. No point’n’clicking any longer!
You write real JavaScript which controls your units autonomously. Any time, everywhere, even while you are offline.
When the student is ready, the teacher will appear.
When the student is truly ready, the teacher will disappear.
When the student is truly ready, the teacher will disappear.
http://cl.ly/YX0I
1 request, 9.6Kb compressed
Fonts worden uiteraard wel apart gedownload (uiteindelijk + 2 requests), de afbeelding ook in het groot (+ 1) en nog een Analytics asynchroon.
Fucking hard. nav http://www.smashingmagazi(...)formance-case-study/
1 request, 9.6Kb compressed
Fonts worden uiteraard wel apart gedownload (uiteindelijk + 2 requests), de afbeelding ook in het groot (+ 1) en nog een Analytics asynchroon.Fucking hard. nav http://www.smashingmagazi(...)formance-case-study/
“Specialization is for insects”.—Robert Heinlein
fps timeline, audits, shadow dom, paint maps, layer maps.quote:
Development zonder devtools moet je niet eens willen
de inspector is echt baas.
“Specialization is for insects”.—Robert Heinlein
Hoe kan je dan developen?quote:
[..]
Ja oke, maar firebug staat niet de hele dag open
Op
Heb bij m'n eerder geposte link het hele eerste request in 12kb compressed gekregen. Heb de afbeelding verkleind en blurred als placeholder base64 er in gezet (7kb). Van het navigatiefont heb ik alle overbodige karakters er uit gesloopt en deze als base64 woff inline gezet (2,5kb) en de rest is inline markup en js. AWW yeah.
Dit is trouwens een superchille site om fonts te converteren https://cloudconvert.org/
De Speed Index is nu 500, de helft van de aanbevolen 1000 (lager is beter)
[ Bericht 6% gewijzigd door n8n op 15-11-2014 16:03:04 ]
Dit is trouwens een superchille site om fonts te converteren https://cloudconvert.org/
De Speed Index is nu 500, de helft van de aanbevolen 1000 (lager is beter)
[ Bericht 6% gewijzigd door n8n op 15-11-2014 16:03:04 ]
“Specialization is for insects”.—Robert Heinlein
Op zich wel tof, maar ik krijg geen tijd voor zulke dingen. Ik heb altijd het idee dat mensen die zulke dingen doen er niet voor betaald worden.
Mijn applicaties hou ik altijd onder de 700kb. Met gulp maak ik twee builds voor JS en CSS (de een minified en de ander niet) voor dev en productie. Doe wel aan optimalisatie, maar wel tot een lonend nivo. CSS en JS frameworks voegen vrij veel kbs toe, maar uitzoeken wat er uit kan, of vanaf scratch beginnen kost me gewoon teveel tijd.
Als ik tegen een klant zeg dat ik drie dagen bezig ben geweest om 200kb op de eerste pageload heb bespaard en de gebruikers dat toch zeker 50ms scheelt, dan heb ik een probleem
Maar dan heb je het over grote applicaties en niet over singlepage sites.
Mijn applicaties hou ik altijd onder de 700kb. Met gulp maak ik twee builds voor JS en CSS (de een minified en de ander niet) voor dev en productie. Doe wel aan optimalisatie, maar wel tot een lonend nivo. CSS en JS frameworks voegen vrij veel kbs toe, maar uitzoeken wat er uit kan, of vanaf scratch beginnen kost me gewoon teveel tijd.
Als ik tegen een klant zeg dat ik drie dagen bezig ben geweest om 200kb op de eerste pageload heb bespaard en de gebruikers dat toch zeker 50ms scheelt, dan heb ik een probleem
Maar dan heb je het over grote applicaties en niet over singlepage sites.
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?
Onder de 1MB is al een hele prestatie tegenwoordig.
Wat ik nu heb gedaan is eerst de landing page gemaakt te hebben met nog wat ruimte binnen de eerste 14Kb voor css prefixes en js polyfills. Toen ik grotendeels 'klaar' was ging ik pas optimaliseren. Straks maak ik ook een gulp aan met de css en js 'modules', die parse ik naar een apart bestand, dat bestand include ik alleen in de voorpagina die ik vervolgens cache. Na de window.onload laadt ik de rest van de externe css en js, eventuele extra fonts zodat deze vast in de cache staan.
Alle pagina’s zo ver optimaliseren gaat inderdaad veel te ver. Ik weet ook niet of de database blij is met 7KB base64-image-strings, anders laat ik deze wel vallen (gedaan aan de hand van jouw tip om placeholder images in te zetten). Werk nu ook onbetaald ja Had wel tijdens een webdesign stage een website in een week van een paar MB naar <1MB gedaan wat alles toch ruim 2 keer zo snel maakte. Snelheid is helaas ook een ondergeschoven kindje waar vrijwel geen budget voor vrijgemaakt wordt (de top 10% van de snelste websites begint bij een Speed index van 1300).
Nog een (tijdrovende, helaas) tip. Maak een style.css en een sketch.css. In de style.css ga je uit van de declaratie ipv de selector. Zo bespaar je uiteindelijk makkelijk 80% op je css-grootte, dit had ik ook bij de mobiele fok! forum template zo gedaan om onder de 25kb-cache limiet van indertijd iOS 4 te komen.
Zie http://n8n.nl/lab/n8n/presentation/style.css
Wat ik nu heb gedaan is eerst de landing page gemaakt te hebben met nog wat ruimte binnen de eerste 14Kb voor css prefixes en js polyfills. Toen ik grotendeels 'klaar' was ging ik pas optimaliseren. Straks maak ik ook een gulp aan met de css en js 'modules', die parse ik naar een apart bestand, dat bestand include ik alleen in de voorpagina die ik vervolgens cache. Na de window.onload laadt ik de rest van de externe css en js, eventuele extra fonts zodat deze vast in de cache staan.
Alle pagina’s zo ver optimaliseren gaat inderdaad veel te ver. Ik weet ook niet of de database blij is met 7KB base64-image-strings, anders laat ik deze wel vallen (gedaan aan de hand van jouw tip om placeholder images in te zetten). Werk nu ook onbetaald ja
Had wel tijdens een webdesign stage een website in een week van een paar MB naar <1MB gedaan wat alles toch ruim 2 keer zo snel maakte. Snelheid is helaas ook een ondergeschoven kindje waar vrijwel geen budget voor vrijgemaakt wordt (de top 10% van de snelste websites begint bij een Speed index van 1300).Nog een (tijdrovende, helaas) tip. Maak een style.css en een sketch.css. In de style.css ga je uit van de declaratie ipv de selector. Zo bespaar je uiteindelijk makkelijk 80% op je css-grootte, dit had ik ook bij de mobiele fok! forum template zo gedaan om onder de 25kb-cache limiet van indertijd iOS 4 te komen.
Zie http://n8n.nl/lab/n8n/presentation/style.css
SPOILER: duidelijk voorbeeldOm 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.De sketch.css gebruik je dan om elementen old-skool vorm te geven, daarna plaats je de selectors bij de juiste declaraties in je style.css. Ik ga nog onderzoeken hoe dit sneller kan met sass@extend dus wellicht kom ik er nog op terug
[ Bericht 8% gewijzigd door n8n op 15-11-2014 16:50:55 ]“Specialization is for insects”.—Robert Heinlein
Ik optimaliseer door 1 CSS en 1 JS file te maken die beide gecompressed zijn voor productie. Icons in een font en images worden geoptimaliseerd door gulp en imagemin (maar daar zijn er niet zoveel van in mijn applicaties).
Het feit dat je al niet tien JS en tien CSS files hoeft in te laden, of tien icons in pngs scheelt al onwijs veel.
En base64 strings uit je DB halen lijkt me een slecht idee. Zou ik gewoon in de CSS zetten of als file inladen
Het feit dat je al niet tien JS en tien CSS files hoeft in te laden, of tien icons in pngs scheelt al onwijs veel.
En base64 strings uit je DB halen lijkt me een slecht idee. Zou ik gewoon in de CSS zetten of als file inladen
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?
Die base64 in de database doen we maar niet nee, die placeholder is op zich ook niet zo belangrijk in mijn geval..quote:
Ik optimaliseer door 1 CSS en 1 JS file te maken die beide gecompressed zijn voor productie. Icons in een font en images worden geoptimaliseerd door gulp en imagemin (maar daar zijn er niet zoveel van in mijn applicaties).
Het feit dat je al niet tien JS en tien CSS files hoeft in te laden, of tien icons in pngs scheelt al onwijs veel.
En base64 strings uit je DB halen lijkt me een slecht idee. Zou ik gewoon in de CSS zetten of als file inladen
edit: door de base64 placeholder te verwijderen is mn speedindex van 500 naar 400 gegaan.
http://www.webpagetest.org/result/141115_H8_SAQ/[ Bericht 7% gewijzigd door n8n op 15-11-2014 17:49:55 ]
“Specialization is for insects”.—Robert Heinlein
hulp gevraagd voor een stukje js waar ik niet uit kom.
ik wil graag als ik over een stuk text hover, dat er dan een image te zien is.
Probleem is, dat ik een template heb gekocht, waarin denk ik al een stukje code zit die dat niet mogelijk maakt...of niet op de manier die ik probeer
heb diverse kant-en-klare oplossingen van internet geprobeerd maar het werkt niet
ik wil graag een image zien als ik hover over de blabla in <li><a href="#" class="link_1 animate">blabla</a></li>
In block_pic gebeurt er al zoiets. Als je over die div hovert dan komt er een image tevoorschijn..volgens mij doet dit stukje code dat
ik denk dat hiermee ook een stukje hover wat ik probeer te doen, niet mogelijk is
maar is dat ook zo??
concrete vraag:
ik wil graag een image zien, bij een hover over een text
die image wil ik graag zien in <div class="block_pic">
ik wil graag als ik over een stuk text hover, dat er dan een image te zien is.
Probleem is, dat ik een template heb gekocht, waarin denk ik al een stukje code zit die dat niet mogelijk maakt...of niet op de manier die ik probeer
heb diverse kant-en-klare oplossingen van internet geprobeerd maar het werkt niet
| 1 2 3 4 5 6 7 8 9 10 11 12 | <li> <div class="block_pic"> <a href="img/page2_big1.jpg"><img src="img/page2_pic1.jpg" alt=""></a> </div> <div class="txt_info"> <ul> <li>blabla</li> <li class="color_2">Trompetten</li> <li><a href="#" class="link_1 animate">blabla</a></li> </ul> </div> </li> |
ik wil graag een image zien als ik hover over de blabla in <li><a href="#" class="link_1 animate">blabla</a></li>
In block_pic gebeurt er al zoiets. Als je over die div hovert dan komt er een image tevoorschijn..volgens mij doet dit stukje code dat
| 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 | $('.list_2 .block_pic > a').attr('rel','appendix') .prepend('<span class="sitem_over"><strong></strong></span>') $('.list_2 .block_pic > a').fancybox({ 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 500, 'speedOut': 300, 'centerOnScroll': true, 'overlayColor': '#000' }); $('.list_2 .block_pic > a') .find('strong').css('top','200px').end() .hover( function(){ if (!MSIE){ $(this).children('.sitem_over').css({display:'block',opacity:'0'}).stop().animate({'opacity':1}).end() .find('strong').css({'opacity':0}).stop().animate({'opacity':1,'top':'0'},350,'easeInOutExpo'); } else { $(this).children('.sitem_over').stop().show().end() .find('strong').stop().show().css({'top':'0'}); } }, function(){ if (!MSIE){ $(this).children('.sitem_over').stop().animate({'opacity':0},1000,'easeOutQuad',function(){$(this).children('.sitem_over').css({display:'none'})}).end() .find('strong').stop().animate({'opacity':0,'top':'200px'},1000,'easeOutQuad'); } else { $(this).children('.sitem_over').stop().hide().end() .find('strong').stop().hide(); } } ); |
ik denk dat hiermee ook een stukje hover wat ik probeer te doen, niet mogelijk is
maar is dat ook zo??
concrete vraag:
ik wil graag een image zien, bij een hover over een text
die image wil ik graag zien in <div class="block_pic">
Kan je een screenshot erbij voegen wat er moet gebeuren. Volgens mij ben je oeverloos moeilijk aan het doen voor iets dat zonder js met 3 regels css kan.
“Specialization is for insects”.—Robert Heinlein
Screenshot van de layout
Screenshot van de hover over de image met gitaar, dat is de div block_pic
er komt dan een rondje met een plus naar boven
wat ik nu graag zou willen dat als ik hover over bijv track#1, in de code is dat
dat er dan een ander plaatje te voorschijn komt,
bij voorkeur dat die dan zichtbaar wordt in div block_pic, maar als dat niet mocht lukken
dat het dan op de plaats van de hover verschijnt
Screenshot van de hover over de image met gitaar, dat is de div block_pic
er komt dan een rondje met een plus naar boven
wat ik nu graag zou willen dat als ik hover over bijv track#1, in de code is dat
| 1 | <li><a href="#" class="link_1 animate">blabla</a></li> |
dat er dan een ander plaatje te voorschijn komt,
bij voorkeur dat die dan zichtbaar wordt in div block_pic, maar als dat niet mocht lukken
dat het dan op de plaats van de hover verschijnt
Die image source wordt nergens aangepast. Ik zie niet in waarom je dat met een simpele hover functie niet zou lukken.
Je kunt een plusje gewoon op de foto positioneren en deze bijv. opacity: 0; geven. Bij een hover over die afbeelding maak je het plusje opacity: 1;
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
nee precies, dat dacht ik ookquote:
Die image source wordt nergens aangepast. Ik zie niet in waarom je dat met een simpele hover functie niet zou lukken.
maar
als ik iets simpels probeer als
http://www.w3schools.com/(...)rycss_sel_link_more2
dan krijg ik een gekleurde hyperlink te zien waarin niets gebeurd, als ik er een image aan hang dan komt die direct zichtbaar erbij te staan
vandaar dat ik dus denk dat er al ergens al code in de template staat die dit veroorzaakt
het plusje zit al in de code, dus dat werkt welquote:
Je kunt een plusje gewoon op de foto positioneren en deze bijv. opacity: 0; geven. Bij een hover over die afbeelding maak je het plusje opacity: 1;
maar ik wil dus net weer iets anders
als ik hover over track#1 dat er dan een image komt in de betreffende div
dat zit nu nog allemaal niet in de voorbeeldcode, maar dat komt omdat het niet werkt, vandaar mijn hulpvraag...wat ik het beste kan doen
dat is een CSS voorbeeld. Heef niets met jouw case te maken.quote:
[..]
nee precies, dat dacht ik ook
maar
als ik iets simpels probeer als
http://www.w3schools.com/(...)rycss_sel_link_more2
dan krijg ik een gekleurde hyperlink te zien waarin niets gebeurd, als ik er een image aan hang dan komt die direct zichtbaar erbij te staan
vandaar dat ik dus denk dat er al ergens al code in de template staat die dit veroorzaakt
als simpele hover functie?quote:
[..]
dat is een CSS voorbeeld. Heef niets met jouw case te maken.
Kan toch hetzelfde? Afbeelding in die div zetten en opacity 0. Dan bij de track #1 anchor een hover waarmee je die afbeelding op opacity 1 zet.quote:
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Bedenk je wel dat hovers niet op mobiele apparaten werken
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?
goed puntquote:
Bedenk je wel dat hovers niet op mobiele apparaten werken
misschien toch ook onclick oid
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |