Building a List/Grid View Switcher with jQuery

CSS :

<style type="text/css" >

        #container ul

        {

            list-style: none;

        }

        #container .buttons

        {

            margin-bottom: 20px;

        }

        #container .list li

        {

            width: 100%;

            border-bottom: 1px dotted #CCC;

            margin-bottom: 10px;

            padding-bottom: 10px;

        }

        #container .grid li

        {

            float: left;

            width: 20%;

            height: 50px;

            border-right: 1px dotted #CCC;

            border-bottom: 1px dotted #CCC;

            padding: 20px;

        }

    </style>

SCRIPT :

<script language="javascript" type="text/javascript">

        $(function() {

            $('input[type=button]').on('click', function(e) {

                if ($(this).hasClass('grid')) {

                    $('#container ul').removeClass('list').addClass('grid');

                }

                else if ($(this).hasClass('list')) {

                    $('#container ul').removeClass('grid').addClass('list');

                }

            });

        });

</script>

BODY :

<div id="container">

        <div class="buttons">

            <input type="button" class="grid" value="Grid View" />

            <input type="button" class="list" value="List View" />

        </div>

        <ul class="list">

            <li>Item 1</li>

            <li>Item 2</li>

            <li>Item 3</li>

            <li>Item 4</li>

            <li>Item 5</li>

            <li>Item 6</li>

            <li>Item 7</li>

        </ul>

    </div>

How to hide a popup by clicking outside

#phone-popup, #email-popup

        {

            height: 200px;

            width: 200px;

            background: red;

            position: absolute;

            top: 200px;

            left: 200px;

            display: none;

        }

$(".email").click(function(e) {

            e.stopPropagation();

            $("#email-popup").show("fast");

        });

        $(".phone").click(function(e) {

            e.stopPropagation();

            $("#phone-popup").show("fast");

        });

        $(document).click(function(e) {

            if (!(e.target.id === 'email-popup' || e.target.id === 'phone-popup')) {

                $("#email-popup, #phone-popup").hide("fast");

            }

        });

<input type="button" class="email" value="email" />

<input type="button" class="phone" value="phone" />

<div id="email-popup" >E-MAIL</div>

<div id="phone-popup" >PHONE</div>

How do I create a radial css3 border gradient shadow

body {
    margin: 30px;
}

#b {
    width: 50%;
    padding: 30px 0px;
    text-align: center;
    border: 1px solid #999; color: #333;
    border-radius: 4px;
}
#a {
    width: 50%;
    height: 5px;
    background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
}

HELLO!!

RGB to hexa javascript convertor code

<script type="text/javascript" language="JavaScript">

        function hexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }

        function hexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }

        function hexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }

        function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }

        function setColor (id, sColor) {

            var elem;

            if (document.getElementById) {

                if (elem = document.getElementById(id)) {

                    if (elem.style) { elem.style.backgroundColor = "#" + sColor; }  else {

                    }

                }

            }

        }

    </script>

<span id="colorSample" style="border: 1px solid gray;">                      </span>

<div>

<input type="text" name="hex" size="7" maxlength="7" value="FFFFFF">

<input type="button" name="btn" value="RGB"   onclick="setColor('colorSample',this.form.hex.value);

this.form.r.value=hexToR(this.form.hex.value);

this.form.g.value=hexToG(this.form.hex.value);

this.form.b.value=hexToB(this.form.hex.value);

">

        R:<input type="text" name="r" size="3" style="width: 33px;">

        G:<input type="text" name="g" size="3" style="width: 33px;">

        B:<input type="text" name="b" size="3" style="width: 33px;">

    </div>

jQuery Increase Decrease Font Size of Website Dynamically.

<script type="text/javascript">

        $(document).ready(function() {

            var divtxt = $('#fontdiv');

            // Increase Font Size

            $('#btnincfont').click(function() {

                var curSize = divtxt.css('fontSize');

                var newSize = parseInt(curSize.replace("px", "")) + 1;

                $(divtxt).css("fontSize", newSize + "px");

            });

            // Decrease Font Size

            $('#btndecfont').click(function() {

                var curSize = divtxt.css('fontSize');

                var newSize = parseInt(curSize.replace("px", "")) - 1;

                $(divtxt).css("fontSize", newSize + "px");

            })

        });

    </script>

<div id="fontdiv">

           . . .

           . . .

           . . .

</div>

<br />

<input type="button" id="btnincfont" value=" + " />

<input type="button" id="btndecfont" value=" - " />

How to check string contain special character or not ?

 <script type="text/javascript">

    $(function() {

        $('#btnClick').click(function() {

            var str = $('#txtName').val();

            if (/^[a-zA-Z0-9- ]*$/.test(str) == false) {

                // Message

            }

        })

    })

</script>

Generate Random Colors using javascript

<script type="text/javascript">

        // Run function for every second of timer

        setInterval(rgbcolors, 1000);

        function getrgbcolors() {

            // rgb string generation

            var col = "rgb("

+ Math.floor(Math.random() * 255) + ","

+ Math.floor(Math.random() * 255) + ","

+ Math.floor(Math.random() * 255) + ")";

            //change the text color with the new random color

            document.getElementById("stylediv").style.color = col;

        }

 </script>

<div id="stylediv" >Generate Random Colors using javascript</div>

Check checkbox checked property using jQuery

attr

      if ($(this).attr('checked')) {

            // checked

        } else {

            // unchecked

        }

 is

        if ($(this).is(':checked')) {

            // checked

        }

        else {

            // unchecked

        }

prop

        if ($(this).prop('checked')) {

            // checked

        } else {

            // unchecked

        }

How To Create A Tooltips With JQuery...

<style type="text/css">

        .tooltip

        {

            position: relative;

        }

        .tooltip > div

        {

            display: none;

            position: absolute;

            bottom: 100%;

            left: 50%;

            margin-left: -150px;

            width: 300px;

        }

        .tooltipContent

        {

            background-color: #eee;

            border: 1px solid #555;

            border-radius: 5px;

            padding: 5px;

        }

    </style>

 <script type="text/javascript">

        $(function() {

            $(".tooltip").hover(function() {

                var tooltip = $("> div", this).show();

                var pos = tooltip.offset();

                tooltip.hide();

                var right = pos.left + tooltip.width();

                var pageWidth = $(document).width();

                if (pos.left < 0) {

                    tooltip.css("marginLeft", "+=" + (-pos.left) + "px");

                }

                else if (right > pageWidth) {

                    tooltip.css("marginLeft", "-=" + (right - pageWidth));

                }

                tooltip.fadeIn();

            }, function() {

                $("> div", this).fadeOut(function() { $(this).css("marginLeft", ""); });

            });

        });

    </script>

<span class="tooltip">

<a href="#">unfetter</a>

<div>

     <div class="tooltipContent">

               . . .

               . . .

               . . .

     </div>

</div>   

</span>