Lil Josh

A tech blog about web development with PHP, MySQL, jQuery, CSS3 and various other programming languages. You will not find anything about ColdFusion, ASP.NET, C# on this blog.

jQuery Mobile Dynamicly Appending to Listview via AJAX issue

March 9, 2014

With jQuery Mobile you can create a Listview of list items but I wanted to populate that list dynamically via AJAX. The problem I was getting is it would work fine when I loaded it the first time but then I wanted to nuke (clear) the list and repopulate it with new content. If you’ve gone through half the trouble I went through to get this to work then I know this is going to help you out! So I won’t drag this out any longer… here’s the solution:

//empty the list
$("#myList").empty();
//do some stuff to populate the content
myListContent += '<li><a>some content</a></li>';
//append the new content and create a new listview and refresh it
$("#myList").append(myListContent).listview().trigger("create");
$("#myList").listview('refresh');
AJAX issue resolved jquery jquerymobile listview

timthumb and PHP thumbnails rotate with large images

January 30, 2014

I’ve been banging my head against the wall trying to figure out why large images were getting rotated when I made them into a thumbnail (either through timthumb or PHP’s imagejpeg). It turns out that with images that were in portrait the width and the height were swapped for very high resolution images (~3000 pixels wide and ~ 2000 pixels tall). So I wrote my own function that looks to see if the EXIF information says this is a portrait image (which is defined by the integer value 6). If it is then I check to see if the width is greater than the height. If so – it’s going to end up in landscape so I simply rotate the image 270 degrees (counter clockwise) and it works! So I’ve made the function to take two arguments; a path to the image, and the desired width of the thumbnail. So here it is:

header('Content-Type:image/jpeg');
//can be called like this:
//script.php?w=200&src=img/myPicture.jpg
echo thumb($_GET["src"],$_GET["w"]);
function thumb( $path, $thumbWidth )
{
$info = pathinfo($path);
// continue only if this is a JPEG image
if ( strtolower($info['extension']) == 'jpg' )
{
// load image and get image size
$img = imagecreatefromjpeg( "{$path}" );
$width = imagesx( $img );
$height = imagesy( $img );
// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );
// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );
// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
$exif = exif_read_data($_GET["src"]);
$orientation = $exif["Orientation"]; //6 for portrait and 1 for landscape
if($orientation == 6 && $width > $height) {
$tmp_img = imagerotate($tmp_img, 270, 0);
}
return imagejpeg($tmp_img);
}
}
exif images PHP portrait rotate thumbnail timthumb

AJAX made easy using jQuery

January 14, 2014

AJAX can seem daunting but it’s never been easier to implement with jQuery! So first, let me give my explanation of what AJAX is and can be used for. Imagine you have a piece of content you’d like to have updated every so often (e.g. an average number from a database), but you don’t want the user to have to reload the page to get the updated number. This is where AJAX comes into play – you can setup an AJAX call to GET the output of a script that queries the database and then use the results to update your page with jQuery. So let’s dive into this example:

index.html

<!DOCTYPE html>
<html>
<head>  
<script src="//code.jquery.com/jquery.js"></script>
<script>
updateNumber();
var updateInterval=setInterval(function(){updateNumber()},3000);
function updateNumber()
{
$.ajax({
type: 'GET',
url: 'ajaxScript.php'
}).done(function( averageTime ) {
$("div#num").html(averageTime);
});
}
</script>
</head>
<div id="num"></div>
</html>

ajaxScript.php

<?php
//get the average time from the last 10 minutes
$stmt = $dbh->prepare("SELECT AVG(time) averageTime FROM `myTable` date >= DATE_SUB(NOW(),INTERVAL 10 MINUTE) LIMIT 1");
$stmt->execute();
$row = $stmt->fetch();
echo $row["averageTime"];
?>
AJAX examples jquery

Swapping variables in PHP

October 28, 2013

I’ve created a short and sweet PHP function swap() to exchange/swap the values of two PHP variables. Here it is in action:

<?php
$cat = "cat";
$dog = "dog";
swap($cat,$dog);
echo "$cat goes meow and $dog goes woof"; //dog goes meow and cat goes woof
function swap(&$var1, &$var2) {
$tmp = $var1;
$var1 = $var2;
$var2 = $tmp;
}
?>

If you’re running this function a lot (e.g. millions of iterations) it’s actually faster to just perform the swap without the function. For example:

for($i = 0; $i < 10000000; $i++) {
$tmp = $var1;
$var1 = $var2;
$var2 = $tmp;
}

Thanks @dnaslave for providing efficiency feedback! :]

function PHP swap variables