Sean Walther's Blog

jQuery Mobile 1.0.1 Released – with bada Support

In case you missed it, as I did, jQuery Mobile released version 1.0.1 a week ago.

The biggest changes seem to be the addition of official Samsung bada support, along with some additional test clients.  bada is an operating system for mobile developers developed by Samsung.  It doesn’t sound like the team had to do anything to support the platform, but it’s nice to know there will be an additional device tested with releases.

To download the new jQuery Mobile 1.0.1:

• JS - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js (24KB)
• CSS w/ Theme - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css (7KB)
• CSS w/o Theme - http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css (6KB)

Not only do we have 1.0.1 now, but jQuery Mobile 1.1 is coming out soon.

Here’s some stuff to look forward to in jQuery mobile 1.1:

• AMD support
• True Fixed Toolbars – it’s always been buggy, but they seem to have come up with a CSS based method that works everywhere (and doesn’t jump around)
• Better AJAX page transitions

I could swear there was a beta version of jQuery Mobile 1.1 out there, but I can’t seem to find the link.  Maybe I’m crazy?

Tags: AJAX, AMD, bada, CSS, jQuery, jQuery Mobile, JS, samsung

jQuery Mobile 1.1 – Fixed Toolbars, Improved Transitions

jQuery Mobile 1.1, which will be ready for release in mid/late February, will have some nice updates.  I’m sure mobile web developers are happy to hear some of these:

• Fixed Toolbars – no more repositioning after a scroll, jQuery Mobile will have true fixed toolbars!  Even better, purely CSS-based.
• AMD Support – A CommonJS standard, will be supported. (not the processor!)
• Better AJAX page transitions – to quote the post, “Smoother, Faster”.

Also good to note, is that touchOverflow will be deprecated in 1.1.  That means it should still work, but we should start moving away from it in our code.

It’s good to hear that the jQuery Mobile framework team is planning on regular releases every few months.

Thanks guys!

Tags: AJAX, AMD, jQuery, jQuery Mobile

XMLHttpRequest: Learn why Asynchronous is Best

Ran across an article on MSDN (I know, right?) about the problems with synchronous XMLHttpRequests, and how it actually causes 8.4% of all hangs in IE9.

Synchronous is easier to work with, as it flows just like a user would expect.  Asynchronous is slightly tougher to use, as it requires handling the response out of sync with the rest of the page’s code.

You can find some helpful information about the problem, along with some examples, and fixes at Why You Should Use XMLHttpRequest Asynchronously.

An excerpt from the article:

8.4% of all hangs in IE9 in the past month are caused by XMLHttpRequest objects blocking the UI thread with a synchronous request. That’s a huge number! With some manageable code changes, these hangs can be avoided, and developers can give their users a better experience across their websites. We’ll get into what’s happening here, what you can do about it, and we’ll give a little demonstration to see firsthand what can happen when a synchronous request hangs the browser.

Tags: AJAX, Internet Explorer, Javascript, Microsoft, XMLHttpRequest

Google Translate API: Shutting Down, is there an alternative?

Being sick for a few days, I was late in hearing the news.

Google is shutting down the Google Translate API.  Right now it’s just deprecated, with a full shutdown not occurring until the end of the year, but still … it’s happening.

They say it’s because of abuse.  Abuse?  On the internet?  I don’t believe it.

Fortunately, there are still options for those of us who wish to use a service to translate text.   › Continue reading

Tags: AJAX, Bing, Google, Google Translate, HTTP, Microsoft, Microsoft Translator, SOAP, Translate, translator, widget

Google Code University: Free Courses, Tutorials and Lectures for Web Development – AJAX, HTML5, HTML, CSS, Javascript and more

I grew up with webmonkey as the single best destination for web developers and any tutorial you could want, but just saw that Google has a Google Code University featuring Tutorials, Contributed course content and Video lectures on:

• Web Programming
• HTML
• CSS
• Javascript
• AJAX
• HTML5
• Web Security (yes, web developers should be well versed in Web Security)

Just looking through the site it is so much more than basic web development.  Material covers topics ranging from the Android platform, to basic algorithms.    Please check out the material that isn’t just web development.  There’s a reason Google is providing content for Distributed Systems, Tools and working with APIs.

We’re never beyond refreshing our own skills, as I’m sure Google has some great advice on their site.

I wish I could send this link to some other web developer’s I’ve had to rescue projects from.

Tags: AJAX, CSS, Free Courses, Google Code University, HTML, HTML5, Javascript, Lectures, Lessons, Tutorials

Web development with the iPhone and iPad in Mind

In the very near future, I will be posting a series of posts on what you should/shouldn’t be doing to develop a website where the iPhone and iPad are a target demographic.  jQuery will figure prominently in the series, as I’ve seen almost all websites now require work with jQuery (or anther AJAX platform).

Let me know if you have any specific questions / concerns, and I’ll be glad to answer them.

Some interesting things to think about:

• How are mouse clicks triggered? (It’s not as straightforward as you’d think)
• How are hover states triggered? (Hint: the iPad has a hover state, but it’s not what you think — remember you only have a single touch, no arrow following your finger)
• What types of gestures can we use?
• What special considerations must we make for CSS?
• What are the ideal screen dimensions? (this is easy, but remember we have multiple devices, and multiple orientations)
• What types of video can we play? (iPad, iPhone 3GS, iPhone 3G, iPhone 2G and the original iPhone all have different specifications, it’s not that easy)

Tags: AJAX, Apple, CSS, HTML5, iPad, iPhone, jQuery, mouse clicks, orientations, types of gestures, Web Development

HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo

In this tutorial we will review:

• Basic document jQuery preparation
• Binding  jQuery actions to an anchor (A) tag
• Fading In and Fading Out html elements with Javascript/AJAX

› Continue reading

Tags: AJAX, ajax tutorial, fadein, fadeout, fadeTo, HTML, Javascript, jQuery, Tutorial, tutorial jquery

Introduction to JSON (JavaScript Object Notation)

JSON, JavaScript Object Notation, is a very useful tool for AJAX developers (and many others I’m sure).

XML is fairly difficult for JavaScript to parse out.  It also includes quite a bit of infrastructure overhead in certain applications.  

Implementation of JSON can be very easy, it is imported natively in JavaScript through the eval() procedure.  It is also supported by many server side languages.

Lets take a basic example of an XML statement and see it’s JSON equivalent:

XML
<book id=”123″><author>Tom Jones</author></book>

JSON
{“book”: {“id”:”123″, “author”:”Tom Jones”}}

It may seem more cryptic, but if you look, that’s just because there are fewer iterations of key words.  The compression gets extended when you implement longer arrays of data.

The best part about JSON, in my opinion, is the speed increase you get when using it in javascript.  Please implement something in XML and JSON with the same data, you will notice a significant performance increase.

JSON is easy to consume in JavaScript:

objJSON = eval(jsonDataFeed);

You can access data (using our example earlier):

alert(objJSON.book.id);
alert(objJSON.book.author);

Server side implementation can be quite simple as well:

$dataObject = array();
$dataObject["book"] = array();
$dataObject["book"]["id"] = 123;
$dataObject["book"]["author"] = "Tom Jones";
echo (json_encode($dataObject));

Ask any questions in the comments below.  

Here are some articles to continue your exploration of JSON:

• How to use JSON
• Understanding JSON: the 3 minute lesson
• XML to JSON – a converter
• How to convert XML to JSON in ASP.NET C#
• Introducing JSON

Tags: AJAX, eval, Introduction, Javascript, Javascript Object Notation, JSON, Tutorials, XML

Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin

This tutorial covers:

• What is a plugin?
• Installing a plugin
• The jQuery Marquee plugin
• Implementing the jQuery Marquee plugin

What is a plugin?
A plugin is an addition to the core jQuery functionality.  Plugins are made to be simply integrated into an existing jQuery web page.

For this tutorial, we will be working with the jQuery Marquee plugin from remy sharp’s b: log.  Take a look, he did a good job putting his post together.

Installing a plugin
Installing plugins is very easy.  This is the easiest part of working with all plugins.

Pretty much:

1. Download the plugin
2. Upload the plugin to your server
3. Include the plugin in your document

First, download the jQuery Marquee plugin here (taken from the original post, The Silky Smooth Marquee).  If it just displays in your browser, right click on the link and select “Save Link As…”.

Now that we have the plugin, we just need to post it on our site.  Upload it to your javascript folder (I normally use “/js” for this).

Finally we need to include the JS library in your document, so we add the following line (into a very basic document):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>

</body>
</html>

It’s uploaded!

The jQuery Marquee plugin
Whenever working with a plugin, normally the plugin page has helpful instructions on it’s use, and examples.  In this case that is true.

Again, I’m going to link back to the original page — The Silky Smooth Marquee.

On that page the author has detailed:

• Demo
• Download
• Usage
• How it works
• Events
• Support

Very helpful.  Additionally, it helps to look and see if there are any useful comments.  Usually commenters point out minor flaws in the code posted (or major!), and supply resolutions.  If you follow the conversation thread on the post, you will see commenters have requested functionality that was implemented back into the plugin.

Implementing the jQuery Marquee plugin
Now the final part.  This is both easy and hard.  The easy part is usually getting the basic implementation working.  The hard part comes in when you try to do exactly what YOU want to do with THEIR plugin example.  Usually it can be done.  Sometimes there are minor modifications that have to be made to the original plugin.

Once you have added the library, all you need to do is include the code.  There is a great example page, jQuery Marquee Demo, that shows the various implementations.

For our purposes we’ll implement a basic marquee on our page:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
     <marquee behavior="scroll" direction="up" scrollamount="1"
          height="75" width="150">
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
     </marquee>
</body>
</html>

The plugin automatically binds to the marquee tag.  Does yours work?  Check out our example of jQuery scrolling text marquee.

That was too easy?

Yes.  If you look at the comments, one common request is to adjust the scroll speed.  You can see that our scrollamount is already set to the minimum, 1.

The author recommended setting the timeout (refresh rate) to a larger number.  By default, it is set to 25ms.  If we wanted to go twice as slow, we just have to change that to 50ms.  This is where modifying the core code of the plugin comes in.  If you want to go ahead and do this:

1. Open up the jquery.marquee.js file.
2. Find the line: “setTimeout(animateMarquee, 25);”
3. Change it to: “setTimeout(animateMarquee, 50);”
4. Upload the new jquery.marquee.js file

The sky is the limit.

Please give us feedback on this tutorial, also take some time to thank the author of this plugin, Remy he’d probably appreciate a follow on Twitter, or even a comment on his blog.

Tags: AJAX, jQuery, js library, Marquee, plugin, remy, remysharp, Scrolling

Basic AJAX Tutorial: jQuery toggle and slide

In this tutorial we will review:

• Definition of AJAX
• Introduction to jQuery
• Basic document jQuery preparation
• Binding jQuery actions to an anchor (A) tag
• Toggling visibility of a div
• Sliding in and out of that div

It sounds like a lot, but it’s all very easy.

Definition of AJAX
The term AJAX means Asynchronous JavaScript and XML.  That means AJAX technically defines a method for javascript to communicate with XML.  Over the past few years AJAX has been interpreted as a means for implementing all “web 2.0″ functionality in the front end.  That added things like animations to the general term “AJAX”.




Introduction to jQuery
jQuery is one of my favorite libraries with a good toolset for working with AJAX techniques.  You can find out more information on jQuery at their site.

jQuery is a “fast and concise Javascript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development”.  Taken from the website itself.

As a javascript library, we will have to include the jQuery library on a page, and implement some of it’s more basic functions.

Basic jQuery document preparation
The first thing we need to do is incorporate the jQuery library in our page.  So download jQuery (direct link to the Google Code location).

Now that we have our JS library, we need to tell our document where it is (I renamed my js file to jquery.js, and threw it in the js folder):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>

</body>
</html>

We inserted the SCRIPT tag to include the jquery library when the page is loaded.

Binding jQuery actions to an anchor (A) tag
Lets create a basic link in our document:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>
     <a href="#">Click Here</a>
</body>
</html>

We now have a link that does nothing.  We are preparing to bind jQuery to the anchor.

Toggling the visibility of a div
We need to do 2 things to toggle the visibility of a div with jQuery.  First off, we need a DIV to toggle!  Second we need to bind jQuery commands to the anchor link.

We will take advantage of the jQuery toggle effect.

To do this, we change our code below:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               $('#toggleSection').toggle();
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off
     </div>
</body>
</html>

This step we did a lot.

First we added [id="togglebutton"] to the A tag.  That lets us identify it in the jQuery code.

Second we added the “toggleSection” DIV to the document.  The entire div will be toggled on and off.  Again, here we identified the DIV as “toggleSection” to be able to target it with the jQuery code.

Third, we added the jQuery code that actually does the toggling in the HEAD section of the document.  jQuery is a javascript engine, so we have to execute the commands in SCRIPT tags.  The first line of the code, “$(document).ready(function() {” is complicated.  Lets dissect this code.

Finally we put “return false;” in the code, that tells the link NOT to use the HREF value.  This means “#” will not be loaded.  It’s annoying, because that brings the browser to the top of the page in certain browsers.

$(document) — this is the HTML document itself.  It is the same as “document” in normal javascript.

.ready( — this is us looking at the “onLoad” part of jQuery.  When the document is ready, it executes  the “ready” method.  Here we are defining what the ready method is.

function () { — basically, we are creating a new function that will fill in for the document.ready method.  When the document is ready, our code will be executed.  This is smart, as executing code when the page isn’t ready can result in missing elements that aren’t loaded yet.

After that statement, we have “$(‘#toggleButton’).click(function() {“, another complicated statement.  Lets break it down:

$(‘#toggleButton’) — we are looking for the “toggleButton” via jQuery.  This code finds it for us.

.click( — Instead of setting the value of the “ready” method before, we are setting the function of when the “toggleButton” is clicked. So we need to create a function…

function () { — again, creating a function inline.  This will be assigned to the button’s “click” method.

Finally we do the fun stuff, toggling the DIV on and off with “$(‘#toggleSection’).toggle();”.  By now it should be easier to read this line.  We are finding the toggleSection div, and calling the jQuery method of “toggle()” which will toggle the visibility of the DIV.

It is important to note the “return false” part of this.  By returning false, we are telling the HREF that it should NOT execute the HREF value (which is #, and would bring the browser to the top of the screen).  If we don’t return false, the browser will still load the HREF value, and we will have some minor issue cross browser.

We’re done!  We are toggling the visibility, check out the demo — jQuery toggle demo.  Fortunately, we can still have a little more fun..

Sliding in and out of that div
In the previous step, we toggled the visibility of a DIV.  It’s not too exciting, as we could easily do that with javascript before with stylesheets and basic DOM code.  What is great about the jQuery library is all of the additional methods for animation it gives us.  Lets setup that div to not just appear, or hide — but to slide in and slide out.

For that we will take advantage of the slideUp and slideDown methods, they are just 2 of many Effects available in jQuery.

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               if ($('#toggleSection').is(":hidden"))
               {
                    $('#toggleSection').slideDown("slow");
               } else {
                    $('#toggleSection').slideUp("slow");
               }
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off<br>
          More content<br>
          Slides are more fun with more content<br>
          Four lines should be enough
     </div>
</body>
</html>

We have added a little more content to the DIV, so we can more easily see how the slideUp and slideDown work.  There are 2 interesting steps we hav taken.

First, we added an “if” statement to detect if the DIV is hidden or not.

Second, we added code to slideUp or slideDown depending on whether the DIV is actually hidden.

Check out the result on our example — jQuery slideUp and slideDown demo.

Conclusion
I hope this helped some of you out.  Let me know if it did.  Comments are open!

Tags: A, AJAX, Animations, asynchronous javascript and xml, div, Javascript, javascript library, jQuery, ready, slideDown, slideUp, toggle, Tutorial, visibility