javascript

Jquery code : to match element’s value from its id and show text based on that to other element

Webmentor / December 18, 2021 / 0 Comments




<script>
jQuery(document).ready(function(){
var xle;
 xle= jQuery("#coupon_code").val();
if(xle>"FREENEXT")
{
jQuery("#msg").html('Express Delivery');
jQuery("#msg").css('color','#000');
}

});

</script>

javascript

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

Webmentor / December 17, 2021 / 0 Comments

<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

Webmentor / November 17, 2021 / 0 Comments

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

Webmentor / October 7, 2021 / 0 Comments

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

Webmentor / November 29, 2019 / 0 Comments

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

Webmentor / October 23, 2019 / 0 Comments

<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>

read more
javascript

Pop up in webpage on click event- javascript

Webmentor / October 21, 2019 / 0 Comments

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>

read more
javascript, php

Octal to Binary Number System

Webmentor / October 24, 2018 / 0 Comments
Octal number has base 8 from digit 0 – 7 written as (324)₈

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×8⁰ = 64+8+6 = (78)₁₀
Convert Decimal to octal
1. (70)₁₀ = 8 | 70 | 6
  8 | 8 | 0
  1 there for the octal number of 70 base 10 is 106 base 8
read more

javascript

OPtion 2

The sample

The code

Carbon function

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

Convert Octal to Binary

Convert Octal to Decimal

Convert Decimal to octal