if 50 qty = 100 rs so 200 qty = ? Math calculation for Javascript code

Ex 1. if 50 qty = 100 rs so 200 qty = ?

200/50 * 100 = 400

Ex 2. if 36 qty = 34.02 so 144 qty = ?

144/36 * 34.02 = 136.08

How to add css and html in iFrame using JavaScript

 var container = document.querySelector('iframe#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    

    if (chatButton?.children.length){

        var chatbuttonStyle = document.createElement('div');

        chatbuttonStyle.style.textAlign = "center";

    chatbuttonStyle.style.fontWeight = "500";

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

        window.clearInterval(gorgiasChatbutton);

    }

Example 2 

var gorgiasChatbutton = window.setInterval(function() {

    var container = document.querySelector('#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-uscp54');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-clht14');

    

    if (chatButton?.children.length){

        var buttonStyle = document.createElement('style');

    buttonStyle.textContent = '.chattext{color: #0e2fb5;text-align: center;font-weight: 500;position: absolute;bottom: 6px;left: 2px;font-size: 12px;background: #FFF;border-radius: 100%;}'; // the custom CSS for the chat button

    

    chatButtonHead.appendChild(buttonStyle);

        

        var chatbuttonStyle = document.createElement('div');

    chatbuttonStyle.classList.add("chattext")

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

    window.clearInterval(gorgiasChatbutton);

    }

}, 100);

Sorting Json value using Javascript / jQuery

Sort by updated date

<script>

var data = "[

  {

    "_id": "5efd566ab3e22f002484bbb0",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "0",

    "createdAt": "2020-07-02T03:37:14.808Z",

    "updatedAt": "2020-07-02T03:37:14.808Z"

  },

  {

    "_id": "5f16d3933fdf4a0024b7a2f8",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "5",

    "createdAt": "2020-07-21T11:37:55.310Z",

    "updatedAt": "2020-07-21T11:37:55.310Z"

  },

  {

    "_id": "5f3bc286436d850024a2b574",

    "first_name": "Jaydip",

    "last_name": "Kansagra",

    "rate": "3",

    "createdAt": "2020-08-18T11:59:02.825Z",

    "updatedAt": "2020-08-18T11:59:02.825Z"

  }

]";

theme.blend_Obj = data;

theme.blend_Obj.sort((a, b) => (a.updatedAt > b.updatedAt) ? 1 : -1)

</script>

==================================

Sort by Rate (integer value)

<script>

topRates = [...theme.blend_Obj]

topRates.sort((a, b) => (parseInt(a.rate) < parseInt(b.rate)) ? 1 : -1);

</script>

Simple zoom effect with mouse hover with HTML, CSS and JS

Preview

HTML

<div class="gallery-placeholder">
    <div class="fotorama__stage__frame fotorama__active">
        <img class="fotorama__img" src="<?php echo 'https://kansagra/jaydip/jaydip.jpg'; ?>" >
    </div>
</div>
<div class="gallery-popup fixed-full-popup-model">
    <div class="gallery-zoom-img">
        <div class="gallery-main-img" style=""></div>
    </div>
</div>

CSS

<style>
.gallery-popup {
    cursor: url(../images/zoom-out.svg),pointer;
}
body .gallery-placeholder .fotorama__stage__frame.fotorama__active .fotorama__img {
    cursor: url(../images/zoom-in.svg),pointer;
}
.gallery-popup .gallery-zoom-img .gallery-main-img {
    width: 100%;
    height: 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.fixed-full-popup-model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

JS

<script type="text/javascript">
$(document).ready(function(){
$('body .gallery-placeholder').on('click', '.fotorama__stage__frame.fotorama__active .fotorama__img',function(){
var $this = $(this);
var img = $this.attr('src');
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "url(" + img + ")")
$(".gallery-popup").fadeIn();
$("body").css("overflow", "hidden");
});
$(".gallery-popup").on("mousemove",".gallery-main-img",function(e){
var pixelToMove=100;
var height=$(this).innerHeight();
var newValueY=(e.clientY / height)*pixelToMove;
$(this).css('background-position',0+' '+newValueY+'%');
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
    $(".gallery-popup").fadeOut();
    $("body").css("overflow-y", "inherit");
}
});
$(".gallery-popup .gallery-main-img").click(function(){
$(".gallery-popup").fadeOut();
$("body").css("overflow-y", "inherit");
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "");
});
});
</script> 

How to create multidimensional array in jQuery | Javascript

var jaydip = {};
for(var i=0; i < items.length; i++){
   jaydip[items[i]] = items[i]+'123';
}
console.log(jaydip);
alert(JSON.stringify(jaydip));

How to Eliminate render-blocking JavaScript and CSS on WordPress

https://www.hostinger.in/tutorials/how-to-fix-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content-on-wordpress

How to change url without reloading page in jQuery | Javascript | PHP

<?php
$actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$lastchar = substr($actual_link, -1);
if($lastchar == '/'){
$redirecturl = rtrim($actual_link,"/");
?>
<script>
    window.history.pushState('page2', 'Title', '<?php echo $redirecturl; ?>');
</script>
<?php } ?>

Half hours / 15 Minutes time loop in Javascript / jQuery

        var x = 30; //minutes interval
        var timesarr = []; // time array
        var tt = 0; // start time
        var ap = ['AM', 'PM']; // AM-PM
        //Loop to increment the time and push results in times array
        for (var i=0;tt<24*60; i++) {
          var hh = Math.floor(tt/60); // getting hours of day in 0-24 format
          var mm = (tt%60); // getting minutes of the hour in 0-55 format
          timesarr[i] = ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + ' ' + ap[Math.floor(hh/12)]; // pushing data in array in [00:00 - 12:00 AM/PM format]
          tt = tt + x;
        }
        console.log(timesarr);

Search with jQuery / Javascript

            $('#artsearch').keyup(function(){
                var searchtext = $('#artsearch').val();
                if(searchtext.length >= 3){
                   
                    $('#photoPreview .file-row').each(function(){
                        var $this = $(this);
                        var $text = $this.find('.arttitle .name').text();
                        var indexcount = $text.indexOf(searchtext);
                        if(indexcount > -1){
                            $this.show();
                        }else{
                            $this.hide();
                        }
                    });
                }
                if(searchtext.length == 0){
                    $('#photoPreview .file-row').show();
                }
            });

What is the scope of variables in JavaScript?

JavaScript programmers are practically ranked by how well they understand scope.

1. A globally-scoped variable

var a = 1;
// global scope
function one() {
  alert(a); // alerts '1'
}

2. Local scope

var a = 1;
function two(a) {
  alert(a); // alerts the given argument, not the global value of '1'
}
// local scope again
function three() {
  var a = 3; // alerts '3'
  alert(a);
}

3. Intermediate: No such thing as block scope in JavaScript (ES5; ES6 introduces let)

var a = 1;
function four() {
  if (true) {
    var a = 4;
  }
  alert(a); // alerts '4', not the global value of '1'
}

4. Intermediate: Object properties

var a = 1;
function five() {
  this.a = 5;
}
alert(new five().a); // alerts '5'

5. Advanced: Closure

var a = 1;
var six = (function() {
  var a = 6;
  return function() {
    // JavaScript "closure" means I have access to 'a' in here,
    // because it is defined in the function in which I was defined.
    alert(a); // alerts '6'
  };
})();

6. Advanced: Prototype-based scope resolution

var a = 1;
function seven() {
  this.a = 7;
}
// [object].prototype.property loses to
// [object].property in the lookup chain. For example...
// Won't get reached, because 'a' is set in the constructor above.
seven.prototype.a = -1;
// Will get reached, even though 'b' is NOT set in the constructor.
seven.prototype.b = 8;
alert(new seven().a); // alerts '7'
alert(new seven().b); // alerts '8'

7. Global+Local: An extra complex Case

var x = 5;
(function () {
    console.log(x);
    var x = 10;
    console.log(x);
})();
This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations (not initializations) to the top of the scope, making the code equivalent to:
var x = 5;
(function () {
    var x;
    console.log(x);
    x = 10;
    console.log(x);
})();

8. Catch clause-scoped variable

var e = 5;
console.log(e);
try {
    throw 6;
} catch (e) {
    console.log(e);
}
console.log(e);

How to Append Javascript/Jquery code run using PHP

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var option_count = "text something";
$(document).ready(function(){
$('div').append('<?php echo add_option("' + option_count + '"); ?>');
});
</script>
<div></div>
<?php
ini_set('display_errors', 1);
function add_option($count) { ob_start();
echo $count;
    $stuff = ob_get_contents();
    ob_end_clean();
    echo replace_newline($stuff);
}
function replace_newline($string) {
  return trim((string)str_replace(array("\r", "\r\n", "\n", "\t"), ' ', $string));
}
?>

How to check my url is in iframe or not javascript

Browsers can block access to window.top due to same domain.

Example

<script>
inIframe();
function inIframe () {
    try {
        var isif = window.self !== window.top;
        if(isif == false){
            //not iframe
        }else{
  //in iframe
}
    } catch (e) {
            //not iframe
    }
}
</script>

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

How to replace string with regex in jQuery Javascript in Html with Using nodeType / node Shortcode

How to replace string with regex in jQuery Javascript in Html with Using nodeType / node

Text

[jems-countdown token="4" data-id="20136582"]

Script

jQuery(document).ready(function(){
   
    $('body *').contents().each(function() {
        if(this.nodeType == 3) {
            var u = this.nodeValue;
            var reg = /\[(jems-countdown.*)\]/g;
            $(this).replaceWith(u.replace(reg,'<div class="metcounter" $1>kanasagra</div>'));
        }
    });
  });

Copy text/content when press button (clipboard) Javascript / jQuery.

As of 2016, you can now copy text to the clipboard in most browsers (everywhere except Safari) because most browsers have the ability to pro-grammatically copy a selection of text to the clipboard using document.execCommand("copy") that works off a selection.

As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.

Here's a code example:

HTML

<div class="showCodeWrapper">
    <btn class="btn btn-default copyMe">
        <i class="fa fa-clipboard"></i>
        Copy
    </btn>
    <textarea data-app-type="countdown-timer" class="form-control embedShortcode showCode selectAll" readonly="">test</textarea>
</div>

jQuery

<script>
    $( "li.third-item" ).siblings().css( "background-color", "green" );
$(document).on("click", ".copyMe", function() {
   
    var e = $(this).siblings("textarea")[0];
    e.select();
    try {
        if (!document.execCommand("copy")) throw "Copy unsuccessful";
        $(this).hide().html('<i class="fa fa-check"></i> Copied').fadeIn("fast")
    } catch (t) {
        $(this).hide().html("Press &#8984;+C to copy.").fadeIn("fast"), debug("Copying text error " + t)
    }
})
</script>