Example of Parallax Scrolling

    Hello Readers !

    Here is an example of parallax scrolling with simple script and it is also compatible with

internet explorer.

    Parallax Scrolling :-

    The parallax scrolling web design is in trend, Its shows the background moving at a slower

compared to foreground and its shows a 3D effect when you scroll the page.

    Script :-

            $(document).ready(function() {
                $(window).bind('scroll',function(){
                    parallax();
                })
            })
             function parallax(){
                    var scrollposition=$(window).scrollTop();
                    $('.ground').css('top',(0 - (scrollposition * .1))+'px')
                    $('.box').css('top',(0 + (scrollposition * 1.2))+'px')
                 }

    Html

    copytext

        <div class="main">
            <div class="ground"></div>
            <div class="box"></div>
        </div>

For such more blogs you can visit to http://findnerd.com/NerdDigest
   

How to make Sticky navigation

Hello Readers !

Below is an example of sticky navigation with simple script which is compatible with internet

explorer. You can use this script for sticky header or sticky footer.

I hope it will be helpful for you.

Script:-

    $(document).ready(function(){
    $(window).scroll(function(){
    if($(this).scrollTop() > 1){
    $('nav').addClass('sticky')
    }
    else($('nav').removeClass("sticky"))
    });
    });

Css:-

    section{width: 900px;margin: 0 auto}
    footer , header{height: 120px;background-color: #ccc}
    main{height: 900px}
    nav{background-color: #333;}
    nav ul{background-color: #e5e5e5;list-style: none;}
    nav ul li{display: inline-block;}
    nav ul li a{color: red;}
    .sticky{position: fixed;top:0px;width:900px}

Html :-

    <section>
    <header id="header">
    </header>
    <main>
    <nav>
    <ul>
    <li><a href="" title="">Navigation1</a></li>
    <li><a href="" title="">Navigation</a></li>
    </ul>
    </nav>
    </main>
    <footer>
    </footer>
    </section>
For such more blogs kindly visit http://findnerd.com/NerdDigest

Custom checkbox using jquery

    Hello Reader !

    Here is an example how to make a custom check box using simple script and css.

    Script

        $(document).ready(function(){
        $('label').click(function(){
        $(this).toggleClass('checkedN');
        });
        });

    css

        .checkedN {background-position:0 53px}
        input[type=checkbox]{opacity: 0;height: 53px;width: 53px}
        label{height: 53px;width: 53px;background: url(check.png);display: block;}

    Html

        <label for="">
        <input type="checkbox" name="" value="" class="checkedBtn">
        </label>

    You can use check box image according to your need

    and add this before this scripiting :-

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

For such more blogs kindly visit http://findnerd.com/NerdDigest

CSS Positioning

    Positioning is used to get the blocks exactly where you want them to go. The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the properties like top, bottom, left, right. There are basically four types of positioning:

    Static: This is the default positioning for every html element. Static means the element will flow into the page as it normally does. A static positioned element is always positioned according to the normal flow of the page. The elements of static positioning are not affected by the top, bottom, left and right properties.

    Relative: Relative positioning means "relative to itself". The content of relatively positioned elements can move and overlap other elements, but the reserved space for the element is still preserved in the normal flow. A relative positioned element is positioned relative to its normal position.

    Absolute: This is very important positioning that allows you to place any html element exactly where you want it. An element with this type of positioning is not affected by other elements and it also doesn't affect other elements. Absolutely positioned elements can overlap other elements. Here the element is positioned relative to first parent element that has a position other than static. If no such element is found, the containing block inherits the html tag. You can use the left, right, top and bottom properties to move the element anywhere on the page.

    Fixed: A fixed position element is positioned relative to the browser window itself or the viewport. The viewport doesn't change even when the window is scrolled, so an element with fixed positioning will stay exactly where it is when the page is scrolled. Fixed positioned elements can overlap other elements.

For More Blogs Kindly visit http://findnerd.com/NerdDigest

How to Create Accordion

Hello All,

If you want to make an accordion, this code will help you to make a dynamic accordion using HTML, CSS and Jquery.

An accordion is a stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated with that item. On clicking a particular item, the content related to it expand below and on further click it will hide the content.

Below is the code to create Accordion:-

To know more about How to make a dynamic accordion visit FindNerd.

Also you can learn about all the Newest HTML development blogs at FindNerd. Apart from this, you can also ask questions & look for various programming queries along with their solutions including Android, C, Java, Php programming questions and answers etc. as it is an effective technology forum also.

What is Meta tag and their uses.

Hello Readers,

Usually we all uses the meta tags, but don't know properly what are these, their actual uses & their importance? So here I will explain you about meta tags and i hope it will be very helpful for you.

So let's start with definition :-

    Meta tags are special type of html tags but these meta tags are not used in the html page to enhance the display of webpage on browser, however these Meta tags are special tags that are being used by the search engine so that search engine capture these meta tags into its index and display the web pages results in search engine result page. 

To know more about Meta Tags and their Uses visit FindNerd. As it is an effective technology forum, so here you can also ask questions & look for various programming queries along with their solutions on Android, C, Java, Php programming questions and answers etc. 

Create shapes using css

Hello readers!

In this blog we will discuss how to make shapes using css only. to make any shape we have to know mainly about 2 pseudo Elements.

::before :- We can use this element to insert some content before an element.

::after :- We can use this element to insert some content after an element.

Star (Six-corner) :-

    <div id='star-six'></div>
    #star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #333;
    position: relative;
    }
    
To read complete information about Creating Shapes using CSS visit FindNerd. Apart from this, you can also ask questions & look for various programming queries along with their solutions including android, php, c, java programming questions and answers etc. as it is an effective technology forum also.

Typography Viewport size

   Hello readers,

In this blog we will discuss about, how to manage font size in different viewport. Usually we fix the font size with different viewport size using @media. But as we know CSS3 has some new values. 

Viewport size: vw, vh, and vmin are one of them.
    How its works :-

    One unit of the three value is 1% of the viewport
    viewport = browser window size = window object
    If the viewport is 50cm wide, 1vw == 0.5cm

To read complete information on how to manage font size in different viewport visit FindNerd. As it is an effective technology forum, so here you can also ask questions & look for various programming queries along with their solutions including Android, Php, Java, C programming questions and answers etc. 

Creating Horizontal Menu Bar Using Html and CSS

Hello readers,
If you want to create a horizontal menu bar in a web page using HTML and CSS follow the below code.

CSS:-

    <style type="text/css">
    #menu
    {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 10px;
    list-style: none;
    width:100%;
    border:1px solid;
    height:16px;
    background:url(images/listbackground.png);
    }
    #menu li
    {
    
To read complete information on how to Create Horizontal Menu Bar Using Html and CSS visit FindNerd. Apart from this, you can also ask questions & look for various programming queries along with their solutions including Android, C, Java, Php programming questions and answers etc. as it is an effective technology forum also.

To Make a Preloader Using HTML and CSS

Hello readers,
If you want to make a preloader using HTML and CSS follow the below code:

Html

        <div class="circle">
        <div class="inner">
        <div class="spot"></div>
        </div>
        </div>
        <h1>loading... </h1>

    CSS

        @-webkit-keyframes spin {
        0% {
        opacity: 0.25;
        }
        50% {
        opacity: 1;
        background: red;
        }
        
To read this full blog on How To Make a Preloader Using HTML and CSS visit FindNerd . As it is an effective technology forum, so here you can also ask questions & look for various programming queries along with their solutions including android, c, java, php programming questions and answers etc.