Conceal a Component within an Embedded Frame

Hey there! I've been attempting to hide a header within an iframe, but it seems like my code isn't doing the trick. Could someone take a look and help me diagnose why the header is still visible? Thanks in advance!

<iframe id="booking_iframe" src="https://bananahostels.com/booking-engine/cacao-hostel" width="100%" height="1500px" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

$('#booking_iframe').load(function() {
  $('#booking_iframe').contents().find('.hostel-branding').hide();
}
javascriptjqueryhtmlcssiframe

Answer №1

Use the measuring tools available in FF developer edition to find the height of the header. Chrome may also have a similar feature.

To do this, right click > inspect element > small ruler icon in the top right corner. Next, place your Iframe within another div with overflow:hidden; specified in your css. Then, adjust the Css value on the Iframe using 

transform:translateX(-theHeightOftheHeader);

This method may be considered a bit unconventional, but it appears to be the best solution for an external URL like this.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resizing a webpage to fit within an IFRAME

Having just started learning HTML, CSS, and JavaScript, I am attempting to incorporate a page as a submenu item on my website. Below is the code that I have so far: <!DOCTYPE html> <html> <meta name="viewport" content="width=1024"> ...

javascripthtmlcss

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

javascriptcssreactjsjsx

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

Creating a visual representation of the information stored in my JSON data file using a Quasar table

As a VueJS student, I'm struggling to display the distances from my JSON file in a table. What is the best way to retrieve and show all the distance data for "5" and "10" by both walking and driving? Should I use this code: this.concurrentsRows = JSO ...

javascriptvue.jsquasar-frameworkquasar

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

javascripthtml

Having trouble accessing the property of undefined in material ui cards

Currently, I am incorporating Material UI cards into my React project. One issue I encountered is trying to implement two functions, onMouseOver and onMouseOut, in my cards. However, when I run the code, I receive an error message stating "Uncaught TypeE ...

javascriptreactjsmaterial-uitypeerror

I am interested in implementing a variable to define rows within a <tr> element in an HTML table

I am facing an issue with finding specific rows in a table by using a variable like /tr[i]/ where i represents the row I want to access. When I hardcode the element in my code, it works perfectly: driver.find_element_by_xpath("//tbody[@class='sample& ...

pythonhtmlselenium

retrieve the data within a specific tag

Can someone help me with the following HTML structure: <div class="dk_options"> <ul class="dk_options_inner"> <li class="dk_option_current"><a data-dk-dropdown-value="">Select State</a></li> <li class= ...

jquery

How to apply CSS styling to a specific element using jQuery

When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element? <html> <head> <script src="https://ajax.googleapis.com/ajax ...

javascriptjquerycssjquery-uistyling

Using Angular $resources in the query() function often results in the error message "Undefined is not a function

When I try to call the query() function using ngResource, I keep getting an error message saying "Undefined is not a function." [demo.js] var app = angular.module('StarterApp', ['ngResource']); app.factory("resourceFactory", function ...

javascriptangularjs

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering

Using the conditional rendering technique in a mapped function within a React table cell

I have an array that is being displayed inside a Table, and I need to compare each object's "userName" property with the header in order to determine where to place the value. If there is no match, it should display a "0". Here is a snippet of the ta ...

javascriptarraysreactjsmaterial-ui

Modify the form's action attribute when submitted

I am trying to create a form with multiple buttons that will change the action and target properties when a specific button is clicked. Below is my code snippet: <div id="root"> <form :action="form.action" ref="form" :target="form.target"&g ...

javascriptvue.js

Stranger things happening when incorporating a generator function in React

Here's a simplified version of my component. It includes a generator function that cycles through values. const App = () => { const [state, setState] = useState("1") function* stateSwitch () { while (true){ yield "2" yield "3" ...

javascriptreactjsgenerator

ASP.NET - Severely struggling with connectivity issues involving AJAX/JQUERY

I have developed a real-time update script that refreshes certain div elements with server-side information every second. The issue I am facing is that the script seems to be causing heavy usage, as even my mouse animation in Google Chrome keeps loading. ...

asp.netjqueryajaxweb-services

"An issue with the setTimeout function in React is leading to the page constantly refreshing

My buddies and I are in the process of developing a React App. The main goal is to identify the currently logged-in user, then send a post request to fetch everyone in the same "room" as them and display this information on the app upon page load. However, ...

javascriptnode.jsreactjsmongodbmern

Toggle element visibility upon clicking

<table id="selectsupp"> <tr> <td> <select id="category"> <option value="display" readonly="true">-Shop By Category-</option> <option value="all">All</option> <option val ...

javascripthtmlcss

Transferring PHP variable to Javascript at a defined junction

My challenge involves passing a PHP variable to Javascript at a specific point in the code. The issue I am facing is that as the PHP code progresses, the variable I need undergoes changes. Although one option would be to extract the PHP variable when the p ...

phpjavascriptvariables

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

javascripthtmlcss

Turning an svg tag into a WebElement: a step-by-step guide

<img src="data:image/svg+xml;base64,PHN2ZyBzdG9rZS1kYXNoYXJyYXk9IiIgdmVjdG9yLWVmZmVjdD0iIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpc2liaWxpdHk9InZpc2libGUiIHN0cm9rZS13aWRnZXQ9IjEiIGZpbGw9InRyYW5zbGF0ZW4iIHN0cm9rZT0idHJhbnNsYXRlciI+PC91cz48L3N2Zz4="/> Is it ...

htmlselenium-webdriver