Yousef Jadallah's Blog

jQuery Mobile Cookbook - Book Review

2012-12-31T21:40:00Z

It is a pleasure to work on jQuery Mobile Cookbook with Packt Publishing - one of the most prolific and fast-growing tech book publishers in the world. This was my first experience to work as a technical programming books reviewer. Actually, I found it very interesting experience; especially to work with such great company Packt Publishing . I strongly recommend to read this book for both beginners and experts in Jquery Mobile. They will find such perfect recipes and examples which help them...(read more)

AddThis - contains too many device filters error

2012-09-17T17:46:00Z

When using AddThis service with asp.net, some exceptions will throw like these: The string 'fb:like:layout' contains too many device filters. There can be only one. The string 'g:plusone:size' contains too many device filters. There can be only one. You can solve this by using "In line server code". Step 1: Implement the following code in your code file: Protected Function GetFacebookAttribute() As String Return String .Format( "{0}=" "{1}" "" , "fb:like:layout" , "box_count" ) End Function Protected...(read more)

jQuery Mobile Download Builder

2012-07-01T05:42:00Z

Now you can customize your jQuery Mobile download by selecting the specific modules you need by using jQuery Mobile Download Builder that was released yesterday June 30, 2012. You can select a specific form element, transition type, widget and some core functionalities and Utilities... Here you can find jQuery Mobile Download Builder RC1. http://jquerymobile.com/download-builder Thanks for jQuery Mobile team for their efforts....(read more)

Active button in navbar in Jquery Mobile

2012-03-06T19:50:33Z

When you add ui-btn-active class to your anchor, it will activate the selected button in your navbar. Moreover, if you'd like to keep it active when you return to it again, you need to add ui-state-persist . jquery mobile framework detects ui-state-persist class, then fires the delegate as following: $navbar. delegate ( "a" , "vclick" , function ( event ) { if ( !$( event .target).hasClass( "ui-disabled" ) ) { $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass ); $( this ).addClass...(read more)

Calculating GridView Fields Using jquery

2012-01-17T19:59:00Z

Using jquery library with ASP Controls can be a good practice to handle any client script. Furthermore, using jquery with GridView would be more efficient than using native JavaScript. JavaScript needs a lot of codes, on the other hand, Jquery helps to build robust program with less codes and work. In this article, I will illustrate how to calculate GridView Fields by jquery. In the following example, the price and the quantity of each item are calculated in every separate row, and the gross price...(read more)

Adding jQuery Mobile controls programmatically

2011-08-16T07:40:00Z

Normal 0 false false false EN-US X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans...(read more)

jQuery Mobile : Page pre-fetch

2011-08-14T06:43:00Z

The latest release of jQuery Mobile beta 2 is characterized by a new added feature. This feature is called Page pre-fetch , which finds the links of the active pages and makes a lazy load for these pages into the DOM beyond the scene before the user clicks on it. With this feature we don't need to add all pages on the same HTML documents. In the previous releases, this feature works automatically when the user adds the pages with the same file. Let's start with a simple example to illustrate how...(read more)

JQuery Mobile Code Snippets 2

2011-08-09T12:33:00Z

This part is a complement of JQuery Mobile Code Snippets 1 , hope these codes help you. Normal 0 false false false EN-US X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line...(read more)

Grid Layout In Jquery Mobile

2011-07-11T13:43:00Z

Today I will explain to you how to use Jquery Mobile Grid layout, which allows to build multiple columns ranges between two to five columns .

We need this technique to place small elements side-by-side (like hours, minutes and seconds text box groups).

Jquery mobile provides a block style class called ui-grid, this class is the core of grid layout. It is 100% width, with no borders or backgrounds, and without padding or margins.

To build two columns layout, we can use ui-grid-a. The others can be used as the following:

class	Layout	Width
ui-grid-a	Two-column	50/50%
ui-grid-b	Three-column	33/33/33%
ui-grid-c	Four-column	25/25/25/25%
ui-grid-d	Five-column	20/20/20/20/20%

For example, we can use ui-grid-a as the following:

</div>

Inside this two-column layout, we can place the two columns.

 <div class="ui-grid-a">

              <div class="ui-block-a">

                  Left Block</div>

              <div class="ui-block-b">

                  Right Block

              </div>

 </div>

Ui-block-a class says: this is the first column in the grid, and ui-block–b is the second one in the same grid.

Here you can find that ui-block changes the CSS Clear property to the left. This property specifies the left side of the element, where other floating elements are not allowed.

Furthermore, you can give that block a style by using ui-bar class by default without having any style. You can also assign any style to the block (like height, background, etc):

   <div class="ui-grid-a">

              <div class="ui-block-a">

                 <div class="ui-bar ui-bar-b">Left Block</div>

                  </div>

              <div class="ui-block-c">

                 <div class="ui-bar ui-bar-b">Right Block</div>

              </div>

  </div>

The layout would be like this:

Apply Grid to Content Container:

Grid classes can be applied to any container. In the previous example, I used it with Fieldset and applied the block to the two buttons.

          <fieldset class="ui-grid-a">

              <div class="ui-block-a">

                  <button type="button" data-theme="b">Add</button></div>

              <div class="ui-block-b">

                  <button type="button" data-theme="e">Delete</button></div>

          </fieldset>

You will find that every block -div- is stretched to 50% of the screen width.

In the same way, we can create a three-column layout for time entry:

   <fieldset class="ui-grid-b">

              <div class="ui-block-a">

              <label id="Label10" for="txtHours">

                        Time</label></div>

              <div class="ui-block-b">

                 <input type="text" name="txtHours" id="txtHours" value="12" style="width:40px"  maxlength="2" /> </div>

              <div class="ui-block-c">

                <input type="text" name="txtMinutes" id="txtMinutes" value="00" style="width:40px"   maxlength="2" /></div>

          </fieldset>

The letters sequence after ui-block class refers to the column number. So, “a" refers to the fist column, "b" to the second one, and so on. In this way we can create multiple rows of items.

There is an important thing by using multiple rows of items. ui-block-a CSS Class is used to clear the floats and start a new line. Therefore the sequence is important to build the items.

Here you can find an example of multiple rows of items:

       <div data-role="content">

            <fieldset class="ui-grid-b">

                <div class="ui-block-a">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

                <div class="ui-block-b">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

                <div class="ui-block-c">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

                <div class="ui-block-a">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

                <div class="ui-block-b">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

                <div class="ui-block-a">

                    <img alt="" src="images.jpg" style="width: 80px; height: 80px" />

                </div>

            </fieldset>

The layout would be like this:

Note that how a new line is started in the third line by using ui-block-a CSS Class.

Hope that helps.

JQuery Mobile: Fire Mobileinit Event

2011-06-28T08:29:00Z

Many people asked that the Mobileinit event didn't work. Simplicity just you need to follow this sequence:

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(document).bind("mobileinit", function () {
            alert('mobileinit is fired');
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

Hope that helps.

useFastClick in JQuery Mobile

2011-06-23T11:30:00Z

For those who want to convert the application from JQM Alpha to JQM Beta 1, you need to bind click events to the new vclick one. Click event is working in general browsers but it is needed for iOS and Android, useFastClick is (touch + mouse click). Moreover if you have this event alot in your project you can turn useFastClick off in mobileinit event:

 $(document).bind("mobileinit", function () {
            $.mobile.useFastClick = false;
});

vclick event is needed to support touch events to make the page changes to happen faster, and to perform the URL hiding.

So you need to change something like this

 $('btnShow').live("click", function (evt) {

To :

 $('btnShow').live("vclick", function (evt) {

For more information : http://jquerymobile.com/test/docs/api/globalconfig.html

Here you can find full example in this case :

<!DOCTYPE >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

    <script type="text/javascript">

         //Here you need to use vclick instead of click event

        $('ul[id="MylistView"] a').live("vclick", function (evt) {

            alert('list click');

});

    </script>

    <title></title>

</head>

<body>

    <div id="FirstPage" data-role="page" data-theme="b">

        <div data-role="header">

            <h1>

                Page Title</h1>

        </div>

        <div data-role="content">

            <ul id="MylistView" data-role="listview" data-theme="g">

                <li><a href="#SecondPage">Acura</a></li>

                <li><a href="#SecondPage">Audi</a></li>

                <li><a href="#SecondPage">BMW</a></li>

            </ul>

        </div>

        <div data-role="footer">

            <h4>

                Page Footer</h4>

        </div>

    </div>

    <div id="SecondPage" data-role="page" data-theme="b"   >

        <div data-role="header" >

            <h1>

                Page Title</h1>

        </div>

        Second Page

        <div data-role="footer">

            <h4>

                Page Footer</h4>

        </div>

    </div>

</body>

</html>

Hope that helps.

Update: No longer use for this option after Beta 1.

JQuery Mobile Code Snippets 1

2011-06-22T13:15:00Z

I want to share with you some important codes that you may need during JQuery Mobile development.These codes has been tested on Alpha 4 version.

Beta 1 has been released before two days, Therefore I will test them in my current project and inform you of any changes :

 Also check JQuery Mobile Code Snippets 2.

Show and hide back button in your Application

 $(document).bind("mobileinit", function () {

           $.mobile.page.prototype.options.addBackBtn = true;

});

Customizing the back button text

$(document).bind("mobileinit", function () {

$.mobile.page.prototype.options.backBtnText = "previous";

});

Hide "Close button" for dialog programatically:

  $('[data-role=dialog]div[id="YourDiaogdivID"]').live('pagecreate', function (event) {

     $("a[data-icon='delete']").hide();

});

Change Select option element index:

     var myselect = $("select#foo");

       myselect[0].selectedIndex = 0; //The new index

       myselect.selectmenu("refresh"); //uset this line of code after any updating on the select element

Change Select optoin elemetn text value:

   $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');

Refreshing a checkbox

   $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');

Hide select option element

 $('#foo').parent().hide();

Hide and Show Page Loading Message :

Before Beta 2:

$.mobile.pageLoading(); //Show

$.mobile.pageLoading(true); //hide

Beta 2+ :

$.mobile.showPageLoadingMsg();

$.mobile.hidePageLoadingMsg();

overriding $.mobile.loadingMessage

$(document).bind("mobileinit", function () {

    $.mobile.loadingMessage = 'My Loading Message';

});

Hide and Show jQuery-Mobile-Themed-DatePicker

  $(".ui-datepicker").hide();

  $(".ui-datepicker").show();

Build your Custom Loading Message :

          $('#CustomeLoadingMessage').hide();//Hide the div

            $('# CustomeLoadingMessage').ajaxStart(function () {

                $(this).show();

});

            $('# CustomeLoadingMessage').ajaxStop(function () {

                $(this).hide();

});

I will publish other important codes soon.

Hope that helps.

Microsoft Community Contributor Award - 2011

2011-04-30T08:08:28Z

I have the honor to inform you that I've been awarded the "Microsoft Community Contributor Award - 2011".

I received the notification:

-------

Congratulations! We’re pleased to inform you that your contributions to Microsoft online technical communities have been recognized with the Microsoft Community Contributor Award.

The Microsoft Community Contributor Award is reserved for participants who have made notable contributions in Microsoft online community forums such as TechNet, MSDN and Answers. The value of these resources is greatly enhanced by participants like you, who voluntarily contribute your time and energy to improve the online community experience for others......

--------

I’m proud of this award, thanks Microsoft for giving me this award. It will be a great motivation to continue contributing in Microsoft Community.

Thanks.

Microsoft – The Amman Open Door, December 15-16 at Sheraton Hotel.

2010-12-13T21:18:03Z

It’s the biggest event for Microsoft in Jordan for this year.Do not miss the chance.

For registration kindly find this link: http://www.microsoft.com/middleeast/jordan/opendoor

Using Array.BinarySearch Generic Method with Custom Objects

2010-10-17T23:01:00Z

Hello,

In this topic I will illustrate how to use BinarySearch Method with custom Objects, and this includes how to sort an array or collection of custom objects.

In fact with Dot Net we can use built-in binary search algorithm to Search an entire one-dimensional sorted Array, also to locate a specific element in the sorted ArrayList. Moreover Searches the entire sorted List<T>… In this topic We will use Array.BinarySearch Generic Method as an example.

This member is overloaded, for example you can use BinarySearch<T>(T[], T) or BinarySearch(Array, Object) .. etc.. Here I will use the first one.

First we need to create our class:

public class Car 
    {               
        public Car(string ID, string Name)
        {
            this.ID = ID;
            this.Name = Name;
        }     
                
        public string ID { get; set; }
        public string Name { get; set; }       
       
    }

second, Implement IComparable<T> generic interface:

We need to implement this Interface because both Sort<T>(T[]) generic method overload and BinarySearch<T>(T[], T) generic method overload use CompareTo method which compares the current object with another object of the same type, this help to sort and search array elements.

 public class Car : IComparable<Car>
    {       
        public Car(string ID, string Name)
        {
            this.ID = ID;
            this.Name = Name;
        }
       
        public string ID { get; set; }
        public string Name { get; set; }
      
        #region IComparable<Car> Members

        public int CompareTo(Car other)
        {
            return this.Name.CompareTo(other.Name);
        }

        #endregion
    }

In this implementation of CompareTo method I suppose that the comparison will be by Name Field, also you can use one or more fields to compare.Whereas the Sort and the Search depend on the code inside CompareTo Method.

Finally, the following code example demonstrates how to deal with the objects:

static void Main(string[] args)
        {          
            Car Toyota = new Car("1", "Toyota");
            Car Mercedes = new Car("2", "Mercedes");
            Car Ford = new Car("3", "Ford");

            Car[] carsArr = { Toyota, Mercedes, Ford };


            Car searchedCar = new Car("1", "Toyota");

            Array.Sort(carsArr);

            int indexResult = Array.BinarySearch(carsArr, searchedCar);

            string outputMessage = string.Empty;
            if (indexResult < 0)
            {
                Console.WriteLine("The object to search  is not found. The next larger object is at index " + ~indexResult);
            }
            else
            {
                Console.WriteLine("The object to search  is at index " + indexResult);
            } 
        }

Hope that help.