Wednesday, January 16, 2013

Making two column divs equal height using CSS | Equal height Dive without using Jquery | Fluid Equal Height Columns using CSS

Equal height columns is necessity of UI Developer. Creating a equal height columns DIVs using CSS is really a tough task for developers. At the end they have use tables to create Equal height columns.

Because to manage same height for every columns div is very tough as we know every div content can vary par page.

Here I posting the post for resolution of this issue of Equal Height. Solution provided by is a tricky thing done is css.

HTML Code

<div class="container">
        <div class="first-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
        <div class="second-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
    </div> 


CSS Code
 
<style type="text/css">
        ul li
        {
            list-style-type: disc;
            list-style-type: none;
            display: block;
        }
        .container
        {
            width: 600px;
            background: grey;
            float: left;
            overflow: hidden;
        }
        .first-column
        {
            width: 300px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
        .second-column
        {
            width: 296px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
    </style>

Here container class is wrapper for both column DIVs. margin-bottom and padding-bottom should have same value and its value will defer according to page content height. So always try to use maximum page height.

Example:- if your content height is 2000px then change margin and padding value with more than 2000 or more.

I hope this code will help all developers to make equal height DIVs. Please feel free to ask for any query at hari1_prasad@hotmail.com or click here.

Thursday, January 3, 2013

Basic Questions in Jquery, Interview Questions for UI Developer, Interview Questions for JQuery, Interview Question ask by Recuriter in jQuery

Q1     What is jQuery ?
Ans.   jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you.


Q2    What the use of $ symbol in Jquery?
Ans:  $ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery.


Q3:  How do you select an item using css class or ID and get the value by use of jquery?
Ans: If an element of html like &lt; div&gt; , &lt; p&gt; or any tag have ID MyId and class used MyClass then we select the element by below jquery code
Code:
$('#MyId') for ID and for classs $('.MyClass')
and for value
Code:
var myValue = $('#MyId').val();
// get the value in var Myvalue by id
Or for set the value in selected item

Code:
$('#MyId').val("print me");
// set the value of a form input


Q4:   What are the different type of selectors in Jquery?
Ans:  There are 3 types of selectors in Jquery
1. CSS Selector
2. XPath Selector
3. Custom Selector



Q5:   How can you select all elements in a page using jQuery?
Ans:  To select all elements in a page, we can use all selectors, for that we need to use *(asterisk symbol).
<script language="javascript" type="text/javascript">
         $("*").css("border", "2px dotted red");
</script>


Q6:   What is the use of EQ in Jquery?
Ans:  The eq( index ) method reduces the set of matched elements to a single element.
Syntax:
Here is the simple syntax to use this method:
selector.eq( index )


Q6:   What is the difference between height and outerheight in jquery?
Ans:  The .height() method gets or sets the height of the HTML element. To get the height of an HTML element, you would use .height() like below:
        $("#myDiv").height();
The .outerHeight() method gets the height of the HTML element and includes the top and bottom padding and the border. If the argument is set to true, it will also include the top and bottom margins. The value is expressed in pixels (px) and is a numeric value. To get the outer height without the margins, you would use:
        $("#myDiv").outerHeight();


Q7:   What does .size() method of jquery return ?
Ans:  .size() method of jquery returns number of element in the object. That means that you can count the number of elements within an object.

For example :-
$(document).ready(function(){
 var Count = $("div").size();
 alert(Count);
});


Q8:  What document.ready() is use in jQuery?
Ans: It indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts
of the page content(e.g. images/other external resources) are not fully loaded.As soon as the DOM is loaded,
everything inside the (document).ready() should be load even before the page contents are loaded.


Q9:   What is diffrence between javascript onload and document.ready()?
Ans:   The onLoad function for the window object executes after the entire page is fully loaded.Untill DOM tree is completely created and all images/other associated resources (like audio files,video files etc) are fully loaded,this onLoad function is never executed and hence the script execution needs to wait till the page is loaded.

But the document.ready() method of JQuery indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts of the page content(e.g. images/other external resources) are not fully loaded. As soon as the DOM is loaded, everything inside the (document).ready() should be load even before the page contents are loaded.


Q10:  What is chaining method in jquery?
Ans:  In jQuery most of the methods returns a jQuery object that you can then use to call another method. This allows you to do command chaining, where you can perform multiple methods on the same set of elements, which is really neat because it saves you and the browser from having to find the same elements more than once.

Here's an example:
$('div').css('border','solid 1px red').attr('class','active');