Develop Reference

Cannot remove div from 3rd party script with jquery

Trying to remove an element from a 3rd party script that loads a couple iframes after everything on the page is loaded, and for some reason, my code does not work.
jQuery(window).ready(function() {
jQuery('.sharefooter-modern')
.css("display", "none");
console.log("removed2");
});
I've tried window onload, document ready and some other things but the code still gets triggered before everything is actually loaded.
Html I am trying to remove:
<div class="sharefooter-modern">
It is loaded in iframe with new html body
Full html with iframe https://codepen.io/anon/pen/LzMbmN I am trying to remove the piece with "Viral Loops"

Hi try this the commented one is the way, if you got multiple div class .sharefooter-modern and you want to display none only the 3rd and the other is to close all or one of them. Regards.
jQuery(window).ready(function() {
//jQuery("#component").contents().find('.sharefooter-modern:nth-child(3)').css("display", "none");
jQuery("#component").contents().find(".sharefooter-modern").css("display", "none");
console.log("removed2");
});

Apparently, there is nothing I can do to hide the element due to cross-origin policy, but I fixed my specific issue using another approach - I placed iframe in div with fixed height to cut the bottom and set overflow:hidden. Hope it will help someone.

Using JavaScript to hide a div placed in front of an iframe after clicking any link

I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?

You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});

You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.

show and hide iframes with a button

I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show/hide the iframe
Here is what I tired(jQuery function) but it wont seem to work when I preview in chrome from expression web
jsfiddle.net/darego/Z62P7/2/

All you need to do is to call the function after the document.ready:
$(document).ready(function() {
hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");
});

Just placing it in document ready will not be enough.
You can make your function MUCH easier.
function hideToggle(elem) {
$(elem).toggle();
}
This means: If the element is visible > hide it, if it is hidden > show it.
But for your initializing (hide both divs) i would recommend doing it by css.
iframe {
display:none;
}
Also you need to setup click handlers for the buttons. If you need help on this write me a comment or edit your question please.

Hide/show html content with javascript

I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.

Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");

I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});

jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.

Show hidden div in Fancybox using JQuery not working

I've been trying to get this code to work. I have a hidden div that shows a flash video using the object/embed method.
This is the js code I'm using.
jQuery(document).ready(function(){
jQuery("a[id^='scrshot_']").fancybox(
{
'autoDimensions' : false,
'width' : 640,
'height' : 360
});
return false;});
I'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.
Example of my html code.
<a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a>
<div class='showvid' id='showvid_1'>my embedded code here</div>

Instead of hiding the div, make it visible but wrap it inside another div that is hidden.
(I don't know why fancybox doesn't toggle the visibility, rather annoying.)

try adding this to your jQuery(document).ready(function(){
jQuery('.scrshot').live('click',function(){
jQuery('.showvid').hide(); //hide any that might be open
jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for
});

Have you looked at fancybox documentation/blog?
http://fancybox.net/blog (4. Show youtube clips. this must help);
http://fancybox.net/howto;
http://fancybox.net/api;