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>

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 work async in jQuery ajax | Does it have something to do with preventing other events on the page from firing?

Yes, async to false means that the statement you are calling has to complete before the next statements of your function can be called. If you set async: true then that statement will begin it's execution the same time and the next statement will be called regardless of whether the async statement has completed yet.

jQuery('body #pricegroup-products-container').on('click', '.saveimage' , function (e) {
        var returnHtml = '';
        jQuery.ajax({
            type: "POST",
            async: false,
            cache: false,
            url: url,
            data: {id: '12345'},
            dataType: "html",
            success: function (response) {
                returnHtml = response;
            }
        });
        alert(returnHtml);
    });

How to get only one record in Join Query in Magento

$orders->getSelect()->join(["Category" => "catalog_category_product"], "Category.category_id=(
    select category_id from catalog_category_product AS p1 where SFOI.product_id = p1.product_id limit 1
    ) AND SFOI.product_id=Category.product_id", []);

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();
                }
            });

Create next previous button script in jQuery, HTML

HEAD

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
    .eventslider{height: 368px;overflow: hidden;}
</style>
<script type="text/javascript">
    $jq = jQuery.noConflict();
    $jq(function () {
        var $step = 2;
        $jq('.eventslider .event_detail_container').hide();
        for (i = 0; i < $step; i++) {
            $jq('.eventslider .event_detail_container').eq(i).show();
        }
        $jq('.previousvents').hide();
        $jq('.nextevents').click(function () {
            var length = $jq('.eventslider .event_detail_container').length;
            var $this = $jq(this);
            var $nextvalue = $this.attr('rel');
            if ($nextvalue < length) {
                $jq('.eventslider .event_detail_container').hide();
                var newnext = $nextvalue;
                for (i = $nextvalue; i < Number($nextvalue) + $step; i++) {
                    $jq('.eventslider .event_detail_container').eq(i).show();
                    newnext = i;
                }
                newnext = Number(newnext) + 1
                if (newnext < length) {
                    $this.attr('rel', newnext);
                    $jq('.previousvents').attr('rel', newnext);
                    $jq('.previousvents').show();
                } else {
                    $jq('.previousvents').show();
                    $jq('.previousvents').attr('rel', newnext);
                    $this.hide();
                }
            }
        });
        $jq('.previousvents').click(function () {
            var $this = $jq(this);
            var $previousvalue = $this.attr('rel');
            $previousvalue = $previousvalue - (Number($step) + 1);
            $jq('.eventslider .event_detail_container').hide();
            var newprevious = 0;
            for (i = $previousvalue; i > Number($previousvalue) - $step; i--) {
                $jq('.eventslider .event_detail_container').eq(i).show();
                newprevious = i;
            }
            newprevious = Number(newprevious) + Number($step);
            if (newprevious <= $step) {
                $this.hide();
                $jq('.nextevents').show();
                $jq('.nextevents').attr('rel', newprevious);
            } else {
                $this.attr('rel', newprevious);
                $jq('.nextevents').attr('rel', newprevious);
                $jq('.nextevents').show();
            }
        });
    });
</script>

Body

<div>
    <a href="javascript:void(0)" class="previousvents" rel="0">Previous</a>
    <div class="eventslider">
        <div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0 top">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 3</span>
                <h2><a itemprop="url" href="/test-event-3">Test Event 3</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-06" itemprop="startDate">October 06,  2016.</span><span content="2016-10-06" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event  z</span>
                <h2><a itemprop="url" href="/test-event-z">Test Event  z</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-07" itemprop="startDate">October 07,  2016.</span><span content="2016-10-07" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Eventtt</span>
                <h2><a itemprop="url" href="/test-eventtt">Test Eventtt</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-27" itemprop="startDate">October 27,  2016.</span><span content="2016-10-27" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Evebt  sss</span>
                <h2><a itemprop="url" href="/test-evebt-sss">Test Evebt  sss</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-11-03" itemprop="startDate">November 03,  2016.</span><span content="2016-11-03" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event 22633</span>
                <h2><a itemprop="url" href="/test-event-2">test event 22633</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-08-12" itemprop="startDate">August 12,  2016.</span><span content="2016-08-12" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 4</span>
                <h2><a itemprop="url" href="/test-event-4">Test Event 4</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 9999</span>
                <h2><a itemprop="url" href="/test-event-9999">Test Event 9999</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event</span>
                <h2><a itemprop="url" href="/test-event">test event</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 00011</span>
                <h2><a itemprop="url" href="/test-event-00011">Test Event 00011</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event ZZXaaaa</span>
                <h2><a itemprop="url" href="/test-event-zzxaaaa">Test Event ZZXaaaa</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-05" itemprop="startDate">October 05,  2016.</span><span content="2016-10-05" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div>
    </div>
    <a href="javascript:void(0)" class="nextevents" rel="2">Next</a>

</div> 

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>

Dump jquery object in an alert box

I am not quite adept in maneuvering jQuery, and it came to a point that I need to debug a program that was passed down from me without a documentation.

I have this var a, an object, that I really want to know the content of its collection. In my mind I need a function like foreach() in PHP to iterate over this object variable. Upon researching I end up in using jQuery.each(). Now I can clearly iterate and see what was inside var a.

However, it was kind of annoying to alert once every value on the var a. What I wanna know if it's possible to display all the contents in just one pop of alert box?

Here is my code:

var acc = []
$.each(a, function(index, value) {
    acc.push(index + ': ' + value);
});
alert(JSON.stringify(acc));

JQuery serialize() function with $.ajax() post for bigger HTML forms

JQuery provides a very useful function jQuery.serialize() which encodes a set of form elements as a string for submission, and is very useful while we are dealing with huge HTML forms. Basically it will combine your values of form element and then you can post it on any server side scripting page.

For example, suppose you have a very long form with many fields and you want to post it with the help of $.ajax() function, you need to add just few lines of code for jquery from with ajax, no need to add id attribute to any form elements, just have to give id to form itself as follows:

<form name="frm_details" id="frm_details" method="post">
<input type="text" name="name" value="jems">
<input type="submit" name="submit" value="submit">
</form>

The above form will have all the fields like text boxes, text areas, select boxes, radios etc. having only name attribute, just as our usual html form. Now the JQuery code will be as follows:

<script>
 $(function() {
   $("#product_details").on("submit", function(event) {
      event.preventDefault();

      $.ajax({
         url: "somefile.php",
         type: "post",
         data: $(this).serialize(),
         success: function(d) {
           alert(d);
         }
      });
    });
  });
</script>

Including jQuery condition if in page have jQuery or not

// Including jQuery conditionnally.
  if (typeof jQuery === 'undefined') {
    document.write("\u003cscript src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\" type=\"text\/javascript\"\u003e\u003c\/script\u003e");
    document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
  }

How to called codeigniter helper function using JQuery AJAX?

You need to make a request via controller, then call that function through that controller, something like:

$("#id").change(function()
{       
 $.ajax({
     type: "POST",
     url: base_url + "controller_name/your_function", 
     data: {val: $("#your_val").val(),currency_id: $("#your_cur").val()},
     dataType: "JSON",  
     cache:false,
     success: 
          function(data){
            $("#your_elem").val(data.price);
      }
});

Then on your controller:

public function yourfunction()
{
   $data = $this->input->post();
   $price = format_price($data['val'],$data['currency_id']);
   echo json_encode(array('price' => $price));
}