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.
Waarom zou je die JS-array niet met PHP opbouwen?quote:Op donderdag 18 november 2010 12:04 schreef Intrepidity het volgende:
Matige plugin overigens, de bestandsnamen moeten meegeven in een JS-array. Doorgaans heb je gewoon een div met hierin een zwik images, en vervolgens activeer je de plugin op die div. Dan heb je ook de optie om bijvoorbeeld met PHP slides toe te voegen door het genereren van wat HTML.
Omdat JS genereren met PHP een stuk ranziger is imo dan HTML genereren. Daarnaast doen de meeste plugins dat zo: $("div#divmetfotos").slideshow(); en klaar is kees. Dat maakt het ook een stuk makkelijker om al je JS onder te brengen in externe bestanden, aangezien de PHP parser meestal geen .js-files doorloopt.quote:Op donderdag 18 november 2010 12:18 schreef KomtTijd... het volgende:
[..]
Waarom zou je die JS-array niet met PHP opbouwen?
Waarom zou dat in hemelsnaam anders zijn?quote:
[..]
Omdat JS genereren met PHP een stuk ranziger is imo dan HTML genereren.
Een verborgen div met images vind ik eigenlijk ranziger dan gewoon een JS array. Dat eerste zit namelijk in je DOM terwijl het daar niets te zoeken heeft.quote:Daarnaast doen de meeste plugins dat zo: $("div#divmetfotos").slideshow(); en klaar is kees. Dat maakt het ook een stuk makkelijker om al je JS onder te brengen in externe bestanden, aangezien de PHP parser meestal geen .js-files doorloopt.
Waarom verborgen? Je hebt een div, met hierin een stapel images, allemaal op dezelfde absolute positie. Je activeert de slideshow-plugin waardoor het geheel gaat animeren. Dan heb je ook nog eens graceful-degradation, want als javascript uit staat of niet werkt ziet men alsnog de eerste afbeelding.quote:
[..]
Waarom zou dat in hemelsnaam anders zijn?
[..]
Een verborgen div met images vind ik eigenlijk ranziger dan gewoon een JS array. Dat eerste zit namelijk in je DOM terwijl het daar niets te zoeken heeft.
Javascript moet _altijd_ een toevoeging zijn, en niet de enige manier waarop iets werkt. Progressive enhancement heet dat.
Ok dan vat ik het, maar dan vind ik nog steeds het in de DOM planten van tig afbeeldingen terwijl je er maar eentje ziet een beetje lomp. Moet ook allemaal ingeladen worden enzo.
Maar wel even mezelf nuanceren: dit is mierengeneuk om best-practices. Allebei de oplossingen is technisch gezien niets mis mee.
Maar wel even mezelf nuanceren: dit is mierengeneuk om best-practices. Allebei de oplossingen is technisch gezien niets mis mee.
Maar Intrepidity, weet je toevallig scripts die met die resolutie wel soepeltjes kunnen draaien in IE? Bij voorkeur met een wat bijzondere overgang. Het moet een niet zo standaard slideshow idee geven, vandaar dat me dat Ken Burns effect me wat leek.
You have to come back with me! Back to the Future!
Ik heb twee tekst velden, namelijk:
<input type="text" name="veld_1" />
<input type="text" name="veld_2" />
Wanneer ik in 'veld_1' bijvoorbeeld het volgende invoer:
Dit is een test regel
Dan wil ik dat 'veld_2' automatisch wordt ingevuld met het volgende:
dit-is-een-test-regel
Dus spaties moeten vervangen worden met een '-'. Maar ik moet 'veld_2' wel handmatig nog kunnen aanpassen, zonder dat 'veld_1' veranderd.
Iemand die mij op weg kan helpen?
<input type="text" name="veld_1" />
<input type="text" name="veld_2" />
Wanneer ik in 'veld_1' bijvoorbeeld het volgende invoer:
Dit is een test regel
Dan wil ik dat 'veld_2' automatisch wordt ingevuld met het volgende:
dit-is-een-test-regel
Dus spaties moeten vervangen worden met een '-'. Maar ik moet 'veld_2' wel handmatig nog kunnen aanpassen, zonder dat 'veld_1' veranderd.
Iemand die mij op weg kan helpen?
| 1 2 | <input type="text" name="veld_1" id="veld_1" onchange="document.getElementById('veld_2').value=this.value.replace(/ /g,'-');" /> <input type="text" name="veld_2" id="veld_2"/> |
Ik probeer divjes random op het scherm te plaatsen.. Ik kom alleen niet verder:
Iemand?
| 1 2 3 4 5 6 7 | $("#randomnumber").each(function() { var randX = Math.floor(Math.random()*window.outerWidth+1); var randY = Math.floor(Math.random()*window.outerHeight+1); $("#randomnumber").css("margin-left",randX); $("#randomnumber").css("margin-top", randY); }); |
Iemand?
Ik doe het volgende om een bepaald aantal wolkjes (quote:Op dinsdag 30 november 2010 14:09 schreef Treces het volgende:
Ik probeer divjes random op het scherm te plaatsen.. Ik kom alleen niet verder:
[ code verwijderd ]
Iemand?
) random op het scherm te flikkeren:| 1 2 3 4 5 6 7 8 9 | var browser_height = $(window).height(); var browser_width = $(window).width(); for(var i = 0; i < numclouds; i++) { $("body").append("<div class=\"cloud\"><img src=\"images/mains/cloud.png\" /></div>"); $("div.cloud").eq(i).css("top", Math.ceil(Math.random() * (browser_height-250)) + "px"); $("div.cloud").eq(i).css("left", Math.ceil(Math.random() * browser_width) + "px"); } |
Kun je daar iets mee?
Edit: ik kijk nog eens, en je probleem is dat je icm jQuery camel-caps moet gebruiken. geen margin-left dus maar marginLeft
[ Bericht 3% gewijzigd door Intrepidity op 30-11-2010 14:20:23 ]
Hmm.. hij blijft linksbovenin staan..
Uiteindelijk wordt het een scherm met een aantal vooraf bekende cijfers die random op het scherm geplaatst moeten worden
Uiteindelijk wordt het een scherm met een aantal vooraf bekende cijfers die random op het scherm geplaatst moeten worden
Weet je zeker dat die window height en width correcte waardes geven? Datsoort functies staan niet bekend om hun goeie cross-browser implementaties...
Ik weet zeker dat bovenstaande code crossbrowser werkt vanaf in ieder geval IE6. Ik vermoed dat jQuery een bepaalde wrapper om window heenlegt om dergelijke inconsistenties te verhelpen.quote:
Weet je zeker dat die window height en width correcte waardes geven? Datsoort functies staan niet bekend om hun goeie cross-browser implementaties...
Ik vraag me af hoeveel huishoudens inmiddels html5 kunnen zien in hun browser.
Je moeder is een hamster
Niet veel, hangt van de doelgroep af. Voor een technisch publiek kun je prima een website met HTML 5 specifieke functionaliteiten bouwen. Voor huisvrouwen van middelbare leeftijd, meh.quote:Op dinsdag 30 november 2010 19:01 schreef Crutch het volgende:
Ik vraag me af hoeveel huishoudens inmiddels html5 kunnen zien in hun browser.
Wat je sowieso kunt gebruiken is het kortere doctype, data-attributen, etc. CSS3 en dingen als <canvas> en <video> blijven problematisch. Er zijn naar ik meen wel emulatielibraries voor in Javascript, maar die moet je omwille van perfomance niet willen gebruiken.
Ongeveer net zoveel als er huishoudens met een computer zijn. Op een enkel huishouden met alleen een machine uit 1999 na misschien.quote:
Ik vraag me af hoeveel huishoudens inmiddels html5 kunnen zien in hun browser.
Ik heb daar eens een stukje code voor gevonden:quote:
Weet je zeker dat die window height en width correcte waardes geven? Datsoort functies staan niet bekend om hun goeie cross-browser implementaties...
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } |
Als je al jQuery gebruikt kun je volgensmij feilloos $(window) gebruiken omdat jQuery de verschillen wegabstraheert.quote:
[..]
Ik heb daar eens een stukje code voor gevonden:
[ code verwijderd ]
En zelfs dit is niet gegarandeerd zuiver, omdat de breedte van een eventuele scrollbalk wel of juist niet wordt meegenomen. Dat is weer browserafhankelijk, en ik heb geen zin/tijd om precies uit te zoeken bij welke browser(s) de scrollbalken worden meegerekend.
Waarom lukt het me nou niet om js functies aan te roepen vanuit een event handler? 
:
Ik begrijp er niks van 
, als ik js code in de event handler schrijf werkt dat wel gewoon, maar functies worden niet aangeroepen...
:| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <script language="JavaScript" type="javascript/text"> <!-- function Doe() { window.alert("2"); document.getElementById("tekst").Focus(); document.getElementById("tekst").Select(); } --> </script> </head> <body> <Input type="text" id="tekst" value="Tekst" onClick="Doe();"> </body> </html> |
, als ik js code in de event handler schrijf werkt dat wel gewoon, maar functies worden niet aangeroepen...
Finally, someone let me out of my cage
Het gaat fout door deze regel:
Als je dat verandert in
gaat het al een stuk beter.
Verder zou ik functienamen met een kleine letter laten beginnen, dat doet javascript zelf ook. Deze twee regels gaan zo niet werken:
Select() en Focus() moeten daar met een kleine letter beginnen, dan werkt het wel.
Als je classes gaat gebruiken in javascript, kunnen de namen daarvan juist weer wel met een hoofdletter beginnen, dat maakt het onderscheid ook duidelijker tussen classes en functies.
| 1 | <script language="JavaScript" type="javascript/text"> |
Als je dat verandert in
| 1 | <script type="text/javascript"> |
Verder zou ik functienamen met een kleine letter laten beginnen, dat doet javascript zelf ook. Deze twee regels gaan zo niet werken:
| 1 2 | document.getElementById("tekst").Focus(); document.getElementById("tekst").Select(); |
Als je classes gaat gebruiken in javascript, kunnen de namen daarvan juist weer wel met een hoofdletter beginnen, dat maakt het onderscheid ook duidelijker tussen classes en functies.
quote:
Het gaat fout door deze regel:
[ code verwijderd ]
Als je dat verandert in
[ code verwijderd ]
gaat het al een stuk beter.
Verder zou ik functienamen met een kleine letter laten beginnen, dat doet javascript zelf ook. Deze twee regels gaan zo niet werken:
[ code verwijderd ]
Select() en Focus() moeten daar met een kleine letter beginnen, dan werkt het wel.
Als je classes gaat gebruiken in javascript, kunnen de namen daarvan juist weer wel met een hoofdletter beginnen, dat maakt het onderscheid ook duidelijker tussen classes en functies.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <script type="javascript/text"> <!-- function doe() { window.alert("2"); } --> </script> </head> <body> <Input type="text" name="tekst" value="Tekst" onclick='javascript: window.alert("1"); doe();'> </body> </html> |
werkt het nog steeds niet...
Ah, ik heb het al: Ik gebruikte geen eindslash bij de inputform: dus ik moet <input ... /> ipv <input ...> gebruiken. Bedankt! (Nu eindelijk proberen iets moois te maken in javascript
)
Finally, someone let me out of my cage
Ja firefox gaat over de zeik omdat je consequent type="javascript/text" doet, in plaats van "text/javascript".
ow hehe dat had ik niet eens gezien. Chrome doet het nog...quote:Op zaterdag 4 december 2010 12:54 schreef KomtTijd... het volgende:
Ja firefox gaat over de zeik omdat je consequent type="javascript/text" doet, in plaats van "text/javascript".
Finally, someone let me out of my cage
Ja zonder type doet'ie het ook gewoon. Blijkbaar doet chrome bij een ongeldig type alleen het type negeren, terwijl firefox het script negeert als dit een niet-ondersteund type is.
Nee, dat heeft te maken met het doctype. Als je een XHTML-doctype gebruikt, moet je die eindslash bij (oa) de input-tag gebruiken. Bij HTML-doctypes mag je die slash weglaten. Je gebruikt helemaal geen doctype, da's sowieso foutquote:
Ah, ik heb het al: Ik gebruikte geen eindslash bij de inputform: dus ik moet <input ... /> ipv <input ...> gebruiken.
