JSFiddle

  • Responsive Calendar revised #3 is the latest revision

    jQuery 2.1.3, HTML, CSS, JavaScript

    function HideAllShowOne(d) {
        // Between the quotation marks, list the id values of each div.
    
        var IDvaluesOfEachDiv = "cal1 cal2";
    
        //-------------------------------------------------------------
        IDvaluesOfEachDiv = IDvaluesOfEachDiv ...
  • Responsive Calendar with Tab #1 is the latest revision

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

    <div class="main">
        <input id="tab1" type="radio" name="tabs" checked>
        <label for="tab1">April 2016</label>
        <input id="tab2" type="radio" name="tabs">
        <label for="tab2">September 2016</label>
        <div class="content">
            <div id="content1">
                <div id="calendar-wrap">
                    <div id="calendar">
                        <ul class="weekdays">
                            <li>Sunday</li>
                            <li>Monday</li>
                            <li>Tuesday</li>
                            <li>Wednesday</li>
                            <li>Thursday</li>
                            <li>Friday</li>
                            <li>Saturday</li>
                        </ul>
                        <!-- Days from previous month -->
                        <ul class="days">
                            <li class="day other-month">
                                <div class="date">27</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">28</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">29</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">30</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">31</div>
                            </li>
                            <!-- Days in current month -->
                            <li class="day">
                                <div class="date">1</div>
                            </li>
                            <li class="day">
                                <div class="date">2</div>
                            </li>
                        </ul>
                        <!-- Row #2 -->
                        <ul class="days">
                            <li class="day">
                                <div class="date">3</div>
                            </li>
                            <li class="day">
                                <div class="date">4 ...</div></li></ul></!--></!--></div></div></div></div></div>
  • Responsive Calendar #4 is the latest revision

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

    <div id="calendar-wrap">
        		<header>
        			<h1>April 2016</h1>
        		</header>
        		<div id="calendar">
        			<ul class="weekdays">
        				<li>Sunday</li>
        				<li>Monday</li>
        				<li>Tuesday</li>
        				<li>Wednesday</li>
        				<li>Thursday</li>
        				<li>Friday</li>
        				<li>Saturday</li>
        			</ul>
    
        			<!-- Days from previous month -->
    
        			<ul class="days">
        				<li class="day other-month">
        					<div class="date">27</div>    					
        				</li>
        				<li class="day other-month">
        					<div class="date">28</div>		
                            
        				</li>
        				<li class="day other-month">
        					<div class="date">29</div>    					
        				</li>
        				<li class="day other-month">
        					<div class="date">30</div>    					
        				</li>
        				<li class="day other-month">
        					<div class="date">31</div>    					
        				</li>
    
        				<!-- Days in current month -->
    
        				<li class="day">
        					<div class="date">1</div>    					
        				</li>
        				<li class="day">
        					<div class="date">2</div>
    		
        				</li>
        			</ul>
    
        				<!-- Row #2 -->
    
        			<ul class="days">
        				<li class="day">
        					<div class="date">3</div>    					
        				</li>
        				<li class="day">
        					<div class="date">4</div>    					
        				</li>
        				<li class="day">
        					<div class="date">5</div>    					
        				</li>
        				<li class="day">
        					<div class="date">6 ...</div></li></ul></!--></!--></div></div>
  • CSS Shapes #16 is the latest revision

    Creating diagrams using CSS Shapes

    <div class="detail-process">
    <div class="top-desc">
        <div id="rectangle-base">
            <p class="top">Framework
                <br />
                <br />
                <br />
                <br />Objective
            </p>
        </div>
        <div id="rectangle">
            <p class="top">Identify strategic benefits
                <br />& develop strategy
                <br />
            </p>
            <p><span class="left">Transfer knowledge effectively</span><span class="right">Drive efforts to gain strategic benefits</span>
            </p>
        </div>
        <div id="rectangle">
            <p class="top">Upskill employees
                <br />& execute strategy ...</p></div></div></div>
  • Doughnut Pie Chart #14 is the latest revision

    Using only CSS

    function HideAllShowOne(d) {
        // Between the quotation marks, list the id values of each div.
    
        var IDvaluesOfEachDiv = "idone idtwo idthree";
    
        //-------------------------------------------------------------
        IDvaluesOfEachDiv ...
  • Portfolio Boxes

    jQuery 2.1.3, HTML, CSS, JavaScript

    $(function () {
    		
    		var filterList = {
    		
    			init: function () {
    			
    				// MixItUp plugin
    				// http://mixitup.io
    				$('#portfoliolist').mixitup({
    					targetSelector: '.portfolio',
    					filterSelector: '.filter',
    					effects: ['fade'],
    					easing: 'snap ...
  • About Boxes

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

    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Resume-Meera-Krishnan.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-resume.png" alt="" />
    
            <dl>
                <dt>Download<br />Resume</dt>
            </dl>
        </a>    
    </figure>    
    
    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Pricing-Guide-List.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-price.png" alt="" />
    
            <dl>
                <dt>Download<br />Pricing Guide</dt>
            </dl>
        </a>    
    </figure>    
    
    
    
    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Working-with-a-Designer.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-guide.png" alt="" />
    
            <dl>
                <dt>Download<br />Working Guide</dt>
            </dl>
        </a>    
    </figure>    
    
    
    
  • Image Mouseover with only CSS #1 is the latest revision

    Mouse over image from grayscale to colored.

    <div class="awards">
        <ul>
            <li>
                <div class="awards-box">
                    <div class="testimonial">
                        <img src="https://www.ezypay.com/files/externalScripts/PressKitPage/1.Logo.ActiveManagement.png" />
                        <p class="t-text">"The new system makes it so much easier for me as a business owner as I don't have to ...</p></div></div></li></ul></div>
  • Country Rates Dropdown

    When a country is selected, 1. Show the pricing rate 2. Change certain variables 3. Change the bg image

    //Script to populate the Upper Section
    $(".pricing-dropdown img.flag").addClass("flagvisibility");
    
    $(".pricing-dropdown dt a").click(function () {
        $(".pricing-dropdown dd ul").toggle ...
  • Direction-Aware Hover Effect with CSS3 and jQuery

    The idea is to slide in an overlay from the direction we are moving with the mouse. Taken from http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

    $(function () {
    
        $(' #da-thumbs > li ').each(function () {
            $(this).hoverdir({
                hoverDelay: 50,
                inverse: true
            });
        });
    
    });