CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Henrique Barcelos
Henrique Barcelos

Reputation: 491

How to style an iframe after click

I want to style to box that my iframe will load, adding box-shadow and a height, but I don't want that both of them are styled before the user clicks the link, because there will be a blank box with placing a high height.

So how do I style the iframe after the user clicks the button/link?

<a href="https://google.com" onclick="document.getElementById('load-chat');" target="load-chat">Load the page</a>
	
<iframe style="box-shadow:0px 3px 15px #e4e4e4; border-radius: 10px;" frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200" height="400"/>

Upvotes: 0

Views: 134

Answers (4)

Henrique Barcelos
Henrique Barcelos

Reputation: 491

I've managed to do the way I wanted (all inline):

.mywidget {
  width: 250px
}
<div class="mywidget">
  <a href="https://google.com" onclick="document.getElementById('load-chat');
document.getElementById('load-chat').height = '400px';
document.getElementById('load-chat').style.boxShadow = '0px 3px 15px #e4e4e4';
document.getElementById('load-chat').style.borderRadius = '15px';" target="load-chat">Load my iframe
  </a>

  <iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200px" />

</div>

Upvotes: 0

Austin Jones
Austin Jones

Reputation: 709

Do you mean to have the iFrame not visible on page then when the user clicks the link the iFrame is visible? If so below is method on how to do so. Note, IE9 doesn't support this.

.iframe {width:0px; height:0px;display:none;}
.styled-iframe {box-shadow:0px 3px 15px #e4e4e4; border-radius: 10px; width:200px; height:200px;display:block}
.hide {display:none;}
<script>
function styleIframe() {
var open = document.getElementById("load-chat"); 
open.classList.add("styled-iframe");
var hide = document.getElementById("button");
hide.classList.add("hide");
}
</script> 

<a href="https://google.com" onclick="document.getElementById(&apos;load-chat&apos;);styleIframe();" target="load-chat" id="button" >Load the page</a>
	
<iframe frameborder="0" id="load-chat" class="iframe" name="load-chat" scrolling="0" />

Upvotes: 0

Ali Soltani
Ali Soltani

Reputation: 9927

You can do it like this:

HTML

<a id="lnkLoad" href="https://google.com" target="load-chat">Load the page</a>    

<iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200" height="200" />

JS

$('#lnkLoad').click(function() {
  $('#load-chat').attr("style", "box-shadow:0px 3px 15px #e4e4e4; border-radius: height:400px;");
});

Online Demo (jsFiddle)

Upvotes: 0

SATYA PRAKASH NANDY
SATYA PRAKASH NANDY

Reputation: 157

<html>
<head>
    <script>
        function styleMyiFrame() 
        {
            document.getElementById("load-chat").style.boxShadow = "0px 3px 15px #e4e4e4";
            document.getElementById("load-chat").height = "500px";
            document.getElementById("load-chat").width = "500px";
        }
</script>
</head>
<body>
    <a href="https://google.com" onclick="styleMyiFrame();" target="load-chat" id="my">Load the page</a>

    <iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0"/>
</body>

Upvotes: 1

Related Questions