Full Page Background Image

Displaying a background image on a website that covers the entire browser window at all times. 

Some specifics are as follows:

• Fills entire page with image, no white space
• Image is centered on page
• Does not cause scrollbars
• As cross-browser compatible as possible

html { background: url(img/cover_photo.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

If you are facing any problem or want to share some other techniques please feel free to comment below

Disabling Time Slots in JQuery Full Calendar

Suppose you have some feature implemented on fullCalendar.js where user can click on calendar slots and perform some actions.

This post will show you how to block or make the slots unavailable to users i.e stop the action to be performed on unavailable slots.

For example there's a requirement where a user is available from morning 8 to 11 o'clock and then from 3 to 6 o'clock in the evening.

 So you have to make slots from 11 to 3 unavailable/unclickable for user.

 How to do.... ? 

Step 1:

 Make an array of user's available timings as shown below

 var availableTimings = [[08:00,11:00],[15:00,18:00]];

Step 2:

Write the following javascript function:

This function will iterate all the slots in your calendar and find out the time during which user is unavailable and will block the slots

function BlockingUnavailableSlots(availableTimings) {

        if ($(".fc-slats").find("tr").length > 0) {

            var numberofRows = $("# YOUR CALENDAR ID COMES HERE").find(".fc-slats").find("tr").length;

            for (var iCount = 0 ; iCount < numberofRows; iCount++) {

                var slotTiming = $(".fc-slats").find("tr:eq(" + iCount + ")").find("td span").text().split(":");

                for (var jCount = 0; jCount < availableTimings.length; jCount++) {

                        var startTiming = availableTimings[jCount][0] != null ? availableTimings[jCount][0].split(":") : "";

                        var endTiming = availableTimings[jCount][1] != null ? availableTimings[jCount][1].split(":") : "";

                        if (startTiming != "" && endTiming != "" && startTiming.length > 0 && endTiming.length > 0) {

                            var difference = getTimeDifference(startTiming[0], startTiming[1], endTiming[0], endTiming[1], slotTiming[0], slotTiming[1]);

                            if (difference == 1) {

                                $(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").removeClass("blocked");

                                $(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").addClass("available-slot");

                                $(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").removeAttr("title");

                            }

                            else {

                                if ($(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").attr("class").indexOf("available-slot") < 0) {

                                    $(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").addClass("blocked");

                                    $(".fc-slats").find("tr:eq(" + iCount + ")").find("td:eq(1)").attr("title", "Doctor is not available for this slot");

                                }

                            }

                        }

                }

            }

        }

    }

Step 3:

Required function to calculate the time difference.

This function takes user availability start time (hour and minute) and end time (hour and minutes) and current slot time which function BlockingUnavailableSlots iterates

function getTimeDifference(shour, sminute, ehour, eminute, slothour, slotminute) {

        //Hard coded value needed here i.e 2000, 0 ,1.... intentionally added

        var start = new Date(2000, 0, 1, shour, sminute).getTime();

        var end = new Date(2000, 0, 1, ehour, eminute).getTime();

        var now = new Date(2000, 0, 1, slothour, slotminute).getTime();

        if ((start <= now) && (now <= end)) {

            return 1;

        }

        else {

            return 0;

        }

    }

Step 4:

Call above function mentioned in step 2 after rendering all calendar event

 eventAfterAllRender: function (date) {

                     disableUnavailableSlots();

                }

Step 5:

Handle default actions in day click event like this

dayClick: function (date, jsEvent, view) {

 if (jsEvent.target.className.indexOf("blocked") < 0) {

 //perform action

 }

 else{

 //no action

 }

Step 6:

Include this style to color the unavailable slots

 .blocked {

        background-color: lightgray;

    }

If you face any problem regarding full calendar please comment below. We can always find the work around :)

What is the use of HTML Helpers in ASP.NET MVC ?

If you are learning ASP.NET MVC, you will ask what is html.beginform or other such tags.

What is HTML Helper provide or what is the use of it ?


 A HTML Helper is just a method that returns a HTML string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input>, <button> and <img> tags etc.

Just like web form controls in ASP.NET, HTML helpers are used to modify HTML.But HTML helpers are more lightweight. Unlike Web Form controls, an HTML helper does not have an event model and a view state.

Standard Helpers: MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements.

HTML Links: The easiest way to render an HTML link in is to use the HTML.ActionLink() helper.

With MVC, the Html.ActionLink() does not link to a view. It creates a link to a controller action.

Razor Syntax: @Html.ActionLink("Be Master of One and Jack of All", "Info")

ASP Syntax: <%=Html.ActionLink("Be Master of One and Jack of All", "Info")%>

The first parameter is the link text, and the second parameter is the name of the controller action.

The Html.ActionLink() helper above, outputs the following HTML:

<a href="/Home/About">About this Website</a>

HTML Form Elements:

There following HTML helpers can be used to render (modify and output) HTML form elements:

• BeginForm()
• EndForm()
• TextArea()
• TextBox()
• CheckBox()
• RadioButton()
• ListBox()
• DropDownList()
• Hidden()
• Password()

What do you think ?

I hope you will enjoy the HTML Helpers while programming with ASP.NET MVC. 

I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Working with JQuery Text Editors

What if one of your client requirement is to provide a area where they can write some information in some particular format like in bold, italic, heading, underline etc and can save it and retrieve it back whenever required...

If your application is desktop you can get many options like you can open local installed application instance like word, lib-re etc

What if you are creating web application??
Solution is simple.. Jquery the most powerfull language in programming world can help you anytime...

There are many plugins build on top of jquery available for free over the net.
Some of them are as follows:
1. Jqte
2. tinyMCE
3. CKEditor and many more...

Sample using Jqte(jquery text editor)

1.  You need to download js and css file of jqte first and include it in your page:
    <link href="../../Scripts/jquery-te-1.4.0.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-te-1.4.0.min.js"></script>

2. html part:
  <input type="text" id="Body"/>

3. j query part:
    $("#Body").jqte(); // in .ready function

4. Fetching information entered by user:
  var DescriptionDetails = $("#Body").val();

  This will give you the string with the html tags. If you are planning to pass the data to server it won't work because it consists html tags. So to overcome the problem use escape function of jquery

  This function makes a string portable, so it can be transmitted across any network to any computer that supports ASCII characters.
  var Bodyvalescape = escape(Bodyval);

5. You can now send the string to server and encode it and store it...

6. Now how to populate the jqte:
     Get data from server side show it in jqte by writing below code
     $(".jqte_editor").html(data); // in jquery
 
   $(".jqte_editor").attr("contenteditable", "false");// will make editor non-editable
   $(".jqte_editor").attr("contenteditable", "true");// will make editor editable

For more information about other events available in jqte go to : http://jqueryte.com/ 

Similarly by performing some minor changes you can easily use some other editors..

Till then enjoy and have fun with JQuery