From time to we all need to debug javascript, and nothing works better than dumping our variables to see the contents. There are several tools out there to help but I recently come across another pretty cool script: prettyPrint. prettyPrint creates a cfdump like grid to dump out the contents of most any data type in javascript. Check it out:
Pretty nice tool. There’s also talk on there about if it could be integrated into firebug/firefox. That would be awesome!
It didn’t take long to make a couple tweaks to iFramer. You can now specify a returnType in the options as json. Doing so will return a json object of the returned data from the form. Here’s how to call it:
$('#myform').iframer({
returnType: 'json',
onComplete: function(data){
//param data is a json object
}
});
If you opt not to specify the returnType parameter the returned data will be treated as plain html, so it is still optional. Enjoy!
1) Use Opera Desktop browser with the small screen view (View->Small Screen).
2) Use Firefox Developer Toolbar do use the Handheld Stylesheet (CSS->Display CSS By Media Type->Handheld).
3) Avoid Caching things that shouldn’t be cached. If you’re using a lot of GET requests or sometimes posting forms, be careful of caching. An easy way to avoid this is tag on a url variable with a current timestamp: mypage.php?t=123456
4) Remove Whitespace from your html output and css. Some serverside languages and frameworks have the ability to do this for you. If not you can always save your output to a variable and run a simple regular expression to remove spaces outside of tags like line returns, tabs, and new lines. With ColdFusion you might try:
rereplace(htmlstr,"(\n|\r|\t)","","all")
5) Use a proper Doctype. Of course there’s more than one that would probably work, but this is a start:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
6) Don’t Rely on Javascript. Sure iPhone, Blackberry, Opera Mini are all getting pretty good, but the whole point of mobile development is for those who can’t use the full version (js enabled). The only exception is if you’re writing a browser specific site for a browser with good javascript support.
7) Use a CSS Reset. There are dozens of different resets available around. I suggest starting with a full reset, then once you’ve finished development scale it back to the elements you need.
*{ margin:0; padding:0; border:0; }
These are starter tips when developing for mobile browsers, but the support on mobile devices varies greatly, so the biggest unmentioned tip is to TEST, TEST, TEST!
jQuery Impromptu 2.7 is now available. I’ve added a few new features:
- $.prompt.getCurrentState()
- $.prompt.getCurrentStateName()
- option.timeout
Option.url didn’t make the cut simply because I’ve not figured out the best way to approach this. I’ll post any progress on this solution.
jQuery iFramer is a plugin made to submit forms with a hidden iframe. Say for instance you have an Impromptu popup that contains a few form fields and a file upload. The file upload is the kicker to needing such a plugin, since you can’t upload files via old fashion ajax. Well using a simple hidden iframe and a target on our form we can submit our form into this iframe, sending the file and all. Here might be your form:
<form action="/some/url/post/" method="post" id="myform">
<input type="text" name="somethin1" value="bla bla" />
<input type="file" name="somethin1" value="bla bla" />
<input type="submit" name="somethin1" value="bla bla" />
</form>
Now with our handy plugin all we need to do is tell it to use an iframe, and we’re set:
$('#myform').iframer({
onComplete: function(data){
alert(data); //returned data
}
});
Pretty simple. There is also an option “iframe” which takes a string for the name and id to give the iframe(just incase you need to specify, doubt you ever do). This also might be an easy replacement for swf uploaders, although it doesn’t offer near the features, and never will. The good thing is you can easily send your entire form and not just the file upload(with swf uploaders) or just the text inputs(with standard ajax). This is the very first release, so use at your own risk. The source is very small so if you have any suggestions feel free to go ahead and make the changes while you’re at it! :)
You can download jQuery iFramer here.
Lately it seems like Impromptu has been growing at a pretty rapid pace, and much of the reason behind it are community contributions and the fact that I’m using it nearly every day. I realize there are pro’s and con’s to moving at a fast pace, which is why I’ve done my best to maintain backwards compatibility. That being said I’m taking suggestions on a 2.7 release. I’ve already had a few suggestions, and a few features I want to add myself. Feel free to add to the list, and we’ll see how the fit in.
- $.prompt.getCurrentState() - a method to return the current state being shown. I’m not sure yet whether to return the entire state(including buttons), or just the message area.
- $.prompt.getCurrentStateName() - would return a string, the name of the current state being shown.
- option.timeout - an option that would automatically close the prompt after X milliseconds(maybe after X seconds.. who knows..)
- option.url - an option to GET content from a remote file.
Also if all goes well, there might be an awesome new example/project using Impromptu in the near future. But I can’t tell you what it is yet! ;)
Without further delay I am pleased to present to you jQuery Impromptu 2.6. I’ve implemented a few features requested by users, and they were all much needed. The new features include:
- Fix iframe to work better with secure sites
- Constrain tabs to within prompt. No more tabing onto the page beneath the prompt
- Option to make the fade persistent. If option persistent is set to false the prompt will close when the fade is clicked.
The persistent feature was already there, but kind of hidden. A user requested it so I double checked. I’ve tested the tab feature on IE 6, 7, FF, Chrome, Opera, Safari (Win) and all works fine! Enjoy!
I’ve been twiddling with the next version of Impromptu and just wanted to get some feedback on my todo list and see if there are any other good suggestions for the upcoming version. Here’s where I stand so far:
- Add <iframe src=”javascript:false;” style=”display:block;position:absolute;z-index:-1;” similar to bgiframe.
- Keep from tabbing/clicking outside of the prompt. BlockUI seems to do this.
- Update documentation site. It needs a refresh bad, but there’s only 24 hours in a day..
I will keep this as a running list and I will try to update this post with new thoughts. Please feel free to suggest anything.
Well this post isn’t rocket science, but we all have seen the time where it would be nice to have some sort of templating when creating html with javascript. Well unless you need looks and conditions there’s a pretty simple solution. Within your html string denote things you need to replace with “{myvar}”. Then you will need a function like the following:
(function($) {
$.templater = function(str,replacements){
$.each(replacements,function(i){
str = str.replace(new RegExp('{'+ i +'}','g'),this);
});
return str;
}
})(jQuery);
Lets now take a simple example. Lets suppose we have this html stored as variable str
<a href="javascript:myFunc({id})">{text}</a>
Now we just call our new function and it will return us our result!
$.templater(str,{ id:15, text: 'Edit Item' });
Should now give the following:
<a href="javascript:myFunc(15)">Edit Item</a>
Not terribly complex, but very useful and reusable!
While messing around with some mobile web development I decided to check Synaptic for “mobile browsers”. Sure enough the results were pleasing. Topping the list was Mozilla Fennec, the new mobile version of Firefox. Right away I installed and I now have a mobile emulator for Fennec right on my desktop. It does seem a bit buggy, but that is expected until its final release. None the less Fennec will help with your mobile development on Ubuntu.
Tip of the day: When in need of applications always check Synaptic before downloading.