9 - 2021 - IntelyBlog

How to check if a file exists on a remote server using CURL

September 11, 2021/in PHP

Post Views: 18

function checkRemoteFileExists($remoteFile) {
    $ch = curl_init($remoteFile);
    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_exec($ch);
    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

    if ($code == 400) {
        $status = true;
    } else {
        $status = false;
    }
    curl_close($ch);
    return $status;
}

How to create WhatsApp share button in HTML

September 11, 2021/in WhatsApp

Post Views: 20

<a href="whatsapp://send?text=http://intelyblog.com/" data-action="share/whatsapp/share" target="_blank">
   <span class="fa fa-whatsapp"></span> Share on WhatsApp</a>

Share on WhatsApp

Create a link for WhatsApp click to chat in HTML

September 11, 2021/in WhatsApp

Post Views: 14

<a href="https://wa.me/[full phone number in international format]"><i class="fa fa-whatsapp" target="_blank"></i> WhatsApp Me</a>

WhatsApp Me

How to get current page full URL in PHP

September 7, 2021/in PHP

Post Views: 13

Step 1: Deciding on the SSL protocol whether the site using http or https.

if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') {
   $url = 'https';
} else {
   $url = 'http';
}

Step 2: Append domain name or IP to the URL

$url .= $_SERVER['HTTP_HOST'];

Step 3: Append the current page URL after domain / IP

$url .= $_SERVER[‘REQUEST_URI’]

Step 4: Let’s put all these together and create a function that can be reused.

function getfullpageurl() {
    if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on')   
         $url = "https://";   
    else  
         $url = "http://";   
       
    $url.= $_SERVER['HTTP_HOST'];   
    
    $url.= $_SERVER['REQUEST_URI'];    
      
    return $url;  
}

How to create load more function with jQuery

September 5, 2021/in jQuery

Post Views: 11

Step 1: Create the html containers that needed to be used for the load more function.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS with Superpowers</title>
    <link rel="stylesheet" href="public/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <h1>JQuery Load more</h1>
    </header>

    <div class="box-group">
        <div class="box box-1">Card 1</div>
        <div class="box box-2">Card 2</div>

        <div class="box box-3">Card 3</div>
    </div>

    <div class="box-group">
        <div class="box box-4">card 4</div>

        <div class="box box-5">Card 5</div>

        <div class="box box-6">Card 6</div>
    </div>

    <div class="box-group">
        <div class="box box-1">Card 7</div>

        <div class="box box-2">Card 8</div>

        <div class="box box-3">Card 9</div>
    </div>

    <div class="box-group">
        <div class="box box-4">card 10</div>

        <div class="box box-5">Card 11</div>

        <div class="box box-6">Card 12</div>
    </div>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header h1 {
  text-align: center;
}

/* 
* 
* call to action boxes 
*
*/
.box-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.box-group .box {
  padding: 50px;
  margin: 10px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  font-size: 24px;
  text-transform: uppercase;
  -webkit-box-shadow: 5px 5px 5px #ccc;
          box-shadow: 5px 5px 5px #ccc;
  font-weight: 700;
}

.box-group .box-1 {
  background-color: #CCCCCC;
}

.box-group .box-2 {
  background-color: #FB8C00;
}

.box-group .box-3 {
  background-color: #F46524;
}

.box-group .box-4 {
  background-color: #6AA84F;
}

.box-group .box-5 {
  background-color: #6D9EEB;
}

.box-group .box-6 {
  background-color: #8E7CC3;
}

.load-more-container button {
  padding: 15px 10px;
  width: 200px;
  border: none;
  -webkit-box-shadow: 0px 0px 5px #ccc;
          box-shadow: 0px 0px 5px #ccc;
  display: block;
  margin: 15px auto;
  background-color: #F46524;
  color: #ffffff;
  text-transform: uppercase;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.load-more-container button:hover {
  background-color: #ffffff;
  color: #F46524;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

Preview

Step 2: Make sure the containers have a wrapper to such as below mentioned example.

    <div class="load-more-container">
        <div class="box-group">
            <div class="box box-1">Card 1</div>

            <div class="box box-2">Card 2</div>

            <div class="box box-3">Card 3</div>
        </div>
    </div>

Step 3: Connect jQuery CDN and a JS file to run the load script.

<head>
    <title>CSS with Superpowers</title>
    <link rel="stylesheet" href="public/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</head>

Step 4: Write the below script in the app.js file.
jQuery slice function is used to hide and show the containers. Here in this script the limit is set to 2. It can vary depending on the number of containers.

jQuery

$(function() {
    /* Store page load more functions */
    $(".box-group").hide();
    $(".box-group").slice(0, 2).show();

    $(".load-more-container").append('<p id="load-more-button-container"><button type="button" id="load-more-button">Load More</button></p>');

    $("#load-more-button").click(function() {
        $(".box-group").show(500);
        $("#load-more-button-container").hide();
    });
});