Simple responsive menu

HTML


<nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Projects</a></li>
        <li class="current"><a href="#">Contact Us</a></li>
      </ul>
    </nav>

CSS


.nav {
	margin: 23px 0;
	width:40%;
	float:right;
	text-align:right;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
 *display:inline; /* ie7 */
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #ffffff;
	line-height: 100%;
}
.nav a:hover {
	color: #ffffff;
}
.nav .current a {
	color: #510900;
	border-radius: 5px;
}
@media screen and (max-width: 768px) {
	#hdcontainer {
		width:90%;
	}
	.nav {
		width:73%;
		position: relative;
		min-height: 40px;
		margin: 15px 0;
	}
	.nav ul {
		width: 235px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #E2E2E2 url(images/icon-menu.png) no-repeat 185px 12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(js/PIE.htc);
		box-shadow: 0 1px 2px #898989;
		-moz-box-shadow:0 1px 2px #898989;
		-webkit-box-shadow: 0 1px 2px #898989;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=70), progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=140);
		behavior: url(js/PIE.htc);
		z-index:6000;
	}
	.nav li {
		display: none; /* hide all 
  • items */ margin: 0; } .nav .current { display: block; /* show only current
  • item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; color:#EC3002; } .nav a:hover { color: #000000; } .nav .current a { background: none; color: #000000; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; color:#000000; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } }
  • Continue Reading

    Load JSON data to Table using Jquery

    
    <pre>
    <code>
    //service.json
    {
        "Cities": ["LUSAKA", "HARARE"],
        "Countries": ["ZAMBIA", "ZIMBABWE"]
    }
    </code>
    </pre>
    
    
    
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>WCF Client</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <table id="location" border='1'>
            <tr>
                <th>Countries</th>
                <th>Cities</th>
            </tr>
        </table>
        <script>
            var service = 'service.json';
    
            $(document).ready(function() {
    
                jQuery.support.cors = true;
    
                $.ajax({
                    type: "GET",
                    // url: service + '/service/',
                    url: service,
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function(data) {
    
                        var trHTML = '';
    
                        $.each(data.Countries, function(i, item) {
    
                            trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
                        });
    
                        $('#location').append(trHTML);
    
                    },
    
                    error: function(msg) {
    
                        alert(msg.responseText);
                    }
                });
            })
        </script>
    </body>
    </html>
    
    
    Continue Reading

    Load JSON data to Table using Javascript

      
        <!-- Loading JSON data here -->  
        <div id="showData"></div>
      
    
    
      <script>
        //function CreateTableFromJSON() {
        var myBooks = [{
            "Book ID": "101",
            "Book Name": "Fire of Wings",
            "Category": "Biography",
            "Price": "100"
        }, {
            "Book ID": "102",
            "Book Name": "Horrypotter",
            "Category": "Thriller",
            "Price": "1000"
        }, {
            "Book ID": "103",
            "Book Name": "Revolution 2020",
            "Category": "Romance",
            "Price": "150"
        }]
    
        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }
        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");
        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
    
        var tr = table.insertRow(-1); // TABLE ROW.
    
        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th"); // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
    
        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }
    
        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        //}
      </script>
    
    
    Continue Reading

    Swiper Jquery Plugin

    It is a modern mobile touch slider.

    CSS:

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />
    
    

    JS:

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js "></script>
    
    

    It has lot of components.

    • Swipe slider navigation
    • Swipe pagination
    • Swipe pagination with dynamic bullets
    • Progress pagination
    • Fraction pagination
    • Custom pagination
    • Page Scrollbar
    • Vertical page slider
    • Space between slides
    • Multiple slides per view
    • Scroll container
    • Multiple row slides layout
    • Nested swipers
    • Loop mode carousel
    • Loop mode with multiple slides per group
    • 3D cube effect
    • 3D coverflow effect
    • 3D Flip effect
    • Mousewheel control
    • Autoplay carousel
    • Dynamic slides (append/prepend slide pagination)
    • Thumbs gallery with two-way swipe
    • Parallax (Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.)
    • Responsive breakpoints slider
    • Auto height slider
    • Zoom slider
    • Slideable navigation drawer

    Demo: http://idangero.us/swiper/demos/

    Continue Reading

    How to Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS?

    Prevent Bootstrap Modal from Closing when Clicking Outside

    By expanding the modal-dialog dimensions to full window, we can avoid the outside click close.

    
    //CSS
    .modal {
        background-color: rgba(0,0,0,0.5);
    }
    .modal-dialog{
        width: 100%;
        height: 100vh;
        margin: 0 !important;
    }
    .modal-content {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: auto;
        top: 15%;
    }
    @media (min-width: 600px){
    .modal-content {
        width: 700px;
    }
    }
    
    Continue Reading

    How to fix footer at bottom gap without using height fixed?

    How to fix footer at bottom gap without using height fixed?

    
     $(function () {
            function adjust() {
                var winH = $(window).height(),
                    docH = $('document').height();
    
                if (docH > winH) {
                    //leave it
                } else {
                    $('.footer').addClass('fixedfooter');
                }
            }
            $(window).on('resize', adjust);
     adjust();
        })
    
    

    How to add more than one click events on same element using Jquery?

    
    $(document).on('click', 'a.menu', function() { 
      console.log('first');
    });
    $(document).on('click', 'a.active', function() { 
      console.log('second');  
    });
    
    

    How to add active class if corresponding page is active?

    
    $(function () {
        var current = location.pathname;
        
    $('.menu-primary .nav li a').each(function () {
            var $this = $(this);
            
    // if the current path is like this link, make it active
            
    if ($this.attr('href').indexOf(current) !== -1) {
                $this.addClass('active');
            }
        })
    })
    
    

    Add active class in tab head when click it

    
        $(document).ready(function () {
            $('.route-activity .nav li').click(function (e) {
                $('.route-activity .nav li').removeClass('active');
                var $this = $(this);
                if (!$this.hasClass('active')) {
                    $this.addClass('active');
                }
                //e.preventDefault();
            });
     });
    
    
    Continue Reading

    What are the important data visualization Applications?

    Important data visualization Applications:

    Data Voyage (Visualization browser)

    Visualization browser for open-ended data exploration building on top of Vega-Lite.
    Start exploring data by examining each field and continue by selecting interesting data fields in
    data selector panel.

    Online Demo:
    Voyager

    Repository:
    Voyager Repository

    Lightbeam

    It is a Firefox add-on that uses interactive visualizations to show you the first and third party sites you interact with on the Web.
    Lightbeam

    Socilab

    It allows users to visualize and analyze their LinkedIn network using methods derived from social-scientific research.
    Socilab

    Cytoscape

    Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data.
    cytoscape

    Datavizcatalogue

    Complete list of data visualization
    Datavizcatalogue

    Continue Reading

    How to Create a full screen bootstrap carousel slider?

    Create a full-page bootstrap carousel

    We can develop a full screen bootstrap carousel or slider by using below scripts.

    
    /* full page carousel */
    jQuery(document).ready(function () {
    $('.carousel').carousel({
    	pause: "false"
    });
    $('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
    //$('.carousel-inner').css({'z-index': 0});
    $('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
    $('.carousel-inner div.itemimg').each(function () {
    	varimgSrc = $(this).attr('src');
    	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
    	$(this).remove();
    });
    $(window).on('resize', function () {
    	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
    });
    });
    
    
    Continue Reading

    How to do minification and concatenate the files using Gulp JS

    Minify and concatenate the JS files using gulp js

    Minify and concatenate the multiple JS files into singles file using gulp.

    Step 1: Gulp plugin

    Declare the gulp plugins in gulpfile.js file.
    var gulp = require(‘gulp’);

    Step 2: Uglify plugin

    Declare the uglify plugin for minifies the required js files.
    var uglify = require(‘gulp-uglify’);

    Step 3: Concat plugin

    Declare the concat plugin for combining the JS files into single file.
    Var concat = require(‘gulp-concat’);

    Step 4: Creating gulp task

    Creating gulp task for Minification and concat process.

    gulp.task(‘scripts’, function() {
    gulp.src(‘src/*.js’)
    .pipe(concat(‘all.min.js’))
    .pipe(uglify())
    .pipe(gulp.dest(‘dist’));
    });

    Gulp Task code Explanation:

    gulp.src – It defines the input files path for processing
    pipe – It is used to chain multiple tasks together using pipe method.
    gulp.dest – It defines the output location for processed files.
    Concat – This method combines multiples files into single file. We should declare the output
    file name within the brackets.

    Overall Source Code for Minify and concatenate the JS files using gulp js.

    
    //gulpfile.js file
    
    //Adding dependencies
    var gulp = require('gulp');
    varuglify = require('gulp-uglify');
    varconcat = require('gulp-concat');
    
    //defining tasks
    gulp.task('default', function() {  //default is a task name, we can give any name.
    	gulp.src('src/*.js')
    	.pipe(concat('all.min.js'))
    	.pipe(uglify())
    	.pipe(gulp.dest('dist'));
    });
    
    

    Project Folder Structure:

    Gulp folder structure

    Continue Reading
    1 2 3 6