Develop Reference

Unable to target embedded Flickr video iframe with jQuery

I'm trying to make an embedding Flickr video be fluid on a responsive theme I'm working on for Tumblr. I'm doing well with any other embedded video or audio players (Youtube, Vimeo, Soundcloud, Spotify, etc), but Flickr videos are overlaping, being unable to contain them on their parent container.
Flickr video iframe and some of its children elements has inline css declarations which are causing the content overflows.
Here's a screenshot with the iframe structure
First I've tried to simply overwrite those styles with CSS but have no effect.
Then I tried with jQuery, but can't target the iframe.
<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>
Despite the iframe has a css class .flickr-embed-frame I can't neither target it, nor its child elements. I've tried with my function inside $(document).ready() and $(window).load() with any result.
Selectors like $('.flickr-embed-frame').contents().find('.child-class'); haven't worked neither.
Inside the iframe there's a video element:
<video src="https://www.flickr.com/photos/138041208#N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>
Also tried to target it with selectors like $('video[src^="https://www.flickr.com"]') with no result.
Couldn't find any question related, so hope someone will have a solution. Thanks.
EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Ok, I tried to manually embed a Flickr Video on a JSFiddle instead of Tumblr (where you just have to paste an URL link to the video). This is the code Flickr asks you to add on your code in order to display the video:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/138041208#N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Seems to be that iframe is added later, injected into the DOM via javascript. This must be the reason why I can't target the iframe, neither via CSS nor jQuery, since initially it doesn't exist.
Now my question is: How can I check when this iframe is injected to the DOM? This way I could target it and make the changes I need via jQuery.
SOLVED =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
I've finally found a solution for this problem, check my comment bellow.

Thanks to a pretty neat trick exposed by David Walsh (davidwalsh.name/detect-node-insertion) I've managed to solve this.
First we add an animation that will start when the iframe is inserted:
/* set up the keyframes; remember to create prefixed keyframes too! */
#keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
The animation needs to be applied on the elements you'd like to listen for (in this case, the iframe).
.parent-container iframe {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
When the animation ends, the insertion event will fire.
First, you have to create a function which acts as the event listener callback:
var insertListener = function(event){
if (event.animationName == "nodeInserted") {
// This is the debug for knowing our listener worked!
// event.target is the new node!
console.warn("Another node has been inserted! ", event, event.target);
}
}
If the animation name matches the desired animation, we know a DOM node has been injected. Now we add the event listener to the parent:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Here's a demo I made with the Flickr video embedded, working fine:

Check out this previous post on SO: How to access the content of an iframe with jQuery?
The solution seems to be using jQuery's contents()
$("#myiframe").contents().find("#myContent")

Dynamically created elements are hiding Bootstrap popover

This is a pretty straight forward problem. It only occurs in Safari. I have a popover on an element. This is all well and good so far. I have an interactive element that dynamically adds a div to the DOM. Once this element is added, any popover that occurs in the same position is behind the dynamically added element (vision is obscured).
EDIT: Just to be clear the dynamic element is an iframe. I attempted adding a static iframe to the page and the problem still occurs in Safari. Is there some sort of crazy auto iframe styling that happens in Safari?
EDIT2: Maybe code examples will help show that I have tried z-index
css for dynamic element
.active_tv_screen{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border-radius:5px;
z-index:3 !important;
}
custom styling for popover to try and force it in front of dynamic element
.popover {
z-index: 1001 !important;
position:absolute;
max-height:500px !important;
}
Reminder: this problem is Safari speicific

set the 'z-index' of the element you want to remain visible higher than the 'z-index' of the other elements. don't forget you'll need to specify a position: absolute | relative | etc...

Here is the fix - add ?wmode=opaque to the end of the embed url (the src attribute) and it will be fixed. The problem is the new flash player.
Source: https://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

How to make an underlaying element unclickable/deactive?

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??

Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.

This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)

Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})

Javascript: Div onclick doens't work for some div content

I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.
Now, the problem seems to be the content of the div:
This works:
<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>
This doesn't work:
<div onclick="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
But this (onmouseover instead of onclick) works again:
<div onmouseover="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
I guess it must be some layering issue, but I tried putting the "onclick" into each of the different div/iframe layers and I couldn't get it to work. I'm a beginner and it'd be great to get a tip on what's wrong! Thanks!

I would recommend using JQuery for this.
You can do what you wanna do with 1 line of code.
write a test.js like this:
$(document).ready(function() {
// hides the div as soon as the DOM is ready
$('#yourDiv').hide();
// shows the div on clicking the noted link
$('#yourDiv-show').click(function() {
$('#yourDiv').show('slow');
return false;
});
// hides the div on clicking the noted link
$('#youDiv-hide').click(function() {
$('#yourDiv').hide('fast');
return false;
});
// toggles the div on clicking the noted link
$('#youDiv-toggle').click(function() {
$('#yourDiv').toggle(400);
return false;
});
});
Then import this javascript to your HTML,JSP etc...

If you set the first div with border 10px and click on that border it will work.
As you start a new div the first div is just the container, any javascript calls will not be triggered.
like border: 50px solid; you will see what i mean.
The onmouseover works because you actually go over the invisible line of the div.

JavaScript events are supposed to 'bubble' up through the ancestry of DOM nodes from the one you click, all the way up to the body node, executing any appropriate handlers registered for those nodes along the way, unless a specific event handler stops the propagation of that event.
I suspect the iframe is your issue, since that is a separate HTML document, with a separate event chain, and that events don't bubble out of that, but I don't know for certain.
I would try the jQuery suggestion above, but I think this particular situation is not going to allow even jQuery to work.

jquery hide a div that contains flash without resetting it

Greetings,
I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.

Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:
put your flash container DIV into a new DIV with overflow:hidden.
basic:
to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
to show flash-div: $('#id_div_with_swf').css("left","0px");
or, show and hide with animation effects:
to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);
html example:
<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>
you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')

Working solution:
Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.
Just tested it with firebug.
EDIT:
Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.

Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?
Then replace when the other div has disappeared?