scroll a full page height up or down with jQuery/Javascript

HTML :-

     <div class="div" style="text-align: center; color: green">

            Gallery</div>

        <div class="div" style="background-color: #aaa">

            Page 1</div>

        <div class="div" style="background-color: #444">

            Page 2</div>

        <div class="div" style="background-color: blue">

            Page 3</div>

        <div class="div" style="background-color: #ccc">

            Page 4</div>

        <div class="div" style="background-color: pink">

            Page 5</div>

Script : -

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

        $(document).ready(function() {

            var divs = $('.div');

            divs.css('height',$( document ).height());

            var dir = 'up'; // wheel scroll direction

            var div = 0; // current div

            $(document.body).on('DOMMouseScroll mousewheel', function(e) {

                if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

                    dir = 'down';

                } else {

                    dir = 'up';

                }

                // find currently visible div :

                div = -1;

                divs.each(function(i) {

                    if (div < 0 && ($(this).offset().top >= $(window).scrollTop())) {

                        div = i;

                    }

                });

                if (dir == 'up' && div > 0) {

                    div--;

                }

                if (dir == 'down' && div < divs.length) {

                    div++;

                }

                //console.log(div, dir, divs.length);

                $('html,body').stop().animate({

                    scrollTop: divs.eq(div).offset().top

                }, 200);

                return false;

            });

            $(window).resize(function() {

                $('html,body').scrollTop(divs.eq(div).offset().top);

            });

        });

    </script>

How to implement this cool popup div effect using jQuery?

HTML :-

<div class='container'>

    <button id="btnShow">Show</button>

    <div class='menu' style='display: none'>

        <button id="btnHide">Close</button><br/>

       ABCDEFGHI,<br/>

        ABCDEFGHI<br/>

        ABCDEFGHI <br/>

        ABCDEFGHI<br/>

        ABCDEFGHI<br/>

        ABCDEFGHI <br/>

        ABCDEFGHI <br/>

    </div>

</div>

JS : - 

  $(document).ready(function() {

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

 $('.menu').show().css("top", "400px").animate({ top: 50 }, 200);

            });

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

                $('.menu').hide();

            });

  });

CSS :- 

.container

        {

            with: 400px;

            height: 300px;

            border: 1px solid black;

        }

    .menu

        {

            position: absolute;

            border: 1px solid black;

            background: #fff;

            left: 180px;

        }    

Set a div to be fixed from the top for the rest of the scroll.

var fixed = false;

        $(document).scroll(function() {

            if ($(this).scrollTop() >= 220) {

                if (!fixed) {

                    fixed = true;

        $('div').css({ position: 'fixed', top: 20 });                }

            } else {

                if (fixed) {

                    fixed = false;

                    $('div').css({ position: 'static' });

                }

            }

        });

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>