Hiding and Displaying the content upon clicking the Navigation using jQuery

Put this HTML inside the Body tag: <div class="header">header goes here</div> <div class="bgImages"> <div class="bgImg" id="flights-img" style="background-image:url(img/bg1.jpg); display:block; "></div> <div class="bgImg" id="hotel-img" style="background-image:url(img/bg2.jpg)"></div> <div class="bgImg" id="car-img" style="background-image:url(img/bg3.jpg)"></div> <div class="bgImg" id="package-img" style="background-image:url(img/bg4.jpg)"></div> </div> <div class="wrapper"> <div class="nav"> <ul> <li id="flights">Flights</li> <li id="hotel">Hotel</li> <li id="car">Car</li> <li id="package">Package</li> </ul> </div> <div class="container"> <div class="content" id="flights-cont" style="display:block;">Flights Content goes here..</div> <div class="content" id="hotel-cont">Hotel Content goes here..</div> <div class="content" id="car-cont">Car Content goes here..</div> <div class="content" id="package-cont">Package Content goes here..</div> </div> </div> <div class="footer">header goes here</div> Put this CSS inside the Head tag: *{margin:0;} .bgImages{position:fixed; width:100%; height:100%; z-index:0; top:0;} .bgImages .bgImg{width:100%; height:100%; display:none; background-repeat:no-repeat; background-size:100% 100%;} .nav, .container{position:relative; z-index:2;} .nav{float:left; width:100px;} .nav a{display:block;} .container{float:left; width:300px;} .container .content{background:#ffffff; padding:50px; margin:10px; display:none;} .header{height:100px; background:#ffcc00; color:#fff; position:relative; z-index:2 } .footer{height:100px; background:#ffcc00; color:#fff; position:relative; z-index:2 } .wrapper:after{content:"."; clear:both; display:block; visibility:hidden; height:0;} Put this JS inside the before Body closing tag: $(document).ready(function(){ function homeSearchSlider(){ $('.nav li').click(function(){ var mySCId = $(this).attr('id'); var mySCIdCont = '#' + mySCId + '-cont'; var mySCIdImg = '#' + mySCId + '-img'; console.log($(mySCIdCont)); if(!$(mySCIdCont).is(':visible')){ $('.bgImg').slideUp("slow"); $('.content').slideUp("slow"); $(mySCIdCont).slideDown("slow"); $(mySCIdImg).slideDown("slow"); } }); }; homeSearchSlider(); }); Download the...

Read More

JavaScript Can Change HTML Attributes

<script type="text/javascript"> function myFunction(){ var x = document.getElementById('imgID'); if(x.src.match('3')){ x.src="4.jpg" } else { x.src="3.jpg" } } </script> <img id="imgID" onclick="myFunction()" src="3.jpg"...

Read More

Show and Hide the popup using jQuery stopPropagation

Here is the jQuery popup HTML and jQuery code. It will use to show the popup upon clicking the span tag and close the popup while clicking the close mark or outside of the popup. <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#travelerCount > span").click(function (e) { jQuery("#travelerDesc").show(); e.stopPropagation(); }); jQuery("#travelerDesc").click(function (e) { e.stopPropagation(); }); jQuery(document).click(function (e) { jQuery("#travelerDesc").hide(); }); jQuery('#travelerDesc .close').click(function (e) { jQuery("#travelerDesc").hide(); }); }); </script> <div id="travelerCount"> <span>Click here to see the popup</span> <div id="travelerDesc" style="display:none;"> <a class="close">×</a> Content goes here.... </div>...

Read More

Add CSS Selector based on Browser using jQuery

Just go and add the code in your Your_Name.js file and run. 🙂 // CSS Browser Selector function css_browser_selector(u) { var ua = u.toLowerCase(), is = function (t) { return ua.indexOf(t) > -1 }, g = 'gecko', w = 'webkit', s = 'safari', o = 'opera', m = 'mobile', h = document.documentElement, b = [(!(/opera|webtv/i.test(ua)) && (/Trident.*rv:11\./).test(ua) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) : is('firefox/2') ? g + ' ff2' : is('firefox/3.5') ? g + ' ff3 ff3_5' : is('firefox/3.6') ? g + ' ff3 ff3_6' : is('firefox/3') ? g + ' ff3' : is('gecko/') ? g : is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : is('konqueror') ? 'konqueror' : is('blackberry') ? m + ' blackberry' : is('android') ? m + ' android' : is('chrome') ? w + ' chrome' : is('iron') ? w + ' iron' : is ('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') : is('mozilla/') ? g : '', is ('j2me') ? m + ' j2me' : is('iphone') ? m + ' iphone' : is('ipod') ? m + ' ipod' : is('ipad') ? m + ' ipad' : is('mac') ? 'mac' : is('darwin') ? 'mac' : is('webtv') ? 'webtv' : is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : is ('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js']; c = b.join(' '); h.className += ' ' + c; return c; }; css_browser_selector(navigator.userAgent); $(window).load(function() { if(navigator.userAgent.match(/Trident.*rv:11\./)) { $('body').addClass('ie11'); }...

Read More

Show / Hide Div and Toggle html text using jQuery

1. To Show and Hide the text upon clicking the below anchor link 2. To change the link text to ‘Hide Options’ upon clicking the ‘More Options’ anchor link 3. Add and Remove the class ‘opened’ for anchor link upon clicking the anchor link HTML <a class="moreOpt" id="roundTrip">More Options</a> <div style="display:none;" id="more-roundTrip"> More Options Content Goes here.... </div> jQuery $('.moreOpt').click(function () { $('#more-'+$(this).attr('id')).slideToggle(); $(this).toggleClass('opened'); $(this).html() == "More Options" ? $(this).html('Hide Options') : $(this).html('More Options');...

Read More

Show and Hide Div using input Checkbox

Example 1: $("#inputCheck").click(function(){ if($(this).is(":checked")){ $(".contentDiv").slideDown(); } else { $(".contentDiv").slideUp(); } }); Example 2: $('#inputCheck').change(function() { $('.contentDiv').slideToggle(); }); HTML: <input type="checkbox" id="inputCheck"> <div class="contentDiv">Content Goes...

Read More
'