Step by Step how to position an HTML tag control EXACTLY in the MIDDLE of its container

        By Carmel Shvartzman

In this tutorial we'll learn how to position an HTML tag control EXACTLY in the MIDDLE of its container.
Let's say we have a web page with a button <a> in it, and we want to position it horizontaly EXACTLY in the middle of the web page.
We'll customize the HTML button so that it's located in the MIDDLE of the web page , when at the beginings the button will be showing as follows:

If you want to create a web site like the one in the snapshot, which is using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, you'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).
You can learn about importing the JQuery UI to your application  in a former tutorial where i explained the task in a complete step by step way.

Let's say the HTML of the button is this:

And the style of the <a> button  is:

Now to position the control EXACTLY in the MIDDLE of the horizontal <DIV> container, add the following code to the CSS button style:

        position:fixed;
        left:50%;
        width:150px;
        margin-left:-75px;
      

We are saying this:
1) position your LEFT border in the MIDDLE (50%) of the container
2) now, MOVE to the left HALF of your WIDTH (in this case, 75px, because the width is 150px)

The CSS button style will be as follows:

This is the CSS for you to COPY-PASTE:

   #btnOpenDialog {
        position:fixed;
        left:50%;
        width:150px;
        margin-left:-75px;
        padding: 5px 5px;
        text-decoration: none;
        font: 900 12px georgia;
        color: #FFF;
    }

And finally the web page will appear with the control EXACTLY in the MIDDLE, as follows:

There is , however, an easy way to horizontally center an HTML element like a <div>, using just CSS3 style, but is not exactly centered in the middle as we learned at this tutorial. You can see it in The HTML5 Club.

That's all!! 

In this tutorial we've learn how to position an HTML tag control EXACTLY in the MIDDLE of its container.  

Happy programming.....

כתב: כרמל שוורצמן

Step By Step How to create a JQuery UI Dialog widget in 10 minutes

        By Carmel Shvartzman

In this tutorial we'll learn how to use the JQuery UI Dialog widget  in 10 minutes. The jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll customize the JQuery UI Dialog so that it's located in the MIDDLE of the web page, will remain 2 seconds on the screen, and then will disappear. The custom Dialog will also contain a "Close"  button to hide itself.

We'll want to add to our MVC site the jQuery Dialog , showing as follows:

For the sake of using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, we'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).

The present section is a sub-tutorial about importing the JQuery UI to our app: you can delay it if you already have done it, or you can see the complete step by step  in a former tutorial.

This is the BEGIN of the  sub-tutorial section: -----------------------------------------------------
---------------------------------------------------------------------------------------------------

First of all, we need to download the Theme from the JQuery UI site, so browse to the site and go to the "Themes" tab:

Select from the "Gallery" the theme you like the most, and download it. I choose the "Le-Frog":

After you download it, extract all from the .ZIP file :

We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:

Make a search for the JQuery package and install it:

Do the same for the JQuery UI package:

Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:

Paste the folder inside the "themes" folder inside your project:

It will show as follows:

We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:

Take a look at these ScriptBundles, because we'll use them inside our app:

Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:

Next, we'll call the bundles from the _Layout file:

Locate the Render "jquery" section and cut it:

Locate the render at the <head> section:

Paste there the "jquery" section , and add the "jqueryui" bundle:

We're done with the javascript and the style we'll need.
Now we'll add the Dialog widget to the Index View. Create a new View:

This is the END of the  sub-tutorial section --------------------------------------------------------
---------------------------------------------------------------------------------------------------



To get the code of the Dialog, browse to the "Development" tab at the JQUERY UI site, and select  the "Effect" demo:

Then go to the "View source", because we'll customize the STYLE, SCRIPT and DIV sections of the Widget to make our own Dialog:

Put  an <script> tag inside your Index file, and code the following functions:

Here we have the following functions:
1) a hide() : to make invisible the Dialog;
2) a #btnOpenDialog : when the button is pressed, SHOW the Dialog;
3) a #btnCloseDialog : when the "Close" button is clicked, hide() the Dialog;
4) the fnShow() : show the Dialog using the "puff" effect during 2 secs, and THEN call a CALLBACK function named:
5) callback() : WAIT 2 secs, and then hide the Dialog using the "puff" effect during 2 secs.

<script>
    $(function () {
        $("#effect").hide();

        $("#btnOpenDialog").click(function () {
            fnShow();
        });

        $("#btnCloseDialog").click(function () {
            $("#effect").hide(500);
        });

        function fnShow() {
            $("#effect").show("puff", 2000, callback);
        }

        function callback() {
            setTimeout(function () {
                $("#effect").effect("puff", {}, 2000);
            }, 2000);
        };
     
    })</script>

Copy the Dialog <div> markup:

And paste it somewhere inside our Index file, with some customization and the adding of a "Close" button:

<div class="toggler" style="">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <div>
            <div style="float: right;">
                <a href="#" id="btnCloseDialog" class="ui-state-default ui-corner-all">Close</a>
            </div>
            <h3 class="ui-widget-header ui-corner-all">Effect</h3>
        </div>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
            Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

Also, add a button to open the dialog from the Client side:

<div style="width: 100%;">
    <a href="#" id="btnOpenDialog" class="ui-state-default ui-corner-all">Press to open a Dialog
    </a>
</div>

Last but not least, we need to customize the style of the Dialog, so copy the <style> CSS from the JQuery UI site:

 Again, we'll use the JQuery UI source as a bootstrap, but we'll customize it in order to make the Dialog appear IN THE MIDDLE OF THE WEB PAGE:

<style>
    .toggler {
        width: 500px;
        height: 200px;
        position: absolute;
        left: 600px;
        top: 350px;
    }
    #btnOpenDialog {
        position: fixed;
        left: 50%;
        margin-left: -100px;
        padding: 5px 5px;
        text-decoration: none;
        font: 900 12px georgia;
        color: #FFF;
    }
    #effect {
        width: 240px;
        height: 135px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
    }

    #effect h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
    }
    .ui-effects-transfer {
        border: 2px dotted gray;
    }
</style>

Here, #effect is the name of the Dialog, and #btnOpenDialog is the button which opens it. As you see, i added a CSS code to position the JQuery UI Dialog IN THE MIDDLE of the web page:

      position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;

What i'm telling here is something like this: "position yourself in the MIDDLE of the web page, and then move a bit up and left, to remain in the middle".

Finally, let's run the application to see the Dialog in action. The Button when clicked will open the Dialog:

The Dialog remains opened for only 2 seconds:

...and then it vanishes automatically:

Or can be closed by the user:

That's all!! 

In this tutorial we've learn how to use the JQuery UI Dialog widget in 10 minutes.  

Happy programming.....

כתב: כרמל שוורצמן

Step by Step how to create a WebGrid with Grouping functionality

In this tutorial we'll learn how to create a WebGrid with Grouping support and JQuery UI Accordion enhancement. The Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer Grouping functionality in the shape of a JQueryUI Accordion.

We'll want to create a webgrid with Grouping functionality , showing as follows:

Let's say you have two related tables, connected by a ONE-TO-MANY relationship as follows:

For the sake of Grouping, we'll create an "Intersection Entity" that represents an INNER JOIN between the tables:

As you see, the new Entity just joins the records of the 2 tables. After you built that class in the Model's folder, create a new Controller:

Inside the Controller, code an Action method which JOINS the two tables in an anonymous class:

Then, for each record you fetch, create an Intersection Entity record as well:

public ActionResult Index()
        {
            List<PostComments> comments = new List<PostComments>();
            using (BlogEntities ctx = new BlogEntities())
            {
                var list = (from p in ctx.Blogs
                            join c in ctx.Comments
                            on p.BlogID equals c.BlogID
                            select new
                            {
                                p.BlogID,
                                PostTitle = p.Title,
                                p.MainPicture,
                                c.CommentID,
                                CommentTitle = c.Title,
                                c.Text
                            }
                        ).ToList();
                foreach (var item in list)
                {
                    comments.Add(new PostComments(item.BlogID, item.PostTitle,
                        item.MainPicture, item.CommentID, item.CommentTitle, item.Text));
                }
            }
            return View(comments);
        }

Next, add a View to display the List<>:

Inside the View, add a <div> and an FOREACH clause which runs over a GROUP BY some relevant DISTINCT field, such as the Title :

As you can see, for EACH different Post, we create a <TABLE> with the Title and the Picture of it. And then, we add ANOTHER bucle which appends a new row to the table, for each Comment the Post has:

The whole Grid markup should appears as follows:

<div id="divPosts">
    @{
        foreach (var post in Model.GroupBy(p => p.PostTitle).Select(p => p))
        {
        <h1>@post.Key </h1>
        <div>
            <table>
                <tr>
                    <th>Title </th>
                    <th>Comment </th>
                    <th><img src="Images/@post.First().Image" /></th>
                   
                </tr>
                @foreach (var comment in @post)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentTitle)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentText)
                        </td>                      
                        <td>
                            @Html.ActionLink("Edit", "Edit" )
                            @Html.ActionLink("Details", "Details" )
                            @Html.ActionLink("Delete", "Delete" )
                        </td>
                    </tr>
                }
            </table>
        </div>
        }
    }
</div>

Now, as you can see, we put each GROUP inside a new <div> nested inside an outer <div>. This is for using the Accordion: add the following <script>:

<style>
    th {
        text-align: center;
    }
    td img, th img {
        width:100px;height:100px;
    }
</style>
<script>
    $(function () {
        $("#divPosts").accordion({
            heightStyle: "content"
        });
    });
</script>

Also, we'll need some CSS to properly display the data. We added an JQuery UI Theme to the bundles in the App_Start BundleConfig.cs file:

Of course, we load those CSS files and JQUERY scripts in our _Layout file:

Build and launch the web app, to see the following display:

The user can see the different Posts with its respective Comments, clicking the Accordion titles:

That's all!! 

In this tutorial we've learn how to create a WebGrid with Grouping functionality and JQuery UI Accordion enhancements.  

Happy programming.....
        By Carmel Schvartzman

כתב: כרמל שוורצמן