• javascript

    limit Input text box charecters ,enter only 10 characters at max

    <script>
    var keycount =0;
    jQuery(document).on('keydown', 'input.product-custom-option', function(ev) {
        var c = ev.which;
       // console.log(c);
        if(c==8)
            {
            keycount--;
            }
        else{ 
            keycount++;
           // console.log(keycount);
        }
        if(keycount>10)
         {
    	    return false;
         }
    });
    </script>
    
    <input type="text" class="product-custom-option" />

    OPtion 2

    function ohmyfun()
    {
    var xdata='';
    var lee = document.getElementsByClassName("product-custom-option")[0].id;
    console.log(lee);
     document.getElementsByClassName("product-custom-option")[0].addEventListener("keydown", getleecount);
      
    }
    function getleecount()
    {
          var lee_id = document.getElementsByClassName("product-custom-option")[0].id;
        var xle= document.getElementById(lee_id).value;
        
        console.log(xle.length);
        if(xle.length==9){
        
        xdata = document.getElementById(lee_id).value;
      console.log(xdata);
         document.getElementById(lee_id).value=xdata;
             
        }
        else if(xle.length>9){
            
             console.log(xdata);
             document.getElementById(lee_id).value=xdata;
        }
    }
    </script>
  • javascript

    Get the attribute value in product page programatically

    in Magento_Catalog / template /product/ make a phtml file .

    write the below code

    $_product = $block->getProduct();
    $pi = $_product->getData('giftwrap'); // giftwrap is attribute name 
    if($pi==1){ echo "show image";}

    Magento_Catalog/layout /catalog_product_view.xml

      <block name="catalog.mygifrwrap"  template="Magento_Catalog::product/giftwrap.phtml" class="Magento\Catalog\Block\Product\View"/>

  • html,  javascript,  mysql

    How to play youtube on pop up on click of image

    The sample

    The code

    <style>
        .col-xs-12.partitle {
            text-align: center;
            padding: 38px;
            font-size: 28px;
            text-transform: uppercase;
            font-family: 'Spartan';
        }
        .trailer{margin-top:20px;margin-left:20px;margin-right:20px;padding:20px;}
        .trailer .title{ font-size:14px;font-family: 'Spartan';
            font-weight:bold; 
            margin-top:20px;
        }
        .trailer .titled{ font-size:12px;font-family: 'Spartan';
            font-weight:normal;
        }
        .lifeunderpar .banner{background:#222;position:relative;}
        
        /*******************Video main********************/
        
        .video-play-buttonm {
          position: absolute;
          z-index: 10;
          top:50%;
          left:50%;
          transform: translateX(-50%) translateY(-50%);
          box-sizing: content-box;
          display: block;
          width: 32px;
          height: 44px;
          /* background: #fa183d; */
          border-radius: 50%;
          padding: 18px 20px 18px 28px;
        }
        
        .video-play-buttonm:before {
          content: "";
          position: absolute;
          z-index: 0;
          left: 50%;
          top:50%;
          transform: translateX(-50%) translateY(-50%);
          display: block;
          width: 80px;
          height: 80px;
          background: transparent;
          border-radius: 50%;
          border:4px solid #ffffff;
          /*animation: pulse-border 1500ms ease-out infinite;*/
        }
        
        .video-play-buttonm:after {
          content: "";
            position: absolute;
            z-index: 1;
            left: 50%;
            top:50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 15px;
            height: 15px;
            background: #652dd314;
            border-radius: 0;
            transition: all 200ms;
            border-left: 24px solid #fff;
            border-top:16px solid transparent;
            border-bottom: 16px solid transparent;
        }
        
        }
        
        .video-play-buttonm:hover:after {
          background-color: darken(#fa183d, 10%);
        }
        
        .video-play-buttonm img {
          position: relative;
          z-index: 3;
          max-width: 100%;
          width: auto;
          height: auto;
        }
        
        .video-play-buttonm span {
         /* display: block;*/
         /* position: relative;*/
         /* z-index: 3;*/
         /* width: 0;*/
         /* height: 0;*/
         /* border-left: 32px solid #fff;*/
            /*border-top:22px solid transparent;*/
            /*border-bottom: 22px solid transparent;*/
        }
        
        @keyframes pulse-border {
          0% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            opacity: 1;
          }
          100% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            opacity: 0;
          }
        }
        
        
        
        .video-overlaym {
          position: fixed;
          z-index: -1;
          top:100px;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0,0,0,0.80);
          opacity: 0;
          transition: all ease 500ms;
        }
        
        .video-overlaym.open {
          position: fixed;
          z-index: 1000;
          opacity: 1;
        }
        
        .video-overlaym-close {
          position: absolute;
          z-index: 1000;
          top:15px;
          right: 20px;
          font-size: 36px;
          line-height: 1;
          font-weight: 400;
          color: #fff;
          text-decoration: none;
          cursor: pointer;
          transition: all 200ms;
        }
        
        .video-overlaym-close:hover {
          color: #fa183d;
        }
        
        .video-overlaym iframe {
          position: absolute;
          top:50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          /* width: 90%; */
          /* height: auto; */
          box-shadow: 0 0 15px rgba(0,0,0,0.75);
        }
        /*******************Video end********************/
        .ytimg{
               height: 100%;
            width: 100%;
            max-width: 100%;
            max-height:100%;
            position:relative;
        }
        .row.trailer > div {
            margin-bottom: 25px;
        }
       
    
        
        @media only screen and (max-width: 500px) {
            .trailer{margin-top:20px;margin-left:8px;margin-right:8px;padding:20px;}
            
        }
        </style>
        
        <div class="container-fluid">
            <div class="lifeunderpar" >
                <div class="banner">
                    <img src="https://www.webmentor.in/wp-content/uploads/2019/10/cropped-qtq50-ytdL78.jpeg" />
                   
                    <a id="play-videom" class="video-play-buttonm" href="#">
                        <span></span>
                    </a>
                    <div id="video-overlaym" class="video-overlaym">
                    <a class="video-overlaym-close">&times;</a>
                    </div>
                </div>
            </div>
            
        </div>
        
        <script>
            jQuery('#play-videom').on('click', function(e){
          e.preventDefault();
          jQuery('#video-overlaym').addClass('open');
          jQuery("#video-overlaym").append('<iframe width="100%" height="480" src="https://www.youtube.com/embed/aUw3vDdy8wk" frameborder="0" allowfullscreen></iframe>');
        });
        
        jQuery('.video-overlaym, .video-overlaym-close').on('click', function(e){
          e.preventDefault();
          close_videom();
        });
        
        jQuery(document).keyup(function(e){
          if(e.keyCode === 27) { close_videom(); }
        });
        
        function close_videom() {
          jQuery('.video-overlaym.open').removeClass('open').find('iframe').remove();
        };
        </script>
        
       
  • javascript,  laravel,  mysql,  php

    Laravel-date format variable SQL query for API value

    given date value in string format , getting error in SQL query , so have to change it into date format in Laravel using Carbon function ( for date time )

    laravel controller sample work to get values in json [RestAPI]
    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    use App\Http\Resources\OrdersCollection;
    use Illuminate\Support\Facades\DB;
    use App\Http\Controllers\Controller;
    use app\Orders;
    use Response;
    use Carbon\Carbon;
    
    class OrdersController extends Controller
    {
        //
        public function index(Request $request)
        {
            $fdate = $request->query('fdate');
            $gdate = $request->query('gdate');
    
    
            $users = DB::table('abctable')
                ->select(DB::raw('count(*) as count, city'))
                ->join('n3d_sales_flat_order_address', 
             'abctable.entity_id', '=', 'xyztable.parent_id')
                ->whereBetween('abctable.created_at',[new Carbon($fdate),new Carbon($gdate)])
                ->groupBy('xyztable.city')
                ->get();
               
           return Response::json($users);
        }
    }
    

    Carbon function

    $users = DB::table(‘abctable’)
    ->select(DB::raw(‘count(*) as count, city’))
    ->join(‘n3d_sales_flat_order_address’,
    ‘abctable.entity_id’, ‘=’, ‘xyztable.parent_id’)
    ->whereBetween(‘abctable.created_at’,[new Carbon($fdate),new Carbon($gdate)])
    ->groupBy(‘xyztable.city’)
    ->get();

  • javascript

    How to add rows to table dynamically – Javascript

    <head>

    <!— Static value to dynamic rows added –>
    <script>
    function AddRrow()
    {
    var tbl = document.getElementById(‘Mytab’);
    var row = tbl.insertRow(1);
    var cca = row.insertCell(0);
    var ccb = row.insertCell(1);
    cca.innerHTML=”data for col 1″;
    cba.innerHTML= “dat for column 2”;
    }
    </script>

    <!— Dynamic value to dynamic rows added –>
    <script>
    function showddata(){
    var tbb= document.getElementById(‘tblb’);
    var val = document.getElementById(‘nameid’).value;
    if(val==”)
    { val=”No data”;
    }
    var rr = tbb.insertRow(1);
    var cc = rr.insertCell(0);
    cc.innerHTML= val;
    }
    </script>
    <style type=”text/css”>
    body{color:#000;}
    table {color:#999;}
    </style>
    </head>
    <body>
    <h2>Add table row dynamic with static data </h2>
    <table id=”Mytab” border=”1″>
    <thead>
    <th>Row3 cell1</th>
    <th>Row3 cell2</th>
    </thead></table>
    <button name=”add” id=”add” onclick=”AddRrow()”>Add Row</button>

    <br/><hr><br/>
    <h2>Add table row dynamic with dynamic data </h2>
    <table id=”tblb” border=”1″ >
    <thead><tr><th> Table Values Below</th></tr></thead>

    </table>
    <input type=”text” id=”nameid” placeholder=”enter name”/>
    <button onclick=”showddata()”>add value to table</button>

    </body>

  • javascript

    Pop up in webpage on click event- javascript

    How to make a pop up in webpage on click event .

    <!DOCTYPE html>
    <html>
    <head> <title></title>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
    <style>
    body {background-color:#ddd;}
    #poppy { height: 400px; width:500px; background-color:transparent;border:1px solid #f000ff;display:none; position:relative;
    padding: 10px; cursor:pointer;}
    #poppy img{ position:absolute;height:300px; width: auto;}
    </style>
    <script>
    $(document).ready(function(){
    setTimeout(function(){
    PopUp();
    },1000); // 5000 to load it after 5 seconds from page load
    });
    </script>
    <script>
    function PopUp()
    {
    var x = document.getElementById(‘poppy’);
    var y = x.style.display;
    if (y==’none’) {
    document.getElementById(‘poppy’).style.display=’block’;

    }
    else {
    document.getElementById(‘poppy’).style.display=’none’;
    }}
    </script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(document).click(function(e) {
    document.getElementById(‘kk’).style.color=’green’;
    //alert(event.target.parent().name);
    var x =e.currentTarget.parent();

    alert(x);

    });
    });
    </script>
    </head>
    <body> <span onclick=”PopUp()” class=”btnpop”><h2>click here for pop up </h2></span>
    <div id=”kk”> this is a demo contain for just testiing the text over all . it cud have been anything but thought of just
    explaning you what is here.</div>
    <div >
    <div class=”poppy” id=”poppy”>Hello I am a pop up content . <br>
    <img src=”poppy.png” alt=”poppy”> popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/> </div>
    <hr />

    below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>

    </div>

    </body>

    </html>

  • javascript,  php

    Octal to Binary Number System

    Octal number has base 8    from digit 0 – 7  written as  (324)8

    Binary    Decimal

    1. 000          0
    2. 001          1
    3. 010          2
    4. 011          3
    5. 100          4
    6. 101          5
    7. 110          6
    8. 111          7

    Convert Octal to Binary

    1. (116)   ——-    (  001  001  110  ) 
      SO BINARY number for octal 116 is 1001110  just by putting 3 bit value for each digit in octal.
    2. (574.321)   ——-    ( 101 111 100.011 010 001 ) 
      SO BINARY number for octal 574.321 is101 111 100.011 010 001  just by putting 3 bit value for each digit in octal.

    Convert Octal to Decimal

    1. (116)=  1×8+   1×8+6×80   = 64+8+6  = (78)10  

    Convert Decimal to octal

    1. (70)10    =   8  | 70 |  6
      8  |   8 |  0
      1        there for the octal number of 70 base 10  is 106 base 8