-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.php
319 lines (314 loc) · 14.3 KB
/
index.php
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<?
include("includes/config.php");
include("includes/common.php");
//prova
$errors=array();
if($_POST['send_comment']) {
if($_POST['address']!='')
$errors['address']=1;
if(trim($_POST['name'])=='')
$errors['name']=1;
if(trim($_POST['comment'])=='')
$errors['comment']=1;
if(count($errors)==0) {
$query="INSERT INTO `comments`(`author`,`email`,`comment`) VALUES ('".addslashes($_POST['name'])."','".addslashes($_POST['email'])."','".addslashes($_POST['comment'])."')";
//echo $query;
$result = $db->Execute($query) or print $db->ErrorMsg()." query:".$query;
mail("[email protected]", "Messaggio da mullinx","Mittente : ".$_POST['name']."\nE-mail mittente : ".$_POST['email']."\n\nMessaggio : \n".($_POST['comment']),"From: [email protected]");
empty($_POST);
header("Location:?p=1#comment");
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>μllinx - Multi Directional Links jQuery plugin</title>
<link rel="stylesheet" type="text/css" href="css/mullinx.css"/>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mullinx.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>
<a title="Multi Directional Link jQuery Plugin and Widget" href="#">μllinx - Multi Directional Hperlinks for the Masses</a>
</h1>
</div>
<div id="content">
<div id="overview" class="par">
<h2>Overview</h2><a name="overview"></a>
<p style="color:#ffe400;font-weight:bold">
<b>μllinx</b> (mullinx) is a super simple, unobtrusive widget and jQuery plugin used to
transform normal hyperlinks into <b>multidirectional hyperlinks</b> through the
flexibility of jQuery's selector.
</p>
<p>
<a href="http://en.wikipedia.org/wiki/Hyperlink" rev="http://en.wikipedia.org/wiki/Links_(web_browser)|Links">HyperLinks</a> (abbreviated to "link") are considered the <i>primary navigational means of the web</i> and the
main essence of hypertextual technology.
A link is a form of text typically published on websites that provides a richer functionality than simple text documents by enabling the reader to explore interesting links to other web pages linked to specific words or images within the page.
They are often used as <i>unidirectional vectors</i>, <b>μllinx</b>'s main aim is to transform
unidirectional links to multi-headed links, without big efforts for web authors.<br/><br/>
There are several experiments and implementations of <i>multidirectional</i> links (e.g. Xlink), but most of them
are not so easy to use in a simple web page, with <b>μllinx</b> I wanted to create something super easy
to use.
</p>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="example" class="par">
<h2>Example</h2><a name="example"></a>
<p>
Move over this link and see <b>μllinx</b> in action: <a style="font-weight:bold;" href="http://en.wikipedia.org/wiki/Web_search_engine" rev="http://www.google.com|Google;http://www.yahoo.com|Yahoo!;http://www.yoople.net|Yoople!;http://www.cuil.com|cuil">Search Engines</a>
</p>
<p>
HTML used in this example:
</p>
<pre><xmp>
<a href="http://en.wikipedia.org/wiki/Web_search_engine"
rev="http://www.google.com|Google;
http://www.yahoo.com|Yahoo!;
http://www.yoople.net|Yoople!;
http://www.cuil.com|cuil">Search Engines</a></xmp></pre>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="download" class="par">
<h2>Download</h2><a name="download"></a>
<p>
<div class="sub_par">
<h4>Option A: The widget way</h4>
<p>
No need to downloads! You just need to include the widget script tag in your page:
</p>
<pre><xmp><script src="http://mullinx.makinguse.com/get/" type="text/javascript"></script></xmp></pre>
<!--<p>
If you want to see the widget version in action, please visit this page: <a href="http://www.makinguse.com/" alt="MakingUse.com" target="_blank">widget playground</a>.
</p>-->
</div>
<br/>
<div class="sub_par">
<h4>Option B: jQuery Plugin</h4>
<p>
Download the <b>μllinx jQuery plugin</b> (Version 0.2):
</p>
<ul>
<li>Uncompressed: <a href="http://code.google.com/p/mullinx/downloads/list" target="_blank">mullinx.js</a> (<?=filesize_format(filesize("js/mullinx.js"))?>)</li>
<li>Minified: <a href="http://code.google.com/p/mullinx/downloads/list" target="_blank">mullinx.min.js</a> (<?=filesize_format(filesize("js/mullinx.min.js"))?>)</li>
</ul>
<p>
You can download <b>μllinx</b> jQuery Plugin from these websites as well:
</p>
<ul>
<li><a href="https://github.com/littleark/mullinx" target="_blank">Github</a></li>
<li><a href="http://plugins.jquery.com/project/mullinx" target="_blank">jQuery Plugins</a></li>
</ul>
</div>
</p>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="howto" class="par">
<h2>How to use</h2><a name="howto"></a>
<p>
Using <b>μllinx</b> is pretty straightforward, in a couple of steps you'll be running:
</p>
<h3>Step 1: Setup μllinx</h3>
<br/>
<div class="sub_par">
<h4>Option A: The widget way</h4>
<p>
With the <b>μllinx widget</b> you don't neet to download or setup
scripts or libraries in your page.<br/>
You just need to include the widget script tag at the end of your page:
</p>
<pre><xmp><script src="http://mullinx.makinguse.com/get/" type="text/javascript"></script></xmp></pre>
</div>
<br/>
<div class="sub_par">
<h4>Option B: The jQuery plugin way</h4>
<p>
If you don't want to embed the widget, you can opt for the <b>μllinx jQuery plugin</b>. In order to use the plugin you need the <a href="http://www.jquery.com" rev="http://docs.jquery.com|jQuery Documentation;http://en.wikipedia.org/wiki/JQuery|jQuery on Wikipedia">jQuery Library</a> to be included in your page header:
</p>
<pre><xmp>
<script src="jquery.js" type="text/javascript"></script>
<script src="mullinx.min.js" type="text/javascript"></script></xmp></pre>
<p>
Once you have included the libraries in your header, don't forget to add these few lines of javascript code into your page:
</p>
<pre>
$(function() {
$("a").mullinx();
});</pre>
</div>
<br/>
<h3>Step 2: Activate your links</h3>
<div class="sub_par">
<p>
Now you need to add the additional directions to your <a> tags, doing it
is pretty simple, you just need to insert the url in the <b>rev</b> attribute,
using the <b>;</b> (semicolon) as separator:
</p>
<pre><xmp><a href="http://mainlink.uri" rev="second.uri;third.uri;...;last.uri">Main Site</a></xmp></pre>
<p>
You can also define a nicer title for each url, adding <b>|</b> (pipe character) and the title just after the url:
</p>
<pre><xmp>...rev="second.uri|Second Title;third.uri|Third Title;...;last.uri|Last Title"...</xmp></pre>
<p>
Why not using the <i>rel</i> attribute? Because "rev" is less used, "rel" could create some problem
for is widely used for other purposes
</p>
</div>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="extend" class="par">
<h2>Extend your μllinx!</h2><a name="extend"></a>
<p>
Customizing <b>μllinx</b> depends on the version you have opted for, widget or jQuery plugin:
</p>
<h3>Widget</h3>
<div class="sub_par">
<p>
The widget version of μllinx introduces two themes: dark and bright version. , if you
want to switch to the bright one (similar to the one you can see in this page) you just have to modify a little bit the widget script tag:
</p>
<pre>
<span style="color:#ffff00">dark theme:</span><xmp><script src="http://mullinx.makinguse.com/get/dark/" type="text/javascript">
</script></xmp>
<span style="color:#ffff00">bright theme:</span><xmp><script src="http://mullinx.makinguse.com/get/bright/" type="text/javascript">
</script></xmp>
</pre>
The dark theme is the default one, so if you don't specify any theme in the script tag you'll get a dark <b>μllinx</b>.
</div>
<br/>
<h3>jQuery Plugin</h3>
<div class="sub_par">
<p>
<b>μllinx jQuery plugin</b> has some settings you can customize. The available options are:
</p>
<ul>
<li><b>bgcolor</b>: defines the background color. #000 (black) is default.</li>
<li><b>color</b>: defines the font color. #fff (white) is default.</li>
<li><b>hoverColor</b>: defines the links color when mouse moves over.#ffff00 (yellow) is default.</li>
<li><b>opacity</b>: defines μllinx transparency, values from 0 to 1 (0 is transparent, 1 no see-through). 0.9 is default.</li>
<li><b>fontSize</b>: defines font size. 0.8em is default.</li>
<li><b>fontFamily</b>: defines font family. Arial is default.</li>
<li><b>separator</b>: defines the spearator between urls in the rev attribtue. <b>;</b> (semicolon) is default.</li>
<li><b>sub_separator</b>: defines the spearator between url and title in the rev attribtue. <b>|</b> (pipe) is default. "|",</li>
</ul>
<p>
Here we go with an example:
</p>
<pre><xmp>
$(function() {
$("a").mullinx({
color:"#00ffff",
opacity:0.5,
bgcolor:"#fff",
color:"#000",
hoverColor:"#0000ff",
fontSize:"18px",
fontFamily:"Georgia,sans-serif"
});
});
</xmp></pre>
</div>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="contacts" class="par">
<h2>Contacts</h2><a name="contacts"></a>
<p>
So you really want to write me?!? Uhm...let's see then...you could try at <b class="fake_link">info[at]makinguse.com</b><br/>
<i>Please, don't write to tell me this page is a mess...</i>
</p>
</div>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<div id="comments" class="par">
<h2>Comments</h2><a name="comments"></a>
<?
$query="SELECT `author`,`email`,`comment`,`timestamp` FROM `comments` WHERE `approved`=1 ORDER BY `timestamp` DESC";
$result = $db->Execute($query) or print $db->ErrorMsg()." query:".$query;
if($result->RecordCount()>0) {
while(!$result->EOF) {
?>
<div class="news">
<b class="fake_link"><?=$result->fields['author']?></b>
said on <?=date("l jS F Y",strtotime($result->fields['timestamp']))?> at <?=date("g:ia",strtotime($result->fields['timestamp']))?>
<p>
<?=strip_tags(stripslashes($result->fields['comment']),"<a>")?>
</p>
</div>
<?
$result->MoveNext();
}
} else {
?><div class="news">No comments yet...and probably never!</div><?
}
?>
<div class="nav">
<a href="#" rev="#overview|Overview;#example|Example;#download|Download;#howto|How to use;#extend|Extend your μllinx;#contacts|Contacts;#comments|Comments">Top</a>
</div>
<p>
<h3>Your comment</h3><a name="comment"></a>
<?if(!$_GET['p']) {?>
<form action="#comment" method="post">
Here you can leave a comment, would be nice if you keep it friendly, but don't worry I need to approve it before...eheh
<br/><br/>
<label>Name</label><?if($errors['name']) {?> <i class="error">pleaaaseeee....</i><?}?><br/>
<input type="text" value="<?=stripslashes($_POST['name'])?>" name="name" size="60" maxlength="255" style="max-width:380px;"/>
<br/>
<label>Email</label> <i style="color:#aaa;">(not compulsory)</i><br/>
<input type="text" value="<?=stripslashes($_POST['email'])?>" name="email" size="60" maxlength="255" style="max-width:380px;"/>
<br/>
<label>Comment</label><?if($errors['comment']) {?> <i class="error">pleaaaseeee....</i><?}?><br/>
<textarea name="comment" cols="80" rows="10" style="max-width:520px;"><?=stripslashes($_POST['comment'])?></textarea>
<br/>
<i style="color:#aaa;font-size:0.8em;">Name and Comment are compulsory...just in case...</i>
<br/><br/>
<input type="text" class="bot" value="" name="address" />
<input type="submit" class="send" value="Send comment »" name="send_comment" />
</form>
<?} else {?>
<h4 style="color:#ffd200">Comment sent! Thank you!</h4>
<?}?>
</p>
</div>
</div>
<div id="footer">
<p>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/us/80x15.png" /></a><br /><span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dc:title" rel="dc:type">mullinx</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="mullinx.makinguse.com" property="cc:attributionName" rel="cc:attributionURL">Carlo Zapponi</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 License</a>.
</p>
<p>
© 2008 <span class="fake_link">Carlo Zapponi</span>
</p>
</div>
<script type="text/javascript">
$(function() {
$("a").mullinx({
color:"#00ffff",
bgcolor:"#fff",
color:"#000",
hoverColor:"#0000ff"
});
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-364839-16");
pageTracker._trackPageview();
</script>
</div>
</body>
</html>