Advanced JQuery session

This is the second JQuery presentation – and the final one – for Horizons Software folks!

Advertisements
Posted in Software | Tagged , | Leave a comment

Make your first JQuery plugin in 2 minutes

To let you know how JQuery makes writing plugins very easy I will show you a practical demo of building one which should take a couple of minutes to build. This plugin adds rollover functionality to images so when a user rolls over an image; browser switch the displayed image with the image specified in the rollover attribute of the <img> tag.

Plugin:

(function ($) {
    $.fn.rollover = function () {
        this.find("img[rollover]").mouseover(function (evt) {
            //mouse over
            $(this).attr("originalSrc", $(this).attr("src"));
            $(this).attr("src", $(this).attr("rollover"));
            //mouse out
            $(this).mouseout(function () {
                $(this).unbind("mouseout");
                $(this).attr("src", $(this).attr("originalSrc"));
            });
        });
    };
})(jQuery);

Usage:

$(function () {
            $("#tiles").rollover();
});

Markup:

<div id="tiles">
       <img src="[some url]" rollover="[some url]"  />
       <img src="[some url]" rollover="[some url]"  />
</div>

See the result

Explanation:

(function ($) {
       //function code
})(jQuery);

This is called Immediately-Invoked Function Expression (IIFE) and from its name we can see that its just a function but its invoked immediately so its like making declaration and invocation in the same expression. You will also note that this function takes JQuery object as a parameter. We need to do this to be able to use the ($) symbol in our plugin code (the body of this function) without being afraid of other libraries that may use the same symbol.

$.fn.rollover = function () {
       //function code
}

This is where the magic begins; we are adding a rollover function to $.fn object. inside this function the (this) keyword will be the JQuery wrapped set that will invoke the rollover function in usage time. So we can start working on our DOM objects from this point to complete the plugin:

        
         this.find("img[rollover]").mouseover(function (evt) {
            //mouse over
            $(this).attr("originalSrc", $(this).attr("src"));
            $(this).attr("src", $(this).attr("rollover"));
            //mouse out
            $(this).mouseout(function () {
                $(this).unbind("mouseout");
                $(this).attr("src", $(this).attr("originalSrc"));
         });

For JsFiddle guys: http://jsfiddle.net/MnZxM/embedded/

Posted in Software | Tagged | Leave a comment

JQuery introduction session

Today I have presented a training session about JQuery  to my colleges in Horizons Software. It was a nice session and we actually did it and finished on time!!

Posted in Software | Tagged , , | Leave a comment

Moving to Readify!


This week I signed a contract with Readify! so in a couple of months I will move out to Australia and start working along with some of the most talented developers on earth!! I’m so excited about this move. There is a lot of promising facts and policies they have out there like Professional Development Program, hiring form the top 5% of developers in the world,  a big number of MVP’s are around and a wide range of project areas that they cover.

What drew my attention to Readify are actually two of the most talented developers in Egypt who started to work there : Mohammed Mousa or Moses Of Egypt and Mohamed Meligy The GuruStop guy

Anyway I hope to achieve those goals now: growing technically by involving in their community, Professional Development Program and involving in projects. Also working in a more productivity-help environment that I actually don’t find in Egypt right now. I hope things will be better in Egypt in future but now I looking forward to escape for a while seeking more relaxed environment.

Their recruitment process was fantastic, I liked working on their puzzles (actually I don’t know why they called it puzzles…what I did was not looking like a puzzle to me) And I loved their HR interview, it was so friendly. I don’t think I did well in the technical interview (well I think it was good enough to allow me to join as a developer) but I liked the debugging test – a test of live debugging some very buggy piece of code 🙂 – and I think I did well in it. I loved the personality test Idea far more better that traditional painful IQ tests (thank God they don’t do IQ tests outside of Egypt I guess). Also I loved meeting with Faith Rees, acting State Manager of Victoria she was so friendly and understanding.

I will join Melbourne team I think its a wonderful city. A couple of Egyptians I know who lives in different cities envy me for it but they told me its very cold in winter…however I’m not a hot/sunny fan so lets see 🙂

Posted in Software | Tagged | 16 Comments

New CSS/HTML session for Horizons Software

Today I presented the first session of a 3 part series training title about HTML, CSS and Jquery for ASP.Net developers to my fellow team members in Horizons Software. We actually run out of time during demos because of receiving a lot of  questions regarding CSS compatibility issues and ordering of selectors but  it went well.

Posted in Software | Tagged , , , | Leave a comment

Convert HTML to WORD in .Net

Last month I faced a requirement that needed some Word format generation. After a lot of searching for 3rd party components that was costing us lot of money 🙂 . I realized that the most simple and yet cheap is converting HTML documents to Word format.

Actually it was a lot easier than what it looks and I did what 1000$ components does for free. Take a look at this snippet that converts a HTML file to a Word file:

//Copyright © 2010 - harouny.com
//Developer : Ahmed EL-Harouny
//Date : 06/2010
//Purpose: A static class to convert from HTML document to Word document
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Office.Interop.Word;
using System.IO;

namespace Utilities
{
    /// <summary>
    /// A static class to convert from HTML document to Word document
    /// </summary>
    public static class HTML2WordConverter
    {

        private static Application word;
        private static Document document;

        /// <summary>
        /// converts a HTML file to Word file
        /// </summary>
        /// <param name="htmlSrcFilePath">the path to the source HTML file</param>
        /// <param name="wordDestFilePath">the path of the destination word file</param>
        public static void Convert(string htmlSrcFilePath, string wordDestFilePath, bool embedImages)
        {
            FileInfo SrcFile = new FileInfo(htmlSrcFilePath);
            FileInfo DestFile = new FileInfo(wordDestFilePath);
            if (SrcFile.Exists == false)
            {
                throw new Exception(htmlSrcFilePath + " doesn't exist.");
            }

            word = new Application();
            document = new Document();
            try
            {
                document = word.Documents.Add();
                word.Visible = false;

                document = word.Documents.Open(SrcFile.FullName);

                document.Activate();

                if (embedImages)
                {
                    //embed inline images in the document
                    foreach (InlineShape image in document.InlineShapes)
                    {
                        if (image.LinkFormat != null)
                        {
                            try
                            {
                                image.LinkFormat.SavePictureWithDocument = true;
                                image.LinkFormat.BreakLink();
                            }
                            catch (Exception ex) { /* nothing */ }
                        }
                    }
                }

                document.ActiveWindow.View.Type = Microsoft.Office.Interop.Word.WdViewType.wdPrintView;

                document.SaveAs(DestFile.FullName, WdSaveFormat.wdFormatDocument);

                document.Close(false);
                word.Quit();
            }
            catch (Exception ex)
            {
                try
                {
                    document.Close(false);
                    word.Quit();
                }
                catch (Exception ex2) {/* nothing */}
                throw ex;
            }
        }
    }
}
Posted in Software | Tagged | 7 Comments

Design Patterns Session for Horizons Software Teams

Today I presented a training session focusing on programming design patterns concepts and some examples. Here is the presentation:

Posted in Software | Leave a comment