Use an input field in iframe as trigger for a Jquery event

Question

Through this great forum I have managed to find a solution for expanding an iframe with a click through HTML and Jquery.

But it does not solve my problem completely. Where I am now I manage to expand the iframe using a text, but I want to use the input fields in the iframe as the trigger for the function. I found this thread on how to use the iframe window itself as a trigger and it seems to use this plugin (iFrame Tracker): https://github.com/vincepare/iframeTracker-jquery

Sadly, this does not seem to work on mobile or other touch devices. Therefore, a click on the input field would be the optimal solution.

This is where I am now with a simple text that expands the height of the iframe when clicked:

HTML:

<iframe class="frame" iframe id="bestillframe" 
src="iframe source goes here" 
height="200px" width="200px"></iframe>   
<div id=kilden>
Click here to enlarge the iframe
</div>

Javascript:

$(function(){
    $('#kilden').click(function(){
    $('#bestillframe').animate({'height':'300'})  
    })
});

Fiddle with iframe link and mentioned input fields. http://jsfiddle.net/b6qfJ/51/

Does anyone know how I can get this to work with a click on the input field?

Answer 1

I reread the question and realized that your objective is different than what I initially thought.

1. Just wrap the iframe in a block element and

2. make sure that the first thing the user clicks is the block element containing the iframe and not the iframe itself by making it unclickable with pointer-events:none.

3. Once the iframe has successfully enlarged, remove the click handler and enable the iframe to be clickable with pointer-events:auto.

4. Also, it helps to keep container and iframe together by using position: relative on the container and position:absolute on the iframe.

I'm well aware that you wanted the actual inputs to be event.target but besides the fact that it's impractical, the fact that at a height of 200px the user doesn't even see any inputs in the first place.

Demo

$(function() {
  $('section').on('click', expand);
});

function expand(e) {
  $('#iframe').animate({
    'height': '300'
  }).css('pointer-events', 'auto');
  $('section').off('click', expand);
}

section {
  position: relative;
  height: 200px;
  width: 200px;
  padding: 0;
  outline: 1px dashed red
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <iframe id="iframe" src="iframe source goes here" height="200" width="200"></iframe>
</section>

Answer 2

Thanks to the great help of @zer00ne I managed to work this out. The only issue was that the above section seemed to scale along with the iframe automatic without proper formatting. This lead to an issue where all elements below the iframe would be overlapped and not moved accordingly downwards. The solution was to give the section an ID and add another .animate function in the expand function so that they both would be triggered at the same time. Not sure if this is the correct way, but it works. And the solution would then be

Solution

Javascript

$(function() {
  $('section').on('click', expand);
});

function expand(e) {
  $('#ramme').animate({
    'height': '300'
  })
   $('#iframe').animate({
    'height': '300'
  }).css('pointer-events', 'auto');
  $('section').off('click', expand);
}

HTML

<section id=ramme>
  <iframe id="iframe" src="iframe source goes here" height="200" 
width="900" scrolling="no";></iframe>
</section>

CSS

section {
  position: relative;
  height: 200px;
  width:600px;
  padding: 0;
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

DEMO From fiddle: http://jsfiddle.net/b6qfJ/92/

This is a great forum. Thanks!