I was fiddling with my iPhone 4S when I suddenly came across this handy feature to take a screen shot without any third party application.

This with would be an useful feature if you need to take the screen shot of a google map and you have no internet or other innovative uses.

To take a screen shot from your iDevice, press the button on top, and the home button simultaneously at any screen.. Bham.. you have your screen grabbed and saved to your photo gallery.

Go to the photo gallery and check it out.  This has been introduced from firmware version 2.0 in all iDevices.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Welcome Back..
Wildfire
This time, for a difference, we decided to get something done with our Android phones. And, the first thing which popped into our heads were rooting our phones to do a bit of frenzy action.

Cutting to the chase, let me get down to the actual process.

Pre-Requisites

  • An Android mobile phone (obviously) . For this process, we used a HTC Wildfire A3333 (Running on Eclair[2.1] or Froyo[2.2.1]). If you are in doubt check your device (Settings->About Phone->Software Information->Android Version)
  • The HTC Wildfire serial number should start with HT0*******  [Its a Zero, not an O]
  • Memory card and cable
  • ADB Drivers ( A quicker way to do this, is to install HTC Sync and then uninstall it. We only need the drivers, not the sync software)
  • Hacked Boot Drivers (Download them here)
  • The “Revolutionary” tool. (Download  windows here)
  • The Root file (Download them here (8890))

Continue reading

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Well.. finally after a hard day of getting Reliance Netconnect to work with my version of Linux, I ended up a high wall.. The problem being, my empathy chat clients were not recognizing the Internet from wvdial.

I started raking up some sites and they gave me diverse opinions on how to make it work and I went to the extent of uninstalling the network manager applet.. Finally I hit on the solution. Here it goes…

  • Press Alt + F2 on your keyboard. A popup like below should appear. In that type “gconf-editor” (without quotes) and press enter.

  • In the resulting window, expand APPS and navigate to Empathy as shown below. Click on Empathy and you will be presented with a window as below.

  • You will see a “use_conn” property on the right pane. Just uncheck it and you are all set to go.
  • Go back to your empathy client and disable and enable the accounts. It should automagically get connected through wvdial.

phew…!! one more headache solved.. Hope your headache with this is also solved..

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

I have a nice reliance netconnect data card which is supported by Reliance till Fedora 10 ONLY. I called up their customer care for help and they told me very nicely that their datacard wont work with versions above 10.

Finally, I came up with a successful way myself which i want to share here. Request you to comment if this solved your problem so that other people can use this.

My datacard model – ZTE-AC2736

Practically you can use this with any of the versions as the process described is very generic.

  • Login as “root” user. If you happen to get unusual error messages when doing “su”, then see this post.

  • Connect your datacard to any of the USB ports available. Make sure the port is working first.
  • In the terminal, run “wvdialconfig” (no quotes). A long list of output as below will appear. Look at the highlighted lines. You should have something like that there.
  • After this process ends, open up, “/etc/wvdial.conf” file in a notepad with root privilages. You should get a screen similar to the below one,

  • Enter your user name, password and phone number into the place holders as shown below.

  • Save and close the file. You are all set to GO. Run “wvdial” (No Quotes) from the command terminal, and if it is successfully connected, you will get some output like below,

  • Get ready to browse, open your favourite browser and start browsing.

This should work will all the datacards which are working out of USB port and work using a dial up method. There is another way of configuring the same from “Network Manager” in linux versions. I will cover them later. As far as i have tried, this seems to be a pretty nifty solution because network manager sometimes manages not to connect and also lock the device.

Well, cya soon. Drop in some comments if the above process is working for you.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

I have been trying to implement this for my site when i came across this wonderful plug-in by Amir Harel who wrote a quick floating plug-in to achieve this.

Credits to Amir Harel who developed this useful plug-in.

For people who quickly wants to see the results of the plugin, see a DEMO here –>

Quick Usage:

As I told you, I am not going to waste much time on explaining how this stuff works. Amir has a great post saying how this works. Please read it when you get time. But, to quickly get around to using it, you can use the below steps,

  1. Get the floating tool bar java script –> JQuery Float v1.0 - Downloaded 713 times
  2. Include it in you page like this,
    <script src="jquery.floatobject-1.0.js" type="text/javascript"></script>
    
  3. In your HTML put a div like this. You can put what ever content you need inside this div. Make sure the CSS on this div says, position:Absolute; so that it does not disturb the other elements on the page.
    <div id="float_menu">Hey This is me floating ........</div>
    
  4. Position in on the page where you want it to appear using CSS classes. Remember, To use Z-Index > 0 so that it appears on top of all your other elements.
    #float_menu
    {
     	left:0;
     	position:absolute;
     	top: 0px;
            z-index: 10;
     	background:#FFFFE0;
     	text-align:center;
     	height: 35px;
     	width: 100%;
     	border: thin dashed;
    }
  5. In your <head> tag put the below JS to get running.
     <script type="text/javascript">
    	$(document).ready(function()
    	{
    		$("#float_menu").makeFloat({x:"current",y:"current", speed: "fast"});
    	});</script>
  6. You have got the floating tool bar.

Customizing

Here is how you can customize the script parameters. This makeFloat function support 3 parameters,

  • X => X- co-ordinate on the screen where you want it to float. If “current” is given as parameter, it will take the initial position of the div set by CSS as the X Position
  • Y => Y- co-ordinate on the screen where you want it to float. If “current” is given as parameter, it will take the initial position of the div set by CSS as the Y Position
  • speed => takes “slow”, “medium”, “fast” as parameters. Sets the speed with which the float comes visible when page is scrolled.

The speed is set inside the JS in the first few lines. You can edit it if you feel more custom speeds are required.

TRAPS:

There are some traps you should be aware of when using this,

  • When using the makeFloat function, use it after the body has loaded if you done include $(document).ready(function(){}); function. If you don’t do this, you will get a “Offset Not Defined” error
  • When including the JavaScript files, first include the Jquery JS and then the plugin JS. Otherwise, you tend to get makeFloat is not not defined errors some times

JQuery Float v1.0 - Downloaded 632 times

That is all. A summary on using this should get you started. Next post we’ll see about a 4 column CSS form layout.. 🙂 Till then, happy floating !!!

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Bye bye tables… welcome CSS is the mantra of most web developers now. Laying out a design for most of the designers can be a nightmare when coming from the era of table designs.

I have searched and found lots of two column form layouts, but when it comes to long layouts, two column layouts can become quite expensive in terms of screen real estate. To make best use of the available real estate, I looked for a 4 column CSS layout. Not finding any wrote one myself. It is not perfect, but will serve as a good starting point for anyone looking in this direction.

Ok, Lets get started.

The completed form will look like this,

Click Here for a live DEMO

Download complete example and CSS here ->Four Column Tableless CSS Form Layout - Downloaded 1191 times

Its always a good practice to put your content into a list structure so that it will degrade gracefully in older browsers. Let me know if you have any other techniques for this. As of now our CSS looks like this,

  • An outer UL container to have all our form elements intact
  • A “left” class for the form labels
  • A “right” class for the form elements
  • A “clear” class for drawing the imaginary horizontal line after each form element group
ul
{
  list-style: none; //removes the dot before the list
}

.left //style for form labels
{
  width: 200px;
  float: left;
  position:relative;
  padding: 5px;
}

.right //style for form elements
{
 width: 250px;
 float: left;
 position:relative;
 padding: 5px;
}

.clear //marks the end of a div
{
 float: none;
 clear: both;
 height: 0px;
}

Our HTML with layout will look like this,

<ul>
 <li>
 <div>Field 1</div>
 <div><input type="text" id="one" name="one" /></div>
 <div><input type="button" value="Get Information" tabindex="5" accesskey="p" style="position:relative; top: -2px; font-size: 10pt;" id="btnGetEmpInfoByID" name="btnGetEmpInfoByID" onclick="javascript:getEmployeeByID();"></div>
 <div></div>
 </li>
 <li>
 <div>Field 2</div>
 <div><input type="text" id="two" name="two" value="" /></div>
 <div>Field 3</div>
 <div><input type="text" id="three" name="three" value="" /></div>
 <div></div>
 </li>
 <li>
 <div>Field 4</div>
 <div><select name="four" id="four"></select></div>
 <div>Field 5</div>
 <div><select name="five" id="five"></select></div>
 <div></div>
 </li>
</ul>

That’s all. We come to the end of another how-to. Post your comments and we can improvise and improve.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Mixing JQuery and WordPress without breaking other functions will give designers better control over the flexibility of designs, especially when designing a new theme.

Most new themes support JQuery without any change.

How to verify this?

  • Open your wordpress home page.
  • Go to View-> Page Source in Mozilla to view page source
  • Search for a line like this,
<script type='text/javascript' src='http://thedazzlersinc.com/theledge/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
  • If the above line is present then you have JQuery already included and you can directly proceed to the Usage Step.

Including JQuery Library In Your Theme

  • Login as WordPress Admin.
  • Go to Appearance -> Editor
  • Choose header.php from the right side.
  • Look for the function wp_head() in the file
  • After that, include a link to your jquery library there directly after uploading the jquery library you wish to use.

The above image shows you where to include it.

Lets see how to achieve this. The page you are currently seeing has JQuery Linked to it and lets see if it works properly now.

DEMO: Click on the link to test it -> Test JQuery

Call jquery functions like below

 <script>
   function testJquery()
   {
      $("#float_menu").show();
   }
 </script>

Traps

  • If you happen to get an error when including the library or using it, look the last section of the this post to solve it

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

As web developers, we are in constant need for datepickers and jquery provides the right tools to do it. As we know, it is quite easy to implement datepickers for static fields.

Today, let us see how to implement datepicker for a dynamic text field with jquery,

Click Here to See a DEMO

Click Here to Download the complete example-> Dynamic Text Fields DatePicker Jquery - Downloaded 1186 times

Steps to achieve this

The include on top of your HTML will look like this,

 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="ui.datepicker.js"></script>
 <link href="smoothness/jquery.ui.all.css" rel="stylesheet" type="text/css" />

You will also need to include a javascript function which can trigger the dynamic text box like below,

<script>
 function dynamicField()
 {
 var text = "<input type=text id=textbox1 />";
 $("#float_menu").html(text);
 $("#textbox1").datepicker({ showOn: 'button', buttonImage: 'calendar.jpg', buttonImageOnly: true, dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '1950:2015' });
 }
 </script>

Finally, we come to the HTML. The html looks like this,

<a href="javascript:void(0);" onclick="dynamicField();">Add a dynamic text field with datepicker</a>
 <div id="float_menu" style="background: #FFFFE0; border: thin dashed; text-align: center;">Our text box will appear here :)</div>

There we go with dynamic datepickers for dynamic fields.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter