Fixed Header – Add and Remove the class based on scrolling using jquery
Dec09

Fixed Header – Add and Remove the class based on scrolling using jquery

To Add and Remove the class based on scrolling using jQuery for the Header section use the following code: CSS: body { margin:0; padding:0; background:#CCCCCC; } .wrapper { height:2000px; } .head { position:fixed; height:100px; background:#6CC; width:100%; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; line-height:100px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .scrolled { background:#FFCC00; } JS: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 10) { $(".head").addClass("scrolled"); } else { $(".head").removeClass("scrolled"); } }); </script> HTML: <div class="wrapper"> <div class="head"> Fixed Header</div> </div> OUTPUT: Click on above image to see...

Read More
Youtube iframe transparency fix.
Nov14

Youtube iframe transparency fix.

Default Youtube iframe like this <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/a1a2a3a4" frameborder="0" wmode="Opaque"> To fix youtube iframe issue we need to add wmode <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/a1a2a3a4?wmode=transparent" frameborder="0" wmode="Opaque"> Or, use Jquery javascript to add the following wmode fix: $(document).ready(function(){ $('iframe').each(function(){ var url = $(this).attr("src"); var char = "?"; if(url.indexOf("?") != -1){ var char = "&"; } $(this).attr("src",url+char+"wmode=transparent"); });...

Read More
Replacing the Menu in Mobile Browsers With JavaScript
Nov12

Replacing the Menu in Mobile Browsers With JavaScript

HTML Navitation: <nav class="main-navigation"> <ul> <li><a href="#home">Home</a></li> <li> <a href="#about">About Us</a> <ul class="children"> <li><a href="#leadership">Leadership</a></li> <li><a href="#involvement">Involvement</a></li> <li><a href="#vision">Our Vision</a></li> </ul> </li> <li><a href="#clients">Our Clients</a></li> <li> <a href="#support">Support</a> <ul class="children"> <li><a href="#blog">Blog</a></li> <li><a href="#downloads">Downloads</a></li> <li><a href="#faq">FAQ</a></li> </ul> </li> <li><a href="#contact">Contact Us</a></li> </ul> </nav> JavaScript: $(function() { /* Get the window's width, and check whether it is narrower than 480 pixels */ var windowWidth = $(window).width(); if (windowWidth <= 480) { /* Clone our navigation */ var mainNavigation = $('nav.main-navigation').clone(); /* Replace unordered list with a "select" element to be populated with options, and create a variable to select our new empty option menu */ $('nav.main-navigation').html('<select class="menu"></select>'); var selectMenu = $('select.menu'); /* Navigate our nav clone for information needed to populate options */ $(mainNavigation).children('ul').children('li').each(function() { /* Get top-level link and text */ var href = $(this).children('a').attr('href'); var text = $(this).children('a').text(); /* Append this option to our "select" */ $(selectMenu).append('<option value="'+href+'">'+text+'</option>'); /* Check for "children" and navigate for more options if they exist */ if ($(this).children('ul').length > 0) { $(this).children('ul').children('li').each(function() { /* Get child-level link and text */ var href2 = $(this).children('a').attr('href'); var text2 = $(this).children('a').text(); /* Append this option to our "select" */ $(selectMenu).append('<option value="'+href2+'">--- '+text2+'</option>'); }); } }); } /* When our select menu is changed, change the window location to match the value of the selected option. */ $(selectMenu).change(function() { location = this.options[this.selectedIndex].value; }); }); To summarize, first we’re checking whether the window is less than or equal to 480 pixels. To ensure an accurate reading on mobile devices, you can use a meta tag to scale the viewport accordingly: <meta name="viewport" content="width=device-width"> We populate the first variable, windowWidth, with the value of the window’s width as defined by the given device. We can use this value to then check whether the width is narrower than a particular value. We’ve chosen 480 pixels here because, while we might want to use media queries to adjust the menu below 640 pixels, at a certain point the viewport would be just too small to justify the menu taking up all that space. We then use jQuery to create a clone of our menu that we can later crawl to create our options. After we’ve done that, it’s safe to replace the unordered list with the select element that we’ll be using and then select it with jQuery. In the largest part of the code, we’re crawling through the clone of our navigation. The selector used, $(mainNavigation).children(‘ul’).children(‘li’), ensures that we go through only the uppermost list elements first. This is key to creating the nested appearance of the select menu. With it, we select the “direct” child-level unordered list elements and...

Read More
Create Equal Height Columns using jQuery
Sep11

Create Equal Height Columns using jQuery

Create the Div columns are equal height using following code Place below code in between the head tag: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".container > div")); }); </script> <style type="text/css"> .container { Width: 900px; Margin-left: auto; Margin-right: auto; } .leftsidebar { Float: left; Width: 33%; background:red; } .content { Float: left; Width: 33%; background:blue; } .rightsidebar { Float: left; Width: 33%; background:green; } </style> Place below code in between the bodytag: <div class="container"> <div class="leftsidebar"> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> </div> <div class="content"> … Lots Of Content … <br /> … Lots Of Content … <br /> </div> <div class="rightsidebar"> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> </div>...

Read More

Capture the height of a DIV using jQuery

1. Capture the height of #main Div 2. Display the height value in sapn#heigValue 3. Also add the style attribute with height value in #main Div Place following code in the middle of head tag <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'> </script> Place following code in the middle of body tag: <div id="main" class='test'> #main Div height = <span id="heigValue"></span> </div> <script type="text/javascript"> $(function() { var height = $('.test').height(); if (height > 0) { //alert("DIV Height is : " + height); $("#heigValue").append(height); $('#main').attr('style', 'height:' +height +'px'); } });...

Read More

Add the “ID” attribute to anchor tag

Use the following code to add the “ID” attribute to <a> tag, if ‘href’ having content only orelse remove ‘href’ attribute from anchor tag. <script type="application/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { if ($('#main a').attr('href')=='') { $('#main a').removeAttr('href'); } else { $('#main a').attr('id', 'myIdName'); } }); </script> <div id="main"> <a href="http://google.com">Google</a>...

Read More
'