We Keep Coding

Allow elements behind iframe to be clickable

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.

How to create a centered popup of an element on another page

I come from a C# background so bear with me I already know the way I'm going about this isn't ideal:
But I need to do this:
Create a centered popup that scrolls with the page when the user clicks on some text the code must be embedded JavaScript in a HTML page(s), nothing server side (other than maybe css).
-preferably text links to popups need to be reusable I don't want to embed a bunch of code each for each link.
-I've looked at a lot of "pop-up" tutorials/exmaples but since I need embedded client side javascript it limits what works.
The result I would like to have a webpage with premade popups that I can reference from other webpages like OpenPopup(webpage.getElement(popupNumber12)) or have arrays with popup titles, descriptions that I can pass though.

Sounds like you're looking have to a modal rather than a popover since you don't want it to close after interacting with the page. I would just have a modal open with an onClick event and then describe its position as:
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Assuming the width of the modal you want to display is 300px.
If you're working with SCSS
$width = 300px
$height = 300px
.modal {
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width)
top: calc(50% - $height)
}

IOS scrolling issues (elastic scroll and bounce)

I have developed a site that has a fixed footer and header.
The content is also fixed (but that is only because the footer and header can be hidden, but I won't be showing that in my example).
The issue I have is with iPhones and iPads. They are two issues I have had.
Once is it allowing me to drag the header and footer past the confines of the body/html showing whitespace (no idea why they do this) and the other issue is it stopping scrolling as soon as I let go with my finger.
The latter seems to be solvable by doing this:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Although I have read that this is not a supported CSS attribute, it does seem to do the trick.
The second issue I have tried to solve with JavaScript by making the header and footer non-scrollable, but it doesn't seem to work properly.
The JavaScript is simple enough:
function disableElasticScroll(e) {
e.preventDefault();
};
which I can put on an element like this:
ontouchmove="disableElasticScroll(event)"
This does not have the desired effect.
I have set up a codepen to highlight the issue. If you have an ipad, have a look. First drag the content inside the .content area. That works nicely (thanks the the -webkit solution). If you then try and drag the .header or .footer you will notice that you can't drag it and no scrolling is happening (again this is good and is due to the JavaScript), but if you try to then scroll the .content again, you will notice that it drags the entire page and does the elastic scroll rubbish.
https://codepen.io/r3plica/pen/LzRQaZ

There is a way to do this so that you don't have to fix the scrolling container. Try positioning your header and footer with a fixed position then padding the body of your page by the height of those elements. This way your page will scroll normally without any hacks. It might look something like this:
body {
padding-top: 60px;
padding-bottom: 40px;
}
header.global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
footer.global {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}

html, body {
position: fixed;
}
try setting this css property and see if it works.
It solves the elastic scrolling effect on the body.
Sample page
Output to test on ipad

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.

How to display an image fullscreen on page load

I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.

For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.

Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders