Allow elements behind iframe to be clickable - javascript

I'm trying to embed a third party chatbot (via iframe) into my web application (ASP.NET MVC). As with any other chatbot, in this case as well, a button is displayed to initiate a chat (RHS below of the screen) and on click of the button, the the chatbot expands to take up the the entire RHS of the webapp (overlapping the buttons, which were present on the parent window). Following is the snippet of code:
<div id="chatBot">
<iframe frameborder="0" id="chatwindow" src="#System.Web.Configuration.WebConfigurationManager.AppSettings["ChatBotUrl"]"></iframe>
</div>
CSS:
#chatwindow {
height: 100vh;
width: 100%;
right: 15px;
}
#chatBot {
position: fixed;
right: 0;
bottom: 0;
height: 100vh;
width: 390px;
z-index: 11111;
}
Now the issue which I'm facing is that, as the chatbot div is taking up entire RHS real estate, any buttons or links behind the div is not clickable. I did try the following options:
Setting pointer-event: none
Subscribing to click event with in the iframe and manipulating attributes (this is kind of hacky way, but this does not work in my case due to cross domain restriction).
Using windows blur, to deduce a click (but this doesn't as the way to close the chatbot is via a button, embedded within the iframe).
Please do let me know, how to go about resolving the same.

Your chatbot div is taking up entire RHS because you tell it to do so in css by setting height: 100vh;. And combining that with position: fixed; and the width: 390px; means that the RHS for 390 pixels from your window is used by your <div id="chatBot".... Also using z-index: 11111; you are sure to have it overlay over everything on that page.
So this has nothing to do with your iframe. Is just pure css. But I imagine the problem is that you want your chat window to get to full width when is opened. Than you should build a javascript solution (or if you use some framework that allows you to conditionally render a class use that) to dynamically set the width to 100% or 100vh only when the chat is opened, and remove that when the chat is closed.
I also recomand you to use z-index only when you really need it, and try to not use such big numbers because is hard to maintain code like this.
Edit:
You can do that by creating a greater z-index context. But then your buttons will display over your chat iframe.
You can try creating the same z-index context for your chatBot div and also for the container of the buttons, that give the iframe display relative and z-index: 1
But it would be easier to work with contexts if you don't use such big numbers for z-index. (this is why I said you should use smaller z-index). Anyway this can work too. It doesn't matter that much. Is just not a very good practice.
Continuing: please note that if you have an element positioned relative, absolute or fixed with a z-index that is already a context. So if you have another element with positioned but with z-index slightly greater (let's say first has z-index:1 and second has z-index:2) that second context will be grater than the first, no matter what. So if you have inside the first element (with no z-index) another element, you can give what ever z-index you want (z-index: 99999 for example)it will only have that huge index in the first context. So will display under the second element if the overlap.
Example:
.big-z-index {
position: absolute;
z-index: 9999;
background:red;
width: 100px;
height:50px
}
.small-z-index {
position: absolute;
z-index: 2;
background:blue;
width: 50px;
height:20px
}
<div style="position: absolute; z-index:1">
<div class="big-z-index"></div>
</div>
<div class="small-z-index"></div>
So if you have z-index context on containers, only if you have the same context you can position certain elements.

Related

How do you code a button that can make an iframe go full screen when clicked?

How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!
You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.
You can make it go fullscreen with JS such as in this SO answer.
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* example on JSFiddle.
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.

CSS/HTML - Floating DIV when I scroll issue

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}

Is it possible to have an auto-height div footer with scrollable content area above?

I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}
You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.
Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.
If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.
Check this out to see what I mean:
http://jsfiddle.net/6gprU/3/
Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.
As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.
Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.
http://caniuse.com/calc

Make iframe expand/collapse

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}

Z-index does not work as expected?

I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.

Categories