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>

Check when file is being dragged to website

I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.

I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

Click link, div slides out, linked div slides in, click to close and reload first div

I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.

EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.

Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});

Where can I find the "First Time here?" JavaScript component of the StackOverflow website?

I need to implement for my Grails web site something similar to the orange and closable dialog that appears on the top of the StackOverflow website whenever SO detects that it is your first visit. (for a demo, just start your browser in Private/Incognito mode and go to
www.stackoverflow.com)
I am interested mainly in the front-end component.
Do you know where I can find a JavaScript/CSS/HTML library and/or code that will do the job?
Or maybe you do have the code source directly?

It is really as simple as creating a CSS style for a div, something like this:
div.notification
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 20px;
z-index: 1000;
/* style it the way you want; background, font-weight etc. */
}
and then when you want to show a notification, you add a div with this class to the DOM. For example, with jQuery:
function displayNotification(text)
{
var notification = $('<div></div>')
.addClass('notification')
.text(text)
.click(function() { notification.remove(); });
$('body').append(notification);
}
displayNotification('Hello World!');
Of course you can make it more advanced, but this is the basic idea.

It's pretty simple, they check if a "first_visit=false" type of cookie is set when you hit the page, and display that message if it's not.
This might be of help.. I responded to a similar question.
Modal box + checkbox + cookie

The UI paradigm is called a flash message or notifier.
http://rubypond.com/articles/2008/07/11/useful-flash-messages-in-rails/
StackOverflow uses the following markup and CSS:
<table id="notify-table">
<tbody><tr style="" class="notify">
<td class="notify">
1 new answer has been posted - <a onclick="heartbeat.answers.update()">load new answers.</a>
</td>
<td class="notify-close">
<a onclick="notify.close()" title="dismiss this notification">×</a>
</td></tr>
</tbody>
</table>
#notify-table {
color:#735005;
font-weight:bold;
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
notify.close() would set display: none; on the notifier and, depending on your needs, set a cookie so that the message does not appear after it has been dismissed.

Or even easier with jquery:
$('div.notification').fadeIn();
with
.notification { display:none;}
and
$('div.notification').fadeOut(function() { $(':parent .close').click(); });