Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automatically switch between these two sizes based on screen size:

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

and

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

If anyone has a solution or advice on how to achieve this, I would greatly appreciate it. Thank you.

javascriptjquerycssiframeads

Answer №1

You have the ability to program both of these elements and conceal one with CSS based on the size of the browser.

<iframe class='lg' border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

<iframe class='sm' border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

CSS:

@media (max-width: 719px) { //adjust max width according to preferred mobile screen size, set to 719 for large banner at 720.
    .lg {display:none;}
    .sm {display:initial;}
}

@media (min-width: 720px) { //ensure min width is greater than the above css rule.
    .lg {display:initial;}
    .sm {display:none;}
}

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

Achieving Efficiency with Handlebars: Streamlining Remote Template Organization and

I am looking for a way to better organize my HB template by splitting it into different HTML files. In this case, I have created a file called helpers.html. This file contains two script tags: <script id='alert' type='text/template>... ...

javascriptjquerytemplateshandlebars.js

Can anyone provide a way to sort through a list of dictionaries in Ansible and identify all lists that contain a certain key value or values?

My goal is to retrieve the lists where a key ('minio_vf') has a specific value (True) from the input data. To achieve this, I have utilized the selectattr('minio_vf', '==', True) filter. Input Data #1 (contains 'minio_vf ...

jqueryjsonansiblejinja2

Guide to accessing a particular object key within an array by leveraging the MUI multiple autocomplete feature coupled with the useState hook

How can I retrieve the id key from a selected object in a given array list and set it to the state? You can find a sandbox example at this link: https://codesandbox.io/s/tags-material-demo-forked-ffuvg4?file=/demo.js ...

javascriptreactjsmaterial-ui

The width of table cells expands even when using the box-sizing property set to border-box

Whenever I click the View button, I want to apply padding to the cells in my table. However, this action also increases the width of the cell. Despite researching various solutions like those found in this question, this one, and this post, I still encount ...

htmlcssangular

Mysterious and never-ending loop that seems to loop endlessly and eludes my

My prototype includes a method for adding callbacks: /* * Add a callback function that is invoked on every element submitted and must return a data object. * May be used as well for transmitting static data. * * The callback function is supposed to e ...

javascriptjqueryrecursionclosuresinfinite-loop

Having trouble constructing a multi-dimensional array using jQuery in Laravel 4?

My order form includes fields such as client_id and payment_method, but it also features order_items like item1 (price=12, prod_id=1, quantity=3) and item2 (price=12, prod_id=1, quantity=3). I need to submit this form to a Laravel 4 API that expects the fo ...

jqueryarraysajaxlaravel-4

Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works pe ...

htmlcssreactjs

The success callback in JQuery Ajax does not function properly when constructing an array of Ajax calls

I am facing a challenge in building an array of custom objects by resolving promises from an array created based on another array. Consider having an array of letters = ['a', 'b', 'c']. I then map this array to make Ajax call ...

javascriptjqueryangularjsajaxpromise

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

When using Ajax to call a server-side method, I encountered an error message: {"Message":"Invalid web service call, missing value for parameter: \u0027name\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(O ...

javascriptc#jqueryhtmlajax

Steps for disabling a spinner directive in AngularJS for particular $http calls

This specific directive is designed to automatically toggle a loading icon on or off whenever there are $http requests happening. Here's the code snippet: angular.module('directive.loading', []) .directive('loading', [& ...

jqueryangularjs

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

The type 'RefObject<HTMLDivElement>' cannot be matched with type 'RefObject<HTMLInputElement>' in this context

Encountered an error message: Issue with assigning types: Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement&g ...

javascriptreactjstypescriptmaterial-uilodash

Using jQuery to access specific elements within the DOM by navigating through the document structure

I'm currently facing a challenge with using jquery's parents/siblings functions to locate specific input elements. Despite my efforts, I can't seem to get it right. Here is the HTML structure I am working with: <div id="ExtrasOptions"&g ...

jqueryhtmlparent-child

Unable to add elements using .append after clearing the select options with .empty()

I have been attempting to incorporate options dynamically, similar to the example provided here:https://github.com/google/google-apps-script-samples/tree/master/simple_tasks Even though I am using almost identical code, I keep encountering an error every ...

jquerygoogle-apps-script

Reconfigure a portion of a string using Vue's dynamic replacement feature

Currently tackling a problem. In my possession is a string that essentially consists of HTML code: let htmlTitle = "<a href="/news/sky-sport-hd-in-italia-dal-18-novembr">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-g ...

javascriptvue.js

Passing a function into the compile method in AngularJS: A comprehensive guide

I have created a directive called pagedownAdmin with some functionality to enhance the page editor: app.directive('pagedownAdmin', ['$compile', '$timeout', function ($compile, $timeout) { // Directive logic here... }]); ...

javascriptangularjsangularjs-directive

I am encountering TypeError issues while attempting to mock/test Vuex store modules

I'm currently in the process of learning how to effectively test components and JavaScript code, but I have hit a roadblock with Vuex modules. Below is the code snippet for the test: import { shallowMount } from '@vue/test-utils' import Wor ...

javascriptunit-testingvue.jsvuex

Creating separate files for establishing DB connection and writing Node.js queries is a recommended practice for organization

Having an issue with connecting dbconnection.js and demo_api_select.js. When trying to declare a variable in demo_api_select.js, I am encountering errors like this: Error Notification Please assist me in resolving this problem. dbconnection.js: var ...

javascriptmysqlsqljsonnode.js

What Causes the Undefined Value of "this" in Vue 3 Functions?

Here is a basic example of a component in Vue 3: <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'Test', setup(){ return{ one, two } } }) function one(){ console. ...

javascriptvue.jsvuejs3

What is the best way to continuously execute the 'onclick' function using AJAX inside a specific ID?

My challenge involves implementing a new AJAX upload feature to insert a data element from the onClick event in multiple rows. The issue I am facing is that it works fine for the first row, but when I add subsequent rows, the function no longer works upon ...

javascriptjqueryhtml