Categories

Render jQuery Mobile on Desktop Computers

If you designed a jQuery Mobile site that it is intended for small size screens, that does not mean that someone will never open your app from a desktop computer. Obviously, an app that was design for an actual screen size of 320 px will not look right if it is opened on a desktop computer.

To prevent the app from looking awful, we can apply CSS to restrict the jQuery Mobile pages from rendering at a width higher that, let’s say, 480 px.

@media only screen and (min-width : 480px) {
 
	div[data-role="page"] > *[data-role="header"],
	div[data-role="page"] > *[data-role="footer"] {
	    width: 480px !important;
        left: 50%;
        margin-left: -240px;
	}
 
	div[data-role="page"] {
	    width: 480px !important;
        left: -240px !important;
        margin-left: 50%;
	}
 
	/* add your favorite image to the background */
	body {
		background-image: url('my-favorite-background.jpg');
		background-attachment: fixed;
		}
}

Setting Up The Default Values Of The jQueryMobile Preloader

Here is a quick example that shows how to setup the default values of the jQueryMobile preloader:

?View Code JAVASCRIPT
$(document).on("mobileinit", function () {
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = false;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";
});

Add Template File to a Post Using Shortcode

// read file
function include_template_file ($template_path=null) {
	if($template_path == null)
		return '';
	ob_start();
    load_template( get_template_directory() .'/'. $template_path );
	$content = ob_get_contents();
	ob_end_clean();
	return $content;
}
 
// shortcode code
function include_template_shortcode($atts, $content=''){
	 extract( shortcode_atts( array(
	      'path' => null
     ), $atts ) );
	return include_template_file($path);
}
 
add_shortcode( 'include_template', 'include_template_shortcode' );
 
// Example:
// [include_template path='assets/my-file.php']

Converting Date to Number and then back to Date

I recently implemented a delete file solution in witch I wanted to preserve the file in a trash folder, so I could eventually restore the file. Instead of deleting the file I renamed it and move it to the trash folder. Since a file with the same name could be re-created and then re-deleted, I wanted to make sure that I can preserve all the different versions of the file and and allow restoring any of the previously deleted version.

The solution that I implemented required to add a suffix to the name of the file using the current date and time as a number. Later on I can present a list of the files in the trash folder and convert the date-suffix back to the date and time when the file was deleted, allowing users to choose which version they want to restore.

$file_name = 'my-image.png';
$date = date('Y/m/d H:i:s');
$date_as_number = strtotime($date);
$new_file_name = $file_name . '.' . $date_as_number;
 
echo $file_name ."\n";      // prints: "my-image.png"
echo $date ."\n";           // prints: "2012/11/28 23:51:21"
echo $date_as_number ."\n"; // prints: "1354168281"
echo $new_file_name ."\n";  // prints: "my-image.png.1354168281"
 
// parse the file name and show deleted date
$deleted_date_as_number = array_pop(explode('.', $new_file_name));
$deleted_date_as_string = date('l dS \o\f F Y h:i:s A', $deleted_date_as_number);
$original_file_name = implode('.', array_slice(explode('.', $new_file_name), 0, -1) );
 
echo $deleted_date_as_number ."\n"; // prints: "1354168281"
echo $deleted_date_as_string ."\n"; // prints: "Wednesday 28th of November 2012 11:57:37 PM"
echo $original_file_name ."\n";     // prints: "my-image.png"
 
echo "Do you want to restore the file \"". implode('.', $original_file_name) . "\" deleted on \n$deleted_date_as_string?";
// prints: Do you want to restores the file "my-image.png" deleted on 
// Wednesday 28th of November 2012 11:57:37 PM?