Turn your web browser into a phone capable of making phone calls

Phono is a simple jQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.

There are some amazing APIs popping up out there and this is an example of one that I could imagine being really handing for instant call support. The only problem which is stopping me from jumping in now is US domestic calls only at the moment. If you try it out let me know.

Posted: 09-Dec-2011

View: 1188

Permalink: here

my blog now on Twitter bootstrap

It's been quick and rather painless experience but this blog is now updated and the template is using Twitter's own Bootstrap.

Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

As a CSS toolkit its a powerful way to get a site prototyped up and running quickly. It includes the core CSS and HTML you need for typography, forms, buttons, tables, grids, navigation, and more. Also if you haven't looked at it in a while they are also adding the Javscript elements to make it even quicker to get going with.

Posted: 10-Oct-2011

View: 1579

Permalink: here

Capture all click events with jQuery

A friend was after capturing any click event on a page and then checking the tag it was on/over. The great thing with jQuery is that you can get to this information with little effort. Below is a snippet of code which will dump the tag (in UPPERCASE) to the console.log.

view plain print about
1$(document).bind('click', function(e) {
2        console.log( e.toElement.tagName; )
3    });

If you want to know what else you can tap in to then change line 2 to console.log(e) and have a good explor around.

Posted: 23-Feb-2011

View: 2385

Permalink: here

Happy new year to everyone

Thanks to all the people that follow mytweets and blog posts. 2010 hasn't been the greatest of years for me personally but here is to 2011 being a lot better! (with more posts)

Posted: 31-Dec-2010

View: 2173

Permalink: here

finding all empty text fields with jQuery

Needed to do a basic validation check for a client which simply told the user that not all the fields have been completed are they sure they want to continue. Turns out jQuery made this simples with the command $(":text[value=]") which returns all the objects. In the end my (cut down) function that I used on submit of the form was:

view plain print about
1function emptyFieldCount(){
2    var fieldCnt = $(":text[value=]");
3    var isOk = true;
4    if(fieldCnt.length >
10){
5        isOk = confirm('Are you sure you want to continue, not all fields have been filled out');
6    }
7    return isOk;
8}

Posted: 04-Dec-2010

View: 2662

Permalink: here

jQuery release Mobile alpha 1

There was already jqTouch out there but it seems that jQuery have gotten in to the mobile user interface framework area themselves now. Already the Demos/Documentation page looks good showing off features such as theming, toolbars, forms, lists, buttons etc. Upcoming components include tablet optimisation and theme rolling which should be exciting if you have ever used the UI .

Now I just need to find more hours in the day. Check it out:

Posted: 17-Oct-2010

View: 2262

Permalink: here

Clearning all next Select elements with jQuery

I am doing a search criteria page which needs to clear the preceeding <select> options should any one of them change.

jQuery makes all Js work easy but my solution wasn't as elegant as it could be, it was more like something that was beaten down with rotten fish. At first I had switch statements then I was looping over this and that until I remembered about the .index() function and got the code down to 2 lines. Hopefully this saves someone else later on

The jQuery

view plain print about
1$("select").change( function(){
2    // Get the index so we know which other <select>'s to clear
3    var selectedIdx = $(this).parent().index()-1;
4    $("select:gt(" + selectedIdx + ")").empty();
5})

Posted: 15-Oct-2010

View: 2299

Permalink: here

Submit jQuery tabs back on to itself

jQuery UI is a powerful set of interaction plugins for building RIA apps that run and the look the same across multiple browsers. Below is an example of using the tabs to hold multiple forms which submit back to themselves. The code is pretty straight forward and consists of two pages, the first one can even be a HTML page but the second one in my demo is a ColdFusion page to show the passed variables.

view plain print about
1<html>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5<title>Submit jQuery tabs back on to itself</title>
6<!-- Use Google CDN for jquery files -->
7<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
9<!-- You can use Googles CDN for the themes as well -->
10<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />
11<script>
12$(document).ready(function(){
13// set the tabs
14$("#tabs").tabs();
15// Capture the form's submit event
16$('.inlineForm').live('submit', function() {
17$.ajax({ // create an AJAX call...
18data: $(this).serialize(), // get the form data
19type: $(this).attr('method'), // GET or POST
20url: $(this).attr('action'), // the file to call
21success: function(response) { // on success..
22$('.ui-tabs-panel:visible').html(response); // update the DIV
23}
24});
25return false; // cancel original event to prevent form submitting
26})
27}); // END (DOCUMENT).READY
28</script>
29</head>
30<body>
31<div id="tabs">
32<ul>
33<li><a href="#tabs-1">Form 1</a></li>
34<li><a href="#tabs-2">Form 2</a></li>
35</ul>
36<div id="tabs-1">
37<!-- This is your first form. You could call this content in from Ajax?
38Also note the class name which is the reference point for jQuery
39-->

40<form action="receive.cfm" method="get" class="inlineForm">
41<input type="text" name="val1" value="" />
42<input type="submit" name="submit" value="Submit Form 1" />
43</form>
44</div>
45<div id="tabs-2">
46<!-- This is your second form. You could call this content in from Ajax? -->
47<form action="receive.cfm" method="get" class="inlineForm">
48<input type="text" name="val2" value="" />
49<input type="submit" name="submit" value="Submit Form 1" />
50</form>
51</div>
52</div>
53</body>
54</html>

The second page should be called receive.cfm

view plain print about
1<!-- This would process your form information and pass back a result to the user -->
2<cfsetting showdebugoutput="false" />
3<script>$("#dialog").dialog( {bgiframe: true, height: 140, modal: true} );</script>
4<div id="dialog" title="Done!">
5<p>Form submitted in to same tab</p>
6</div>
7<p>
8<cfdump var="#url#" format="text" label="Url variables">
9</p>

Posted: 26-Jan-2010

View: 8508

Permalink: here

Pet Rescue SOS, a new site in the works

Pet Rescue SOS is a site I've had a hand in putting it together, put simply, is the place where you can register your pets, have them assigned a unique tag and identity number which can used to identify and locate your pet anywhere in the world. This service is available online 24hrs a day and you have access to your own registration section from where you can manage your account and pets.

Below for anyone interested is some of the tech specs:

Posted: 23-Jan-2010

View: 1661

Permalink: here

Checking for a DIV on a page with jQuery

Trying to find if a DIV is present on a page with jQuery

view plain print about
1if($('#DIVID').length){
2 /*DIV isDefined()*/
3}

Was thinking of putting this in a jQuery plugin like isDefind() put then its not worth the extra code I think :)

Posted: 08-Jan-2010

View: 893

Permalink: here

More Entries