Category: javascript

can someone code a bot in JavaScript without using the twitter API and run it in chrome console so that the bot can auto reply and quote and you can change the reply and quote words And can you use it in a table or home page?

I want to automate Twitter. Reply and quote with desired phrases

I am building an online portfolio and am running into an issue with the video popup.

What happens now is that when you click on it, it loads everything as a new page. Then it opens a small video followed by immediately popping it full screen. You have to press back to go back to the portfolio page. And once there, the full screen video (usually) hovers whenever you are near the picture you launched it from.

Essentially I need to have a photo/text that acts as a button. You click on it and it pops open a floating responsive video on the same page. You click on the close or anywhere else and it goes away and you’re still on the same page.

Here’s an active link to the test portfolio page in question. Lots of dead links in there – just reference the 1st Aquaman image. https://www.marksantora.com/portfolio_test/portfolio_test.html

Thanks for any help!

Here’s the HTML Code for the image/pop up:

<div class="col-lg-4 col-md-6 items theatrical social">
 <div class="item mt-40">
  <div class="img">
   <img src="assets/imgs/website_new/portfolio_img/aquaman_and_the_lost_kingom_01p.jpg" alt="">
    <div class="cont d-flex align-items-center">

    <div id="light">
      <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
      <video id="Aquamanandthelostkingdom" controls> <source src="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4">
      </video>
    </div>

    <div id="fade" onClick="lightbox_close();"></div>
                    
        <div>
     <h5 class="fz-22">
      <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="lightbox_open();">Aquaman and the Lost Kingdom</a>
     </h5>
     <p>
      <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="lightbox_open();">Blood Is Thicker Than Water</a>
      </p>
    </div>                              

        <div class="ml-auto">
         <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" class="ti-arrow-top-right"></a>
        </div>
       </div>
      </div>
     </div>
    </div>

And the CSS:

/* HTML 5 Video playing in a lightbox
-----------------------------------------------------------------*/

#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: relative;
  top: 50%;
  left: 50%;
  max-width: auto;
  max-height: auto;
  margin-left: auto;
  margin-top: auto;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 10000;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}

.test:hover ~ .test2 {
  display: none;
}

For my app, I’m currently using Expo routers built in tab navigation, however I am running into some issues making the tab bar disappear with an animation (reanimated). Right now I make my tabs disappear using the display styling. I set it to ‘flex’ when I need it to show and ‘none’ when I need it to disappear.

How would I be able to implement some sort of animation whenever it does go away? Can I still use expo tab navigation or would I have to build my own tab bar to have that functionality?

I really want to implement a sort of swipe down to make tab disappear and swipe up to make it appear feature!

I am writing a website in which I need to extract data from google reviews. I used the Google Maps library to get the places but it only returns 5 reviews (the place I am getting the data from has over 70)

reviews.html

        <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>


function fetchGoogleReviews(placeId) {
  var service = new google.maps.places.PlacesService(document.createElement('div'));
  var request = {
      placeId: placeId,
      fields: ['name', 'rating', 'reviews']
  };

  function fetchReviews(nextPageToken) {
      request.pageToken = nextPageToken || "";
      service.getDetails(request, function(place, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
              var allReviews = place.reviews || []; // Initialize empty array if no reviews in first response
              if (nextPageToken) {
                  // Append reviews from subsequent requests
                  allReviews = allReviews.concat(reviewsView.reviews); // Replace reviewsView.reviews with your existing array to store all reviews
              }

              const stars = place.rating;
              document.getElementById("stars").setAttribute("data-star", stars);
              document.getElementById("stars-text").innerHTML = `${stars} stars`;

              const comments = document.createElement("div");
              comments.id = `reviews-number`;
              comments.innerHTML = `${allReviews.length} reviews`;

              const googleReviewsView = document.createElement("a");
              googleReviewsView.href = `url`
              const googleReviews = document.createElement("img")
              googleReviews.src = `/media/assets/google-reviews.png`
              googleReviewsView.appendChild(googleReviews)
              comments.appendChild(googleReviewsView);
              reviewsView.appendChild(comments);

              displayReviews(allReviews);
              // Check for next page token and make another request if available
              if (place.next_page_token) {
                    fetchReviews(place.next_page_token);
            } 

          } else {
              console.error('Error fetching place details:', status);
          }
      });
  }

  fetchReviews(); // Initial request without nextPageToken
}


    // Function to display reviews on the webpage
    function displayReviews(reviews) {
        for(let i = 0; i < reviews.length; i++){
                reviewsView.appendChild(newReview(reviews[i]))
        }
    }
    // Call the fetchGoogleReviews function with your business's place ID
    fetchGoogleReviews('PLACEID');

what can I do to get all the reviews?

So I am just making a basic html page to find a random subsite(?) in the roblox domain. When trying to fetch the site, it shows a redirect error even though loading it manually doesn’t. So now I want to try to open the site with inserted code or something automatically then close it if it actually is a running subsite(?)

this is the js code I currently have (everything)

const connect = document.getElementById("connection");
var idsel = document.getElementById("gameid");


function findRandom()
{
    let sel = Math.round(Math.random()*99999999);
    let url = "https://www.roblox.com/games/"+sel+"/";
    connect.setAttribute("href",url);
    idsel.textContent = "Game: "+url;
    

}   

but sometimes it loads in https://www.roblox.com/request-error?code=404 because the game doesnt exist. So instead of reloading every time until it’s an actual working game, I want it to try, check the url after loading or ping it before hand, repeat until its a working url. I also want to remove specific games by checking the url or ping it.

I’m working on a Next.js 13 application where a store is shown. The user then goes to certain product detail and can contact the owner of the product via WhatsApp, so far, that’s ok. I can use the Universal Link from WhatsApp (https://wa.me).

The thing here is that I want to open directly WhatsApp without asking for it. I know it may sounds kind of strange as it’s a privacy/security thing, but, I just found a website called Inmuebles24 where you can contact the apartments owner by WhatsApp, in a mobile browser (Safari/Chrome), ALWAYS the WhatsApp application is opened without asking me for permission and that happens in both browsers that I’ve tested out Safari and Google Chrome with an iPhone 14.

In my case, I’ve figured out that sometimes opens without asking for permission and sometimes the prompt is shown.

Before opening the link, I ask for the user a few data (name, email and phone number) once he filled up the form, I get the owner phone number to use it in the WhatsApp link.

const whatsAppLink = 'https://wa.me/REPLACEPHONENUMBER/?text=%C2%A1Hello,%20I%20am%20interested%20in%20your%20product!%20Please%20provide%20me%20with%20more%20information.%20Thank%20you!'

const onSubmitForm = async (data) => {
    try {
        const res = await requestOwnerPhoneNumber(data);
        const phoneNumber = res?.data ?? DEFAULT_WHATSAPP_NUMBER;
        const link = whatsAppLink.replace('REPLACEPHONENUMBER', phoneNumber);
        window.location.href = link;
    } catch (error) {
        errorAlert({
            content: 'Something went wrong, please try again later',
        });
    }
};

As you can see, once I have the WhatsApp link, I do a window.location.href which I expect, on mobile, open directly WhatsApp without asking for it.

How could I reproduce the same behavior as Inmuebles24? Any thougths?

I’m currently trying to code the apple home webpage and I’m having issues with the drop-menu transition. I’m trying to add transition to the drop down so it will be ease-in-out. However, only the transition in is visually pleasing (at least to an acceptable minimum), on the other hand the transition out is not working properly, it looks rushed, and maybe the transition is not working on the way out.

here is my css:

.drop-down {
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 94%;
        opacity: 0%;
        margin-top: 6%;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(22, 22, 23, 0.325);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        transition: opacity 0.3s ease-in-out .0.3s, backdrop-filter 0.3s ease-in-out 0.3s;
        overflow-y: hidden;
    }
     .gen-drop-2 {
        height: 0;
        width: 100%;
    }
    .drop-down-str {
        width: 100%;
        max-height: 0%;
        background-color: rgba(22, 22, 23, 0.982);
        transition: max-height 0.3s ease-in-out 0.2s;
        overflow-y: hidden;
    }
    .str-txt {
        width: 100%;
        display: flex;
        flex-direction: row;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        max-height: 0;
        opacity: 0;
        overflow-y: hidden;
        padding: 0;
        transition: opacity 0.3s ease-in-out 0.1s;
    }
    #str{
        padding: 0;
        border: 1px solid red;
        margin-right: 3em;
        transition: margin-right 0.3s ease-in-out 0.3s, opacity 0.3s ease-in-out 0.3s, line-height 0.3 ease-in-out 0.3s;
        overflow-y: hidden;
    }
    .str1 {
        margin-right: 4em;
        font-size: 24px;
        font-weight: 600;
        color: grey;
    }
    #str-li-1 {
        margin-bottom: 13px;
      transition: margin-bottom 0.3s ease-in-out 0.4s;
    }
    .str1 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: white;
    }

My HTML:

<div class="drop-down">
                <div class="drop-down-str">
                    <div class="str-txt">
                        <div class="str1" id="str">
                            <small style="margin-bottom: 3em;">Shop</small>
                            <ul>
                                <li id="str-li-1">Shop the Latest</li>
                                <li id="str-li-1">Mac</li>
                                <li id="str-li-1">iPad</li>
                                <li id="str-li-1">iPhone</li>
                                <li id="str-li-1">Apple Watch</li>
                                <li id="str-li-1">Apple Vision Pro</li>
                                <li id="str-li-1">Accessories</li>
                            </ul>
                        </div>
                        <div class="str2" id="str"></div>
                        <div class="str3" id="str"></div>
                    </div>
                </div>
                 /* I'm using gen-drop 2 as for shrink event stated in my JS, it is the section below the drop-down menu's main content */ 
                <div class="gen-drop-2"></div>

    /*other drop-down menus for the other items on the page navigation bar
    ... 
    */
</div>

My JS:

const store = document.querySelector(".store");
const dropD = document.querySelector(".drop-down");
const dropDStr = document.querySelector(".drop-down-str");
const genDrop2 = document.querySelector(".gen-drop-2");
const nav = document.querySelector(".Nav");
const appl = document.querySelector(".appleLogo");
const strTxt = document.querySelector(".str-txt");
const strLi = document.querySelectorAll("#str-li-1");

//function used in displaying the drop-down menu
function grow() {
  dropDStr.style.maxHeight = "100%";
  genDrop2.style.height = "100vh";
  dropD.style.opacity = '100%';
  dropD.style.backdropFilter = "blur(10px)";
  nav.style.background = "rgba(22, 22, 23, 0.982)";
  strTxt.style.opacity = '100%';
  strTxt.style.maxHeight = '100%';
  strTxt.style.paddingLeft = 'calc((100vw - 1035px) / 2 + 17px)';
  strTxt.style.paddingTop = '44px'
  strTxt.style.paddingBottom = 'calc(6em - 19px)';
  strLi.forEach((Element) => {
    Element.style.marginBottom = '19px';
  })
}

//function used in hiding the drop-down menu
function shrink() {
  dropDStr.style.maxHeight = "0";
  genDrop2.style.height = "0";
  dropD.style.opacity = '0%';
  dropD.style.backdropFilter = "blur(2px)";
  nav.style.background = "rgba(22, 22, 23, .8)";
  strTxt.style.opacity = '0%';
  strTxt.style.maxHeight = '0';
  strTxt.style.padding = '0';
  strLi.forEach((Element) => {
    Element.style.marginBottom = '13px';
  })
}
// events used to change/revert drop-down menu based on mouse activities
store.addEventListener('mouseenter', grow);
genDrop2.addEventListener('mouseenter', shrink);
appl.addEventListener('mouseenter', shrink);

window.addEventListener('mouseout', (event) => {
  const toElement = event.toElement || event.relatedTarget;
  if (!toElement || toElement.nodeName === 'HTML') {
    shrink();
  }
});
window.addEventListener('scroll', (event) => {
  const toElement = event.toElement || event.relatedTarget;
  if (!toElement || toElement.nodeName === 'HTML') {
    shrink();
  }
})

Problem gif
Yes, I am aware that I code with a baby brain, forgive me I’m a newbie. The transition is not working right but I want it to be like the one on the Apple webpage. Here is a link to the video I uploaded showing the issue in case the gif is not enough.
The one with the red border is my page, for easy identification.

I am trying to create an accordion which has a transition when you open and close it. Unfortunately I was not able to make the close transition(the open transition works perfectly). Any suggestions?

I think I should modify the javascript code(maybe add one more “active” class), but I am not sure. I am still learning html / css / javascript so expect to find some bad code here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Descoperă-ți Sportul</title>
    <!-- <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    /> -->
    <link rel="stylesheet" href="accordion.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <main
      class="main d-flex justify-content-center align-items-center flex-column"
    >
        <div class="accordion-body w-100" id="faq-1">
          <button
            class="label d-flex justify-content-between align-items-center w-100"
          >
            <p class="fw-bold">De ce ar trebui să practic un sport ca hobby?</p>
            <img src="accordion-icon.svg" alt="icon" />
          </button>
          <div class="accordion-content">
            <hr />
            <p class="fw-medium">
              Practicarea unui sport ca hobby poate îmbunătăți sănătatea fizică
              și mentală, reduce stresul, îmbunătățește calitatea somnului,
              ajută la menținerea unei greutăți sănătoase și oferă oportunități
              de socializare. De asemenea, poate fi o modalitate excelentă de a
              învăța noi abilități și de a te bucura de timp liber.
            </p>
          </div>
        </div>
    </main>
    <script src="accordionSection.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

.accordions {
  max-width: 760px;
  width: 100%;
  gap: 35px;
}

.label {
  padding: 24px;
  background-color: $white;
  border-radius: 16px;
  border: 2px solid rgb(0, 0, 0, 20%);
  cursor: pointer;
  outline: none;
  p {
    font-size: 24px;
    margin: 0;
  }
  img {
    width: 50px;
    height: 50px;
    transform: rotate(0deg);
    transition: 0.25s;
  }
}

.active {
  border-bottom: none;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  img {
    transform: rotate(-180deg);
    transition: 0.25s;
  }
}

.accordion-content {
  padding: 24px;
  background-color: $white;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border: 2px solid rgb(0, 0, 0, 20%);
  border-top: none;
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  gap: 24px;
  hr {
    margin: 0px 0px 20px 0px;
    border: 1px solid black;
  }
  p {
    margin: 0;
  }
}

var acc = document.getElementsByClassName("label");

for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

I am using Leaflet and OpenStreetMap to generate an interactive map. The map generates fine and you are able to interact with the map. The issue I am encountering is if the user has a large screen size and is navigated to the page, the view of the map changes. Refer to the screenshot below:

browser size:1228px
enter image description here

browser size: 2510px
enter image description here

The following is the code:

    var mymap = L.map('map').setView([34.3155072, -118.2096810], 8.6);
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>       contributors',
       maxZoom: 16
    }).addTo(mymap);

I have attempted to adjust the coordinates to show the same location for both views but that has not worked.

I have a single page on my site suppose example.com/content . That page have a tab contents like tab1 and tab2. When user visit example.com/content#tab1 the tab1 will be active and the tab2 content will be hidden. Now I want to set differnt og:description for example.com/content, example.com/content#tab1 and example.com/content#tab2. The active tab content will be the og:description.

I try to handle this using javascript but can not change the og:description. is it possible to implement a script for crawling specific metadata for each #tab URL? The sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Your Website Title">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://127.0.0.1:5500/index.html">
    <meta property="og:image" content="http://example.com/image.jpg">
    <meta name="og:description" content="Default description for your website">
    <title>Your Website</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            updateOGDescription(); 
            $(window).on('hashchange', function() {
                updateOGDescription(); 
            });
        });

        function updateOGDescription() {
            var hash = window.location.hash;
            var description = "Default description for your website";
            
            if (hash === '#slot1') {
                description = $("#slot1-content").text().trim(); 
            } else if (hash === '#slot2') {
                description = $("#slot2-content").text().trim(); 
            }

            $('meta[property="og:description"]').attr('content', description);
        }

        function openTab(tabId) {
            $('.tab').removeClass('active');
            $('#' + tabId).addClass('active');
            $('.tab-content').hide();
            $('#' + tabId + '-content').show();
            updateOGDescription(); 
            window.location.hash = tabId;
        }

        $(window).on('load', function() {
            var hash = window.location.hash.substr(1);
            if (hash) {
                openTab(hash);
            }
        });
    </script>
</head>
<body>
    <h1>Tabbed Content Example</h1>
    <div>
        <!-- Tab navigation -->
        <button onclick="openTab('slot1')">Tab 1</button>
        <button onclick="openTab('slot2')">Tab 2</button>
    </div>
    <div>
        <!-- Tab content -->
        <div id="slot1" class="tab active">
            <h2>Tab 1 Content</h2>
            <div id="slot1-content" class="tab-content">
                <p>This is the content of Tab 1.</p>
            </div>
        </div>
        <div id="slot2" class="tab">
            <h2>Tab 2 Content</h2>
            <div id="slot2-content" class="tab-content">
                <p>This is the content of Tab 2.</p>
            </div>
        </div>
    </div>
</body>
</html>

I’m considering using an admin navbar that only displays options for which the user has access permissions, but there is many way to do it and I was wondering what is the best to do so.

I’m hesitating between 2 methods, both has the same base

router.get('/admin/some_page', async (req, res, next) => {
    const perms = await Database.getPerms(UID);
    //...
});

But now, should I build the navbar on server side and add it in the HTML file
Or should I send these perms, without transformation to the client, so that the React code can generate the navbar on front side.

What bother me the most here is that permissions name won’t have the same name as admin pages path. If I choose the second solution, I’ll have to write the path to the admin pages for each authorisation somewhere in the code like

const getPermissionsRelatedPath = function (perm) {
    swith(perm) {
        case 'perm1': return '/admin/path1;
        case 'perm2': return '/admin/other_path;
        //etc...
    }
}

I’m afraid that’s a security problem

Another thing to consider is that, in the long term, I’d like to show or hide the delete data button depending on whether or not the user has permissions, which seems a bit complicated with the first method.

we have only one Input Filed for both Serial and References number entry.
{so, 1st character can be A or 0-9, 2nd to 8th characters must be -> btw 0-9}
serial: number requirement {0-9} – only 8 characters.
references : number requirement – {only 1st character must be ‘A’}- only 8 characters.
No space, No special characters, no lower case aplha (a-z). No upper case Alpha (B-Z)

input filed contain small search icon too, when we enter number and click on search icon then only we are able to see the details. but the requirement is to – even we click enter/return from our keyboard and even we click search icon we should see the result. So , To accomplish I tried this -onInputKeydown(event: Keyboard Event)

to accomplish 2nd requirement (1st character should be A or 0-9, 2nd to 8th characters must be -> btw 0-9}) I’m trying validation Rules
after using validationRules -> able to get half result – (no spaces, no special characters)
but still need – 1st character to be only ‘A’ or 0-9. and 2nd to 8th characters must be only 0-9 numbers.

Can someone help me out please.

<input #input type="text" maxlength="8" pInputText [(ngModel)]="caseNumber" placeholder="Enter Reference or Serial #" (keydown)="onInputKeydown($event)" (keypress)="validationRules($event)" class="srnumber" />`

onInputKeydown(event: KeyboardEvent){
        const key = event.which;
        if (key === 13) {
            this.docManagerService.getCaseMetadata(this.caseNumber);
       }
    }

    validation Rules(event:KeyboardEvent){
        const k = event.Keycode;
        return((k > 64 && k < 91) || (k >= 48 && k <= 57)); 
    }
}

Ok so basically I am using vue.js to build a single page application and my Issue is that I have no idea on how to handle a navbar.

Scenario: I have 3 tabs in my navbar and depending on which tab get’s pressed on a portion of my website changes to show elements relevant to that tab. Important is that it’s a single page application so I can’t just use links and call a new page. I want everything to be done on that one page.

How would I go on about doing this? A simple example would suffice. I will expand on it as I need.

Nothing I tried really got me anywhere and googling didn’t give me an answer.

I have a rectangle frame, as well as a second rectangle which can rotate. I would like the determine what minimum scale needs to be applied to the rotating rectangle in order to completely cover the stationary frame.

I have seen solutions to similar problems which solve for the maximum scale to contain the rotating rect within the parent, but I’m not able to decipher how they function in order to figure out what changes would be necessary to modify them for my use case of covering it.

This example shows how to contain the rotating rect, in which the scale to apply is calculated as the current distance from corner to corner over the original distance from corner to corner. Inverting that DOES actually achieve what I’m looking for, but only works if both the child and the parent are the same size. You can see in this codepen how it functions, but if you change the aspect-ratio of #rect1, it no longer works.

This 2nd example works with 2 rectangles of any size (here is a codepen link), however, I can’t decipher how it functions enough to cause the rectangle to cover the frame, rather than be contained to within it.

Would anyone be able to help calculate what is necessary to achieve this?

I’m working on a WordPress/Dokan plugin. I’m trying to display the vendor bank account details on “Order received” and “Order view” pages, based on the payment method that the customer selects when an order is submitted.
if the payment method is BACS, display the vendor bank account details, and if the payment method is the others, continuing the normal way.

the following code that I am using, add the vendor bank account details inside the ordered item. but I want to show the vendor bank account details in a different box, not inside the ordered item.

// *****Adding Vendor Bank Acc info on ordered item detail*****START
remove_action( 'woocommerce_order_item_meta_start', 'dokan_attach_vendor_name', 10, 2 );
function attach_vendor_info($item_id, $order){
  $product_id = $order->get_product_id();
  if ( ! $product_id ) {
      return;
  }

  $vendor_id    = get_post_field( 'post_author', $product_id );
  $vendor       = dokan()->vendor->get( $vendor_id );
  $store_info   = dokan_get_store_info( $vendor_id );
  
  $ac_name      = $store_info["payment"]["bank"]["ac_name"];
  $bank_name    = $store_info["payment"]["bank"]["bank_name"];
  $ac_number    = $store_info["payment"]["bank"]["ac_number"];
  $cart_number  = $store_info["payment"]["bank"]["routing_number"];

  if ( ! is_object( $vendor ) ) {
      return;
  }
  

  printf( '<p><span style='font-weight: bold'>%s:</span> <a href="%s">%s</a>', esc_html__( 'Vendor', 'dokan-lite' ), esc_url( $vendor->get_shop_url() ), esc_html( $vendor->get_shop_name() ) );
  printf( '<p><span style='font-weight: bold'>%s </span> %s</p>', esc_html__( 'Account Name: ', 'dokan-lite' ), $ac_name);
  printf( '<p><span style='font-weight: bold'>%s </span> %s</p>', esc_html__( 'Bank Name: ', 'dokan-lite' ), $bank_name );
  printf( '<p><span style='font-weight: bold'>%s </span> %s</p>', esc_html__( 'Account Number: ', 'dokan-lite' ), $ac_number );
  printf( '<p><span style='font-weight: bold'>%s </span> %s</p>', esc_html__( 'Cart Number: ', 'dokan-lite' ), $cart_number );

}

add_filter('woocommerce_order_item_meta_start', 'attach_vendor_info', 10, 2);
// *****Adding Vendor Bank Acc info on ordered item detail*****END

Now I want to display the mentioned information when the payment method is Bacs. But the following code is not working

// Save payment message as order item meta data
add_filter( 'woocommerce_checkout_create_order', 'save_custom_message_based_on_payment', 10, 2 );
function save_custom_message_based_on_payment( $order, $data ){
    if ( $payment_method = $order->get_payment_method() ) {
        if ( $payment_method === 'cheque' ) {
            // For Cheque
            $message = __("My custom message for Cheque payment", "woocommerce");
        } elseif ( $payment_method === 'bacs' ) {
            // Bank wire
            $message = __("My custom message for Bank wire payment", "woocommerce");
        }
        // save message as custom order meta data (custom field value)
        if ( isset($message) )
            $order->update_meta_data( '_payment_message', $message );
    }
}

// On "Order received" page (add payment message)
add_filter( 'woocommerce_thankyou_order_received_text', 'thankyou_custom_payment_message', 10, 2 );
function thankyou_custom_payment_message( $text, $order ) {
    if ( ! is_a($order, 'WC_Order') ) return; 
    if ( $message = $order->get_meta( '_payment_message' ) ) {
        $text .= '<br><div class="payment-message"><p>' . $message . '</p></div>' ;
    }
    return $text;
}

// On "Order view" page (add payment message)
add_action( 'woocommerce_view_order', 'view_order_custom_payment_message', 5, 1 );
function view_order_custom_payment_message( $order_id ){
    if ( $message = get_post_meta( $order_id, '_payment_message', true ) ) {
        echo '<div class="payment-message"><p>' . $message . '</p></div>' ;
    }
}

// Email notifications display (optional)
add_action( 'woocommerce_email_order_details', 'add_order_instruction_email', 10, 4 );
function add_order_instruction_email( $order, $sent_to_admin, $plain_text, $email ) {
    if( $sent_to_admin )
        return;
    elseif( $text = $order->get_meta('_payment_message') )
        echo '<div style="border:2px solid #e4e4e4;padding:5px;margin-bottom:12px;"><strong>Note:</span></strong> '.$text.'</div>';
}

I would like to merge all these codes in a simple code. I would really appreciate it if anybody could help me and modify the code and to merge all these codes in a simple code.

The first code needs to be modified to show the bank account details in a different box not inside the ordered item. but the second code is not working. I would like to merge all these codes in a simple code. I would really appreciate it if anybody could help me and modify the code and to merge all these codes in a simple code.