i pad 2

Ipad 3

ipads

buy ipad

ipad covers

ipad price

magento hosting

magento webhosting

the new ipad

buy ipad 2

zMastaa.com

Web Developer and Designer, Graphics Designer and Photographer in Manchester

Html5 and CSS3 touch card / accordian demo

November 11th, 2011

So I’ve been writing little test scripts for this double barrelled combination. It’s clear that Html5 and CSS3 are pretty powerful duo, especially for responsive design. I think it’s only a matter of time before responsive web design becomes the norm, its best to get on it now huh.

I learned quite a lot from Andy Clarke’s Workshop last month, enough to consider concentrating the rest of my final year of uni on Html5, CSS3, javascript and of course php. Taking my knew found knowledge I wrote a quick RSS parser in PHP and displayed the output using HTML5 elements, I also targeted these elements with CSS3 the “hardboiled” way,  it is also responsive to what it is being displayed on so on your iPhone, Android or tablet device it will look slightly different depending on the resolution. Take a look zmastaa.com/html5demos/card.php (fails in IE10 and below for now) its currently using engadget.com‘s RSS feed.

The visual is 95% pure html5 and CSS3, and 5% jQuery to show/hide the description content (i’m not 100% sure if this could be done with CSS).

I’m still learning but right now, I can see the huge amount of potential in this.

 

View Demo - Warning, completely fails in IE10 and below for now

Use jQuery to display number of rows in a mysql database on a form

August 10th, 2010

Im currently writing a search engine that uses a couple of jQuery UI autocompletes and comboboxes, and to spice things up a bit I thought I would add some kind of live updating script that shows the user how many results will be returned, depending on the current search settings BEFORE actually pressing submit/search

i.e.  the Autotrader car search does this pretty dam nicely.

This is my translation of this effect with jQuery and PHP/mysql

Note: This tutorial assumes you already have a form with jQuery auto-completes etc all with element id’s attached

First lets start of with the javascript that will be send the data to an external php file

 
 
function numRows() {
 
var querydb = $("formid").serialize();
 
$.ajax({
 
url: "checkNumRow.php",
 
dataType: "text",
 
data: querydb,
 
success: function(result){
 
$("#results").text(result);
 
},
 
});
 
}

The jQuery script is now ready to send a query to the php file checkNumRows.php whenever the function numRows() is called, it will also return the data to any tag named #results.

So now you want the function numRows() to be called whenever the user changes data on the unfinished form, simply add the following at the end of your javascript file

 
$(":checkbox, :radio").click(numRows);
 
$("select").change(numRows);
 
$("input").blur(numRows);
 
$("input").focusout(numRows); 
// I used focusout as well as blur because blur doesn't seem to 
// work well with auto complete input boxes
 
numRows();

Now that the javascript is ready you need to create a php file called checkNumRows.php and insert the following code below and populate it with your own code to search your database

 
/*
filename::checkNumRows.php
Build your mysql search string using $_POST["element.id"]
above this so hat you end up with something along the 
lines of
$sql = "MYSQL SEARCH STRING";
*/
$results = mysql_query($sql);
$numrows = mysql_num_rows($results);
if ($numrows=="1"){
// You can echo "insert html code here" to create something more complex
//  like the autotrader display
echo  $numrows . " result found";
} else {
echo  $numrows . " results matching the search criteria";
}

Now that is done your php file should be able to display the number of rows in your database depending on whatever your $_POST (the names of your form elements on your form) requests are.
For example a black three door car search might look like this

www.yourwebsite.com/checkNumRows.php?colour=black&doors=3
and should return something similar to
200 results matching the search criteria

Now this is done, back on the page with your form you just add this 1 line to display live results

Feel free to ask questions, I will provide as much help as possible

zMastaa.com

Web Developer and Designer, Graphics Designer and Photographer in Manchester

http://www.twitter.com/zMastaa http://fb.me/eugenesdesigns http://www.linkedin.com/in/eugeneagyeman HTML5 Design by WPlook