I am trying to make a scenario where if someone clicks on the iframe, so it will open a new window to check the same URL on the web browser tab. But the scroll and other mouse events on the iframe will not affect it.
I tried different approaches but nothing worked
Approach 1: Tried to get the onClick event of the iframe itself, but the issue is of cross-origin persist
Approach 2: Tried to provide the onClick event to the parent element of iframe, but as pointer-events of the iframe are enabled it won't let the parent onClick to work.
Approach 3: Tried to make an overlay of anchor tag, above the iframe. It did work but it stops the iframe scroll.
Here is my code:
<div>
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
</div>
iframe {
width: 100%;
height: 100vh;
pointer-events: none;
}
a {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
Fiddle: here
Is it possible to achieve this scenario with the cross-origin URL?
Your code does not work because you have pointer-events: none; set to it. You can do like this that you click the "button overlay" and redirect the user with javascript, once it is clicked it "removes" the button overlay.
In my case I have set the background to be red just to make it clear, and I don't remove the button I just hide it. You can adjust to your use case. Also note that this script only allows for one of this iframes and buttons. If you have more the script have to be modified to loop through and add eventListeners to button and to look at its parent to add the class on the container (or if you just remove the button)
const redirectAction = document.querySelector('.js-open-url')
redirectAction.addEventListener('click', function() {
window.open(
redirectAction.dataset.href,
'_blank'
)
document.querySelector('.container').classList.add('container--is-open')
})
.container {
position: relative;
}
iframe {
width: 100%;
height: 100vh;
}
.button {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: red;
}
.container--is-open .button {
display: none;
}
<div class="container">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
<button class="button js-open-url" data-href="https://fr.wikipedia.org/wiki/Main_Page"></button>
</div>
Related
I have this strange bug
I have an div #page that I set to overflow :scroll, and i have the body with overflow:hidden because i want to prevent the pull down, and make the site feel like an "app"
html,body {
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
#page {
overflow: scroll;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
pseudo page
<div #page>
<div .image>
<div .image>
<div .text>
<div .image>
<div .text>
</div>
inside the #page I have divs with images and text like in a long one-pager.
for some strange reason due to knows which conflict, when I scroll the #page it works well until I hover an image , not a text, contained in the page and in that case the scroll-wheel of my mouse wont scroll anymore. almost like the images overwrite the scroll.
I can't use pointer-events:none because of other reasons
add in your code
window.onscroll = () => {
window.scrollTo(0,0);
};
blocked the scroll
for reset:
window.onscroll = ()=>{
}
The background image is an image of an office. The background image will have a few <a> tags where the person can click. For example: there is an <a> tag on a computer that's on the desk. Taking this example, I want to do the following:
Hovering on the <a> tag that is over the computer, will load in a picture of the same office, however, the computer has been outlined with a white line in photoshop (Lets say: img/bureau2). Indicating that it is interactable. Hovering away from this will return it to the original picture which you see when you enter site (img/bureau1)
You can also click on the <a> tag. This will open up another image (img/bureau3).
So far I managed to get the change on hover and click to work. Issue is, hovering away from the <a> tag will cancle the click.
This is what I have so far, how can I tackle this issue?
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'img/bureau2.png');
},
function() {
$("#backgroundImage").attr('src', 'img/bureau.png');
});
$(".computerHover").click(function() {
$("#backgroundImage").attr('src', 'img/bureau3.png');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<img id="backgroundImage" src="img/bureau.png">
<div class="computer">
<a class="computerHover"></a>
</div>
</div>
</div>
Seems to me, what you are trying to do, is an image map. But for the sake of your question, I will focus on one particular link.
The reason the click generated image disappears when you move the mouse, is because it is still bound to the previous hover event. The hover method is a shortcut for mouseenter and mouseleave. In order to circumvent that, you need to unbind that event handler.
EDIT:
I reworked my answer to more closely resemble the code in your question. In order to "reset" the image, I would suggest using a link that the user can click to make it less confusing for them.
function switchImage() {
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer');
},
function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
}
// attach the hover events when page loads
switchImage();
$(".computerHover").on("click", function() {
$(this).off("mouseenter mouseleave");
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background');
});
// reattach hover handlers and set image back to default
$(".reset").on("click", function() {
switchImage();
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<a class="reset">Start Over</a>
<img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office">
<div class="computer">
<a class="computerHover">Computer</a>
</div>
</div>
</div>
To do what you want you'll need to keep some sort of state that indicates that the user clicked instead of just hover. In the click handler you could add a class or data-* to #backgroundImage element that you later check when you un-hover.
Example codesanbox.
I have a few elements on my site in which there is content that only appears when you hover on the element. A perfect example would be the Instagram feed grid. I'm pulling in the last 8 images from an Instagram account using their API and displaying them in a grid with flexbox. When you :hover over one of the images with a mouse, a semi-transparent black overlay fades in, containing the caption of the Instagram post.
On desktop you are able to click anywhere on the image/hovered caption overlay as they are both wrapped in an <a> element and doing so takes you to the post on Instagram's website. This works perfectly on desktop, but on touch devices does not.
Because you can't :hover on touch devices, I decided to implement some javascript on the touchstart event that uses e.preventDefault() to stop the link from being clicked when you tap the Instagram image and instead adds the CSS opacity: 1 and visibility: visible to the overlay element (which is what happens when you :hover on the element). Because the overlay element is then "on top" of the image when it's made visible, the link is clickable because the touchstart event is only listened for on the image.
This all works great and means that I can tap once on the image which fades in the overlay and doesn't take me to the image on Instagram, and I can then click for the second time on the overlay, taking me to the image on Instagram.
The problem
Because I am using e.preventDefault() in the touchstart event, if you touch the image and then start dragging your finger to scroll, the page doesn't scroll at all which results in a bad user experience.
So...
How can I only preventDefault() on a single touch event, or how can I prevent the link from being clicked on the first touch of the element but not on the second whilst still allowing the user to scroll/drag the page?
Slightly simplified version of my code
function toggleHoveredStateOn(e) {
e.preventDefault();
let hoverElem = this.querySelector('.js-touch-hover');
// remove all 'visible' classes from other "hovered" items first
document.querySelectorAll('.js-touch-trigger').forEach(touchTrigger => {
let hoverElem = touchTrigger.querySelector('.js-touch-hover');
Object.assign(hoverElem.style, {
visibility: 'hidden',
opacity: '0',
pointerEvents: 'none'
});
});
// add visible to the touched element's hover element
Object.assign(hoverElem.style, {
visibility: 'visible',
opacity: '1',
pointerEvents: 'all'
});
}
function initMobileTouchFunctionality() {
let touchTriggers = [...document.querySelectorAll('.js-touch-trigger')];
touchTriggers.forEach(touchTrigger => {
touchTrigger.addEventListener('touchstart', toggleHoveredStateOn, false);
touchTrigger.querySelector('.js-touch-hover').addEventListener('touchstart', function(e) {
e.stopPropagation();
}, false);
});
}
initMobileTouchFunctionality();
.flex-grid__item {
position: relative;
height: 263px;
border: 1px solid #FFF;
&:hover {
.flex-grid--social__hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.flex-grid--social__hover {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
transition: opacity 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
overflow: hidden;
pointer-events: none;
cursor: pointer;
}
<div class="flex-grid__item js-touch-trigger">
<a href="<?php // link to instagram. php code gets this ?>">
<img class="" src="<?php // instagram image. php code gets this ?>"/>
<div class="flex-grid--social__hover js-touch-hover">
<p><?php // instagram caption. php gets this ?></p>
</div>
</a>
</div>
You can decide whether to e.preventDefault or not using the e.target to see if the user tapped the image or the overlay.
You can read more at https://developer.mozilla.org/en-US/docs/Web/API/Event/target
I would like to load an ifram and then click on a button inside this iframe (the button is the on with a little umbrella on the left just above the forecats for the next 14 days)
So far this is what I was able to do, but it's not working:
<style>
#my-div {
width: 80%;
height: 1500px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -480px;
left: -100px;
width: 1280px;
height: 1400px;
}
</style>
<div id="my-div">
<iframe src="http://www.meteofrance.com/previsions-meteo-france/paris-01e-arrondissement/75001" id="my-iframe"
scrolling="no"></iframe>
</div>
<script>
var iframe = document.getElementById("my-iframe");
iframe.addEventListener("load", function () {
console.log(iframe)
var elmnt = iframe.contentWindow.document.getElementById("mf-accordion-bandeau-btn-unfold");
console.log(elmnt)
elmnt.click();
});
</script>
Accessing the contents of an iframe with JavaScript is only possible in certain cases. The origin and protocol must be the same and also there can't be any headers on the child preventing the main page to access it.
This is pure for security reasons, as otherwise, websites would just be able to load 3rd party sites and steal personal data or act as the user.
I'd like to link an iframe to a button so I can open the below iframe (iframe/ model window) from clicking on the "keep me posted" button on my site: http://www.aphealthnetwork.com.
iframe code:
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
code for the button:
<div class="buttons">Keep Me Posted! or learn more</div>
I've been searching and searching and can't find the answer anywhere.
Not sure what the end goal is exactly, but if you want to show that iframe in a modal when you click on the button, you could put the iframe in an element for the modal, hide that by default, then show the modal when you click the button. I also added a link to close the model. You might want to adjust the height/width of the modal to fit your needs, too. Or let me know what the end goal is and I can help out with that.
$('.buttons a').on('click',function(e) {
if ($(window).width() > 820) {
e.preventDefault();
$('#modal').show();
}
});
$('.close').on('click',function(e) {
e.preventDefault();
$('#modal').hide();
})
#modal {
display: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
iframe {
position: absolute;
top: 1em; left: 50%;
transform: translate(-50%,0);
}
.close {
position: absolute;
top: 1em; right: 1em;
background: black;
color: white;
padding: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">Keep Me Posted! or learn more</div>
<div id="modal">
<a class="close" href="#">close</a>
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>
Just use <input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> or something similar instead... then you could make an output Element <iframe id='output'></iframe> and do this, using jQuery:
$(function(){
$('#kmp').click(function(){
$('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}
}
You also need to make sure that src is a full document as well. I see that it's not. I threw in that .css('display', 'block') in case you want to start your CSS with #output{display:none;}.
What do you exactly want?
For responsive modal look here
If you want to display the modal content a similar question is here
If you want to only display the iframe use jquery.
Or look at Display website in modal