March, 2022 - My Awesome Moments

Black Crab Netflix Movie Review

I was waiting for this movie for weeks now. When I watched it last nite, I was disappointed because I found the story line was simple and the story telling not that easy to understand.

Overall I gave 3 stars out of 5.

Black Crab – Story Summary

It was about Edh whose mission was to carry a canister containing a virus to a place called Odo. She was committed to deliver the canister because she was duped that her daughter was at Odo.

When at Odo, she got to know that her daughter was not there then she wanted to destroy the canister.

I found Edh was selfish always think about her daughter rather than humanity even though her lieutenant asked her to destroy the canister at first place to avoid a lot of people being killed.

Scenes That Didn’t Add Value to The Story Line

I found some scenes didn’t add value to the overall story line

Example:

1) When the soldier left Edh inside a car then suddenly people around there started to attack her. (I don’t understand why the solder left her there and why the people want to kill her)

netflix black crab moview review - edh attacked — netflix black crab moview review – edh attacked

2) When Edh and her team reach to a house and the old couple starts killing them. (Who are the old couples? Are they from same nation?)

netflix black crab - old couple — netflix black crab – old couple

CSS Text Align Center Horizontally with Top Margin

I want to center the text horizontally with top margin I tried few options example text-align: center; but it doesn’t work.

So below is the solution:

The CSS to Align Center the Text

<style>
.align-center-with-top-margin{
/*u can change the top margin*/
top: 18%; 

/* to make text align center */
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 100%;
}
</style>

<style>

.align-center-with-top-margin{

/*u can change the top margin*/

top: 18%;

/* to make text align center */

left: 50%;

transform: translate(-50%, -50%);

margin: 0;

width: 100%;

}

</style>

The HTML Code

<div class="align-center-with-top-margin">
      Undangan  
</div>

Undangan

</div>

The Output of Text Align Center with Top Margin

css text align center horizontally with top margin - 8 characters — css text align center horizontally with top margin – 8 characters

css text align center horizontally with top margin - 14 characters — css text align center horizontally with top margin – 14 characters

css text align center horizontally with top margin - 15 characters — css text align center horizontally with top margin – 15 characters

WordPress How To Switch Theme Dynamically by URL

I want to switch my WordPress theme dynamically where if my visitor visits a specific URL they will see different theme while my main theme is still the same for other URLs.

All Other Pages will Show Main Theme Like Below

wordpress switch theme dynamically - original theme — wordpress switch theme dynamically – original theme

Only for Page wordpress-how-to-switch-theme-dynamically-by-url/ will show below Theme

wordpress switch theme dynamically - different theme based on url — wordpress switch theme dynamically – different theme based on url

WordPress Hook to Change the Theme

You can do it by using pre_option_{$option} hook. In this case:

pre_option_stylesheet
pre_option_template

1 2	pre_option_stylesheet pre_option_template

This hook will filter the value of an existing option before it is retrieved.

You can refer the pre_option hook here.

The Code to Change WordPress Theme Dynamically

add_filter( 'pre_option_stylesheet', 'hdf_change_theme_stylesheet' );
add_filter( 'pre_option_template', 'hdf_change_theme_template' );

function hdf_change_theme_stylesheet(){

    $current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
    //you can change the condition based on your needs either by full URL by parameters and so on.
    //you can also retrieve the URL theme correspondant from database.
    if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):
        return 'twentytwenty';
    else:
	    return "twentysixteen";
    endif;
}

function hdf_change_theme_template(){
    $current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

    if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):
        return 'twentytwenty';

    else:
	    return "twentysixteen";
    endif;
}

add_filter( 'pre_option_stylesheet', 'hdf_change_theme_stylesheet' );

add_filter( 'pre_option_template', 'hdf_change_theme_template' );

function hdf_change_theme_stylesheet(){

$current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

//you can change the condition based on your needs either by full URL by parameters and so on.

//you can also retrieve the URL theme correspondant from database.

if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):

return 'twentytwenty';

else:

return "twentysixteen";

endif;

}

function hdf_change_theme_template(){

$current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):

return 'twentytwenty';

else:

return "twentysixteen";

endif;

}

Don’t Put The Code at Your Theme files

It doesn’t work if you put the code at functions.php or in any files under your theme folder.

You must put at a plugin.

Side Effect by Switching WordPress Theme Dynamically

By switching the theme dynamically, I noticed that:-

The my top main menu doesn’t appear. I don’t how to solve this yet.
Google AdSense also seems not loaded

wordpress switch theme dynamically – top menu not appear

Jalan Berlubang di Genting Permai Selesai Selepas Campur Tangan dari YB Young Syefura Othman

Saya telah membuat laporan berkaitan jalan berlubang di Genting Permai kepada Majlis Perbandaran Bentong (MPB) pada tahun 2020.

Malangnya tiada tindakan dari MPB selepas setahun lebih. Mungkin kerana Covid-19 menyebabkan kerja-kerja pembaikan lambat tetapi bila saya laporkan jalan berlubang di Shah Alam, Majlis Bandaraya Shah Alam hanya mengambil masa satu bulan untuk baiki jalan walaupun masa itu berlaku Covid-19 pada tahun 2020.

Selepas itu walaupun tiada tindakan tetapi tiket laporan telah bertukar status ke selesai. Saya ingat memang selesai tapi bila tengok jalan masih berlubang.

Saya terpaksa meminta bantun YB Young Syefura untuk menggesa MPB mencepatkan pembaikan jalan kerana jalan berlubang semakin teruk.

Alhamdulillah, YB Syefura menjawap dengan cepat dan selepas 3 bulan mengadu kepada YB Syefura, MPB telah membaiki jalan. Saya sangat berterima kasih kepada YB Syefura atas tindakan beliau. Selepas jalan dibaiki PA YB Syefura, Mandy telah menghubungi saya untuk mengesahkan jalan telah dibaiki. Perkhidmatan yang baik dari pejabat YB Syefura.

Teruskan usaha menjaga kawasan DUN Ketari, YB Syefura!

Kronologi

1. Laporan pertama dibuat pada Oktober 2020.
2. Laporan kedua dibuat pada Mac 2021
3. Email kepada YB Syefura mohon campurtangan pada Disember 2021.
4. Jalan telah diturap semula pada bulan Mac 2022.

aduan jalan berlubang ke majlis perbandaran bentong oktober 2020

aduan jalan berlubang ke majlis perbandaran bentong mac 2021

majlis perbandaran bentong - aduan ke YB Syefura — majlis perbandaran bentong – aduan ke YB Syefura

majlis perbandaran bentong - jalan berlubang telah diturap semula — majlis perbandaran bentong – jalan berlubang telah diturap semula

Tindakan Susulan dari Pejabat YB Syefura

majlis perbandaran bentong - maklumbalas dari Mandy PA YB Syefura — majlis perbandaran bentong – maklumbalas dari Mandy PA YB Syefura

Bootstrap 5 Carousel Caption Outside of Image

By default Bootstrap 5, put the caption on the image and no way you can change the caption position by modifying only the Bootstrap CSS.

You need to change the CSS and add jQuery to do this.

After few tries, I manage to do put the carousel caption outside of images for large screen. For small screen the caption is still on the image.

For small screen, to make the caption outside of image, you can change the CSS by using CSS media screen.

Demo – Bootstrap 5 Carousel Caption Outside Image

How To Change Bootstrap 5 Carousel Caption Position

CSS Not to Display Default Caption Position

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

Add CSS to Display New Carousel Caption Position

You can change the CSS to where you want to put your text.

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

Add jQuery Script to Retrieve Current Caption

   //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

Add id to each carousel-caption

 <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
<div id="caption-0" class="carousel-caption d-none d-md-block">

1 2	<!-- ensure id="caption-0" to be included in order to retrieve text via jQuery --> <div id="caption-0" class="carousel-caption d-none d-md-block">

Full Source Code

<html>
<head>
<title>Demo - Bootstrap 5 Carousel Caption outside image</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>


<style>

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}
</style>

<script>
    //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });
</script>
</head>
<body>
<div style="max-width: 500px;">
<div id="carouselExampleCaptions" class="carousel carousel-dark slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-restaurant.jpeg" class="img-fluid" alt="...">
                                <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
                                <div id="caption-0" class="carousel-caption d-none d-md-block">
                                    <h5>First slide label</h5>
                                    <p>Some representative placeholder content for the first slide.</p>
                                </div>
                                </div>
                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/02/airbnb-meridin-medini-kitchen.jpeg" class="img-fluid" alt="...">
                                <div id="caption-1" class="carousel-caption d-none d-md-block">
                                    <h5>Second slide label</h5>
                                    <p>Some representative placeholder content for the second slide.</p>
                                </div>
                                </div>

                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-indian-cuisine-johor-bahru-butter-chicken.jpeg" class="img-fluid" alt="...">
                                <div id="caption-2" class="carousel-caption d-none d-md-block">
                                    <h5>Third slide label</h5>
                                    <p>Some representative placeholder content for the third slide.</p>
                                </div>
                                </div>

                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                                </div>
                            </div> 



</div>
<div id="newTextPosition" class="new-carousel-caption-position">

</div>

</body>
</html>

<html>

<head>

<title>Demo - Bootstrap 5 Carousel Caption outside image</title>

<style>

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

</style>

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

</script>

</head>

<body>

</div>

<h5>First slide label</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second slide label</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third slide label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</div>

</body>

</html>

Black Crab – Story Summary

Scenes That Didn’t Add Value to The Story Line

Nasi Goreng Ayam Kunyit & Nasi Goreng Daging Kunyit

Menu Restoran Mat Rock

Restoran Mat Rock Kota Damansara

Lokasi Restoran Mat Rock – Kota Damansara

The CSS to Align Center the Text

The HTML Code

The Output of Text Align Center with Top Margin

All Other Pages will Show Main Theme Like Below

Only for Page wordpress-how-to-switch-theme-dynamically-by-url/ will show below Theme

WordPress Hook to Change the Theme

The Code to Change WordPress Theme Dynamically

Don’t Put The Code at Your Theme files

Side Effect by Switching WordPress Theme Dynamically

Suitable Places to Put the Cockroach Powder Poison / Bait

Amount of Cockroach Powder Poison

The Dead Cockroaches after eating the Poison

Regularly Change the Powder Every 2 to 3 Months

You can buy the Powder Poison at Shopee

Tempat-tempat yang Sesuai untuk Letak Racun Lipas

Serbuk Racun Lipas Yang Diletak

Lipas-lipas yang Mati selepas makan Racun Lipas

Tukar Serbuk Racun Lipas setiap 2 ke 3 bulan

Beli di Shopee Serbuk Racun Lipas

Kronologi

Tindakan Susulan dari Pejabat YB Syefura

Mengukur Frame Pintu Lama

Pemasangan Frame Pintu Yang Baru

Kos Pemasangan

Service Down for More Than 24 Hours

Unable To Find Rebate As Stated in the SMS

Contact TM Customer Service Support

TM Did Manual Adjustment

Conclusion

How To Change Bootstrap 5 Carousel Caption Position

CSS Not to Display Default Caption Position

Add CSS to Display New Carousel Caption Position

Add jQuery Script to Retrieve Current Caption

Add id to each carousel-caption

Full Source Code