Today, I’ve come up with a Multi-Select Drop-down (with check-boxes inside) using jQuery. I thought, it would be time-consuming, but I had to make it and here it is.

Well, not really, I’ve used a drop-down and and check-boxes inside. Why??
A: Older IE doesn’t support CSS3 and also to make it look alike in all browsers, I’ve NOT used HTML drop-down and check-boxes.

The final result will look something like…
MultiSelect

Prerequisites:
Jquery Latest version
Jquery Scroll-pane Script & CSS
Images for check-box(tick & unticked), drop-down.(Try google ‘Checkbox Vectors’)
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

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 675 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 592 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

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 1121 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