Posts

Scroll After Fixed Navigation

jQuery : $(document).ready(function() {   var toggleAffix = function(affixElement, scrollElement, wrapper) {     var height = affixElement.outerHeight(),         top = wrapper.offset().top;       if (scrollElement.scrollTop() >= top){         wrapper.height(height);         affixElement.addClass("affix");     }     else {         affixElement.removeClass("affix");         wrapper.height('auto');     }       };   $('[data-toggle="affix"]').each(function() {     var ele = $(this),         wrapper = $('<div></div>');       ele.before(wrapper);     $(window).on('scroll resize', function() {         toggleAffix(ele, $(this), wrapper);     });       // init     toggleAffix(ele, $(window), wrapper);   }); }); HTML <nav class="navbar navbar-expand-sm navbar-light" data-toggle="affix"> CSS .affix {   position: fixed;   top: 0;   right: 0;   left: 0;

Auto Scroll with next page Section

jQuery : function scrollToID(id, speed) {     try {         var offSet = 104;         var obj = $(id).offset();         var targetOffset = ($(id).offset().top - offSet);         $('html,body').animate({ scrollTop: targetOffset }, speed);         sessionStorage.removeItem('pg_id')     } catch (err) {     } } $(document).ready(function () { if (sessionStorage.getItem('pg_id') !== '#undefined' && sessionStorage.getItem('pg_id') != null) {         // get sessionStorage for page id         var get_id = sessionStorage.getItem('pg_id');         scrollToID(get_id, 300);     }     // click event to scroll to div     $('.sub-navigation li a').on('click', function () {         sessionStorage.removeItem('pg_id')         var id = $(this).data('id');         if (id !== undefined) {             sessionStorage.setItem('pg_id', '#' + id);             scrollToID(id, 300);

Jquery with Breakpoint on Bootstrap

get bootstrap breakpoint  with jquery Jquery "use strict"; function isBreakpoint(alias) {     return $('.device-' + alias).is(':visible'); } if (isBreakpoint('xs')) {     $('.lalji').css('border-top', 'none');     $('.lalji').css('border-left', '1px dotted black'); } if (isBreakpoint('sm') || isBreakpoint('md') || isBreakpoint('lg')) {     $('.lalji').css('border-top', 'none');     $('.lalji').css('border-left', '1px solid black'); } var waitForFinalEvent = function () {     var b = {};     return function (c, d, a) {         a || (a = "I am a banana!");         b[a] && clearTimeout(b[a]);         b[a] = setTimeout(c, d);     }; }(); var fullDateString = new Date(); $(window).resize(function () {     waitForFinalEvent(function () {         if (isBreakpoint('xs')) {      

Bootstrap CSS Customize with SCSS CSS

Using Bootstrap with Bower First let's make a  package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ( {} ). Now let's install gulp , gulp-bower , and gulp-sass : $ npm install --save-dev gulp gulp-bower gulp-sass Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually. Create a bower.json file using bower init or by manually creating one: Now let's install bootstrap-sass with Bower. $ bower install --save bootstrap-sass Create One file Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss : @ import "bootstrap" ; @ import "bootstrap/theme" ; Now let's use gulp to compile our app.scss , which includes Bootstrap SASS: Create On JS File with gulpfile.js var gulp = require

Script to find all fonts used on a page

function styleInPage ( css , verbose ){ if ( typeof getComputedStyle == "undefined" ) getComputedStyle = function ( elem ){ return elem . currentStyle ; } var who , hoo , values = [], val , nodes = document . body . getElementsByTagName ( '*' ), L = nodes . length ; for ( var i = 0 ; i < L ; i ++){ who = nodes [ i ]; if ( who . style ){ hoo = '#' +( who . id || who . nodeName + '(' + i + ')' ); val = who . style . fontFamily || getComputedStyle ( who , '' )[ css ]; if ( val ){ if ( verbose ) values . push ([ hoo , val ]); else if ( values . indexOf ( val )== - 1 ) values . push ( val ); } val_before = getComputedStyle ( who , ':before' )[ css ]; if ( val_before ){ if ( verbose ) values . push ([ hoo , va

Best way to prevent page scrolling on drag (mobile)

 window.onmousedown= function (e) {            if (isTouchDevice()) {                 $(document).on('touchstart', function (e) {                     e.preventDefault();                 });             } }  window.onmouseup = function (e) {     $(document).off('touchstart'); }

J Query listnav With Custom Scroll Bar

Add this Line // click handler for letters: shows/hides relevant LI's                $('a', $letters).bind(clickEventType, function (e) {                     $list = $('your selector');   //add this line                     $list = $list.find('.mCSB_container'); // add this line                     e.preventDefault();                     var $this = $(this),