JSFiddle

  • Vertically Centering Element

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="vCenter__parent">
    <div class="vCenter__child">
    I am centered
    </div>
    </div>
  • jQuery Tabs

    jQuery (edge), HTML, CSS, JavaScript

    	/*Note: add class "tabSet1" or "tabSet2" after ul.tabs and tab-content */
    	function tab(x) {
    	  var a = $('ul.tabs.' + x + ' ' + 'li ...
  • Position in Middle

    Position one element in middle of other element

    function postionMiddle(e) {
      var capHeight = $(e).innerHeight(),
        capHeightHalf = capHeight / 2,
        capParentHeight = $(e).parent().innerHeight(),
        capParentHeightHalf = capParentHeight / 2,
        capPosition = capParentHeightHalf - capHeightHalf ...
  • Swapping DIV in CSS only

    Sometimes we need to move elements from top to bottom. This style will help.

    <div class="container">
    <div class="first">
    First DIV
    </div>
    <div class="second">
    Second DIV
    </div>
    </div>
  • Vertical Centering With CSS

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="parent">
        <div id="child">Text here</div>
    </div>
  • Simple jQuery Read More/Less Example #2 is the latest revision

    ref: http://code-tricks.com/jquery-read-more-less-example/

    $(document).ready(function() {
      // Configure/customize these variables.
      var showChar = 100; // How many characters are shown by default
      var ellipsestext = "...";
      var ...
  • How To Center an Object Exactly In The Center

    ref: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

    <span class="centered">
      Please centered me
    </span>
  • Side button

    css tricks for side sticky button

    <span class="t-button01 rotate">Side Button</span>
    
  • Slider: Pure CSS3 #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <title>CSS3 Slider</title>
    
    </head>
    
    <body>
    
    <!-- Enable MaxWidth Switching -->
    
    <input checked="" type="radio" name="respond" id="desktop" selected="true">
    <input type="radio" name="respond" id="tablet" selected="false">
    <input type="radio" name="respond" id="mobile" selected="true">
    <article id="slider"> 
      
      <!-- MaxWidth Options --><!-- .respond --> 
      
      <!-- Slider Setup -->
      
      <input checked="" type="radio" name="slider" id="slide1">
      <input type="radio" name="slider" id="slide2" selected="true">
      <input type="radio" name="slider" id="slide3" selected="true">
      <input type="radio" name="slider" id="slide4" selected="true">
      <input type="radio" name="slider" id="slide5" selected="true">
      
      <!-- The Slider -->
      
      <div id="slides">
        <div id="overflow">
          <div class="inner">
            <article> 
            <span class="cat-product"> <span class="cat-img" style="float:left;"><img src="http://www.photoboom.com.au/wp-content/uploads/2014/09/1a9a2279.jpg" alt=""/></span> <span class="cat-title">SPOT ROUCHED DRESS</span> <span class="cat-now-price">NOW $29.95</span> <span class="cat-was-price">WAS $59.95</span> </span> <span class="cat-product"> <span class="cat-img" style="float:left;"><img src="http://www.photoboom.com.au/wp-content/uploads/2014/09/1a9a2358.jpg" alt=""/></span> <span class="cat-title">PAISLEY MAXI SKIRT</span> <span class="cat-now-price">NOW $29.95</span> <span class="cat-was-price">WAS $49.95 ...</span></span></article></div></div></div></!--></!--></!--></!--></article></!--></body>
  • Magnify on hover

    CSS3 transition

    <body>
    	<div class="wrap">
    			
    		<ul>
    			<li class="pet">
    				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item1.png" />
    				<h2>Item 1</h2>
    				<p>Dscr 1</p>
    			</li>
    			
    			<li class="pet">
    				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item2.png" />
    				<h2>Item 2</h2>
    				<p>Dscr 2</p>
    			</li>
    			
    			<li class="pet">
    				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item3.png" />
    				<h2>Item 3</h2>
    				<p>Dscr 3</p>
    			</li>				
    		</ul>
    
    		</div><!-- .wrap -->
    
    	</body>