How to show #(hash) link when sticky header using HTML CSS

Link

<a href="#FlavoredToothpicks">Jaydip Kansagra is developer</a>

HTML

<span class="anchor" id="FlavoredToothpicks"></span><h3 class="subsection-title">Jaydip Kansagra is developer</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

CSS

.anchor {
    display: block;
    height: 100px;
    margin-top: -100px;
    visibility: hidden;
}

Color swaches using metafiled in shopify

{% if swatch == 'Color' %}
    {%- if product.metafields.coloroptions != blank -%}
             
              {%- for field in product.metafields.coloroptions -%}
              <div data-value="{{ field | first | escape }}" class="swatch-element color {{ field | first | escape }} available">
                <div class="tooltip">{{ field | first | escape }}</div>
                    <a href="/products/{{ field | last }}">
                      {% assign phandle = field | last %}
                      {% assign additionaproduct = all_products[phandle] %}
                      {% assign getimage = 0 %}
                      {% assign additionalcolorimg = '' %}
                      {% assign multiimgs = additionaproduct.images | reverse %}
                      {% for image in multiimgs %} ​
                      {% if getimage == 0 %}
                      {% assign additionalcolorimg = image.src | img_url: 'small' %}
                      {% endif %}
                      {% endfor %}
                      <label for="section-product-template-swatch-0-{{ field | first | handle }}" style="background-color: {{ field | first | handle }}; background-image: url({{ additionalcolorimg }})"></label>
                    </a>
              </div>
              {%- endfor -%}
             
            {%- endif -%}
    {% endif %}

Create simple tooltip html css

Preview

HTML

<span class="tooltipans" data-tooltip='All your leads will be saved to your Customers tab with a "My Sticky Elements" tag so you can easily find them'>?</span>

CSS

<style>
.tooltipans{
    position: relative;
    background: rgba(0,0,0,0.7);
    padding: 2px 7px;
    border-radius: 100%;
    font-size: 12px;
    cursor: help;
    color: #FFF;
}
.tooltipans::before, .tooltipans::after{
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: allease0.3s;
}
.tooltipans::before{
    content: "";
    border-width: 10px 8px 08px;
    border-style: solid;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    top: -10px;
    margin-left: -8px;
}
.tooltipans::after{
    content: attr(data-tooltip);
    background: rgba(0,0,0,0.7);
    top: -10px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #fff;
    padding: 14px;
}
.tooltipans:hover::before, .tooltipans:hover::after{
    opacity: 1;
}
</style>

Mysql database query very slow with huge data / rows using CREATE INDEX in PHP

CREATE INDEX visitorhistory_store_created_at_index ON visitorhistory (store, created_at);

The reference use: https://blog.nodeswat.com/making-slow-queries-fast-with-composite-indexes-in-mysql-eb452a8d6e46

How to add/update multiple products in cart in shopify

jQuery(function () {
   
jQuery('body').find(".couponproduct .gf_add-to-cart").click(function (e) {
e.preventDefault();
values = {}
                values[30370850865245] = 0;
                values[31289364840541] = 1;
                jQuery.ajax({
                      type: 'POST',
                      url: '/cart/update.js',
                      data: { updates: values},
                      dataType: 'json',
                      success: function() {
                        location.href = '/checkout';
                     }
               });
});
   
});

Create simple popup using HTML CSS

HTML

<div class="main-chaty-popup-bg"></div>
<div class="main-chaty-popup">
      <div class="main-chaty-box">
              <h4>Chaty is currently off</h4>
              <div class="popup-content">
                       <div class="popup-content-wrapper"> Chaty is currently turned off, would you like to save and show it on your site? </div>
              </div>
              <div class="popup-content-footer">
                      <button type="button" class="btn btn-primary">Yes, Show it on my site</button>
                      <button type="button" class="btn btn-default">Just save and keep it off</button>
              </div>
              <div class="modul-close-btn">
                       <a href="#"> X </a>
              </div>
        </div>
 </div>

CSS

<style type="text/css">
    .main-chaty-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;z-index: 111;}
    .main-chaty-popup {margin:0;width: 100%;text-align: center;z-index: 1;}
    .main-chaty-box {margin: auto; padding: 0px; width: 660px; height: 170px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; bottom: 0;z-index: 999;}
    .main-chaty-box h4 {background: #FCFCFC; margin: 0;padding: 10px 0 10px 10px;font-size: 22px;color: #626262;line-height: 22px;text-align: left;border-bottom: 1px solid #e5e5e5;}
    .modul-close-btn {position: absolute; right: 18px; top: 20px; transform: translate(50%, -50%); background: linear-gradient(0deg, #333, #333), linear-gradient(153.18deg, #6371DB 7.07%, #FF89C4 90.47%); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center;justify-content: center;padding: 0; border: 0; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer;}
    .popup-content-footer{position: absolute;bottom: 0; width: 100%; padding: 10px 0;border-top: 1px solid #e5e5e5;}
    .popup-content-footer .btn-primary{background:#00C67C;border: none;padding: 10px;color: #FFF;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;margin-right: 15px;}   
    .popup-content-footer .btn-default{background:#F7F7F7;border: none;padding: 10px;color: #655d5d;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;}
   .popup-content-wrapper{margin-top: 25px;}
 </style>

Cannot add a new addondomain in WHM panel

(XID a57bw8) Sorry, the domain is already pointed to an IP address that does not appear to use DNS servers associated with this server. in WHM panel

Visit this area in WHM panel:

1. WebHost Manager »Server Configuration »Tweak Settings, Domains tab:

2. Enable the following setting