Does anyone know what iFrame code is needed for the iPad to reload the website after switching from landscape mode to portrait mode?
Kind Regards
Maybe you want to describe your issue in more detail???
-So you are using an iFrame? → Where is your iFrame-Code? Or do you just load the URL into an iFrame? → If so, i think this will not work.
-How exactly do you switch from landscape to portrait?
-Which Wix-Editor do you sue?
-How do your setup look like?
You provide absolutely no description of your issue. It’s like you ar trying to ask, but instead all you do is just giving a statement.
→ The bike is yellow. —> What? → And where is the story?
Hi, sorry for my incorrectness.
I originally wanted to integrate the CSS code “mix blend-mode” into WixStudio (according to WixStudio possible:; after numerous, unsuccessful attempts I then came across the iFrame function. I tried various codes - also without success. Whether iFrame or code - I don’t really care.
The change from landscape to portrait was primarily related to the iPad. I have generated a replacement solution with the animations in WixStudio (see website and screenshot). As soon as I switch to portrait mode on the iPad, the white term “Cultural Heritage” disappears 300 pixels earlier (there is no direct, obvious transition). I suspect it’s due to my settings (?); that’s why I came up with a possible automatic reload; a manual reload corrects the problem.
Maybe you can show me how to integrate mix blend mode; of course I can pay you for it. Many thanks for your efforts
Ja leider hast du immer noch keinen CODE gezeigt wo man hätte drauf aufbauen können.
Ok, let’s try it with an example.
I do not know if Wix-Studio already provides direct implementation of CSS, but as you already tried it by using the HTML-Component, this would be your alternative to integrate CSS. The disatvantage of the iFrame will be it’s responsiveness-limitations, at least inside the ordinary Wix-Editor.
But first back to your initial question…
Does anyone know what iFrame code is needed for the iPad to reload the website after switching from landscape mode to portrait mode?
Here a little example related to the mix-blend-mode inside an iFrame…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.blend-mode-container {
position: relative;
width: 800px;
height: 800px;
overflow: hidden;
margin-bottom: 20px;
}
.overlay-text {
font-size: 2em;
font-weight: bold;
color: #3498db;
}
.background-image {
width: 100%;
height: 100%;
background-image: url('https://static.wixstatic.com/media/6cf3c9_47d1c18f93c14b1c9f6369f54cdf9916~mv2.jpg/v1/fill/w_2075,h_1800,al_c,q_90,enc_auto/6cf3c9_47d1c18f93c14b1c9f6369f54cdf9916~mv2.jpg'); /* Use a random image from Unsplash */
background-size: cover;
border-radius: 10px;
overflow: hidden;
}
.toggle-button {
margin-top: 10px;
margin-right: 10px;
padding: 10px;
background-color: #3498db;
color: #fff;
cursor: pointer;
border: none;
border-radius: 5px;
}
.drop-area {
border: 2px dashed #3498db;
border-radius: 5px;
padding: 20px;
text-align: center;
font-size: 1.2em;
color: #3498db;
cursor: pointer;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body>
<div class="blend-mode-container" id="blendContainer">
<div class="background-image"></div>
<div class="overlay-text">Blending Mode</div>
</div>
<button class="toggle-button" onclick="toggleBlendMode('normal')">Normal</button>
<button class="toggle-button" onclick="toggleBlendMode('multiply')">Multiply</button>
<button class="toggle-button" onclick="toggleBlendMode('screen')">Screen</button>
<button class="toggle-button" onclick="toggleBlendMode('overlay')">Overlay</button>
<button class="toggle-button" onclick="toggleBlendMode('darken')">Darken</button>
<button class="toggle-button" onclick="toggleBlendMode('lighten')">Lighten</button>
<button class="toggle-button" onclick="toggleBlendMode('color-dodge')">Color Dodge</button>
<button class="toggle-button" onclick="toggleBlendMode('color-burn')">Color Burn</button>
<button class="toggle-button" onclick="toggleBlendMode('hard-light')">Hard Light</button>
<button class="toggle-button" onclick="toggleBlendMode('soft-light')">Soft Light</button>
<button class="toggle-button" onclick="toggleBlendMode('difference')">Difference</button>
<button class="toggle-button" onclick="toggleBlendMode('exclusion')">Exclusion</button>
<div class="drop-area" id="dropArea" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">
Drop image here or click to select
<input type="file" id="fileInput" onchange="handleFileSelect(event)">
</div>
<script>
function toggleBlendMode(mode) {
const blendContainer = document.getElementById('blendContainer');
blendContainer.style.mixBlendMode = mode;
}
function handleDragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}
function handleDrop(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
handleImage(file);
}
function handleFileSelect(event) {
const file = event.target.files[0];
handleImage(file);
}
function handleImage(file) {
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function (e) {
const newImage = new Image();
newImage.src = e.target.result;
const blendContainer = document.getElementById('blendContainer');
blendContainer.querySelector('.background-image').style.backgroundImage = `url(${e.target.result})`;
};
reader.readAsDataURL(file);
} else {
alert('Please select a valid image file.');
}
}
</script>
</body>
</html>
- Put an iFrame onto your page.
- Put the code into the iFrame.
- See the result.
This is just an example. You will have to connect your Wix-Page with the iFrame by code, to be able to establish dtatatransfer between those bothe.
However, i still do not completely understand what exactly you are trying to achieve. Maybe there are even better ways of getting a solution for you.
So you are trying to get the mix-blend-mode working on your site, but keeping the responsiveness alive.
As soon as I switch to portrait mode on the iPad, the white term “Cultural Heritage” disappears 300 pixels earlier (there is no direct, obvious transition). I suspect it’s due to my settings (?); that’s why I came up with a possible automatic reload; a manual reload corrects the problem.
There are 2 APIs you can use …
…to determine how is shown your site in which resolution and on which device.
Putting all together you surely could manage your issue.
If you need further assistance → velo-ninja@outlook.com.
Well, I do this, but this is perhaps not optimal for your use case.
I created the same preloading screen for my home page and my glorified content flipper page.
When I want to reload my glorified content flipper page, I set a local cookie and redirect back to my home page then a piece of code checks for this local cookie and does not fade the preloader out if it is set, then the same piece of code redirect back to my gloried content flipper.
I ditched iFrames for similar reasons. I now use vector image and wix.animation() works for me.
I would advise you to use px for size as less as possible and try to work with % and such.