View difference between Paste ID: R1eHjXM4 and WLpzGGir
SHOW: | | - or go back to the newest paste.
1
<?php get_header(); ?>
2
3
<div class="col1">
4
5
    <?php if (have_posts()) : ?>
6
        <!--Javascript Functions-->
7
        <script language="JavaScript" type="text/javascript"> 
8
        <!-- 
9
            // Firefox doesn't like 'innnerText' property :(
10
            hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
11
            
12
            // Create images object and properties
13
            images = new Object();
14
            images.default = ['Templates', '/meme/default.jpg'];
15
            images.scumbagsteve = ['Scumbag Steve', '/meme/ss.jpg'];
16
            images.sociallyawkwardpenguin = ['Socially Awkward Penguin', '/meme/sap.jpg'];
17
18
19
            
20
            BaseImage = '';
21
            BaseImageName = '';
22
            captionClicked = False;
23
24
            function SetBaseImage(){
25
            // Pulls image from Combobox and sets 
26
                var selection = document.getElementById("memetype").value;
27
                
28
                // Set new Base Image
29
                BaseImage = images[selection][1];
30
                BaseImageName = images[selection][0];
31
                
32
                
33
                // Update image on site
34
                // http://bytes.com/topic/javascript/answers/722008-how-do-i-use-combobox-change-displayed-image-screen
35
                document.getElementById('display_image').src=BaseImage;
36
                document.getElementById('display_image').alt=BaseImageName;
37
                document.getElementById('truename').value=BaseImageName;
38
                document.getElementById('imgurl').value=BaseImage;
39
            }
40
            
41
            function UpdateCap(){
42
            // Updates top line of preview from Cap1
43
                if(!hasInnerText) {
44
                    document.getElementById('toptext').textContent = document.getElementById('cap1').value;
45
                    document.getElementById('bottext').textContent = document.getElementById('cap2').value;
46
                } else {
47
                    document.getElementById('toptext').innerText = document.getElementById('cap1').value;
48
                    document.getElementById('bottext').innerText = document.getElementById('cap2').value;
49
                }
50
            }
51
            
52
            function UpdateCapFontSize(){
53
            // Updates Both Font Sizes
54
                document.getElementById('toptext').style.fontSize = document.getElementById('cap1font').value + 'px';
55
                document.getElementById('bottext').style.fontSize = document.getElementById('cap2font').value + 'px';
56
            }
57
            
58
            
59
        //-->
60
        </script>
61
        
62
        
63
        
64
        <!-- CSS For Text Over Image -->
65
        
66
        <style type="text/css">
67
            h2 { text-align:center;}
68
            /* Frame Border */
69
            .frame { padding: 5px; border: 1px solid #aaa; }
70
71
            /* Meme CSS */
72
            .meme {
73
                position: relative;
74
                align: center;
75
                height: 400px;
76
                width: 400px;
77
                overflow: hidden;
78
                margin-left:auto;
79
                margin-right:auto;
80
                
81
            }
82
83
            .meme .img {
84
                height: 400px; /*set abs img height*/
85
                width: 400px;
86
                align:center;
87
            }
88
            
89
            .meme .text {
90
                font-family:"Impact", Charcoal, sans-serif;
91
                font-size: 50px;
92
                color: #FFFFFF;
93
                line-height: 100%;
94
                letter-spacing: 1px;
95
                text-shadow:-2px -2px 0 #000,
96
                            0 -2px 0 #000,
97
                            2px -2px 0 #000,
98
                            2px 0 0 #000,
99
                            2px 2px 0 #000,
100
                            0 2px 0 #000,
101
                            -2px 2px 0 #000,
102
                            -2px 0 0 #000;
103
            }
104
                
105
106
            .meme .toptext {
107
                text-align: center;
108
                position: absolute;
109
                width: 400px;
110
                top: 5px;
111
            }
112
113
            .meme .bottext {
114
                text-align: center;
115
                position: absolute;
116
                width: 400px;
117
                bottom: 5px;
118
            }
119
        
120
        </style>
121
        
122
        
123
        <!-- Main Page -->
124
        <?php while (have_posts()) : the_post(); ?>             
125
                
126
            <div class="post-outer">
127
            
128
            <div class="post-alt blog" id="post-<?php the_ID(); ?>">
129
            
130
                <?php if ( get_option( 'woo_breadcrumbs' ) == 'true') { yoast_breadcrumb('<div id="breadcrumb"><p>','</p></div>'); } ?>
131
        
132
                <h2><?php the_title(); ?></h2> 
133
                
134
                
135
                
136
                
137
                <!-- Image Preview -->
138
                
139
                
140
                <div class="meme">
141
                    <img id = "display_image" src="/meme/default.jpg" alt="Select a Template">
142
                    <div class="text">
143
                        <div class="toptext" id="toptext">Caption 1</div>
144
                        <div class="bottext" id="bottext">Caption 2</div>
145
                    </div>
146
                </div>
147
                <br>
148
                
149
                
150
                
151
                <!-- Start Form -->
152
                <!-- TODO: Add form validation (onsumbit="return function()")  -->
153
                
154
                <form action="meme.php" method="post">
155
                <div align="center">
156
                
157
                
158
                <!-- Template Combobox -->
159
                
160
                    <div>
161
                    <select name="memetype" id="memetype" onchange="SetBaseImage()" onclick="SetBaseImage()" onkeyup="SetBaseImage()" onfocus="SetBaseImage()">
162
                        <!-- Javascript to generate Combobox -->
163
                        <SCRIPT language="JavaScript" type="text/javascript">
164
                        <!--
165
                            for (var key in images) {
166
                                document.write("<option value=\"" + key + "\">" + images[key][0] + "</option>");
167
                            }
168
                        -->
169
                        </script>
170
                    </select>
171
                    </div><!-- align=center -->
172
                 
173
                 
174
                <!-- Caption 1 Field -->
175
                
176
                    <b>Top Caption:</b> <textarea name="cap1" id="cap1" rows="4" cols="30" onkeyup="UpdateCap()" onchange="UpdateCap()" onclick="UpdateCap()"></textarea>
177
                    <select name="cap1font" id="cap1font" onchange="UpdateCapFontSize()" onclick="UpdateCapFontSize()" onkeyup="UpdateCapFontSize()" onfocus="UpdateCapFontSize()">
178
                        <option value="50">Size: 50</option>
179
                        <option value="40">Size: 40</option>
180
                        <option value="30">Size: 30</option>
181
                        <option value="25">Size: 25</option>
182
                    </select>
183
                    <br>
184
                    
185
                    
186
                <!-- Caption 2 Field -->
187
                
188
                    <b>Bottom Caption:</b> <textarea name="cap2" id="cap2" rows="4" cols="30" onkeyup="UpdateCap()" onchange="UpdateCap()" onclick="UpdateCap()"></textarea>
189
                    <select name="cap2font" id="cap2font" onchange="UpdateCapFontSize()" onclick="UpdateCapFontSize()" onkeyup="UpdateCapFontSize()" onfocus="UpdateCapFontSize()">
190
                        <option value="50">Size: 50</option>
191
                        <option value="40">Size: 40</option>
192
                        <option value="30">Size: 30</option>
193
                        <option value="25">Size: 25</option>
194
                    </select>
195
                    
196
                    <br>
197
                
198
                
199
                <!-- Dropdown School List (ID = 'school') -->
200
                
201
                <b>School:</b> <?php wp_dropdown_categories('name=school&id=school&hide_empty=0'); ?>
202
                <br>
203
                
204
                
205
                <!-- Hidden Form Data -->
206
                
207
                <input type="hidden" id="truename" name="truename" value="Default">
208
                <input type="hidden" id="imgurl" name="imgurl" value="/meme/default.jpg">
209
                
210
                <!-- Submit Button -->
211
                
212-
                <input type="submit" value="Create">
212+
                <input type="submit" name ="submit" value="Create">
213
                </div> <!-- align=center -->
214
                
215
                </form>
216
                <!-- End Create form -->
217
            
218
            
219
            
220
            
221
            </div><!--/post-->
222
            
223
            </div><!--/post-outer-->
224
225
        <?php endwhile; ?>
226
227
    <?php endif; ?>                                                 
228
229
</div><!--/col1-->
230
231
<?php get_sidebar(); ?>
232
233
<?php get_footer(); ?>