PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

update en code

Door Jessica op 22-02-2009 09:03
815 views
Hallo,

net beginnend en wil graag een voorbeeld scriptje om mee te beginnen. Wie kan mij er aan 1 helpen?

Onderstaande is de bedoeling:

Het moet allemaal op 1 pagina gebeuren.

Ten eerste wordt er op die pagina een afbeelding getoond.
Onder die afbeelding moet een form komen te staan die gebruikt moet gaan worden om de width, height, en border te bepalen van de afbeelding.
Bij elke wijziging wil ik graag dat dit direct bij de afbeeling wordt uitgevoerd (onchange update of zoiets??)

Onder de form moet een textarea komen te staan waar ook direct (na elke wijziging in de form) een html-plaatsings code komt te staan.


Wie kan mij op weg helpen en zonodig een voorbeeldje maken?

Mijn voorkeur gaat uit naar volledig Php en het liefst niks/zo weinig mogelijk in javascript.

Ben net 3 weekjes bezig om zelf het e.e.a. te leren. En dit moet voor mij een begin worden om verder zelf ideeen te kunnen uitvoeren.


Jessica
Terence Hersbach
22-02-2009 09:19
als je geen javascript wilt gebruiken, kan je moeilijk met onchange werken.

Alles is het best uit te voeren met alleen maar javascript.

Uiteindelijk als de afbeelding 'ingesteld' is, zou je een submit kunnen doen en dan met php alles opslaan.

J
Jessica
22-02-2009 09:21
Hallo Terence,

als werken met javascript voor zoiets de enigste/beste oplossing zou zijn dan maar met javascript.

Weet u ergens een voorbeeld waarmee ik aan de slag kan of kunt u mij verder op weg helpen met een voorbeeldje?


Jessica
s
storeman storeman
22-02-2009 10:00
Ik zou dit lekker met javascript gaan doen, typisch iets wat prima clientside kan worden afgehandeld. Degene die javscript uit heeft staan, bouwt zelf maar iets of heeft pech.

Als je niets van javascript weet, zou ik een gaan rondneuzen op http://www.w3schools.com/ , daar staat veel uitgelegd en is ruimte om zelf te experimenteren.

Je zult merken dat javascript niet zomaar overal hetzelfde reageert, daarom geef ik de voorkeur aan het gebruik van een bibliotheek ( persoonlijk: mootools. Maar er zijn ook prototype, jQuery, dojo). Ik geef mijn voorbeeld maar in javascript icm met mootools, dat zal je op weg helpen:

http://tuincentrum.dyndns.info:81/_test/phphulp/img_resize.html

de broncode kun je gewoon bekijken.

( met mijn je-moet-js-maar-aan-hebben-staan opmerking, schop ik vast mensen tegen het zere been, mocht je daar een discussie over willen houden, dan doen we dat lekker in een ander topic!).
J
Jessica
24-02-2009 14:36
Als eerste wil ik storeman even bedanken voor zijn reactie. Het is wat ik bedoelde enkel vond ik er wel een voor mij gecompliceerde/uitgebreide javascript (mootools.js) bijzitten.

Dat is mede de reden dat ik zelf maar verder ben ga puzzelen en er nu bijna uit ben op 1 klein dingetje na.

Bij onderstaande script is het nu zo dat men de afbeelding pas te zien krijgt als ik bijv de breedte van de betreffende afbeelding heb gewijzigd.
Echter ik wil graag dat betreffende afbeelding al te zien is als ik de pagina binnenkom, en dat vervolgens elke wijziging die ik middels de form zal ga doen op diezelfde afbeelding zichtbaar is.

Wie kan mij een oplossing/tip geven waar,wat,hoe ik in de onderstaande script moet wijzigen?



<script>
function generateHTMLCode(){
	var url ="http://phphulp.nl/imgs/header/logo.gif";
	var width = document.getElementById("width").value

    code = ""
	code += "<img\n"
	code += "src=\""+url+"\" \n"
	code += "width=\""+width+"\" height=\"150\">\n"
	document.getElementById("code_text").value = code;
	document.getElementById("preview").innerHTML = code;

}
</script>
<form method="post" name="demo">

<select id="width" onChange="generateHTMLCode();">
		<option value="100" selected>100</option>
		<option value="150">150</option>
        <option value="200">200</option>
</select>
<br />
<input type="button" value="Code" onClick="generateHTMLCode()" />
<br />
PREVIEW: <div id="preview"></div>
<br />
<textarea id="code_text" rows="8" cols = "88"></textarea>

</form>
T
Tristan nvt
24-02-2009 14:39
Even tussendoor: de code van Mootools.js hoef je absoluut niet te kennen/kunnen lezen. Het is een framework/library die bepaalde dingen makkelijker voor je maakt :)

Meer info: http://mootools.net/
J
Jessica
24-02-2009 14:44
Hallo Tristan,

OK. Had ook al gezien dat middels mootools een heel hoop mogelijk is.
Maar daar ga ik mij later eens in verdiepen :)
J
Jessica
24-02-2009 14:51
Volgens mij ben ik er al uit.

Gewoon tussen de div-id-preview-tags de url v/d afbeelding plaatsen, latere wijzigingen in de form worden over die andere afbeelding heengezet.

<div id="preview"><img scr="http://phphulp.nl/imgs/header/logo.gif"> </div>

Of is dit een niet correcte oplossing???
J
Jessica
24-02-2009 19:03
@storeman,

die heb ik idd gezien. Zie ook mijn post van: 24.02.2009 14:36

Oplossing is precies wat ik toen zocht echter vond ik de achterliggende javascript (mootools.js) voor mij nog wat gecompliceerd in elkaar zitten.
Maar ik ga er zeker nog eens mee stoeien. Ook met name de andere scripts+tutorials die via mootools worden aangeboden. Moet zeggen dat dat zeer leerzame stof is.

Heb nu in ieder geval mijn wensen werkende via wat eigen gepuzzel :)
Is na te lezen in 24.02.2009 14:36 & 24.02.2009 14:51

Reageren

Inloggen om te reageren