Posts

Showing posts with the label jQuery

Calculate percentage of a specific element has been scrolled into visible on the screen

Image
HTML <div class='info-container flex-layout'>   <span>Scroll down</span>   <span class='percent'>0%</span> </div> <div class='block'></div> <div class='element flex-layout'>   <span>Start</span>   <span>End</span> </div> <div class='block'></div> CSS body {   margin: 0;   padding: 0;   color: white; } .flex-layout {   display: flex;   flex-direction: column;   justify-content: space-between; } .info-container {   position: fixed;   z-index: 1;   font-size: 2em;   height: 100%;   width: 100%;   align-items: flex-end;   color: white; } .block {   height: 1000px;   background: #333; } .element {   align-items: center;   background: #000;   height: 450px; } JavaScript $(document).ready(function() {   $(window).scroll(function() {     var windowBottom = $(this).scro...
Post a Comment
Read more

JavaScript calculate percentage when user scroll web page

Image
<!doctype html> <html> <head>     <title>Color Changing</title>     <style type="text/css">         #percentage         {             position: fixed;         }     </style> </head> <body>     <div id="percentage"></div>     <div style="height: 4000px;"></div> </body> <script type="text/javascript">     window.onscroll = function(){         var heightOfWindow = window.innerHeight;         var contentScrolled = window.pageYOffset;         var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;         if(bodyHeight - contentScrolled <= heightOfWindow)        {            w...
Post a Comment
Read more

Prevent hover on touch screen devices

There are 2 simple ways to check for touch support with JavaScript: You can use Modernizr.js library. Latest versions of Modernizr (2.6.2 for sure) automatically checks for touch support and attaches a .no-touch class to HTML tag, if device doesn’t support touch. If you do not want to use Modernizr, you can add small piece of JavaScript below, which will do exactly the same thing. //touch events support and if not supported, attach .no-touch class to the HTML tag. if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch"; }
Post a Comment
Read more

Creating a sticky header bar using jQuery

Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. This tutorial show you sample code jQuery create Sticky Header. 1.HTML <div class="wrapper">     <div class="header_placeholder"></div>     <header id="header"></header> </div> 2. CSS <style> #header {     min-height: 85px;     background-color: #fff;     border-bottom: 8px solid #005bac;     position: relative; } #header .is-sticky {     position: fixed;     top: 0;     left: 0;     width: 100%;     z-index: 100; } </style> (function(){ var stickyHeader = { onReady: function () { this.doScroll(); }, doScroll:function() { $(window).scroll(function () { stickyHeader.doSticky(); }); }...
Post a Comment
Read more

Display Twitter Bootstrap Tooltip on Page Load (Initalize)

$('.tooltip-block').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() { $(this).tooltip('enable'); });
Post a Comment
Read more

jQuery: How to close a dropdown on clicking anywhere on the body?

jQuery: How to close a dropdown on clicking anywhere on the body? The dropdown is displayed when user click on the 'more' button, to hide the dropdown again user should click on the 'more' button again. But if user want to close the dropdown by clicking anywhere on the body so we need add code on click document. HTML ----- <a class="select-link" href="https://www.blogger.com/blogger.g?blogID=3817399277949715318#"><a href="#" class="select-link">Select List</a> <ul class="dropdown-menu-list"> <li><a href="#">My item name 1</a></li> <li><a href="#">My item name 2</a></li> <li><a href="#">My item name 3</a></li> <li><a href="#">My item name 4</a></li> </ul> CSS --- .dropdown-menu-list {display:none;} jQuery --- $(".select-link")...
Post a Comment
Read more

Bootstrap 3: Equal Height Columns with jQuery

When you want height of each have the same height using coloumn of Bootstrap my recommend you should Javascript calculate height of each row if you using css maybe not support all browser. 1. Html Code <div class="row eq-heights">       <div class="eq-col-sm-4 eq-col-md-4 col-md-4">       <div class="content clearfix">column 1 first in source </div>        </div>     <div class="eq-col-sm-4 eq-col-md-4 col-md-4">         <div class="content clearfix">col 2 second in source </div>        </div>     <div class="eq-col-sm-4 eq-col-md-4 col-md-4">         <div class="content clearfix"> Third in source. something fdaf fafdafd  dafdafdafdaf fdafdf ffdfdfd something fdaf fafdafd  dafdafdafdaf fdafdf ffdfdfd something fdaf...
Post a Comment
Read more

jQuery to hide a DIV when the user clicks outside of container

- Html code <a href="#" class="select-link">Select List</a> <ul class="dropdown-menu-list">     <li><a href="#">My item name 1</a></li>     <li><a href="#">My item name 2</a></li>     <li><a href="#">My item name 3</a></li>     <li><a href="#">My item name 4</a></li> </ul> - Css Code .dropdown-menu-list {display:none;} - jQuery Code $(".select-link").on('click',function(e) {     e.preventDefault();     $(".dropdown-menu-list").show(); }) $(document).mouseup(function (e) {     var container = $("YOUR CONTAINER SELECTOR");     if (!container.is(e.target) // if the target of the click isn't the container...         && container.has(e.target).length === 0) // ... nor a descendant of the contain...
Post a Comment
Read more

jQuery split long ul list to multiple UL

1. HTML code <ul id="bigList"> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem</li> <li>Elem...
Post a Comment
Read more

Exclude weekends on jQuery datepicker

$ ( 'yourSelector' ). datepicker ({ minDate : 0 , // your min date maxDate : '+1w' , // one week will always be 5 business day - not sure if you are including current day beforeShowDay : $ . datepicker . noWeekends // disable weekends });
Post a Comment
Read more

Disable all Sundays in jQuery UI Calendar (datepicker)

$ ( "#datepicker" ). datepicker ({ beforeShowDay : function ( date ) { var day = date . getDay (); return [( day != 0 ), '' ]; } });
Post a Comment
Read more

Javascript random number between two numbers

function getRandomInt(min, max) {   return Math.floor(Math.random() * (max - min)) + min; } console.log(getRandomInt(1,100));
Post a Comment
Read more

Javascript display numbers with commas

function commaSeparated(val){     while (/(\d+)(\d{3})/.test(val.toString())){       val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');     }     return val; } // Call Function console.log(commaSeparated(1)); // 1 console.log(commaSeparated(10)); // 10 console.log(commaSeparated(100)); // 100 console.log(commaSeparated(1000)); // 1,000 console.log(commaSeparated(10000)); //10,000
Post a Comment
Read more

Fix html5 placeholder attribute for ie7 & ie8

Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user. if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) < 9) { // ie7&ie8 jQuery('input[placeholder], textarea[placeholder]').each(function () { var input = jQuery(this); jQuery(input).val(input.attr('placeholder')); jQuery(input).focus(function () { if (input.val() == input.attr('placeholder')) { input.val(''); } }); jQuery(input).blur(function () { if (input.val() == '' || input.val() == input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } Working Demo
Post a Comment
Read more

Force Alpha And Numeric Only jQuery

You could try this extension: jQuery.fn.ForceAlphaNumericOnly = function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, arrows,letters, numbers and keypad numbers ONLY return ( key == 8 || key == 9 || key == 46 || key == 32 || (key >= 37 && key <= 40) || (key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 96 && key <= 105)); }) }) }; Useage: <input type="text" class="span10 requiredfield" value="" id="contact-phone" name="contact-phone"> Working Demo
Post a Comment
Read more

How to Collapse and Expand text using jQuery?

1. Include jQuery Ease <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> 2.HTML Code <div id="footer"> <h6>Important Information</h6> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text  ever since the 1500s, when an unknown printer took a galley of type  and scrambled it to make a type specimen book. It has survived not  only five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularised in the 1960s  with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.</p> </div...
Post a Comment
Read more

How to allow only numeric inputbox using jQuery?

1. HTML Code <input type="text" value="0" id="phone" name="phone" autocomplete="off"> 2. jQuery Code $(document).ready(function() { $("#phone").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); }); Working Demo
Post a Comment
Read more

How to get title from IFrame document

HTML code :   < div id = "main-content" > < iframe name = "cstage" src = "home.html" width = "100%" height = "100%" id = "main-content-iframe" frameborder = "0" > If you 're seeing this message, it means IFrames are not supported; Please enable IFrames or upgrade to a compatible browser that supports IFrames.</iframe> </div> jQuery code:   alert($(' #main-content-iframe').contents().find("title").text());     Note: Make sure home.html come from the same domain as your main page.
Post a Comment
Read more

Preventing form submission when Enter is pressed

$('input').keydown(function(event){             if(event.keyCode == 13) {                 event.preventDefault();                 return false;             } });
Post a Comment
Read more

How to detect a click outside an element?

Attach a click event to the document body which closes the window. Attach a separate click event to the window which stops propagation to the document body. $('html').click(function() { //Hide the menus if visible }); $('#menuele').click(function(event){     event.stopPropagation(); });
Post a Comment
Read more