On the fly editor

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Michael Rozenbeek

Michael Rozenbeek

22/03/2011 10:53:05
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<?php
// Opslaan van de afbeelding die is gemaakt in stap 1 en 2
include('stap2_save_naambord.php');
//ini_set('display_errors', 1);
//error_reporting (E_ALL);
?>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
             // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
  
   function get(obj) {
      var poststr = "tekst=" + encodeURI( document.getElementById("tekst").value )+
                    "split" + encodeURI( document.getElementById("huisnummer").value )+
                    "split" + encodeURI( document.getElementById("links").value )+
                    "split" + encodeURI( document.getElementById("boven").value )+
                    "split" + encodeURI( document.getElementById("links2").value )+
                    "split" + encodeURI( document.getElementById("boven2").value )+
                    "split" + encodeURI( document.getElementById("hoek").value )+
                    "split" + encodeURI( document.getElementById("hoek2").value )+
                    "split" + encodeURI( document.getElementById("size").value)+
                    "split" + encodeURI( document.getElementById("size2").value );
      makePOSTRequest('generate2.php', poststr);
   }
  
   function setvalue(positie)
   {
           var value = document.getElementById("links").value*1 + positie*1;
           document.forms['myform'].links.value = value;
        document.forms['myform'].rechts.value = value;
   }
  
   function setvalue2(positie)
   {
           var value = document.getElementById("boven").value*1 + positie*1;
           document.forms['myform'].boven.value = value;
        document.forms['myform'].onder.value = value;
   }
    function setvalue3(positie)
   {
           var value = document.getElementById("links2").value*1 + positie*1;
           document.forms['myform'].links2.value = value;
        document.forms['myform'].rechts2.value = value;
   }
  
   function setvalue4(positie)
   {
           var value = document.getElementById("boven2").value*1 + positie*1;
           document.forms['myform'].boven2.value = value;
        document.forms['myform'].onder2.value = value;
   }
</script>

<link href="css/stap3.css" rel="stylesheet" type="text/css">
<title> Stap 3</title>
 
<div id="editor">
    <div class=" titel">
            <h1>Type de tekst die uitgesneden dient te worden.</h1>
    </div>
    <div class="table">
    <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
            <table cellpadding="3px" cellspacing="0">
                <tr>
                    <td>Regel1:</td>
                </tr>
                <tr>
                     <td ><textarea id="tekst" style="width:170px; height:80px;"  onkeyup="javascript:get(document.getElementById('myform')); Settimer();">Hier komt uw tekst</textarea></td>
                </tr>
                <tr>
                        <td> Links:<input id="rechts" onclick="javascript:setvalue(-10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                           Rechts:<input id="links" onclick="javascript:setvalue(+10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                            Omhoog:<input id="boven" onclick="javascript:setvalue2(-10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                         Omlaag:<input id="onder" onclick="javascript:setvalue2(+10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                    </td>
                </tr>
                <tr>
                <td>Tekst draaien:
                        <input type="text" style="width:80px; height:20px;" id="hoek" value="0" onkeyup="javascript:get(document.getElementById('myform')); Settimer();">
                    Lettergrootte:
                        <input type="text" style="width:80px; height:20px;" id="size" value="14" onkeyup="javascript:get(document.getElementById('myform')); Settimer();">
                    </td>
                </tr>
                <tr>
                    <td>Regel2:</td>
                </tr>
                <tr>
                     <td><textarea id="huisnummer" onkeyup="javascript:get(document.getElementById('myform')); Settimer();">Hier komt uw tekst</textarea></td>
                    
                </tr>
                <tr>
                    <td>
                        Links:<input id="rechts2" onclick="javascript:setvalue3(-10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                        rechts:<input id="links2" onclick="javascript:setvalue3(+10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                           Omhoog<input id="boven2" onclick="javascript:setvalue4(-10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                        Omlaag:<input id="onder2" onclick="javascript:setvalue4(+10), get(document.getElementById('myform')); Settimer();" type="button" value="100"/>
                    </td>
                </tr>
                <tr>
                    <td>
                    Tekst draaien:
                        <input type="text" style="width:80px; height:20px;" id="hoek2" value="0" onkeyup="javascript:get(document.getElementById('myform')); Settimer();">
                    Lettergrootte:
                        <input type="text" style="width:80px; height:20px;" id="size2" value="14" onkeyup="javascript:get(document.getElementById('myform')); Settimer();">                       
                    </td>
                </tr>
                <tr>
                <td><input type="button" name="button" value="Naambord opnieuw genereren" width="100px" onclick="javascript:get(this.parentNode); Settimer();"></td>
                </tr>
                <tr>
                <td><input type="submit" value="Bestellen" Name="bestellen"></td>
                </tr>    
            </table>
       </div>
               <div class="achtergrond">
                <?php
                if(isset($_GET['mid']) && isset($_GET['oid']))
                {
            
            // OPHALEN VAN HET ONTWERP --------------------------------------------------------------------------------------------
            $sql_get_ontwerp = mysql_fetch_object(query("SELECT * FROM `naambord` WHERE `ip` ='".$_SERVER['REMOTE_ADDR']."'"));
            
            // --------------------------------------------------------------------------------------------------------------------
            echo '
            <IMG src="images_panel/ontwerpen_site/'.$sql_get_ontwerp->id.'.jpg" width="275" border="1" name="ontwerp">
            
            <SCRIPT language="JavaScript" type="text/javascript">
              var t = 0.5 // interval in seconds
              image = "images_panel/ontwerpen_site/'.$sql_get_ontwerp->id.'_aangepast.jpg" //name of the image
              
              function Settimer()
              {
                  setTimeout("Imagerefresh()", t*500)
              }
              
              function Imagerefresh()
              {
                  tmp = new Date();
                  tmp = "?"+tmp.getTime()
                  document.images["ontwerp"].src = image+tmp
              }
              </SCRIPT>';

                }
                else
                {
                echo '<div class="voorgrondwarning">
                        Uw moet nog een gewenste vorm en materiaal selecteren voor een voorbeeld<br />
                        Van uw naambord.
                      </div>';
                }
                ?>
            </div>
                
     </form>
         
 </div>


De code hierboven Doet het volgende:
Hij refreshed een afbeelding van de server met de getypte tekst erop.

NU dat werkt wil ik graag weten. Hoe ik de button een tekst kan meegeven en alsnog als ik erop klik dat hij de waardes aanpast. Dus zeg maar value="links" en dat asl ik op de knop klik dat hij alsnog de functies correct uitvoert.
Gewijzigd op 22/03/2011 10:53:44 door Michael Rozenbeek
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.