Posts

Showing posts from July, 2017

Tooltip css

css .tooltip[data-tooltip] {   position: relative;   z-index: 2;   cursor: pointer; } .tooltip[data-tooltip]:before, .tooltip[data-tooltip]:after {   visibility: hidden;   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);   opacity: 0;   pointer-events: none; } .tooltip[data-tooltip]:before {   position: absolute;   bottom: 100%;   left: 50%;   margin-bottom: 5px;   margin-left: -80px;   padding: 7px;   width: 160px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;   background-color: #000;   background-color: hsla(0, 0%, 20%, 0.9);   color: #fff;   content: attr(data-tooltip);   text-align: center;   font-size: 14px;   line-height: 1.2; } .tooltip[data-tooltip]:after {   positi...

Look at it as a milestone

Don’t look at the launch as the goal .          Look at it as a milestone

search select value from text

$('#search').focus(function(){   $('ul.search-menu').fadeIn();   });   $('.search-menu h5').click(function(){   $('#search').val($(this).text());   $('.search-menu').fadeOut();   });   $(document).mousedown(function (e){   var container = $(".search-menu, .search-megamenu");   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 container   {   container.hide();   }   });

jQuery accordion

jQuery('.footer-columns ul.links').hide();   jQuery('.footer-columns h4').click(function(){   jQuery('.footer-columns ul.links').slideUp();   jQuery('.footer-columns h4').removeClass('arowToggle');   jQuery(this).addClass('arowToggle');   jQuery(this).siblings().slideDown(); });

Scroll top add/remove Class using jQuery

$(function() {   var header = $(".clearHeader");   $(window).scroll(function() {   var scroll = $(window).scrollTop();   if (scroll >= 100) {   header.removeClass('clearHeader').addClass("darkHeader");   } else {   header.removeClass("darkHeader").addClass('clearHeader');   }   }); });

CSS scrollbar

 .className::-webkit-scrollbar {   width:9px; }  .className::-webkit-scrollbar-track {   -webkit-border-radius:5px;   border-radius:5px;   background:rgba(0,0,0,0.1); }  .className::-webkit-scrollbar-thumb {   -webkit-border-radius:5px;   border-radius:5px;   background:rgba(0,0,0,0.2); }  .className::-webkit-scrollbar-thumb:hover {   background:rgba(0,0,0,0.4); }  .className::-webkit-scrollbar-thumb:window-inactive {   background:rgba(0,0,0,0.05); }

mouse hover issue fixes on IOS devices

  var windowWidth = jQuery(window).width();   var device = navigator.userAgent.toLowerCase();   var ios = device.match(/(iphone|ipod|ipad)/);   if (ios && windowWidth > 992) {   jQuery("nav li > a").click(function(event){   jQuery(this).removeClass('.over');   jQuery(this).addClass('over')   event.preventDefault();   });   jQuery("nav li > a").dblclick(function() {   window.location = this.href;   return false;   });   }

next prev Jquery

$('#next').click(function() {   $('.current').removeClass('current').hide()   .next().show().addClass('current');   if ($('.current').hasClass('last')) {   $('#next').attr('disabled', true);   }   $('#prev').attr('disabled', null); }); $('#prev').click(function() {   $('.current').removeClass('current').hide()   .prev().show().addClass('current');   if ($('.current').hasClass('first')) {   $('#prev').attr('disabled', true);   }   $('#next').attr('disabled', null); });   <button id="prev" disabled="disabled">Prev</button>   <button id="next">Next</button>   <hr /> <div id="main">   <div id="div1" class="first current">Div 1</div>   <div id="div2">Div...

IOS device user Agent and safari browser agent

/*IOS device user Agent */ var device = navigator.userAgent.toLowerCase(); var ios = device.match(/(iphone|ipod|ipad)/); if (ios){ console.log('Its ios device'); } /*IOS device user Agent , it's work only safari browser*/ if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { setTimeout(function(){ console.log('safari loaded'); jQuery('.fotorama__stage__shaft').css("transform",""); }, 4600); } });

difference-between-angular-4-and-angular-2

Image

difference-between-angular-4-and-angular-2

Image

angular 2. Learning notes

angular interpolation and  property data binding.       {{title}}  this is the Interpolation binding <img [src]=" imgLink ">  property binding public title = 'TEXT WILL GOES HERE'; public imgLink ="http://imageurl.jsp"; Class and style binding <div [class.myclass]="applayClass">text colr will change</div> .myclass{color:red;} public applayClass = true; <div [class.colorRed]="applyClass">The class will applay here</div> <div [style.color]="applyColor? 'blue' : 'Orange'">this text will chnage the line line colors</div>   public applyClass = true;   public applyColor = true;      2.   event binding and references <button (click)='clickItem()'>click</button> <button (click)='clickItem1(demoInput.value)'>assign bind property</button> <input type="text" name=...

Angular-cli latest (command line interface).

angular component ng generate component my-home-component ng g c home-component angular directive ng generate directive my-new-directive ng g d  my-new-directive angular pipe ng generate pipe my-new-pipe ng g p  my-new- pipe angular services ng generate service my-new-service ng g s  my-new- service angular class ng generate class my-new-class  ng g p    my-new- pipe angular guard ng generate guard    my-new- guard   angular interface ng generate interface my-new-interface ng g i  my-new-interface angular enum ng generate enum my-new-enum   angular module  ng generate module my-new-module https://www.youtube.com/watch?v=nxV3weqMzYo ng build -e=dev ng build -e=prod ng build --dev ng build --prod ng build --prod ng serve -o -p 3000 -o :-  open -p :- port change https://www.youtube.com/watch?v=n...

Magento 2 usefull commands

bin/magento setup:static-content:deploy bin/magento sampledata:deploy bin/magento sampledata:remove bin/magento sampledata:reset ++++++++++++++++++++++======================+++++++++++++++ Note:- have to go this root C:\xampp\htdocs\projecname C:/xampp/php/php.exe bin/magento setup:upgrade C:/xampp/php/php.exe bin/magento setup:static-content:deploy C:/xampp/php/php.exe bin/magento cache:clean ++++++++++++++++++++++======================+++++++++++++++

Angular upgrade to latest version

Angular 4 upgrade for Linux/Mac :- npm install @angular/ {common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations} @latest typescript@latest --save Angular 4 upgrade for    Windows :- npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Less2Css default settings

--/* Less2Css default settings * ** IMPORTANT ** * DO NOT modify this file, Copy the content to user settings via "Preferences" -> "Package Settings" -> "Less2Css" -> "Settings - User". / {   "autoCompile": true,   "createCssSourceMaps": false,   "ignorePrefixedFiles": false,   "lessBaseDir": "./",   "lesscCommand": false,   "main_file": false,   "minify": true,   "minName": false,   "outputDir": "./",   "outputFile": "", //[example.css] if left blank uses same name of .less file   "showErrorWithWindow": true,   "autoprefix": false,   "disableVerbose":false,   "silent":false } (or) { "autoCompile" : true , "lessBaseDir" : "./" , "main_file" : "bootstrap.l...

Jquery click out side menu hide / Card validation / Responsive jQuery window width

  click out side menu hide /*-------------click out side menu hide-------------*/   $('.menu').click(function(){   $('.insideDiv').toggle();   });   $(document).mousedown(function (e){   var container = $(".insideDiv");   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 container   {   container.hide();   }   }); Select > option changes into Ul li using jquery jQuery('#mobile-menu').parent().append("<ul name='sideNavbar' class='sideNavbar'></ul>"); jQuery('#mobile-menu option').each(function(){ jQuery('.sideNavbar').append('<li value="'+ jQuery(this).val()+'"><a href="'+ jQuery(this).val()+'">'+jQuery(this).text()+'</a></li>'); }); jQuery("#mobile-m...