Web Solution 4U

Monday, May 11, 2015

Important Things in JavaScript | Closure in JavaScript | New Operators in JavaScript

1) Extension Method or Prototype in JavaScript

<script type="text/javascript">
            function Person(fname, lname) {
                this.firstName = fname;
                this.lastName = lname;
            }


            Person.prototype = {
                model: {
                    name: "Welcome"
                },
                eventbinder: function () {
                    return this.controller(); //.eventbinder();
                },
                controller: function () {
                    alert(this.model.name);
                },
                obj: "hello"
            };
            var p = new Person("Hari", "Prasad");
            var s = p.controller();
            var d = p.obj;
        </script>

2) Closure in JavaScript

A closure is a function having access to the parent scope, even after the parent function has closed.

Normally, the local variables within a function only exist for the duration of that function's execution.

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

3) Differentiate between == and ===?

Both are companrision operator in javascript and use to compare values. Difference between **

== and === is

While using == javascript use typeCast before comparing variables. For example:-

var j=1,c="1";
console.log(j==c)      // Will result True

console.log(j===c)      // Will result False

Because === operator doesn't perform typeCasting it is faster than == operator.

!== Also follow the same behaviour deffrence compare to != Operator.

Friday, April 26, 2013

Image Slider Gallery Script in jQuery | Simple jquery code in Jquery | image slider in jquery

Now most of site are using image gallery and slider feature to your websites. Its very eye catching practice for user prospective.

But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.

But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.

Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.

HTML Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gallery</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/GalleryJson.js" type="text/javascript"></script>
    <style type="text/css">
        body{background: #ddd;}
       .container img,.container a{width: 100px;height: 100px;border: none;}
        .container ul{float: left;margin: 0;padding: 0;position: relative;}
        .container li{display: inline;list-style-type: none;margin-right: 10px;float:left;}
        .container li img{border: solid 2px transparent;}
        .container .disable{cursor: default;color: #999;}
        .container{position: relative;float: left;width: 100px;overflow: hidden;}
    </style>
</head>
<body>
    <div class="container" id="gallery1">
        <ul class="gal">
            <li><a href="javascript:void(0);">
                <img src="css/1.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/2.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/3.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/4.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/5.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/2.jpg" /></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            gallery({
                gallery: "gallery1",// Mandatory
                next: "next1", // optional default value "gallery1next"
                prev: "prev2", // optional default value "gallery1prev"
                slide: 2, // optional default value 1
                auto: true // optional default value False
            });
        });
    </script>
</body>
</html>

Here I am providing GalleryJson.js source code with detail.

Jquery Script Code

gallery = function (options) {
    var counter = 0;
    var defaults = { "next": options.gallery + "next", "prev": options.gallery + "prev", "slide": 1, "auto": false };
    var obj = $.extend(defaults, options);

    var liWidth = $("#" + obj.gallery).find("li").outerWidth(true); // Width of single li
    var liCount = $("#" + obj.gallery).find("li").length; // Count of lis into UL

    // Insert Previous and Next button into gallary
    $("#" + obj.gallery).append('<a href="#" class="' + obj.prev + '">Prev</a> &nbsp;&nbsp;&nbsp; <a href="#" class="' + obj.next + '">Next</a>');
    $("#" + obj.gallery).find("ul").width(liWidth * liCount);  // Calculate gallary total width
    $("#" + obj.gallery).width(liWidth * obj.slide); // Set width of wrapper according to thumbnail count;


    if (counter == 0) // Default disable status for previous button on page load
    {
        $($("." + obj.prev)).addClass("disable");
    }


    // Code for previous button Click
    $("." + obj.prev).on("click", function () {
        if (counter > 0) {
            counter--;
            $("." + obj.next).removeClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": "+=" + liWidth });
            if (counter == 0) { $(this).addClass("disable"); }
        }
        else { $(this).addClass("disable"); }
    });


    // Code for nexgt button Click
    $("." + obj.next).on("click", function () {
        if (counter < (liCount - obj.slide)) {
            counter++;
            $("." + obj.prev).removeClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": "-=" + liWidth });
            if (counter == (liCount - obj.slide)) { $(this).addClass("disable"); }
        }
        else { $(this).addClass("disable"); }
    });


    // Auto Run Script Start Here
    if (obj.auto == true) {
        t = setTimeout(function () { autorun() }, 2000);
    }


    function autorun() {
        clearTimeout(t);
        if ($("#" + obj.gallery).find("." + obj.next).hasClass("disable")) {
            $("." + obj.prev).addClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": 0 });
            $("." + obj.next).removeClass("disable");
            counter = 0;
        }
        else {
            $("." + obj.next).trigger("click");
        }
        t = setTimeout(function () { autorun() }, 2000);
    }
    // Auto Run Script Ends Here
};

Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.

If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.

Thursday, April 11, 2013

Calculate dynamic height of iFrame | how to calculate content height of iFrame | Acces iframe parent tag id

Using iFrame is very wrong approach to achieve any functionality. But due to some reasons we have to use iframe in our application.

After using iframe in application our main problem becomes that how to give it dynamic height. As we all know that in dynamic site we can't fix our content height. after long time gooling i found best script which can set its height after calculating its content height.

Not only you can set its height according to its height also you can change attribute of iframe parent ID also.

I hope this will help to work with iframe and make your task easy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
   
        function resizeIframe(iframeID) {
            var iframe = window.parent.document.getElementById(iframeID);
            var container = document.getElementById('content');
            iframe.style.height = container.offsetHeight + 'px';
        } 
    </script>
</head>
<body>
    <div id="content">
        What I have done in the past is use a trigger from the iframe'd page in window.onload
        (NOT domready, as it can take a while for images to load) to pass the page's body
        height to the parent.What I have done in the past is use a trigger from the iframe'd
        page in window.onload (NOT domready, as it can take a while for images to load)
        to pass the page's body height to the parent.What I have done in the past is use
        a trigger from the iframe'd page in window.onload (NOT domready, as it can take
        a while for images to load) to pass the page's body height to the parent.What I
        have done in the past is use a trigger from the iframe'd page in window.onload (NOT
        domready, as it can take a while for images to load) to pass the page's body height
        to the parent.What I have done in the past is use a trigger from the iframe'd page
        in window.onload (NOT domready, as it can take a while for images to load) to pass
        the page's body height to the parent.</div>
    </div>
    <script type="text/javascript">
        resizeIframe('slideshow_frame');
    </script>
</body>
</html>

Just copy and paste this code block in your iframe.

I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.

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 < div> , < p> 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');

Monday, September 17, 2012

Responsive Web Design | Latest Design Trend | Things to create mobile web

Responsive Web Design : To create a responsive web design we need to kept few things in mind. I have mentioned those thing in my article below.

i) Design Architecture : Found this informative Article on http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design where they point for creating media queries for different screen sizes. According to its article we need to write CSS on basis of 5 different screen sizes. These are 1000 larger then, 1000px,760px, 600px, 480px, and 320px.

Screen Size	HTML Architecture
Larger then 1000px	3-column with fixed side header
1000px to 760px	2-column with top header
Below 760px	single column layout

It covers all types of machines used to browse the web. To full fill this approach we can use common pattern of design the web layout.

ii) Meta Tag : Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

<meta name="viewport" content="width=device-width, initial-scale=1.0

iii) Media Query : Web layout can appear to be restricted, sometimes unreadable on small mobile devices, and at other times too large on large wide screen displays. This is where media queries come in. Using this we can create different CSS attribute for specific class for different resolution. So they are still readable in small screen too.

Media query comprises of a media type and one or many expressions to limit the scope of style sheets. Inside the media library, you can establish media queries such as "width," "height," or "color." With the help of the media queries, you can customize presentations to a specific range of output devices without actually changing the content.
Below is example of writing media query.

<link rel="stylesheet" media="(max-device-width: 320px)" ref="mobile.css" />

iv) Relative Font Size : don't use font size in Pixels (px) as its is used for fixed. Instead of using pixels use em or %. Here is table of selecting font-size of EM equivalent to PX .

Pixels	EMs	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1.000em	100.0%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt

v) Relative Padding / Margin / Line-Height / Width : As like Font-size we also avoid using Pixels for Padding / Margin / Line-Height / Width etc.. Use % instead of pixels for proportional space and gaping.

vi) Word-Break Property : Don't forget to use word-Break CSS property. Because in small devices we have small screen to as a view area and if we need to give any URL or TEXT have no space and bigger length then device screen it will break out your design. So using word-Break property is safe side.
Its a part of CSS3 which is not supported by all browsers but its good to be in practice. Here is example to use

.break-word { word-wrap: break-word; }

vii) Flexible images : You should practice setting the max-width 100%, which means that an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.

Saturday, December 24, 2011

menu open on click and hide when we click outside of div or blank body

Most of time I got stuck when I see click menu into facebook and gmail for opening their account information.
I tried lots of time to make same kind of script or jquery code. But not able to find it anywhere on websites.

So tried to make it by myself and create a little jquery code which perform same work for me.

I hope this will help my designer friends to achieve that kind of functionality.

Example

<div class="userinfo">

<a href="javascript:void(0);" class="selnot">User Info</a>
<ul class="hide">
<li class="user"><asp:Label ID="lblUserName" runat="server" Text=""></asp:Label></li>
<li class="to"><asp:Label ID="lblTotalPost" runat="server" Text=""></asp:Label></li>
<li class="fa"><asp:Label ID="lblTotalFcebookPost" runat="server" Text="Label"></asp:Label></li>
<li class="in"><asp:Label ID="lblTotalLinkedinPost" runat="server" Text="Label"></asp:Label></li>
<li class="tw"><asp:Label ID="lblTotalTwitterPost" runat="server" Text="Label"></asp:Label></li>
<li class="out"><asp:LinkButton ID="lnkBtnLogout" runat="server" OnClick="lnkBtnLogout_Click">Logout</asp:LinkButton></li>
</ul>
</div>
<script type="text/javascript">
$(".selnot").click(function() {

if ($(this).next("ul").attr("class") == "show") {
$(this).next("ul").removeClass("show");
$(this).next("ul").addClass("hide");
}
else {
if ($(this).next("ul").attr("class") == "hide") {
$(this).next("ul").removeClass("hide");
$(this).next("ul").addClass("show");
}
}
});

$(document).click(function(e) {
if (e.target.className != "selnot") {
$("ul").removeClass("show");
$("ul").addClass("hide");
}
});

</script>

This Jquery use DOCUMENT Click to find on which Class we have made click.
If its not our menu class it disable our Menu to show.

Thursday, November 10, 2011

Interview Questions for HTML Developer, Interview Questions for Web designer, Interview Questions for CSS, Interview Question ask by Recuriter

Q 1.: Is CSS Case Sensitive?
Ans: CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects,

Except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.

The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }

Q 2.: What is ID Selectors?
Ans: A CSS id selector applies to the one element in the HTML document with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page.

The id selector is then defined with a hash- or pound-sign (#) before the id name.

Q 3.: What is Pseudo-classes?
Ans: CSS pseudo-classes are used to add special effects to some selectors.

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

a:link { ⋮ declarations }
a:visited { ⋮ declarations }
a:focus { ⋮ declarations }
a:hover { ⋮ declarations }
a:active { ⋮ declarations }

Q 4.: Difference between HTML and XHTML?
Ans: There are very few minor points if we compare them as they are like identical twins. XHTML was actually derived from HTML. The major difference between them is coding in XHTML is comparatively strict than HTML that is if there are some lapses in structure and coding while working in HTML than it could get away easily but that is not a case while working in XHTML. In HTML, there is a liberty to ignore validation of the code. Moreover, tag closing is compulsory in XHTML which is not compulsory in HTML so XHTML closes the tags which were left open by HTML. So we can say that XHTML actually completes HTML.

Also in XHTML, closing of nested tags should be performed in same manner and form in which manner its opening was done. It is also done in HTML but it is not as strict as XHTML. Moreover, tags should be compulsorily used in lowercases in XHTML which is not the case in HTML.

Q 5.: Why we use <doc type="" /> in HTML and XHTML? What happens if we remove <doc type="" />
Ans: The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.
Means inheritance property can not be apply to its tags in regards of CSS. Also due to non standard lots of Scripts will not work properly into your HTML page.

Q 6.: Difference between PADDING and MARGIN?
Ans: Padding is the space inside the border between the border and the actual image or cell contents.Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.

Q 7.: What does !important mean in CSS?
Ans: The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
p { color: #000000; }
Important CSS also override the all inherited or ID attribute css.

User Style Sheets
However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.

Q8: What is Float? Explain its property.
Ans: The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property,
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element.

Q 9.:   What are the benefit of CSS3?
Ans    CSS3 a new version of CSS or cascading stylesheet benefits from technical features and properties. From better maintenance, loading speed, and layout design properties CSS3 is much more versatile. Designers get to implement the design elements from CSS3 in a simpler manner. Few of its advantages are:

Multi column layout
Multiple backgrounds
Text shadow
@font-face-Attribute
Border Radius
Box shadow
Media queries

Q10 : What is Responsive Web design? What we need to do to implement RWD(Responsive Web Design).
Ans     Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

Thursday, October 13, 2011

CSS Selectors, Types of CSS Selectors, Why not use IDs in CSS selectors, Problem using ID Selectors

To do styling and formatting to HTML we use Selectors in CSS.

CSS selectors:-

Type selectors / Group Selectors
Class selectors
ID selectors

TYPE Selector/ Group Selectors

Type Selector are also called as GROUP Selector. It is easy to understand these selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

Example:-

h6 {color: blue; font-size:1em; }

Result:-

Example Result

Class Selector

Class Selectors are most easy and widely use to give formatting to HTML tags. unlike TYPE selectors it work on every HTML tag.

It can also use to override the formatting style of TYPE Selector.
Class Selectors are defined by DOT [ . ].

Example:-

.excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree.

It can also use to override the formatting style of TYPE Selector.

Example:-

#excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID Selectors are defined by HASH [ # ].

The only difference between ID and Class selectors is we can define ID Selector once in whole HTML document as ID Selectors are unique in nature. But Class Selectors can use as many times on single HTML document we need.

Monday, August 8, 2011

Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color

Blinking text animation is use to catch the user attraction for a particular thing or feature.
This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.

But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.

Now I want to share that Script code with my web friends.

JQuery Script Code

var i = 1;



function color() {



//alert(1);



if (i == 1) {



$('.txt').css("color", "red");



i += 1;



return;



}



if (i == 2) {



$('.txt').css("color", "black");



i += 1;



return;



}



if (i == 3) {



$('.txt').css("color", "blue");



i += 1;



return;



}



if (i == 4) {



$('.txt').css("color", "orange");



i = 1;



return;



}



}



setInterval(color, 400);

Put this script code before end of body tag.
give the class name "txt" to text for whom you want color animation.

you can increase the time of changing color animation by increase the value of 400 to your value in code.

setInterval(color, 400);

you can also change the color code according to your requirement.

Also put Jquery Library file.
JavaScript Library File

Thursday, August 4, 2011

Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS

Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful.

Basic designers use fixed width image to create the rounded corners.

Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.

It helps to make low weight website. So it download fast on client server.

rounded corners using CSS 2.0

<div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;">
        <img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" />
        <img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" />
        <table width="100%;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="color: White;">
                    <td style="text-align: center;">
                        hello
                        <br />
                        how are you
                    </td>
                </tr>
            </tbody>
        </table>
        <img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" />
        <img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" />
    </div>

Rounded Corner using CSS 3.0

how arwe you dear

Its a test Rounded corners

but it uses CSS3

<style>
        .css3
        {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 30px;
            -moz-border-radius-bottomleft: 0;
            background: #eee;
            padding: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 0;
        }
    </style>
    <div class="css3">
        how arwe you dear
        <br />
        Its a test Rounded corners<br />
        but it uses CSS3
    </div>

But this technique support only for latest browsers who has CSS3 compatibility.

You can also create Pure Rounded corner CSS online:
http://www.spiffycorners.com/index.php

Thursday, July 28, 2011

Random image on refresh using javascript, Change image on every refresh, Another Picture, every refresh

Changing things on every refresh to your website is attractive feature to retain your visitors to your website.

Because it create suspense into visitor about the next information.

So I want to share this JavaScript.

JavaScript Code

var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var quote = new Array(3)
        var lnk = new Array(3)


          quote[0] = "home/modeltiranga.jpg";
          quote[1] = "home/modelbeauty.jpg";        
          quote[2] = "home/modeltiranga.jpg";


          lnk[0] = "product_category.aspx?id=446";      

          lnk[1] = "Product_category.aspx?samemodel=17440"; 
          lnk[2] = "product_category.aspx?id=446";

Put this code into HEAD tag.

HTML Code

put this code into BODY tags

Friday, July 22, 2011

javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery

Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.

Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.

But according to W3C Marquee is not more with HTML tag family it shows error in W3C validation.

after searching long time to web I found the REPLACEMENT of Marquee using JQUERY and this information I would like to share with my designer and Developer friends using this Post.

Its very simple to use and implement into our website whether its Dynamic or static.

HTML CODE

<ul id='ticker02'>

 <li><a href="#">Hello 1</a></li>
 <li><a href="#">Hello 2</a></li>
 <li><a href="#">Hello 3</a></li>
 <li><a href="#">Hello 4</a></li>
 <li><a href="#">Hello 5</a></li>

</ul>

<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); }); 
//]]> 
    </script>

CSS CODE

.tickercontainer {

}

.tickercontainer .mask {

}

ul.newsticker {

}

ul.newsticker li {

}

ul.newsticker a {

}

ul.newsticker span {

}

Now just need to add two Script file URL given Below you can save them too.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js

Saturday, July 16, 2011

Image Slide Show with Typing text effect, Jquery Tutorial for imagegallery, Typing text effect in Jquery, jQuery Image Galleries & Sliders

Last time I share some of Image gallery and slideshows for Image rotators having auto run and clicked event using Jquery.

also share another jquery slideshow and image gallery onhover effect having left scroller and right scroll depending on your mouse cursor position.

Today I am going to share one more simple image gallery with name of image and its description. Using nice effect of typing to showing image name and its description.

Its easy to implement in your blog or site.

Here I am providing the Jquery tutorial for implementing the image gallery.

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
 PROMPT:: we envision. we deliver
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="css/animation1.css" rel="stylesheet" type="text/css" />
<script src="http://web15346.38.ocpwebserver.com/meltbook/CSS/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="css/scripts.js" type="text/javascript"></script>    
</head>
<body>

<div class="mid_ani">

<div id="header">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="">
                            <img id="slide-img-2" src="images/1.jpg" class="slide" alt="Prompt" /></a> <a href="">
                                <img id="slide-img-3" src="images/4.jpg" class="slide" alt="Prompt Solution" /></a> <a href="">
                                    <img id="slide-img-4" src="images/3.jpg" class="slide" alt="Prompt Solution Inc" /></a>

<a href="">
                            <img id="slide-img-5" src="images/0.jpg" class="slide" alt="Prompt Slide" /></a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text">
                                <strong>post: </strong><span></span>
                            </p>
                            <p id="slide-desc" class="text">
                            </p>

<p id="slide-nav">
                            </p>
                        </div>
                    </div>
                    <!--content featured gallery here -->
                </div>

                <script type="text/javascript">
                    if (!window.slider) var slider = {}; slider.data = [
                                    { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here"}];
                </script>

</div>
        </div>
        <!--/header-->
    </div>
</body>
</html>

scripts Code

window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  //$.each(css_ims,function(){(new Image()).src=_siteRoot+'../images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a class="num" id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};

Animation1 CSS Code

a img {
border : 0;
}

div.wrap a,div.wrap a:hover
{
    color:#fff;
}
div.wrap {
width : 980px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 980px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 235px;
background : url(../images/ani.png) no-repeat left top ;
}
div#header div#slide-holder {
z-index : 40;
width : 980px;
height : 236px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 1px;
left : 1px;
width : 975px;
height : 224px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 973px;
height : 30px;
display : none;
position : absolute;
background : url(../images/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display:none;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 5px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 17px;
display : inline;
margin : 2px 5px 0 0;
font-size : 0px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
color:#fff;
line-height:22px;
margin : 0 5px 0 0;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../images/images/silde-nav1.png);
}
div#nav ul li a {
background : url(../images/images/nav.png) no-repeat;
}

Tuesday, July 12, 2011

Jquey Tutorial for Slideshow, Jquery Image gallery, Image galley with description using Jquery, Image Slideshow using Lightbox in Jquery Image Slideshow using Lightbox in Jquery

while searching for Slideshow(image gallery) I found Jquery light box plugin which use Modelbox (Light box) to view show gallery image and its description.

This image gallery is too easy to implement on our websites.

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector.

Here I am providing the tutorial to implement the image gallery.

HTML Source Code

CSS and Script

http://119.82.71.124/fb/jquey_lightbox/js/jquery.js
http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js
http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

Modification
Here we mention the ID selector name in which the gallery exist. you can use any of id exist in you webpage.

$(function() {
        $('#gallery a').lightBox();
    });

Image and thumbnail information

BIG Image: Anchor tags href contain the URL of Bigger image which has to be open after click on image thumbnails.

Description: For inserting Description of image we need to mention all description into anchor tag's TITLE attribute.

Thumb: For Thumbnail we use IMG tag as small image.

<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>

Wednesday, July 6, 2011

jquery tutorial for check all checkbox, Select Multiple checkbox, JQuery Check and Uncheck All Checkboxes

This function is specially designed for dynamic pages with varying numbers of checkboxes.

I found same functionality in JavaScript too but we can't use same script for two control.

So i decide to create Jquery for same script here I am providing both SCRIPT code for JavaScript and Jquery.

JavaScript

function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
 if(!document.forms[FormName])
  return;
 var objCheckBoxes = document.forms[FormName].elements[FieldName];
 if(!objCheckBoxes)
  return;
 var countCheckBoxes = objCheckBoxes.length;
 if(!countCheckBoxes)
  objCheckBoxes.checked = CheckValue;
 else
  // set the check value for all check boxes
  for(var i = 0; i < countCheckBoxes; i++)
   objCheckBoxes[i].checked = CheckValue;
}

Jquery


 $('#ctl00_ContentPlaceHolder1_chkPending').live('click',function() {
            if(pending==0){
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", false);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", false);
            });
            pending=1;
            }
            else
            {
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", true);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", true);
            });
            pending=0;
            }
        });

Please do not forget to add Jquery library file.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

You all need to do is put two id's into script.
$("#ctl00_ContentPlaceHolder1_GridView1_ctl01_ChkAll").toggle

here you need to put id of whom click you want to check all check-box .

$("#accordion1 input:checkbox").each
here you need to mention in which all check-box should be checked.

Tuesday, July 5, 2011

Jquery Smooth Navigation menu, DropDown Menus, MultiLvel DropDown Menu in Jquery, MultiLevel Menu on Click event

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontalvertical (sidebar) orientation. and

This menu i found from Dynamic Drive Smooth Navigation Menu and used for multiple website.

because it provides the orientation based Menu. Means we can use this menu as HORIZONTAL and VERTICAL also.

But this menu is work on hover event.

By modifying its jquery I able to run it on click event.

Tuesday, June 28, 2011

Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript

Now these days Light box / Model box are widely use in website to show content or some other information.

and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.

Here I am providing simple light box and Model box tutorial with using few lines of script code.

JavaScript Code

function gray_box1() {
document.getElementById('light1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
document.getElementById('fade').style.height='2000px';
}

HTML Code

<div id="fade" class="black_overlay">
div>

Hello! this is light box example.

CSS Code

.white_content {
background-color:white;
border:2px solid #FFFFFF;
display:none;
left:3%;
overflow:auto;
padding:2px;
position:absolute;
text-align:left;
top:35%;
width:450px;
z-index:1002;
}

.black_overlay {
background-color:black;
display:none;
height:100%;
left:0;
opacity:0.4;
filter: alpha(opacity=40);
position:fixed;
top:0;
width:100%;
z-index:1001;
}

Online Link

Pages

Monday, May 11, 2015

1) Extension Method or Prototype in JavaScript

2) Closure in JavaScript

3) Differentiate between == and ===?

Friday, April 26, 2013

Thursday, April 11, 2013

Wednesday, January 16, 2013

Thursday, January 3, 2013

Monday, September 17, 2012

Saturday, December 24, 2011

Thursday, November 10, 2011

Thursday, October 13, 2011

TYPE Selector/ Group Selectors

Example Result

Class Selector

Example Result

ID selectors

Example Result

Monday, August 8, 2011

Thursday, August 4, 2011

Thursday, July 28, 2011

Friday, July 22, 2011

Saturday, July 16, 2011

Tuesday, July 12, 2011

Wednesday, July 6, 2011

Tuesday, July 5, 2011

Tuesday, June 28, 2011