jQuery and Fancybox: How to automatically set the height of an iframe lightbox

Fancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

$("#lightbox").fancybox({
      'hideOnContentClick' : true,
      'width' : 500,
      'type' : 'iframe',
      'padding' : 35,
      'onComplete' : function() {
        $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
          $('#fancybox-content').height($(this).contents().find('body').height()+30);
        });
      }
    });


In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

jQuery Allow Only Numbers in Textbox using JavaScript

To restrict user to enter only numbers in textbox we need to write the following code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery allow only numbers or numeric characters in textbox</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $('#txtNumeric').keydown(function (e) { if (e.shiftKey || e.ctrlKey || e.altKey) { e.preventDefault(); } else { var key = e.keyCode; if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) { e.preventDefault(); } } }); }); </script> </head> <body> <div> <input type="text" id="txtNumeric" /> </div> </body> </html>

jQuery Allow Only Alphabets in Textbox using JavaScript

To allow only alphabets in textbox using JQuery we need to write the following code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Allow only alphabets in textbox using jquery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $('#txtNumeric').keydown(function (e) { if (e.shiftKey || e.ctrlKey || e.altKey) { e.preventDefault(); } else { var key = e.keyCode; if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) { e.preventDefault(); } } }); }); </script> </head> <body> <div> <b>Enter Text:</b><input type="text" id="txtNumeric" /> </div> </body> </html>

jQuery Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript

To allow only alphabets & numbers in textbox using JQuery we need to write the following code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Allow only alphanumeric characters in textbox</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $('#txtNumeric').keydown(function (e) { if (e.shiftKey || e.ctrlKey || e.altKey) { e.preventDefault(); } else { var key = e.keyCode; if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) { e.preventDefault(); } } }); }); </script> </head> <body> <div> <b>Enter Text:</b><input type="text" id="txtNumeric" /> </div> </body> </html>

jQuery Disable Cut Copy Paste Options in Textbox

To disable cut, copy and paste functionality for the Textbox we need to write the code like as shown below

<script type="text/javascript"> $(function() { $('#txtName').bind("cut copy paste", function(e) { e.preventDefault(); }); }); </script>

If you want to see it in complete example write the code like as shown below

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Disable Cut, Copy and Paste Options in textbox using jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function() { $('#txtName').bind("cut copy paste", function(e) { e.preventDefault(); }); }); </script> </head> <body> <div> <input type="text" id="txtName" /> </div> </body> </html>

How to Insert Values into Identity Column

To insert value in identity column I will explain with one example for that first create one sample table like as shown below

CREATE TABLE UserDtls  (  UserId int PRIMARY KEY IDENTITY,  UserName varchar(120),  Qualification varchar(50)  )

Once we create UserDtls insert data like as shown below

INSERT INTO UserDtls(UserId,UserName,Qualification) VALUES(1,'Suresh','B.Tech')

Whenever we run above query we will get error message like as shown below

Msg 544, Level 16, State 1, Line 1 Cannot insert explicit value for identity column in table 'UserDtls' when IDENTITY_INSERT is set to OFF.

Based on above error message we can realize that identity columns won’t allow to insert new values whenIDENTITY_INSERT is OFF .To solve this problem we need to set is ON for that we need to write the code like as shown below

SET IDENTITY_INSERT UserDtls ON INSERT INTO UserDtls(UserId,UserName,Qualification) VALUES(1,'Suresh','B.Tech') INSERT INTO UserDtls(UserId,UserName,Qualification) VALUES(2,'Rohini','MSC') SET IDENTITY_INSERT UserDtls OFF

Once we run above query our Output will be like this

--------------------------------------- (1 row(s) affected) (1 row(s) affected)

In this way we can insert values to identity columns in SQL Server.