Posts

show more using javascript (jquery)

 <script type="text/javascript"> $('ul.sub-categories').each(function(){ var LiN = $(this).find('li').length; if( LiN > 4){ $('li', this).eq(3).nextAll().hide().addClass('toggleable'); $(this).append('<li class="morelink sclr">Showmore <i class="fa fa-angle-down"></i></li>'); } }); $('ul.sub-categories').on('click','.morelink', function(){ if( $(this).hasClass('less') ){ $(this).html("Showmore <i class='fa fa-angle-down'></i>").removeClass('less'); }else{ $(this).html("Makeless <i class='fa fa-angle-up'></i>").addClass('less'); } $(this).siblings('li.toggleable').slideToggle(100); }); </script>

zoom image on mouse over

$('.classname').mouseover(function(){ var image = $(this).find('img').attr('src'); zoomImage(this,image,"frame"); }); function zoomImage(el, image, type, text) { var zoomDiv = document.createElement("div"); $('.fmb-zoom-div').remove(); //remove it if already there. $("body").append(zoomDiv); $(zoomDiv).addClass("fmb-zoom-div"); var position = $(el).offset(); var top = position.top - 380 + 2; var left = position.left; var htmlText = ""; var leftOffset = 0; if (window.scrollY > top) { top = top + 180 + $(el).height() - 2; left = left + $(el).width() +10; leftOffset = 310 } if ($(window.document).width() < (left + 380 + 2)) { left = left - $(el).width() - 10 - leftOffset; } htmlText = "<span style='display:block;width:280px;height:280px;background-image: url(\"" + image + "\")'  ></span>";

box shadow

 box-shadow: 1px 1px 0px #999,                 2px 2px 0px #999,                 3px 3px 0px #999,                 4px 4px 0px #999,                 5px 5px 0px #999,                 6px 6px 0px #999,                 7px 7px 0px #999,                 8px 8px 0px #999,                 9px 9px 0px #999,                 10px 10px 0px #999,                 11px 11px 0px #999,                 12px 12px 0px #999,                 13px 13px 0px #999,                 14px 14px 0px #999,                 15px 15px 0px #999 ;

change localhost to demo.com

open  c:/window/system32/driver/etc/hosts file change 127.0.0.1       demo.com Open C:/xampp/apache/conf/extra/httpd-vhost.conf Add in last <VirtualHost *>         ServerName demo.com         ServerAlias demo.com         DocumentRoot "C:/xampp/htdocs/public"     </VirtualHost>

Pin payment laravel

use Omnipay\Omnipay; use Omnipay\Common\GatewayFactory; $load = new GatewayFactory(); $gateway= $load->create('Pin'); $gateway->initialize(array(   'secretKey' => 'your key', 'testMode'  => true, )); $card =  array('number' => '4200000000000000', 'expiryMonth' => '6', 'expiryYear' => '2019', 'cvv' => '123','name'=>'name ','address1'=>'address','city'=>'city','country'=>'india'); $response=$gateway->purchase([  'email'       => 'customer@email.com',  'description' => 'Widgets',  'amount'      => '20.00',  'currency'    => 'USD',  'card'       => $card,  'ip_address'  =>  $_SERVER['REMOTE_ADDR'] ])->send(); if ($response->

bootstrep checkbox

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container">     <h1>CheckboxRadio (no JS)</h1>     <hr/>         <p>This snippet allows you create nice animated checkboxes and radios without JavaScript. <br/>Just put <code><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></code> right after your checkbox or radio.</p>     <p>Other markup was copied from <a href="http://getbootstrap.com/css/#forms" target="_blank">Bootstrap example</a>.</p>     <h2>Checkboxes</h2>     <hr/>     <h3>Default example</h3>         <div class="col-sm-12">         <div class="checkbox">           <label>             <input type="checkbox" value="&qu