Iframe chat with automatic height

Navigation
0

I'm developing a chat in php, it's working perfectly, however, I'm having trouble getting the iframe to the main site where the client will have access, in the code it opens the iframe, but if I set a height (height) fixed or 100% for example, I can not click on links or images that are below this iframe.

The code is this: 

 <iframe id="iframe1" style="z-index:999999; background:none; right:0; width:400px; bottom:0; margin: 0;  position:fixed; padding: 0;" height=""  border="0" scrolling="no"  frameborder='0' src='link'></iframe>

eg it uses about 60px without the click, but when clicked it opens about 500px, how can I make it open a proportional height to closed or open?

    
asked by anonymous 17.07.2015 / 00:52

1 answer

1

I do not know if this is what you ask for, but I made it to be height: 60px; normal and then clicked height: 500px;

First I created an iframe: link and inside it I created a button (and a script just to know that it was really clicked). 

<button id="click">Clique aqui!</button>

document.getElementById("click").onclick = function(){
    document.body.innerHTML = "Clicado!";
};

Then I used this iframe: link and a script for when the button is clicked, make the iframe larger 

<iframe id="chat" name="chat" sandbox="allow-scripts allow-same-origin" frameborder="0" src="//fiddle.jshell.net/peLr1adu/2/show/light"></iframe>

#chat {
  height: 60px;
  border: 1px solid black;
}
#chat.big {
  height: 500px;
}

window.frames["chat"].document.getElementById("click").onclick = function(){
  document.getElementById("chat").className = "big";
};

The sandbox attributes in the iframe are not accurate if the chat is in the same domain as the site.

    
17.07.2015 / 02:18
ASP with SQL bringing different query result Do not let connected reconnect, PHP