Month: January 2021

WP Carousel slider plugin height issue [Fixed]

Posted on by adnanafzal565

WP Carousel Slider is a WordPress plugin developed by Sayful Islam. This plugin allows you to create carousel images in your blog post. You can display your media images, gallery, custom URLs, blog posts, or WooCommerce products in the carousel.

It works as sliders, so you need to create a new slider, and add images to that slider. A shortcode will be generated for each slider, you just need to place that shortcode in your post where you want to show the slider. Sliders created from this plugin can also be used as widgets.

In this article, I am going to discuss a solution to a problem that occurs when you try to add images with different heights in your slider under the following configurations:

SettingValue
Carousel Image sizeOriginal uploaded image
Auto WidthDisabled
Columns1
Columns: Desktop1
Columns: Small desktop1
Columns: Tablet1
Columns: Small tablet1
Columns: Mobile1

If you are using the above settings and if you upload the images with different heights in a slider, then you might see that slider has been given a height of the largest image which will create a lot of empty space at the bottom of the smaller height images.

Moreover, when you scroll between carousel items, the height of the carousel is not auto-adjusted. Let me explain how you can solve this.

Solution:

You need to make 1 change in the plugin file. When it comes to editing the plugin files, there are 2 options.

1. WordPress admin panel

From your WordPress admin panel, go to “Plugins > Plugin Editor” and select the “Carousel Slider” plugin. When this plugin is selected, go to the following path:

1
assets/js/frontend.js

2. File manager

If you prefer to use file manager instead of making the changes from the WordPress admin panel, then you need to go to the following path:

1
wp-content/plugins/carousel-slider/assets/js/frontend.js

Replace the content of the “frontend.js” file with the following:

Before applying the solution, please prepare a backup of this file. Copy the content of this file and paste it into your computer’s Notepad.

If you have prepared the backup of this file, feel free to replace the file’s code with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function setOwlStageHeight(event) {
    var maxHeight = 0;
    jQuery('.owl-item.active').each(function () { // LOOP THROUGH ACTIVE ITEMS
        var thisHeight = parseInt( jQuery(this).height() );
        maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight);
    });
    jQuery('.owl-carousel').css('height', maxHeight );
    jQuery('.owl-stage-outer').css('height', maxHeight ); // CORRECT DRAG-AREA SO BUTTONS ARE CLICKABLE
}
 
jQuery("body")
    .find(".carousel-slider")
    .each(function () {
        let a = jQuery(this),
            e = a.data("auto-width"),
            t = parseInt(a.data("stage-padding"));
        if (
            ((t = t > 0 ? t : 0),
            jQuery().owlCarousel &&
                (a.owlCarousel({
                    stagePadding: t,
                    nav: a.data("nav"),
                    dots: a.data("dots"),
                    margin: a.data("margin"),
                    loop: a.data("loop"),
                    autoplay: a.data("autoplay"),
                    autoplayTimeout: a.data("autoplay-timeout"),
                    autoplaySpeed: a.data("autoplay-speed"),
                    autoplayHoverPause: a.data("autoplay-hover-pause"),
                    slideBy: a.data("slide-by"),
                    lazyLoad: a.data("lazy-load"),
                    autoWidth: e,
                    navText: [
                        '<svg class="carousel-slider-nav-icon" viewBox="0 0 20 20"><path d="M14 5l-5 5 5 5-1 2-7-7 7-7z"></path></use></svg>',
                        '<svg class="carousel-slider-nav-icon" viewBox="0 0 20 20"><path d="M6 15l5-5-5-5 1-2 7 7-7 7z"></path></svg>',
                    ],
                    responsive: {
                        320: { items: a.data("colums-mobile") },
                        600: { items: a.data("colums-small-tablet") },
                        768: { items: a.data("colums-tablet") },
                        993: { items: a.data("colums-small-desktop") },
                        1200: { items: a.data("colums-desktop") },
                        1921: { items: a.data("colums") },
                    },
                    autoHeight: true,
                    onInitialized: setOwlStageHeight,
                    onResized: setOwlStageHeight,
                    onTranslated: setOwlStageHeight
                }),
                "hero-banner-slider" === a.data("slide-type")))
        ) {
            let e = a.data("animation");
            e.length &&
                (a.on("change.owl.carousel", function () {
                    a.find(".carousel-slider-hero__cell__content")
                        .removeClass("animated " + e)
                        .hide();
                }),
                a.on("changed.owl.carousel", function (t) {
                    setTimeout(function () {
                        jQuery(t.target)
                            .find(".carousel-slider-hero__cell__content")
                            .eq(t.item.index)
                            .show()
                            .addClass("animated " + e);
                    }, a.data("autoplay-speed"));
                }));
        }
        jQuery().magnificPopup &&
            ("product-carousel" === a.data("slide-type")
                ? jQuery(this).find(".magnific-popup").magnificPopup({ type: "ajax" })
                : "video-carousel" === a.data("slide-type")
                ? jQuery(this).find(".magnific-popup").magnificPopup({ type: "iframe" })
                : jQuery(this)
                      .find(".magnific-popup")
                      .magnificPopup({ type: "image", gallery: { enabled: !0 }, zoom: { enabled: !0, duration: 300, easing: "ease-in-out" } }));
    });

After replacing the above code, you need to refresh your browser cache in order to see the effect. Press the following keys to remove the browser cache:

Windows / Linuxctrl + shift + delete
Maccommand (⌘) + shift + delete

When you hit the above keys, you will see a pop-up asking which data you want to delete. You will have 3 options and you need to check the “Cached files and images” option. Also, make sure to select “All time” from the “Time range” option.

Now refresh the post where you have placed the shortcode for the WP Carousel Slider plugin, and you will know that the carousel will adjust itself dynamically with the height of the currently active image.

Custom keyboard view for typing secure passwords using HTML and CSS

Posted on by adnanafzal565

When people use someone else’s computer and try to log in to their account on any website, they are afraid that the other person might have installed a Keylogging software that tracks all the keys pressed, and hence they will know his password. But if you show a custom keyboard view for a password field on your website, it will create a whole new level of confidence in users towards your website.

So let’s learn how you can do this.

This is what we are going to create:

First, you need to create a password field, you probably also have a username or email field as well.

1
<input type="password" name="password" id="password">

Then create a table with a full keyboard view.

Numeric keyboard:

First, we will create a full numeric keyboard that appears on top of most laptops.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table class="keyboard">
    <tr>
        <td>
            ~<br><span data-shift="~" data-initial="`">`</span>
        </td>
        <td>
            !<br><span data-shift="!" data-initial="1">1</span>
        </td>
        <td>
            @<br><span data-shift="@" data-initial="2">2</span>
        </td>
        <td>
            #<br><span data-shift="#" data-initial="3">3</span>
        </td>
        <td>
            $<br><span data-shift="$" data-initial="4">4</span>
        </td>
        <td>
            %<br><span data-shift="%" data-initial="5">5</span>
        </td>
        <td>
            ^<br><span data-shift="^" data-initial="6">6</span>
        </td>
        <td>
            &<br><span data-shift="&" data-initial="7">7</span>
        </td>
        <td>
            *<br><span data-shift="*" data-initial="8">8</span>
        </td>
        <td>
            (<br><span data-shift="(" data-initial="9">9</span>
        </td>
        <td>
            )<br><span data-shift=")" data-initial="0">0</span>
        </td>
        <td>
            _<br><span data-shift="_" data-initial="-">-</span>
        </td>
        <td>
            +<br><span data-shift="+" data-initial="=">=</span>
        </td>
        <td><span>delete</span></td>
    </tr>
</table>

We have written the normal key in the <span> tag and the shift key directly in <td>. Also, we have given data-shift and data-initial attribute so we can know which character to use when the shift key is pressed and which character to use when the shift key is released.

1st row (QWERTY):

This will be the very first row on your keyboard. You can compare it with your keyboard. Create a new <tr> tag in your table:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<tr>
    <td></td>
    <td data-shift="Q"><span>q</span></td>
    <td data-shift="W"><span>w</span></td>
    <td data-shift="E"><span>e</span></td>
    <td data-shift="R"><span>r</span></td>
    <td data-shift="T"><span>t</span></td>
    <td data-shift="Y"><span>y</span></td>
    <td data-shift="U"><span>u</span></td>
    <td data-shift="I"><span>i</span></td>
    <td data-shift="O"><span>o</span></td>
    <td data-shift="P"><span>p</span></td>
    <td>
        {<br><span data-shift="{" data-initial="[">[</span>
    </td>
     
    <td>
        }<br><span data-shift="}" data-initial="]">]</span>
    </td>
 
    <td>
        |<br><span data-shift="|" data-initial="\">\</span>
    </td>
</tr>

It also has data-shift and data-initial attributes that tell that the character will be uppercase when the shift key is pressed, and lowercase when the shift key is released.

2nd row (ASDF):

Similarly, we are going to create a second row of the keyboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<tr>
    <td></td>
    <td data-shift="A"><span>a</span></td>
    <td data-shift="S"><span>s</span></td>
    <td data-shift="D"><span>d</span></td>
    <td data-shift="F"><span>f</span></td>
    <td data-shift="G"><span>g</span></td>
    <td data-shift="H"><span>h</span></td>
    <td data-shift="J"><span>j</span></td>
    <td data-shift="K"><span>k</span></td>
    <td data-shift="L"><span>l</span></td>
    <td>
        :<br><span data-shift=":" data-initial=";">;</span>
    </td>
 
    <td>
        "<br><span data-shift='"' data-initial="'">'</span>
    </td>
</tr>

3rd row:

This will be the last row of the keyboard, usually right above the space bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr>
    <td id="key-shift"><span>shift</span></td>
    <td data-shift="Z"><span>z</span></td>
    <td data-shift="X"><span>x</span></td>
    <td data-shift="C"><span>c</span></td>
    <td data-shift="V"><span>v</span></td>
    <td data-shift="B"><span>b</span></td>
    <td data-shift="N"><span>n</span></td>
    <td data-shift="M"><span>m</span></td>
     
    <td>
        <<br><span data-shift="<" data-initial=",">,</span>
    </td>
 
    <td>
        ><br><span data-shift=">" data-initial=".">.</span>
    </td>
     
    <td>
        ?<br><span data-shift="?" data-initial="/">/</span>
    </td>
</tr>

Note that it has an ID attribute to the shift key, that is so we can highlight the shift key when it is pressed.

Applying styles

To make the keyboard view looks nice, we are going to apply some styles. But you can style the keyboard as you want.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.keyboard {
    margin-top: 10px;
    table-layout: fixed;
    width: 200px;
}
.keyboard,
.keyboard td {
    border: 1px solid black;
    border-collapse: collapse;
}
.keyboard td {
    padding: 25px;
    cursor: pointer;
 
    width: 30px;
    overflow: hidden;
}
.keyboard td:hover,
.keyboard td.active {
    background: black;
    color: white;
}

This will make your keyboard look nice and readable.

Javascript

The real power of this keyboard view comes with Javascript. Following is the complete Javascript code that will make this static keyboard view functional.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var isShift = false;
 
window.addEventListener("load", function () {
    var tds = document.querySelectorAll(".keyboard td");
    for (var a = 0; a < tds.length; a++) {
        tds[a].addEventListener("click", function () {
 
            /* get key node */
            var node = this.querySelector("span");
            if (node == null) {
                return;
            }
 
            if (node.innerHTML == "delete") {
                simulateBackspace(document.getElementById("password"));
            } else if (node.innerHTML == "shift") {
                /* toggle the isShift variable */
                isShift = !isShift;
                toggleShift();
            } else {
                /* check if it is an alphabet */
                if ((/[a-zA-Z]/).test(node.innerHTML)) {
                    document.getElementById("password").value += node.innerHTML;
                } else {
 
                    /* show initial value if the shift is off.
                     * show shift value if shift is on. */
                    if (isShift) {
                        document.getElementById("password").value += node.getAttribute("data-shift");
                    } else {
                        document.getElementById("password").value += node.getAttribute("data-initial");
                    }
                }
                 
                if (isShift) {
                    isShift = false;
                    toggleShift();
                }
            }
        });
    }
});
 
function toggleShift() {
    /* make all alphabets capital or small based on new isShift value */
    var keys = document.querySelectorAll(".keyboard span");
    for (var b = 0; b < keys.length; b++) {
        /* keys must not be shift or delete */
        if (keys[b].innerHTML != "shift" && keys[b].innerHTML != "delete" && keys[b].innerHTML != "") {
 
            /* check if it is an alphabet */
            if ((/[a-zA-Z]/).test(keys[b].innerHTML)) {
                if (isShift) {
                    keys[b].innerHTML = keys[b].innerHTML.toUpperCase();
                } else {
                    keys[b].innerHTML = keys[b].innerHTML.toLowerCase();
                }
            }
        }
    }
 
    /* highlight the shift button if on. */
    if (isShift) {
        document.getElementById("key-shift").className = "active";
    } else {
        document.getElementById("key-shift").className = "";
    }
}
 
function simulateBackspace(element) {
    var start = element.selectionStart, end = element.selectionEnd, event;
 
    if (!element.setRangeText) { return; }
    if (start >= end) {
      if (start <= 0 || !element.setSelectionRange) { return; }
      element.setSelectionRange(start - 1, start);
    }
 
    element.setRangeText("");
    event = document.createEvent("HTMLEvents");
    event.initEvent("input", true, false);
    element.dispatchEvent(event);
}

That’s how you can create a fully functional custom numeric keyboard view. Comments have been added with each line for an explanation. You can customize this as much as you want. If you face any problems feel free to ask in the comment section below.

[wpdm_package id=’1173′]

PayPal and Stripe – Javascript

Posted on by adnanafzal565

Whether you are creating an E-commerce website or simply wanted to receive payments from your website using PayPal and Stripe, this script already contains all the source code you need to show Stripe and PayPal payment buttons and receive payments directly in your Stripe and PayPal accounts.

It also has a full shopping cart implementation, where you can add products to the cart, update quantities, remove products from the cart and move to checkout.

Demo

Home page

Here you can add products to the shopping cart and also you can remove products from the shopping cart.

When you add or remove a product from the shopping cart, you will see the shopping cart badge on top updating its values in real-time.

Shopping cart

On clicking the above “Cart” button you will be redirected to the shopping cart page where you can change the number of products and can also remove the product from the shopping cart.

You can also see the grand total at the bottom right that changes in real-time as you change the quantity of product or when you remove a product from the shopping cart.

Checkout

Here you can make the payment using Stripe or Paypal.

Fully documented code

Comments have been added with each line of code for explanation.

Separate file for each function

To manage the code, each payment method is separated in its own file. So you can easily change and modify the code as per your needs.