I am loading an iFrame on a page :
<div style="width: 800px; height: 500px; overflow: hidden">
<iframe src="https://mypage.com" width="900px" style="position: relative; left: -6%; top: -8%"></iframe>
when the iframe loads it contains :
<div id="overlap-root" style="position: absolute; z-index: 150; top: 0px; left: 0px;"></div>
But there wont be anything inside of this div , but depending on the user interaction a popup dialogue can appear and this div can load some classes like:
<div data-id="SSSearch" style="position: relative; z-index: 35;">
<div class="_dialog-nonmodal ui-draggable" style="width: 750px; z-index: 110; left: -46px; top: 49px;">
<div class="_dialog-error">
Q: Is there any way to detect the load of those classes ? i am trying to change the height of the iframe when the popup dialogue appears, and revert back to normal size when the popup disappears.
Related
I am frustrated. Really frustrated fighting the issue of background scrolling when a modal is open on mobile.
Scenario
I open a modal on mobile.
Add a .noScroll class to the body in order to prevent background scrolling. Alas, the body in the background scrolls when a modal is open. Trying to tap/move slowly on the modal sometimes starts the scrolling in the modal, which is the desired result.
I need the body to stay in position, so no positon: fixed or absolute
I have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
I have tried setting top: document.body.getBoundingClientRect().top+"px" i.e. resolving the issue via JS
CODE:
HTML
<div id="galleryItem" class="modal_menu_item flexCenterX flexCenterY" style="display: flex;">
<div class="modal_overlay"></div>
<div class="modal_food_inner flexParent flexColumn">
<span class="modal_close"><i class="fa fa-times" aria-hidden="true"></i></span>
<div class="modal_food_info flexParent flexColumn flexCenterY">
<h2 class="modal_food_info_title noMargin noPadding text-center">Keema Samosa</h2>
<hr>
<p class="modal_food_info_body noMargin">Crisp pastry filled with minced lamb, potato and peas served with homemade chutneys</p>
<hr class="optional" style="display: block;">
<span class="menu_food_item_priceContainer text-muted flexOne noPadding">€5.50</span></div>
<img src="/pictures/55/vzrw5siuzogdeul8yaznqq4f.jpg" class="img-responsive modal_food_poster"></div>
</div>
CSS
body.noScroll {overflow: hidden;}
.modal_menu_item {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 9999999;
-webkit-overflow-scrolling: touch;
}
.modal_overlay {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100%;
height: calc(100vh + 80px);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modal_food_inner {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: 0 auto;
}
This issue seems a common one for mobiles. Though, at this point I'm somewhere between misery and desperation.
Help a programmer – Save a life
When you adding this class .noScroll try to add in css when you adding this class when open modal
body.noScroll {
overflow:hidden;
}
I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code
So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});
I'm using iframe tags in my index.html. Below is the code
<iframe src="header.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 0px;"></iframe>
<iframe src="menu.html" height="500px" scrolling="no" width="250px"
style="position: absolute; top: 103px;"></iframe>
<iframe src="body.html" height="500px" scrolling="no" width="1083px"
style="position: absolute; top: 103px; left: 260px"></iframe>
<iframe src="footer.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 605px;"></iframe>
My Login div is in menu.html and logout is in footer.html. I want to show logout when login div is hidden(after login) and when i click Logout i want my logout link to be hidden and login div to be displayed. Since both of them are in differnet html's so i want to know how we can do this simultaneaously. Right now this functionality is working but i need to refresh the page.
Also window.location.reload is not useful.
Is there any easier way to perform hide/show operations in multiple html's concurrently.
If you really must keep this content in separate files and are intent on making separate calls for each, try this:
<div id="header" style="height: 100px; width 1335px; overflow: hidden; position: absolute; top: 0px;"></div>
<div id="menu" style="height: 500px; width 250px; overflow: hidden; position: absolute; top: 103px;"></div>
<div id="body" style="height: 500px; width: 1083; overflow: hidden; position: absolute; top: 103px; left: 260px;"></div>
<div id="footer" style="height: 100px; weight:1335px; overflow: hidden; position: absolute; top: 605px;"></div>
And some jQuery like so:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#menu").load("menu.html");
$("#body").load("body.html");
$("#footer").load("footer.html");
});
</script>
Now that you have all your markup in the same window, use jQuery to do whatever you want with it.
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}