Posts

Showing posts from 2018

Bulk image download on single click jquery

<html> <head>     <title>Emaple</title>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     <script>     var links = [   'https://homemakeover.in/wp-content/uploads/2016/10/Diwali-Lights-14.jpg',   'https://images-na.ssl-images-amazon.com/images/I/81CNLBVnMgL._SY606_.jpg',   'https://images-na.ssl-images-amazon.com/images/I/71s05ZdXihL._SY879_.jpg',   'https://images-eu.ssl-images-amazon.com/images/I/51PoYkIKjPL.jpg' ]; function downloadAll(urls) {   var link = document.createElement('a');   link.setAttribute('download', null);   link.style.display = 'none';   document.body.appendChild(link);   for (var i = 0; i < urls.length; i++) {     link.setAttribute('href', urls[i]);     link.click();   }   document.body.removeChild(link); }     </script...

Share Folder Link

https://drive.google.com/open?id=1TutXihArIJ1TZHuLN1KrdYpZ__z32_ie

Excel generator software for bulk email sending at one time

Download from here:- https://drive.google.com/open?id=1H3iNu8TYBIwmdPMGorSRneXxBGtiy-Xs

gym

https://drive.google.com/open?id=1TILd4DH3dQALc8ehJ6Ha60w7nBm4SjDN

javascript create images dynamically

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { var imagearray = ['https://content.deobazaar.com/product_image/_baner_8494f0nivea-fresh-active-value-pack-of-6-strong-deodorants.jpg','https://www.deobazaar.com/admin/product_image/Nautica-Pack-Of-4-Deodorants.jpg'] var arrayLength = imagearray.length; for (var i = 0; i < arrayLength; i++) { var oImg = document.createElement("img"); oImg.setAttribute('src', imagearray[i]); oImg.setAttribute('alt', 'na'); oImg.setAttribute('height', '100px'); oImg.setAttribute('width', '100px'); document.getElementById("placehere").appendChild(oImg); } }); </script> </head> <body> <div id="placehere"> </div> </body> </html>

Checkbox Design with ( appearance ) help in design the checkbox button design

Image
-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; help in design the checkbox button design .uiswitch:checked {   background-color: #fff;   border:2px solid #2ca941; } .uiswitch{    outline:0;   height: 31px;      transition:all 0.5s ease-out;   -webkit-appearance:none;   width: 51px;   position: relative;   border-radius: 16px;   cursor: pointer;   border:2px solid #dadada;   background:#4CD964; }

HTML EDITOR

kodhus.com/kodnest/

Change on click active clicked link in nav bar (juqery)

$(document).ready(function(){   $('ul li a').click(function(e){     if ( $(this).hasClass('active') ) {         $(this).removeClass('active');     } else {         $('li a.active').removeClass('active');         $(this).addClass('active');         }     e.preventDefault(); }); });

Window scroll Down/Top on click in jquery

Scroll Down $(document).ready(function(){     $('#page_down').click(function(){      $('html, body').animate({ scrollTop: (document).height() }, 1200); return false;              }); --------------------------------------------------------------------------------------------------------------- Scroll Top $('#scrollToTop').bind("click", function () { $('html, body').animate({ scrollTop: 0 1200); return false; }); });         

Form validation inline

Inline Enter Only number  ... <label>   <h4>Enter Only number</h4>   <input type="text" name="areinp" size="30" value="" onChange="areCon()" onkeyup="this.value=this.value.replace(/[^\d]/,'');"> </label> valid only  alphabet  in input box  ... <input type="text" name="fullName" onkeypress="return (event.charCode > 64 &&  event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)"  placeholder="Full Name"> Password (must contain at least 1 uppercase character, 1 lowercase character, and 1 number) <form>         <label for="password">Password (must contain at least 1 uppercase character, 1 lowercase character, and 1 number)</label>         <input type="password" id="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$...

:placeholder-shown

Image
HTML  <input type="text" placeholder="Currently has no value (showing placeholder)." > <label>   Show your sms here </label> CSS input {   font-size: 1.5rem;   margin:10px;   padding:10px;   width: 40%; } label{ border:3px solid red; padding:15px; transition:all 0.5s ease-in; width:0px; opacity:1; overflow:hidden;  } input:placeholder-shown + label{   opacity:0; }

Mohit Web/ Graphic Designer ( resume/work)

View Details( Resume ) :-  https://drive.google.com/open?id=1NGRNhVWQb8_s2e_o1EU0cV5T4htmqtou work- http://mohitverma112.blogspot.com/2015/08/banner-design-for-perfume.html

0 to 100 counter in jquery

Image
HTML <button id="update" type="button">Button</button> <div id="counter">1</div> CSS #counter{      width:200px;   height:200px;   border:8px solid red;   border-radius:50%;   display:flex;   align-items:center;   justify-content:center;   font-size:80px;   font-family:roboto;   font-weight:bold;   color:red;    } ADD JQUERY CDN File & is custom file $(document).ready(function(){    $("#update").click(function() {     var count = 0;     var interval = setInterval(function() {    if( count == 99 )       clearInterval(interval);        count++;      $('#counter').html( count);    },300);   });  });

media Queries for jQuery

if($(window).width() < 767) {    // change functionality for smaller screens } else {    // change functionality for larger screens } Can I Use window.matchMedia if (window.matchMedia('(max-width: 768px)').matches) {     // do functionality on screens smaller than 768px }

All @media Screen size for responsive

Viewport   <meta name="viewport" content="width=device-width,initial-scale=1"> /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 ...

Read More / Read Less with responsive..

HTML < div class = "row_100 pdt10 inp_hide" > < div class = "fnt14" > < strong > Myntra Voucher </ strong > </ div > < ul class = "iphone_x" > < li > Get Flat Rs 50 off on the Myntra app or website on spends of INR 299 or more valid till xx (3 months) </ li > < li > Valid only on a selected catalogue for Payback customers -&nbsp; https://www.myntra.com/partner-offers01 </ li > < li > The code can be used once per Customer. </ li > < li > This offer is not valid at any of the alliance partner retail outlets/stores. </ li > < li > Multiple coupons cannot be clubbed in a single order. </ li > < li > The balance amount, after the discount is availed, will have to be paid by the customer at the time of purchase. </ li > < li > In no case, whatsoever, can the discount amount be refunded, encashed or partly encashed. </ li > < li ...

Fiesta Gift Store

Image

Cortex Power ( Visiting card )

Image
Front Front Back

Shopmore Enterprise Pvt. Ltd. ( Visiting Card )

Image
Front -------------------------------------------------------------------------------------------- Back

Time counter in jquery

Image
TIME COUNTER HTML <div class="raffle_counter_box">  <label class="raffle_counter_label">Raffle ends on <span>30.09.2018 18:29:29 IST</span></label> <div class="raffle_counter"> <div class="tim"> <label class="digit" id="days"></label> <label class="text">DAYS</label> </div> <div class="tim"> <label class="digit" id="hours"></label> <label class="text">HOURS</label> </div> <div class="tim"> <label class="digit" id="minutes"></label> <label class="text">MINS</label> </div> <div class="tim"> <label class="digit" id="seconds"></label> <label class="text">SEC</label> </div> ...