Posted on June 23, 2009
|
|
Filed under: Uncategorized
So i stumbled accross ajax fancy captcha a while ago and thought it was a great idea. However when i uploaded the standard build to my server i found that the icon that it had asked me to drag was the only one that didn’t display. After some tinkering i believe this was due to the way php is set up on my server. So no doubt other people may find the same issue. Here is what it looked like with the standard install. And here is it with my modifications. the modifications i have made are to captcha.php file as shown below. I have not made any improvements to this file just made it workable on my server. (php5)
Hope this may help someone out.
<?php
/*
captcha.php
jQuery Fancy Captcha
www.webdesignbeach.com
Created by Web Design Beach.
Copyright 2009 Web Design Beach. All rights reserved.
*/
session_start(); /* starts session to save generated random number */
/* this compare captcha's number from POST and SESSION */
if(isset($_POST['captcha']) && $_POST['captcha'] == $_SESSION['captcha']){
echo "Passed!"; /* YOUR CODE GOES HERE */
unset($_SESSION['captcha']); /* this line makes session free, we recommend you to keep it */
}else{
/* in case that form isn't submitted this file will create a random number and save it in session */
//echo "Failed!";
$rand = rand(0,4);
$_SESSION['captcha'] = $rand;
echo $rand;
}
?>
Posted on May 21, 2009
|
|
Filed under: Javascript, jQuery
ok so i really needed a basic accordion style menu to convert my ul list navigation into something a little more exciting. After testing a few of the available options i found tat they were all just trying to do too much for what i actually wanted. Mainly i didnt want to define every single time i wanted a sub-menu, i needed a one glove fits all solution that would just pick up my sub menus on the fly. I couldn’t really find what i was chasing but i knew the solution was pretty simple. So here is what i came up with.
the jquery
including jquery and setting up the ul navigation
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#p-list a.cat").next().hide();
$("#p-list a.cat").click(function() { $(this).next().slideToggle(); });
})
</script>
the very simple ul list
<div id="p-list">
<ul>
<li><a href="#" class="cat">category 1</a>
<ul>
<li>sub link</li>
<li><a href="#" class="cat">sub category 1</a>
<ul>
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
</ul>
</li>
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
</ul>
</li>
<li><a href="#">Not a category</a></li>
<li><a href="#" class="cat">category 2</a>
<ul>
<li>sub link</li>
<li>sub link</li>
<li>sub link</li>
</ul>
</li>
</ul>
</div>
Demos
i have also included two demos bare bones and Styled
i have also included in the styled example the jquery line
$(’#p-list li:last-child’).addClass(’end’);
this basically applies the class “end” to the last ui element to allow u the cap of the last category etc. You could obviously do alot like indenting each level etc but i thought i would leave that up to you.
hope you like.
Posted on May 19, 2009
|
|
Filed under: Uncategorized
Ok so here is the complete sample code for using forms with uploadify. Firstly it would be good for you to have the basic demo working and your will have to change the links to the js css and upload.php to suit your paths. in the example upload.php i am basically showing you how to return errors and the full list of get variables posted from the form. You will obviously need to include the right upload.php found on the uploadify web site. you can then just use $_GET['input_name'] to action any of your form fields.
form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'upload.php',
'folder': 'files',
'multi': true,
'buttonText': 'Select Files',
'checkScript': 'uploadify/check.php',
'displayData': 'speed',
'simUploadLimit': 1,
'onComplete': function(a, b, c, d, e){ alert(d);},
'onAllComplete': function(event,data){
//something here
}
});
});
</script>
<script type="text/javascript">
function startUpload(id){
var queryString = '&' + $('#new_doc_upload').serialize();
$('#fileUpload').fileUploadSettings('scriptData',queryString);
$('#fileUpload').fileUploadStart();
}
</script>
</head>
<body>
<form id="new_doc_upload" method="get">
<div id="fileUpload">You have a problem with your javascript</div>
<a href="javascript:startUpload('fileUpload')">Start Upload</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>
<p></p>
Your name <input type="text" name="yourname" /><br />
Your comment <textarea name="yourcomment"></textarea>
</form>
</body>
</html>
upload.php
<?php
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
print_r($_GET);
switch ($_FILES['Filedata']['error'])
{
case 0:
//$msg = "No Error (" . print_r($_GET) .")"; // comment this out if you don't want a message to appear on success.
break;
case 1:
$msg = "The file is bigger than this PHP installation allows";
break;
case 2:
$msg = "The file is bigger than this form allows";
break;
case 3:
$msg = "Only part of the file was uploaded";
break;
case 4:
$msg = "No file was uploaded";
break;
case 6:
$msg = "Missing a temporary folder";
break;
case 7:
$msg = "Failed to write file to disk";
break;
case 8:
$msg = "File upload stopped by extension";
break;
default:
$msg = "unknown error ".$_FILES['Filedata']['error'];
break;
}
If ($msg)
$stringData = "Error: ".$_FILES['Filedata']['error']." Error Info: ".$msg;
else
$stringData = "1"; // This is required for onComplete to fire on Mac OSX
echo $stringData;
}
//echo "1";
?>
Posted on April 28, 2009
|
|
Filed under: Uncategorized, jQuery
Probably one fo the most anticipated api releases has finally come about from google. Yes the Google Analytics API Fun times ahead ! The API will let developers use the google analytics data on their site in any way they see fit.
Posted on April 25, 2009
|
|
Filed under: Uncategorized
Here is a nice little way of being able to submit any form data you want with uploadify without having to specify all the inputs.
Step 1
First thing you need is the basic demo going.
Step 2
Create a new function that will act as our new upload function. And replace “#new_doc_upload” with the id of the form with all the input you wish the send to the upload script.
<script type="text/javascript">
function startUpload(id){
var queryString = '&' + $('#new_doc_upload').serialize();
$('#'+id).fileUploadSettings('scriptData',queryString);
$('#'+id).fileUploadStart();
}
</script>
Step 3
Replace your start upload link with a link to the new function we made in step 3. In this case we pass our function the our upload id ‘fileUpload’ (You will need to change this to your own).
eg.
<a href="javascript:startUpload('fileUpload')">Start Upload</a>
And hey presto you should now be able to access all your form items using GET in you specified upload script.
Posted on April 15, 2009
|
|
Filed under: PHP
Here is a great tip for decoding a serialized string in PHP. Particularly handy when using sortables in jQuery.
This code simply shows you how to make a sortable ul list and process the new order without the leaving the page using ajax and php. The process page is generally where you may do some kind of database modification to save the state of the newly ordered list.
Lets say you had a ul list with the id #sortable
and a bunch of li inside that prefixed with doc_
eg
<ul id="sortable">
<li id="doc_23">Documnet id is 23</li>
<li id="doc_24">Documnet id is 24</li>
<li id="doc_25">Documnet id is 25</li>
</ul>
and the jQuery
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
var result = $('#sortable').sortable('serialize');
$.get("process.php", { 'list': result} ,
function(data){
alert(data);
});
}
});
$("#sortable").disableSelection();
});
</script>
then our process.php would contain something like
$list = $_GET['list'];
parse_str($list);
print_r($doc);
this will convert our li ids to a nice array in the new sort order. From here u could implode it to a nice string or just loop thru the array.
Posted on April 15, 2009
|
|
Filed under: Javascript, jQuery
EDIT : i have updated this post here
So i really like uploadify and what it offers over swfUpload. However i needed something that could also submit alot of form data along with my upload. I didnt want to manually add each field as using this multiple times would prove rather frustrating. So here is a really simple technique i have put together that you can use that doesn’t involve alot of manual variable referencing.
Step 1
First thing you need is the basic demo going.
Step 2
Then simply download and add the jQuery form plugin found here.
You may now have something that looks like this in your head tag
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ext/jquery-validate/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
in your head tag
Step 3
Create a new function that will act as our new upload function. And replace “#new_doc_upload” with the id of the form with all the input you wish the send to the upload script.
<script type="text/javascript">
function startUpload(id){
var queryString = '&' + $('#new_doc_upload').formSerialize();
$('#'+id).fileUploadSettings('scriptData',queryString);
$('#'+id).fileUploadStart();
}
</script>
Step 4
Replace your start upload link with a link to the new function we made in step 3. In this case we pass our function the our upload id ‘fileUpload’ (You will need to change this to your own).
eg.
<a href="javascript:startUpload('fileUpload')">Start Upload</a>
And hey presto you should now be able to access all your form items using GET in you specified upload script.
Posted on April 7, 2009
|
|
Filed under: Javascript
Ok so i know this isnt anything ground breaking but i thought i would share it as i feel it covers a really simple operation well.
Have you ever wanted a simple div that fades in to display a message like “Form Submited” then fades out again. Well here is how i do it using jQuery
So basicaly i fade the box to nothing on dom load. then bring it back to life when the function is requested. Hold it for 3000ms with a fake animate opacity of 1 as it is already 1 then fade it out. I dont destroy the div as it may need to be used again without page refresh.
<script type="text/javascript">
$(document).ready(function() {
$('#messageBox').fadeTo(0, 0);
});
function messagebox(){
$('#messageBox').fadeTo("slow", 1).animate({opacity: 1.0}, 3000).fadeTo("slow", 0);
}
</script>
<a href="javascript:messageBox()">Clicky</a>
<div id="messageBox">Hello</div>
Posted on March 27, 2009
|
|
Filed under: Uncategorized
So I had an interesting conversation with apple today as i was inquiring about purchasing the Apple Protection Plan for my iMac. The problem was i wasn’t exactly sure how long i have had it for as you are only eligible to purchase the extended 2 years within the first year of purchasing it. My iMac has never been registered with apple so therefore they had no record of its purchase. As i spoke to the apple support person he insisted i remember the date of purchase, i couldn’t find the receipt so i was randomly guessing months. Then i had this great idea i might actually know where i put the receipt for my purchase.. so with some quick goat thinking i put the nice man at apple on hold and went to the filing cabinet and looked in the receipts folder. I know genius, there it was. I then read out the date on the phone and it was a little over a year ago by about 15 days. So with that information at hand he told me that i was ineligible to apply for the apple care protection plan. Fair enough.
Then i begged to ask the question if apple can actually tell when the first time i turned my iMac on, to work out when my date would have started from. He said no. So then i said to make sure “So there is no way that you can validate when i bought my computer and there fore when my one year started” he said no. I then asked “What if I had just said i bought on a date within the first year then you wouldn’t have known and would have to believe my purchase date”, and he agreed.
So in the end i was out done by my honesty or stupidity, i really would have thought apple would record the first time a machine is turned on and send it with registration no matter when you register, but i guess not everyone can have the internet. So if your buying your mac from a reseller and haven’t registered it you can stretch your dates a bit without anyone being the wiser when looking for your APple Protection Plan.
Posted on March 24, 2009
|
|
Filed under: Uncategorized
