HTML5 vibration API with code examples

Hello, While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday. Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API.   Why would you use a vibration API Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face. Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic Lets start  looking more in depth of this API Detection With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API Here is how we can detect the vibration API supports [crayon-5df27c5693bb2103803672/] Usage Now that we have seen how to detect the support for lets now check out how to use the vibration function Here are couple of ways you can use the overloaded vibrate [crayon-5df27c5693bc2217664263/] so above is translated to following for real app situation [crayon-5df27c5693bc6532993415/] Cancelling the vibration Cancelling the vibration is quite simple and here is an example to cancel the vibration [crayon-5df27c5693bca447476800/] Quite simple ehh! You can use Javascript method such as setTimeout()/clearTimeout() and setInterval()/clearInterval() to control the delay or repeats for vibrations. As web is moving more towards HTML5 now is the time to get used to new API. More browsers will be supporting these sort of new API. Browsers such as Chrome, Safari and Firefox and even Opera are pretty aggressive … [Read more...]

ExtJS 4 dialog window and mask position stays on window scroll

Hi Guys, Now that I am working non-stop with ExtJS and am learning some good stuff, here is another situation that I came across, When Ext window is displayed with mask behind it then when you scroll your browser tab window then you will notice that the mask will stay at the initial position. The case is discussed here http://www.sencha.com/forum/showthread.php?145525-Modal-windows-with-long-pages-mask-not-covering-whole-document.body There are a few solutions that a few authors have come up with but I would just chuck in my bit to see what you think. The problem that I am talking about is shown in the screenshot below   This is another way to tackle the scrolling issue. Not very intuitive but works in most scenarios. Now please do not judge on this because this is just a working alternative and I am not overriding default behaviour of showLoadMask. First we declare the function below [crayon-5df27c56941cd982943578/] [crayon-5df27c56941d8450569558/] [crayon-5df27c56941dc935463159/] Now lets handle window scroll [crayon-5df27c56941df219876048/] [crayon-5df27c56941e2823634845/] [crayon-5df27c56941e6248326185/] Or with Ext Window add a on show listener and call resetMask() from there as shown below [crayon-5df27c56941e9677177186/] Now when Ext window shows up, the mask's top CSS property will reset to window.pageYOffset There are other ways to do it too but I thought I should share the one that I couldn't find elsewhere :) Happy Ext'ing Sorry for the mix of traditional Javascript and Ext. You can do above in a well mannered way. Cheers … [Read more...]

ExtJS 4 form focus first field

Hi Guys, This is a quick tip on how to set focus on the first field of your form. Consider the ExtJS form below [crayon-5df27c569467c081147700/] So if we would like to set focus on first field, in our case first name field is the one that we would like to set focus on. Here are couple of method that you can try Method 1 Add an afterrender event listener [crayon-5df27c5694686634684350/] This is preferred way because we are making sure that field function is encapsulated within its config. Here is quick reference to focus() method http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-method-focus Second Method You can always use Ext.getCmp() to get the component and do all sort of allowed things with it. Here is what you can do to focus on first name field [crayon-5df27c569468b191557069/] Make sure that above line should be placed after the code to generate form panel. We have give a delay of 200ms but you can increase to a value that suits you. I hope that this helps Just in case you found an error or want to improve part of this post please leave your comments. Cheers       … [Read more...]

plupload and RackSpace cloud files

Hi Guys, There are a few uploaders that one can like. Mine favourite is plupload and there are heaps of reason behind that, but this post is not about discussing how good plupload is rather we will concentrate on how we can use plupload to upload files to your server and then send a signal to your server to upload that file to RackSpace cloud files. This post assume that average file size to be uploaded is not more than few 100 kilobytes else a bit more sophisticated error handling will be required so that files are reliably sent to RackSpace Cloud. You should know we will need to upload a file to the server hosting plupload and then upload it to RackSpace cloud. Doing it this way does have advantages as it offers greater flexibility. Here is an activity diagram of what we are going to do. This is just a basic activity diagram explaining core steps only. You can have better error handling. Above is just a skeleton activity diagram. In the code provided the upload failure to RS Cloud is not implemented and I leave it to you to do that. Lets get started. Create a folder pltest under your htdocs or html folder. This is the location where your web server find files to return to the user when queried. On linux path could be /var/www/html and on windows path could be something like this depending on where you've installed Apache. C:\Apache2\htdocs Download plupload First step is to download plupload and this can be done by visiting their website and follow the download instructions. Here is the link http://www.plupload.com/ Extract downloaded plupload in pltest folder. Getting Cloud Files PHP API Next we will need to download Cloud Files PHP API which you can find here https://github.com/rackspace/php-cloudfiles Extract PHP files in archive to to our pltest folder. Your folder structure should look like this now. Also make sure that you extract share folder under pltest. Sorry that is not part of the screenshot … [Read more...]

ExtJS 4 dialog window goes beyond browser boundary on drag

Hello, This is a really quick tip that I wanted to share. Let's say you create an ExtJS window as shown below [crayon-5df27c56954be072946366/] You already know that by default window property draggable is true. If you try to drag window and move closer to the the browser boundary, the drag will go beyond the browser boundary.     This situation is shown in the screenshot below   The easiest solution to this problem is to constrain the window by adding property constrain to window config So about code will show it as [crayon-5df27c56954c8186081758/] You can read more about constrain config here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-constrain Now that you know how to constrain there is one more config that makes constraining super flexible and that is called contrainTo: An element or region from which a Region measurement will be read which is then used to constrain the component. Only applies when the component is floating. I hope that this tip helps. In case I missed a point or two, don't forget to leave your comments so that this post can be improved. cheers,       … [Read more...]

ExtJS Save Grid state column hide show resize etc

Hi guys, Sencha has done pretty good job with ExtJS's 4 grid and provide us with so many handy configs that cannot be matched. One of them is making our grids remember their state. Let me elaborate on this. Say if your have a grid on your website and user tend to choose some columns and hide some, he rearrange columns and close his browser and come back next day just to find out that all his settings are now lost, how do you prevent this from happening? This post touch base on that with room for you to do more RnD on this subject. Before you do anything with your Grid I would like you to set your state manager as shown below [crayon-5df27c56957b8225445923/] Now lets declare a very basic grid. The Grid Assume that you have a Grid as shown below with couple of columns. [crayon-5df27c56957c0685475740/] Above grid won't store state for you because we need add couple of more config to our above grid so lets do take a look at what need to be added Unique stateId Mark grid as stateful and last specify which events should store state by providing them though stateEvents So lets go ahead and do that just after [crayon-5df27c56957c6777715527/] add these lines     [crayon-5df27c56957ca877302444/] After doing that you are good to go. More details and explanation that I don't want to repeat can be found here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.state.Stateful-cfg-stateful You can hook your code too because there are some handy events that are provided, be sure to check http://docs.sencha.com/ext-js/4-1/#!/api/Ext.state.Stateful event section. Demo Click on the link below to launch the demo. Try to hide a column, close a tab and reopen the demo page to see if the state is preserved or not. Remember that your browser must support cookies for the demo to work properly Demo is currently down... Please check in an hour.   If you find any problem with any of the above info … [Read more...]

How to inject JavaScript into an iFrame

Hello, This is not common but sometimes required because of variety of reasons. Without wasting much time into hows and whats lets jump on straight into the problem The Problem How do we inject, include JavaScript into an iFrame using JavaScript Things to look for You can only perform this task if the iFrame source is loaded from same domain. i.e. if you are running a site abc.com then iframe src could be abc.com/hello.html     The Markup To be more clean on how to achieve this lets first of all do our markup Example HTML [crayon-5df27c5695e67563041107/] Now lets go on an implement our function injectJS() this is the function that will be called when IFrame src is fully loaded. The JavaScript Okay so the injectJS() function looks like this. Say you want to load a script called myscript.js [crayon-5df27c5695e72575719096/] tada! that's it. There are a few use cases that I would do this in but I think the best way is to include the required scripts and styles in the source file it self. I hope that this makes sense If I missed any important stuff to mention please let me know so that other users are aware of this. Cheers,     … [Read more...]

javascript offsetx offsetY firefox not working

Hello, This is a very old question I suppose but I would like to address it here on my blog too. So I have my canvas as a part of my webpage and I am drawing on it. Thus I want mouseX and mouseY position that are picked from my canvas Chrome, Safari, IE have mouse move properties called offsetX and offsetY that does exactly what I want but for the first time I have to write a condition because of FireFox not supporting these events. So lets check how we can get away with this. Here is little code snippet that tries to address this issue. The HTML [crayon-5df27c56961c6758737876/] [crayon-5df27c56961cd401655718/]   The Javascript [crayon-5df27c56961d1332866210/] [crayon-5df27c56961d4273695103/] This is just an example. For efficiency and quickness you should always bind and unbind mousemove event when required. I above code snippet elementXPos and elementYPos are the X and Y position of your mouse pointer. Our elements starting X and Y are Zero. The jQuery way Now we shall do the exact same thing but using jQuery [crayon-5df27c56961d8476207610/]   I can add a demo to this page if you wish for one. I hope that this helps cheers,           … [Read more...]

Detecting Text width using canvas – A simple jQuery plugin with fallback

Hello, While we all know that HTML5 added some really cool features and one of them is Canvas. There are literally thousands of tutorials floating on internet and you can learn something from all of them. In this post we are just concentrating on one simple thing and will try to get Text Width of any given string. It will be pretty close. There are a couple of ways you can do that but we will be using canvas for our purpose. Ok so lets go ahead and check how can we do this The jQuery Plugin code [crayon-5df27c56963bc874196446/] As you can see that we have a fall back method too just in case canvas is not available. Let me now show you how to use it The our example markup Here is a quick example markup that you can use to test it [crayon-5df27c56963c6191789986/]   Usage [crayon-5df27c56963ca028434800/] If you have something to add in above code and would like to improve it or correct my tiny brain please leave your comments so that I can update my code. Same method is used for my another plugin called jcElasticTextBox that you can get from Google Code. I hope that this helps. Cheers, … [Read more...]

jQuery plugin elastic text box

Hello, While I was doing some RnD I came across HTML5 canvas text API. Its pretty cool so I though why not I do a plugin to understand it better. The first plugin that I wrote is something to do with text boxes. More will follow soon. The plugin is called jcElasticTextBox This jQuery plugin gives you an option to enlarge your text boxes automatically when user is typing into the box. It can also automatically reduce the size of text once the text width becomes greater than textbox width. Lets check the Markup required for our Demo The markup [crayon-5df27c569658f877492333/] As you can see that we've got the text boxes with different IDs and classes. Lets check the example usage Usage [crayon-5df27c5696598056692909/] In the code above the first textbox will have its font size reduced when text width becomes greater than textbox width. I will be talking about the modes in a second but lets check the second and third lines above. Second line or function call will make the textbox grow upto 400px (default) in width and third textbox will grow upto 800px. 800px is the value that we supply. Please remember that pass all values in numeric. Do not add "px" to any value. Plugins Options Plugin function takes an object as an argument and object may have any of these settings mode: You can either use mode value as fit or grow maxGrowWidth: This value defines whats the maximum width you would like to grow your textbox by. default: 400, minGrowWidth: This is the minimum width of your text box default: 200, roomToRight: This value gives room to the right so that it doesn't feel like the text is squashed while user is typing. default: 10 minFitFontSize: If you are using fit mode then you have to set minimum font size the text box text should shrink to. default 11, easing: If you want a easing aniumation when text box grows or shrinks default: true, easingInterval: self explanatory default: 150 //milliseconds (lower … [Read more...]