Develop Reference

Close a fancybox using pure javascript

After opening a jquery fancy box i'am trying to keep the iframe's content light as much as possible by avoiding the reload of jquery package. so i want to close the fancy box (iframe) using pure javascript, i've tried window.close(); but nothing happened.

I think you want to close fancybox on button click from the iframe.
for that you have to do a code like this.
Add this button in your iframe page.
<button class="btn btn-danger" type="button" id="btnCancel" onclick="self.parent.CloseFancyBox()">Cancel</button>
write down below function in your parent file.
function CloseFancyBox() {
$.fancybox.close();
}
If you want to close without click a button then you can directaly right below function in your iframe page.
function closeFancy(){
self.parent.CloseFancyBox();
}

Problem solved. window.close(); do the job
thank you for your answers

jQuery appending iframe to div without reload

$("#div").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
By using this example append cause page reload, maybe are some issue to load youtube iframe without reloading page
Demo: https://jsfiddle.net/0uqtn0u5/
My observation is wrong it's not realod the page.

Some browsers will treat <button> as a submit button and submit to the same page regardless of the button being a child of a form or not.
Change to
$('button').on('click', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
or add type="button" to it.
If you DO have a form, instead do make the button a submit button and prevent the default action on the form submit:
$('form').on('submit', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
There is no other reason for the page to reload. Your code should not and indeed does not reload anything in Chrome

Take a look: How to prevent an iframe from reloading when moving it in the DOM
"If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.
However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload."
~ John Fisher
Also:
https://stackoverflow.com/a/8318401/5444802
"It isn't possible to move an iframe from one place in the dom to another without it reloading."
~ Kevin B

Check the youtube api for iframe embedding
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Load iframe when user clicks on modal

I have a page within my website which has about 60 iframe elements inside it. These iframes are contained within w3-modals divs but are all being loaded as soon as the page loads, causing the page to load very slowly. Is it possible when a user clicks on the button to load the w3-modal that they iframe can be loaded then to help page load time.
Any help would be much appreciated with this! But if possible please keep it simple as I am new to coding.
Thanks very much!
Here is the code Im using:
Button to load modal
<button onclick="document.getElementById('id03').style.display='block'" class="w3-btn w3-light-blue">Instruction</button>
Modal code
<div id="id03" class="w3-modal">
<iframe src="http://" frameborder="0" height="700px" style="width: 800px">

I think your are taking this to the incorrect way. Loading 60 different pages is crazy, and for sure your computer and browser are suffering with this.
I think a better approach would be (as you said) loading your iframes as they are requested. I'm assuming that all your iframes are hidden (and you are using this modal system), so we could do something like this:
<button class="w3-btn w3-light-blue" data-open-modal="id03">Instruction</button>
<div id="id03" class="w3-modal" data-url="your-iframe-url"></div>
You first defined a button with the data-attribute data-open-modal which indicate that this button will open a modal. Next, you have your modal div with data-url defining the URL to use in the iframe. So, this is the JavaScript to do the trick (with jQuery, sorry no time of vanilla):
// We find all the buttons 'data-open-modal'
$('[data-open-modal]').click(function (e) {
// We get the ID of the modal to open
var modalId = $(this).data('open-modal');
// We set a modal reference (shortcut)
var $modal = $(modalId);
// We get the iframe URL from the modal data-url
var iframeURL = $modal.data('url');
// We show the modal
$modal.display(); // display: block;
// We create the iframe inside using the URL
$modal.append('<iframe src="' + iframeURL + '" frameborder="0" height="700px" style="width: 800px">');
// We bind a click event when the user clicks on the "X" to close the modal and whe delete the iframe
$modal.find('.w3-closebtn').on('click', function (e) {
$modal.find('iframe').remove(); // Delete the iframe
});
});
I haven't tested this code, but it should work!

var your_source = $('#source').val();
$("#button").click(function () {
$("iframe").attr("src", your_source);
});

Focus to an image of a HTML page

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.

I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}

jQuery Click Tracking not working on iFrame

First, here is my code:
<script type="text/javascript">
$('#Advertisement-1').click(function () {
alert("Ad Clicked!");
});
</script>
<div id="Advertisement-1">
<!-- PBBG Ads Zone Code Begin -->
<center>
<iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
</center>
<!-- PBBG Ads Zone Code End -->
</div>
Now, my issue is when I click the ad, it doesn't send an alert. It just opens the ad in a new window. Any ideas how I can get the click event to work?

click event doesn't works on iframes, because the event does not bubble up through the <iframe> tag's ancestors in the DOM.
Instead you can use the blur event to detect when your parent page is losing focus.
This jQuery plugin is designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery
It's very easy to use, simply select your iframe with a selector, and supply a callback function (will be fired when the iframe is clicked) :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});

The code to alert is in the parent window and the ad I suppose is inside the iframe so it is not possible unless the parent page and iframe are in same domain.

You can't unless you're detecting the click from http://www.pbbgads.com/