• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Dynamic Banner Display Based on Screen Orientation

Explorer ,
Jun 16, 2024 Jun 16, 2024

Copy link to clipboard

Copied

Hello everyone! I have two banners, one 1920x1080 and the other 1080x1920. I need the 1920x1080 banner to be displayed on the website when the page is in landscape orientation, and the 1080x1920 banner to be displayed when the page is in portrait orientation. How can I combine these two .js scripts into a single HTML file to ensure everything displays and works correctly?

TOPICS
Code , How to , Other

Views

206

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 17, 2024 Jun 17, 2024

OK. Great.

 

If you have control over the HTML template in which your banners will be displayed, I think you can just write an if statement in JavaScript to check if window.innerWidth > window.innerHeight and if it's true then the orientation is landscape and if it's false then it is portrait. There other ways of checking orientation if you prefer too.

 

After doing this check, if you're using an iframe to display the banner, change this iframe's source accordingly.

 

I'm not sure if this is wha

...

Votes

Translate

Translate
Community Expert ,
Jun 16, 2024 Jun 16, 2024

Copy link to clipboard

Copied

Hi.

 

Do you have one different FLA for each resolution/orientation?

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 17, 2024 Jun 17, 2024

Copy link to clipboard

Copied

Hello! 

Yes, i have 2 FLA

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2024 Jun 17, 2024

Copy link to clipboard

Copied

OK. Great.

 

If you have control over the HTML template in which your banners will be displayed, I think you can just write an if statement in JavaScript to check if window.innerWidth > window.innerHeight and if it's true then the orientation is landscape and if it's false then it is portrait. There other ways of checking orientation if you prefer too.

 

After doing this check, if you're using an iframe to display the banner, change this iframe's source accordingly.

 

I'm not sure if this is what you want though.

 

Please let us know.

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 18, 2024 Jun 18, 2024

Copy link to clipboard

Copied

Yes, thank you, I just made a function before the start of animation 

function init() {
    var scriptSrc;
    var isLandscape = window.innerWidth > window.innerHeight;
    if (isLandscape) {
        scriptsrc='16x9.js';
    } else {
        scriptsrc='9x16.js';
    }
    loadScript(scriptSrc, function() { startAnimation(isLandscape); });
}



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 18, 2024 Jun 18, 2024

Copy link to clipboard

Copied

LATEST

Great.

 

You're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines