HTML Tutorial - Cody Paste https://www.codypaste.com/category/html-2/ THE WEB PLAYGROUND Sat, 23 Nov 2024 10:28:13 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.codypaste.com/wp-content/uploads/2022/12/cropped-codypaste-32x32.png HTML Tutorial - Cody Paste https://www.codypaste.com/category/html-2/ 32 32 Disable the button when the form is submitted https://www.codypaste.com/disable-the-button-when-the-form-is-submitted/ https://www.codypaste.com/disable-the-button-when-the-form-is-submitted/?noamp=mobile#respond Sat, 23 Nov 2024 10:27:01 +0000 https://www.codypaste.com/?p=1223 Solution: Disable the button when the form is submitted. Re-enable the button after the page is loaded or when the form submission is complete. Example Implementation: HTML: [crayon-6985bb8ec63ab554480192/] JavaScript/jQuery: [crayon-6985bb8ec63b8151630167/] Explanation: Disabling the Submit Button on Form Submission: When the form is submitted ($('#myForm').submit()), we disable the submit button immediately ($('#submitButton').prop('disabled', true);) to prevent further …

read more "Disable the button when the form is submitted"

The post Disable the button when the form is submitted appeared first on Cody Paste.

]]> Solution:
  1. Disable the button when the form is submitted.
  2. Re-enable the button after the page is loaded or when the form submission is complete.

Example Implementation:

HTML:

<form id="myForm" method="POST" action="your-action-url">
    <!-- Your form fields here -->
    <input type="submit" value="Submit" class="btn btn-lg btn-success" id="submitButton">
</form>

JavaScript/jQuery:

$(document).ready(function() {
    // Disable the submit button when the page starts loading or the form is being submitted
    $('#myForm').submit(function(event) {
        // Disable the submit button
        $('#submitButton').prop('disabled', true);
        
        // Optionally, change the button text to indicate submission
        $('#submitButton').val('Submitting...');
        
        // If you're submitting via Ajax, handle it like this:
        // $.ajax({
        //     url: 'your-action-url',
        //     type: 'POST',
        //     data: $(this).serialize(),
        //     beforeSend: function() {
        //         // Disable the button before sending the request
        //         $('#submitButton').prop('disabled', true);
        //     },
        //     success: function(response) {
        //         // Handle successful form submission here
        //         // Re-enable the button if needed (or perform actions based on success)
        //         // $('#submitButton').prop('disabled', false);
        //         // $('#submitButton').val('Submit');
        //     },
        //     error: function() {
        //         // Handle error response
        //         // Re-enable the button in case of an error
        //         // $('#submitButton').prop('disabled', false);
        //         // $('#submitButton').val('Submit');
        //     }
        // });
        
        // For traditional form submission, we can rely on the browser's default behavior
    });
    
    // Disable button if the page is being loaded
    $(window).on('beforeunload', function() {
        $('#submitButton').prop('disabled', true);
    });
});

Explanation:

  1. Disabling the Submit Button on Form Submission:
    • When the form is submitted ($('#myForm').submit()), we disable the submit button immediately ($('#submitButton').prop('disabled', true);) to prevent further clicks.
  2. Changing the Button Text:
    • Optionally, you can change the button text to “Submitting…” or something else to give feedback to the user that the form is being processed.
  3. Re-enabling the Button After Submission (Using Ajax):
    • If you’re using Ajax, you can re-enable the button when the submission is successful or if there’s an error by placing the code $('#submitButton').prop('disabled', false); in the success/error callbacks.
  4. Disabling the Button on Page Reload or Unload:
    • $(window).on('beforeunload', function() {...}): This disables the button if the page is being unloaded, which could happen when the user reloads or navigates away while the form is submitting. This will prevent the form from being accidentally submitted multiple times due to a page reload.

Additional Notes:

  • For Ajax Submissions: You can use the beforeSend function in the Ajax request to disable the button before sending the request, and re-enable it on the success or error response.
  • For Traditional Form Submissions: The button will be disabled immediately on form submission, and the page reloads automatically once the form is submitted. After the page reloads, the button will be active again (if you set it to be enabled on page load).

The post Disable the button when the form is submitted appeared first on Cody Paste.

]]> https://www.codypaste.com/disable-the-button-when-the-form-is-submitted/feed/ 0 Product Zoom Gallery for e-commerce https://www.codypaste.com/product-gallery-for-e-commerce/ https://www.codypaste.com/product-gallery-for-e-commerce/?noamp=mobile#respond Sat, 24 Aug 2024 07:56:52 +0000 https://www.codypaste.com/?p=1161 e-commerce product zoom gallery https://codepen.io/hckkiu/pen/poyoRKQ https://codepen.io/danielhuangg/pen/xqaMrM https://codepen.io/ZowWeb/pen/xxGLrjp https://codepen.io/exclutips/pen/LYEeEjZ

The post Product Zoom Gallery for e-commerce appeared first on Cody Paste.

]]> e-commerce product zoom gallery

  1. https://codepen.io/hckkiu/pen/poyoRKQ
  2. https://codepen.io/danielhuangg/pen/xqaMrM
  3. https://codepen.io/ZowWeb/pen/xxGLrjp
  4. https://codepen.io/exclutips/pen/LYEeEjZ

The post Product Zoom Gallery for e-commerce appeared first on Cody Paste.

]]> https://www.codypaste.com/product-gallery-for-e-commerce/feed/ 0 HTML Form Select Menu Styling https://www.codypaste.com/html-form-select-menu-styling/ https://www.codypaste.com/html-form-select-menu-styling/?noamp=mobile#respond Wed, 21 Aug 2024 07:22:04 +0000 https://www.codypaste.com/?p=1158 Here we will see how to style HTML Form  <select> menu. [crayon-6985bb8ec6d17389355547/]  

The post HTML Form Select Menu Styling appeared first on Cody Paste.

]]> Here we will see how to style HTML Form  <select> menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Dropdown</title>
    <style>
        /* Hide the native select */
        select {
            display: none;
        }

        /* Style the select wrapper */
        .select-wrapper {
            position: relative;
            width: 200px;
            cursor: pointer;
        }

        .selected-option {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            color: #333;
            font-size: 16px;
        }

        .select-wrapper::after {
            content: '▼';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
            color: #333;
        }

        /* Custom dropdown styling */
        .custom-select {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
            z-index: 1;
        }

        .custom-select .option {
            padding: 10px;
            cursor: pointer;
        }

        .custom-select .option:hover {
            background-color: red;
            color: #fff;
        }

        /* Highlight the selected option */
        .custom-select .option.selected {
            background-color: red;
            color: #fff;
        }

        /* Show dropdown when wrapper is active */
        .select-wrapper.active .custom-select {
            display: block;
        }
    </style>
</head>
<body>
    <div class="select-wrapper">
        <div class="selected-option">Select an option</div>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <div class="custom-select">
            <div class="option" data-value="1">Option 1</div>
            <div class="option" data-value="2">Option 2</div>
            <div class="option" data-value="3">Option 3</div>
            <div class="option" data-value="4">Option 4</div>
        </div>
    </div>

    <script>
        const selectWrapper = document.querySelector('.select-wrapper');
        const selectElement = document.querySelector('select');
        const selectedOption = document.querySelector('.selected-option');
        const customSelect = document.querySelector('.custom-select');

        // Handle option click
        customSelect.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.getAttribute('data-value');
                const text = option.textContent;
                selectedOption.textContent = text;
                selectElement.value = value; // Set the value of the hidden select element

                // Update custom dropdown to highlight the selected option
                customSelect.querySelectorAll('.option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');

                selectWrapper.classList.remove('active');
            });
        });

        // Toggle dropdown visibility on selected option click
        selectedOption.addEventListener('click', () => {
            selectWrapper.classList.toggle('active');
        });

        // Hide dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!selectWrapper.contains(e.target)) {
                selectWrapper.classList.remove('active');
            }
        });
    </script>
</body>
</html>

 

The post HTML Form Select Menu Styling appeared first on Cody Paste.

]]> https://www.codypaste.com/html-form-select-menu-styling/feed/ 0 YouTube Channel Video API in PHP https://www.codypaste.com/youtube-channel-video-api-in-php/ https://www.codypaste.com/youtube-channel-video-api-in-php/?noamp=mobile#respond Mon, 27 May 2024 07:31:18 +0000 https://www.codypaste.com/?p=1136 How to load/list YouTube channel Videos? Here we will see how we can load YouTube channel video in our website by using JSON. Now we will start this from scratch STEP 1 (Get API Key): We will get ‘API Key’ from Google Developer Console, you can find steps here : https://developers.google.com/youtube/v3/getting-started STEP 2 (Get Channel …

read more "YouTube Channel Video API in PHP"

The post YouTube Channel Video API in PHP appeared first on Cody Paste.

]]> How to load/list YouTube channel Videos?

Here we will see how we can load YouTube channel video in our website by using JSON.

Now we will start this from scratch

STEP 1 (Get API Key):
We will get ‘API Key’ from Google Developer Console, you can find steps here : https://developers.google.com/youtube/v3/getting-started

STEP 2 (Get Channel ID):
Go to your YouTube Channel and copy your channel URL e.g. https://www.youtube.com/channel/XXXThs2cnzpDD-dT
and your channel id is ‘XXXThs2cnzpDD-dT‘.

Now see the complete code below

<?php
    $api_key = 'XXXXXXXXC9eEmCnF4qXXXXX';
    $chanel_id = 'XXXnzpXXXXXXXXXXXc-dT'; // Youtube Channel ID, copy from url of channel 'https://www.youtube.com/channel/XXXnzpXXXXXXXXXXXc-dT'
    $maxResults = '20';
    
    $url    = 'https://www.googleapis.com/youtube/v3/search?key='.$api_key.'&channelId='.$chanel_id.'&part=snippet,id&order=date&maxResults=20';
    
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
       
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
       
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 60); curl_setopt($ch, CURLOPT_TIMEOUT, 60); 
    $result = curl_exec($ch); 
    if(curl_errno($ch) !== 0) { error_log('cURL error when connecting to ' . $url . ': ' . curl_error($ch)); } 
    curl_close($ch); 
    $videoLists = json_decode($result);
    //echo'<pre>';
    //print_r($videoLists);
    
    $videoList = $videoLists->items;
?>

<?php
    foreach($videoList as $videoListVal){
        ?>
        <div style="width:20%; float:left;">
            <?php
                $thumb_url      = $videoListVal->snippet->thumbnails->medium->url; //mediaum,high,default
                $title          = $videoListVal->snippet->title;
                $description    = $videoListVal->snippet->description;
                $videoId        = $videoListVal->id->videoId;
                $publishTime    = $videoListVal->snippet->publishTime;
            ?>
            <iframe width="100%" height="auto" src="https://www.youtube.com/embed/<?php echo $videoId; ?>?si=ICtFe87ElbGLgdvm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
        <?php
    }
    //echo'<pre>';
    //print_r($videoList);
?>

 

 

The post YouTube Channel Video API in PHP appeared first on Cody Paste.

]]> https://www.codypaste.com/youtube-channel-video-api-in-php/feed/ 0 YouTube channel video in website https://www.codypaste.com/youtube-channel-video-in-website/ https://www.codypaste.com/youtube-channel-video-in-website/?noamp=mobile#respond Mon, 27 May 2024 06:42:11 +0000 https://www.codypaste.com/?p=1134 How to load/list YouTube channel Videos? Here we will see how we can load YouTube channel video in our website by using JSON. There are two steps: Query Channels to get the “uploads” Id. eg [crayon-6985bb8ec7233839805244/] Use this “uploads” Id to query PlaylistItems to get the list of videos. eg [crayon-6985bb8ec7242618118120/] Now we will start …

read more "YouTube channel video in website"

The post YouTube channel video in website appeared first on Cody Paste.

]]> How to load/list YouTube channel Videos?

Here we will see how we can load YouTube channel video in our website by using JSON.

There are two steps:

Query Channels to get the “uploads” Id. eg

https://www.googleapis.com/youtube/v3/channels?id={channel Id}&key={API key}&part=contentDetails

Use this “uploads” Id to query PlaylistItems to get the list of videos. eg

https://www.googleapis.com/youtube/v3/playlistItems?playlistId={"uploads" Id}&key={API key}&part=snippet&maxResults=50

Now we will start this from scratch

STEP 1 (Get API Key):
We will get ‘API Key’ from Google Developer Console, you can find steps here : https://developers.google.com/youtube/v3/getting-started

STEP 2 (Get Channel ID):
Go to your YouTube Channel and copy your channel URL e.g. https://www.youtube.com/channel/XXXXXXXThs2cnXXX-dt
and your channel id is ‘XXXXXXXThs2cnXXX-dt‘.

STEP 3 :
Now replace {channel Id} with your channel id and API Key with your API Key
https://www.googleapis.com/youtube/v3/channels?id={channel Id}&key={API key}&part=contentDetails
to
https://www.googleapis.com/youtube/v3/channels?id=XXXXXXXThs2cnXXX-dt&key=XXXXXXXXXXXXXXXXXXX&part=contentDetails

Here you will get “uploads” Id to query Playlist Items e.g.

{
  "kind": "youtube#channelListResponse",
  "etag": "XXXXXXXXXXXABiQXX",
  "pageInfo": {
    "totalResults": 1,
    "resultsPerPage": 5
  },
  "items": [
    {
      "kind": "youtube#channel",
      "etag": "XXXXXXXXXXYmaRUXXXXXX",
      "id": "XXXXXhs2cnzpqc-rAXXX",
      "contentDetails": {
        "relatedPlaylists": {
          "likes": "",
          "uploads": "XXXXwEk6hThs2cnzXXXX" // this is upload id
        }
      }
    }
  ]
}

“uploads”: “XXXXwEk6hThs2cnzXXXX” is the upload id

STEP 4 :
Use this “uploads” Id to query PlaylistItems to get the list of videos. eg

https://www.googleapis.com/youtube/v3/playlistItems?playlistId={"uploads" Id}&key={API key}&part=snippet&maxResults=50

 

Here you will get Palaylist in json Format.

The post YouTube channel video in website appeared first on Cody Paste.

]]> https://www.codypaste.com/youtube-channel-video-in-website/feed/ 0 Instagram Feed on Website PHP https://www.codypaste.com/instagram-feed-on-website-php/ https://www.codypaste.com/instagram-feed-on-website-php/?noamp=mobile#respond Fri, 24 May 2024 12:02:49 +0000 https://www.codypaste.com/?p=1130 Instagram Feed in  PHP STE 1 : Get Instagram Access Token https://docs.oceanwp.org/article/487-how-to-get-instagram-access-token STEP 2 : PHP Code for Website [crayon-6985bb8ec7597928804338/]  

The post Instagram Feed on Website PHP appeared first on Cody Paste.

]]> Instagram Feed in  PHP

STE 1 : Get Instagram Access Token

https://docs.oceanwp.org/article/487-how-to-get-instagram-access-token

STEP 2 : PHP Code for Website

<?php
$access_token = 'IGQVJWR0VIbHF6cGl0aTZA5NnFsMkxhbHY3MmR0em83emNZAQ3Vxa0dtenRrTHZAqVzFpbHhENmtDRjNIY2lFSGthUkFzX191TEU3SDJzcVJDcnNTYkVYVFlRa1JJZAE12YmFLMVdpWUV4YTJ6cGxWeDBmaQZDZD';

$fields ='id,caption,thumbnail_url,media_url,permalink';

  function fetchData($url){
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_TIMEOUT, 20);
  $result = curl_exec($ch);
  curl_close($ch); 
  return $result;
  }

  $result = fetchData("https://graph.instagram.com/me/media?fields=".$fields."&access_token=".$access_token."");


  $result = json_decode($result);
  
  //echo'<pre>';
  //print_r($result); die();
  
  
  foreach ($result->data as $post) {
      
      $thumbnail_url    = $post->thumbnail_url;
      $image    = $post->media_url;
      $url      = $post->permalink;
      $caption  = $post->caption; // Text content
     ?>
        <div style="width:20%; float:left; padding:5px; margin:5px; border:solid 1px #ebebeb;">
            <a href="<?php echo $url; ?>" target="_blank">
                <?php
                    if($thumbnail_url==""){
                ?>
                    <img src="<?php echo $image; ?>" width="100%">
                <?php }else{
                    ?>
                    <img src="<?php echo $thumbnail_url; ?>" width="100%">
                    <?php
                } ?>
                
                
                
                
                
                <p><?php echo $caption; ?></p>
            </a>
        </div>
     <?php
  }
?>

 

The post Instagram Feed on Website PHP appeared first on Cody Paste.

]]> https://www.codypaste.com/instagram-feed-on-website-php/feed/ 0 File Size Validation jQuery https://www.codypaste.com/file-size-validation-jquery/ https://www.codypaste.com/file-size-validation-jquery/?noamp=mobile#respond Wed, 22 May 2024 06:43:41 +0000 https://www.codypaste.com/?p=1128 Multiple selected files size validation before form submit in jQuery. HTML Form [crayon-6985bb8ec7887327582387/]   jQuery Validation [crayon-6985bb8ec7896076880791/]  

The post File Size Validation jQuery appeared first on Cody Paste.

]]> Multiple selected files size validation before form submit in jQuery.

HTML Form

<form action="#" method="post" enctype="multipart/form-data">
	<input type="file" name="invoice[]" id="customFile" required multiple>			
	<label for="customFile">Choose file</label>		
	<button class="btn btn-success" type="submit" style="margin-left: 15px;">Upload</button>  
</form>

 

jQuery Validation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  
<script>
    $(document).ready(function(){
         $("form").submit(function(){
            //==Check File Size==>
            var splashArray = new Array();
            var files = $('form :input[type=file]').get(0).files;
            for (i = 0; i < files.length; i++)
            {
               splashArray.push(files[i].size);
            }
            //alert(JSON.stringify(splashArray));
            var total = 0;
            for (var i = 0; i < splashArray.length; i++) {
                total += splashArray[i] << 0;
            }
            //alert(total);
            if (total > 5000000){
                alert('Total File size should not more than 5 MB');
                return false;
            }
        }); 
    });
</script>

 

The post File Size Validation jQuery appeared first on Cody Paste.

]]> https://www.codypaste.com/file-size-validation-jquery/feed/ 0 Top Free Bootstrap Themes https://www.codypaste.com/top-themes/ https://www.codypaste.com/top-themes/?noamp=mobile#respond Mon, 05 Feb 2024 06:24:02 +0000 https://www.codypaste.com/?p=1098 https://themewagon.com/themes/nomad-force-free-bootstrap-5-html5-landing-page-template/

The post Top Free Bootstrap Themes appeared first on Cody Paste.

]]>
  • https://themewagon.com/themes/nomad-force-free-bootstrap-5-html5-landing-page-template/

  • The post Top Free Bootstrap Themes appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/top-themes/feed/ 0     Make Google reCaptcha required and use in JQuery Ajax https://www.codypaste.com/google-recaptcha-required-and-use-in-jquery-ajax/ https://www.codypaste.com/google-recaptcha-required-and-use-in-jquery-ajax/?noamp=mobile#respond Thu, 18 Jan 2024 06:56:50 +0000 https://www.codypaste.com/?p=1088 Add reCaptcha in HTML form [crayon-6985bb8ec7bd1227550261/]   Get reCaptcha Value in jQuery and pass in ajax [crayon-6985bb8ec7be0114000703/]   Validate reCaptcha [crayon-6985bb8ec7be4431889187/]   Make reCaptcha checkbox required [crayon-6985bb8ec7be7075014026/]   Reset reCaptcha For reCaptcha v2, use: [crayon-6985bb8ec7bea941949840/] If you’re using reCaptcha v1 (probably not): [crayon-6985bb8ec7bed155492425/]

    The post Make Google reCaptcha required and use in JQuery Ajax appeared first on Cody Paste.

    ]]>     Add reCaptcha in HTML form

    <script src='https://www.google.com/recaptcha/api.js'></script>
            <div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>

     

    Get reCaptcha Value in jQuery and pass in ajax

    var g_recaptcha_response = grecaptcha.getResponse();
var dataString = 'uname='+ uname + '& g-recaptcha-response=' + g_recaptcha_response;

     

    Validate reCaptcha

    $secret = 'YOUR-SECRET-KEY'; //google captcha check
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
   //Do if captcha is valid
}

     

    Make reCaptcha checkbox required

    <!-- GCaptcha require karne ke liye-->
    <style>
        #g-recaptcha-response {
          display: block !important;
          position: absolute;
          margin: -78px 0 0 0 !important;
          width: 302px !important;
          height: 76px !important;
          z-index: -999999;
          opacity: 0;
        }
    </style>
    <script>
        window.addEventListener('load', () => {
      const $recaptcha = document.querySelector('#g-recaptcha-response');
      if ($recaptcha) {
        $recaptcha.setAttribute('required', 'required');
      }
    })
    </script>
<!-- -->

     

    Reset reCaptcha

    For reCaptcha v2, use:

    grecaptcha.<span class="hljs-title function_">reset</span>();

    If you’re using reCaptcha v1 (probably not):

    <span class="hljs-title class_">Recaptcha</span>.<span class="hljs-title function_">reload</span>();

    The post Make Google reCaptcha required and use in JQuery Ajax appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/google-recaptcha-required-and-use-in-jquery-ajax/feed/ 0     DOM Pdf Page Break Issue https://www.codypaste.com/dom-pdf-page-break-issue/ https://www.codypaste.com/dom-pdf-page-break-issue/?noamp=mobile#respond Thu, 26 Oct 2023 10:59:57 +0000 https://www.codypaste.com/?p=1080 In Short: You cant make table under any table. page break issue will resolve  

    The post DOM Pdf Page Break Issue appeared first on Cody Paste.

    ]]>     In Short:

    You cant make table under any table. page break issue will resolve

     

    The post DOM Pdf Page Break Issue appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/dom-pdf-page-break-issue/feed/ 0