We Keep Coding

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

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?

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!

I reread the question and realized that your objective is different than what I initially thought.
Just wrap the iframe in a block element and
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.
Once the iframe has successfully enlarged, remove the click handler and enable the iframe to be clickable with pointer-events:auto.
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>

$('body').height() changing unpredictably

My goal is to have a white div (#containMe) stretch to the full height of the document, regardless of window size or how much content I have on the page.
I put my HTML head and JQuery in a PHP document and use PHP's require_once to put that header onto each page. However, when I've got #containMe set to the document's height with Jquery, it tries to set it to the body height instead. The body's height also seems to change each time I refresh, causing #containMe's height to change unpredictably.
The document's height appears to stay consistent, but the body's height fluctuates, and #containMe is trying to stick to the body's height instead of the document's. This happens with Chrome, Android Chrome, and Firefox. I tried the following:
$('body').height($(document).height());
But it seemed to have no effect.
Here's my Jquery in my head:
<script>
$(document).ready(function () {
$("#containMe").height($(document).height());
$("#containMe").width($(document).width() - 200);
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});
</script>
(Note that the bootstrap dropdown is still working)
Here's my relevant CSS:
body
{
background: #333577 url(bg1.png);
height: 100%;
}
html
{
height: 100%;
}
#containMe
{
background: white;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
padding-top: 15px;
box-shadow: 0px 0px 25px #111111;
}
Here's the relevant HTML:
<div id="containMe" class="container-fluid">
<div class="container-fluid jumbotron text-center"><h1>Web Pofrtfolio</h1>
<h2>By Rhea Herrmann</h2></div>
And here's a link to the page where the problem is occurring.
http://www.rheaherrmann.com/other/wiki.php
If you scroll to the bottom and keep refreshing, the div's height appears to fluctuate. I'm not sure what I'm doing wrong.

If i'm getting this right i think you could do the following and everything should be as you expect it to be:
Remove #containMe's height from the CSS, don't use any height at all.
Remove .container-fluid in .jumbotron. Since you already have a .container-fluid class above you don't need another .container-fluid, and as bootstrap's documentation states: containers are not nestables: http://getbootstrap.com/css/#overview-container.
Remove the .container-fluid class next to .innards (for the same reason as above). If you need to keep the paddings as it was, you could use .col-sm-12.
Remove or comment any javascript code that modify the height of #containMe.
Please let me know if this worked for you.

$(document).ready(function () {
var windowheight = $(document).height();
var windowwidth = $(document).width() - 200;
//alert (windowheight);
$('#containMe').css('height', windowheight + 'px');
$("#containMe").css('width' ,windowwidth + 'px' );
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});
Use this in the JS

-Use 100vh instead of 100% in your css for #containMe.
-Don't nest containers with bootstrap. "Note that, due to padding and more, neither container is nestable." http://getbootstrap.com/css/#overview-container

Get rid of
height: [whatever];
In your #containMe class in the style sheet and remove it from your element style(the style attribute of the #containMe div). It has to be gone from both places.

Handling polymer elements with different heights inside <core-pages>

I have a <core-drawer-panel> and inside it is a <core-pages> element inside <core-header-panel main>.
<core-pages> contains a set of custom elements that I have defined and only one of those elements are shown at any point of time. However the problem is, there are elements that take only part of the screen but still scroll vertically. The amount of scrolling is equal to the tallest element within <core-pages>.
The expected behavior is that the element should scroll only if it exceeds it's view port. How can I achieve this behavior?
demo-students.html (Stripped down version, to make it more readable)
<polymer-element name="students-dashboard">
<template>
<style>
…
</style>
<core-drawer-panel…>
<core-header-panel drawer mode="seamed">
…
</core-header-panel>
<core-header-panel main mode="seamed">
<core-toolbar …>
<span flex>Students</span>
</core-toolbar>
<div class="content">
<core-pages selected={{getModule(route)}} valueattr="name">
<!--
This needs to scroll and it does
-->
<students-grid name="students"></students-grid>
<!--
The content of this element is short,
but still scrolls to the same extent as the
<students-grid> element
-->
<student-editor name="student_editor"></students-editor>
</core-pages>
</div>
<core-header-panel>
</core-drawer-panel>
</template>
<script>
…
</script>
</polymer-element>

I don't know if it's the same issue I had: when using <core-pages> it was scrolling beyond the content of the smaller tabs. Each pages had the same size as the biggest page.
Nothing worked except replacing <core-pages> with <animated-core-pages> which made the problem magically disappear.
I had a similar problem with <core-scaffold> from the starter project which was different from the version downloaded by bowser (the same day). A bug disappeared when using the latter.
Tldr: Maybe the starter project is not up-to-date.
PS: this fixed the pages size problem not the fact that the scroll position is keeped across pages.

I've been having a similar struggle but with <core-animated-pages> inside a <core-header-panel> inside a <core-drawer-panel>.
I ended up getting the internal page element to fit and scroll itself by doing the following.
On the main page's css:
core-drawer-panel, core-header-panel {
height: 100%;
}
core-animated-pages { << core-pages for your example
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
flex: 1;
box-sizing: border-box;
}
On the polymer element's css:
:host {
display: block;
flex: 1;
box-sizing: border-box;
overflow-y: auto;
}
Give it a go and let us know how it works.

Can't get height of div to adjust

I'm in a pickle.
I'm working on a layout, and I need the main div to adjust to the window size, mainly to get that middle div to make a scrollbar upon resizing. It's acting as a table cell currently, which is why it's forcing itself to simply become taller instead of using a scrollbar. It's in a containing div in the efforts to keep from doing this though.
<div id="ALL">
<div id="VOLTRON">
<div id="MAINSIDEBAR">ok</div>
<div id="CONTENT">
<div id="TICKER">please</div>
<div class="WRAP">
<div id="POSTSGOHERE">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div id="RIGHTSIDEBAR">WELL THEN.</div>
</div>
</div>
</div>
</div>
I resorted to Jquery, and though I found a code for this very thing, it's not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
});
});
</script>
I've tried setting a max height, I've tried setting it to vh instead of percent, I've tried containing it, and I feel like I've exhausted a pretty decent amount of time on this conundrum myself to finally get help.
Here is the entire code, in case that also helps. I'm certain that the way I'm doing this is the reason it's not working.
So, any idea for a fix for this? And why what I'm trying isn't working?
EDIT: I need to specify this again: I want the entire "table" to only fit the window, but the purple div is the one that should scroll. The problem is, though I've set it to overflow-y: scroll; it just changes the size of the entire container. The entire table just grows past the window to compensate for the overflow.

Your code looks good, you just don't see it as it takes the exact size of the window. You would see it better if you subtracted a little off of it and added the overflow-y:scroll to #ALL instead of the container:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
overflow-y: scroll;
}
$(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
});
});
HERE IS A DEMO
EDITED: Following your edit, and I know this would threw off your layout completely, but the only thing that worked for me, if you wanted the purple one to move only, was to remove the table-cell display and set the height to the container instead of ALL, and adding the scroll only to that:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
}
#POSTSGOHERE {
background-color: purple;
max-height: inherit;
overflow-y: scroll;
}
$(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
});
});
I updated the demo

Keep the max-height and set
overflow:scroll;
This should do the trick.
PS: Also try adding it to the Wrap class.

You think to display the #all div as an iframe style in fullscreen?
like here:
You can check it here
You were just missed one line of CSS.
#all
overflow: scroll
SASS syntax
NOTE: pls use small letter div selectors dont use capital ones, thanks ;)

This might work better
Place the window height in a var
so the div can read it, and rewrite the var when the user resizes
$(document).ready(function(e) {
var heightt = $(window).height();
$('#ALL').css('height',heightt);
$(window).resize(function(){
var heightt = $(window).height();
$('#ALL').css('height',heightt);
});
});

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}