Change styles properties on iframe click

Question

I have this iframe:

<iframe src="http://www.example.org" frameborder="0" style="top: -100; left: -250; width: 400; height: 590; border: 0; border:none;" scrolling="no" sandbox="allow-controls"></iframe>

I want it automatically changes to:

<iframe src="http://www.example.org" frameborder="0" style="top: -200; left: -650; width: 950; height: 800; border: 0; border:none;" scrolling="no" sandbox="allow-controls"></iframe>

when clicked. Precisely and basically I want to change top, left, width and height properties.

Is it possible? If so, how?

@niceman you seem to be a nice man. Could you prove it by showing me how? — DingDangBang, May 27 '17 at 22:05
you just register click event like here : https://stackoverflow.com/questions/15080222/add-click-event-to-iframe , the click event should change css using either jquery's `.css` (jquery is a library for javascript) or use `.style` attribute like in here : https://www.w3schools.com/js/js_htmldom_css.asp — niceman, May 27 '17 at 22:08
Possible duplicate of [change css style on click with jquery](https://stackoverflow.com/questions/6348457/change-css-style-on-click-with-jquery) — Soviut, May 27 '17 at 22:10

Abdullah Seba · Answer 1 · 2017-05-27T22:12:48.100

0

Just Google "How to change styles in jquery"

Tip: it uses .click() and .css()

http://api.jquery.com/css/

https://api.jquery.com/click/

jquery change style of a div on click

edited May 27 '17 at 22:12

answered May 27 '17 at 22:08

Abdullah Seba

354
2
6
16

This is a pretty incomplete question. At least provide a sample snippet or working code example. Don't just link off-site since those links may break eventually and the answer won't be useful anymore. – Soviut May 27 '17 at 22:09
@Soviut You have a point but its not a good question really. Dont see it been popular. – Abdullah Seba May 27 '17 at 22:13

score 0 · Answer 2 · answered May 27 '17 at 22:54

Click events are not supported by iframes. You will have to use some "magic" to make it happen. Basically, you need to wrap a container that can handle events to make it work. There is actually a jQuery plugin that might help you. It is located here:

https://github.com/vincepare/iframeTracker-jquery

Here is a snippet of code changing just the width of your iframe using this plugin....hope it helps.

<div class="iframetrack" id="iframe_red_1">
   <iframe id="theFrame" src="http://www.example.org" style="border: 0; 
      border:none; top: 100px; left: 100px; width: 500px; height: 250px;" 
      frameborder="0" scrolling="no" sandbox="allow-controls" >
   </iframe>
</div>

@section Scripts
{
<script>

    $(document).ready(function ($) {

        $('.iframetrack iframe').iframeTracker({

            blurCallback: function () {
                $('#theFrame').css('width', '200px');
            },
            overCallback: function (element) {
                this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id
            },
            outCallback: function (element) {
                this._overId = null; // Reset hover iframe wrapper id
            },
            _overId: null
        });

    });

}

Change styles properties on iframe click

2 Answers2