JSFiddle

  • An introduction to responsive website design with CSS3 Media Queries Tutorial #8 is the latest revision

    Learn to create responsive web design using CSS3 media queries.

    <!-- Common and base stylesheet style.css-->
    <!-- Common and base stylesheet media-queries.css-->
    
    <body>
      <div class='wrapper'>
        <!-- Header -->
        <header>
          <nav>
            <ul>
              <li><a href='#'>Home</a></li>
              <li><a href='#'>About</a></li>
              <li><a href='#'>Blog</a></li>
              <li><a href='#'>Services</a></li>
              <li><a href='#'>Contact</a></li>
              <div class='clrfix'></div>
            </ul>
          </nav>
        </header>
    
        <!-- Main Content -->
        <div class='content'>
          <div class='slide'>
            <img src='http://dummyimage.com/1024x350/fff000/000&text=banner'>
          </div>
          <div class='columnLeft'>
            <h2>Dolor sit amet</h2>
            <p>
              Lorem ipsum dolor sit amet, impedit voluptatibus mei an. Eam in natum ...</p></div></div></!--></!--></div></body></!--></!-->
  • Auto load Bootstrap modal on page load - Demo #4 is the latest revision

    autoload the bootstrap modal using setTimeout on page load

    $(document).ready(function() {
      setTimeout(function() {
        $("#myModal").modal('show');
      }, 2000);
    
    });
    
  • Demo : Simple Collapsible Panel using jQuery

    Learn how to create a simple collapsible panel using jQuery.

    $(document).ready(function() {
      $('.row .content').hide(); // hide all div with class .content by default
      $('.row .header').click(function() { // when the ...
  • Simple CSS based resoponsive Hover effect

    Learn to create simple, responsive and beautiful CSS based hover effect tile box.

    <div class='categoriesGrid'>
      <div class='container-fluid'>
        <div class='row text-center'>
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/16acff/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
              </div>
    
            </div>
          </div>
          <div class='col-sm-8 col-md-6'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/1266ae/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
              </div>
            </div>
          </div>
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/16ac1/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
              </div>
            </div>
          </div>
    
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/ffac0f/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
    
              </div>
            </div>
          </div>
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/003333/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
    
              </div>
            </div>
          </div>
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/16ac1/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View All</a>
                </div>
    
              </div>
            </div>
          </div>
          <div class='col-sm-4 col-md-3'>
            <div class='categoryGrid'>
              <img src='http://dummyimage.com/600x338/16acef/ffffff&text=Dummy+image'>
              <div class='categoryAction'>
                <div class='categoryCTA'>
                  <h2>Welcome</h2>
                  <a href='#' class='btn btn-danger'>View ...</a></div></div></div></div></div></div></div>
  • Create multi-level drop down menu with HTML and CSS3 #10 is the latest revision

    Simple and clean three level dropdown menu with HTML and CSS3 animation

    <div class='navContainer'>
      <nav>
        <ul>
          <li>
            <a href='#'><i class='fa fa-home fa-fw'></i> Home</a>
          </li>
          <li>
            <a href='#'><i class='fa fa-globe fa-fw'></i> About</a>
          </li>
          <li>
            <a href='#'> Services <i class='fa fa-angle-right fa-fw'></i></a>
            <!-- ----levelTwo---- -->
            <ul class='levelTwo'>
              <li>
                <a href=''>item-level 2</a>
              </li>
              <li>
                <a href=''>item-level 2</a>
              </li>
              <li>
                <a href=''>item-level 2</a>
              </li>
              <li>
                <a href=''>item-level 2  <i class='fa fa-angle-right fa-fw'></i></a>
                <!-- ----levelThree---- -->
                <ul class='levelThree'>
                  <li>
                    <a href=''>item-level 3  <i class='fa fa-angle-right fa-fw'></i></a>
                    <!-- ----levelFour---- -->
                    <ul class='levelFour'>
                      <li>
                        <a href=''>item-level 4</a>
                      </li>
                      <li>
                        <a href=''>item-level 4</a>
                      </li>
                      <li>
                        <a href=''>item-level 4</a>
                      </li>
                      <li>
                        <a href=''>item-level ...</a></li></ul></!--></li></ul></!--></li></ul></!--></li></ul></nav></div>
  • Active Menu JQuery Demo

    A simple and small JQuery based navigation. The menu item attributes changed on click and add active style.

    $(document).ready(function() {
      var url = window.location;
      var navelement = $('.nav a').filter(function() {
        return this.href == url;
      }).addClass('active');
    });
    
  • Select and copy data in single click #183 is the latest revision

    Simple and short Select and Copy data in single click using JQuery

    $(function() {
      $('.copy-to-clipboard input').click(function() {
        $(this).focus();
        $(this).select();
        document.execCommand('copy');
        $(".copied").text("Copied to clipboard").show().fadeOut(1200);
      });
    });