How to get a iframe in an Image Map? - javascript

I have been working on the side bar where it says Click On Game Lists Below on http://www.bespoke-arcades.co.uk/store/arcade-machines/16-synergy-elite-arcade-machine.html on the left hand side.
I have an image map because I would rather have one image downloaded than a ton (as it slows down loading times).
But the image map won't allow me to use class="iframe" in the <area> tag. If I do <img src="yyy" /> it will work and open up a fancybox iframe popup, but if I use the imagemap the class="iframe" function isn't really accepted.
Is there any work around to making this work? I have the fancybox js and css on the page in question. I also have the correct javascript to work if I use that class function.

Try changing this :
<script type="text/javascript">
$('a.iframe').fancybox();
</script>
by this :
<script type="text/javascript">
jQuery(document).ready(function($){
$('area.iframe').fancybox({
"type":"iframe",
"width": 600, // or whatever
"height": 380
});
});
</script>
... of course, don't forget to add class="iframe" to each area tag.
Also check this answer or this for further reference.

Related

How can I block images using js only?

I want to block all the images of any web page to lower the page loading time, consider the web page source code is loaded into browser but the documents/files still needed to be downloaded, is there any event to cover this problem?
I think can method must be followed in browsers text only mode.
No. If the src tag is already set the browser will Load the images no matter what. Remove the src tag after it was loaded doesn't change the fact that it was already downloaded.
The only way to avoid this is to set the src tags of imgs by Javascript dynamicly. And therefore not set images if you don't want to.
You can't make the browser not loading images if it's already in the html.
I'm not sure if it solves your problem but maybe you can try this:
<script type="text/javascript">
$(document).ready( function() { $("img").removeAttr("src"); } );
</script>
<div class="image"><img external-src="original.jpg" src="fake.jpg" /></div>
$(window).load(function(){
$('.image img').attr("src", $(this).attr('external-src')).removeAttr('external-src');
});
This will load all the images after whole dom loaded
You can remove the whole img tag
$("img").remove();
or you can just remove the image tag source attribute
$("img").removeAttr("src");
or you can just replace all the image source having shorter loading time
$("img").attr("src",'http://someimage.jpg');

Javascript DOM changes have no effect

Using an image map, I am trying to build a graphic that when you click on a "wing" it makes it look like a button and depresses it.
Image map is built, onclick is working, but nothing happens?
This is the code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<map name="location-map" style="cursor:pointer;">
<area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
</map>
<img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />
<script type="text/javascript">
function set_spot(mouse_over_name) {
document.getElementById(mouse_over_name).style.display="none";
};
</script>
</body>
</html>
It is supposed to hide the image?
I have seen other solutions saying that the position of the JavaScript needs to be after the element. I have tried the script in every location and the out come is always the same. No change. I've also tried changing the width to 0 px and changing the image src to ""! I also had the images inside DIV's and tried hiding the DIV but again, nothing?
If I put an an alert:
alert(document.getElementById(mouse_over_name).style.display) before the change, I get a blank alert box, after I get "none."
What am I missing?
You can see the above code live here:
http://www.beaconfasteners.net/beacon_advantage/graph/test.html
Edit:
I have tried this in all major browsers.
Robby Cornelissen was correct. The reason that your img is not hiding is because the onclick uses the id of the area element and you're setting display: none on that, not the img element. I'm not sure if there is a way to hide the contents of an area element, but you could potentially use this to find and hide the image element that shares the same id as the area that is clicked:
function set_spot(mouse_over_name) {
[].forEach.call(document.querySelectorAll('img'), function(el) {
if (el.id === mouse_over_name) {
el.style.display = 'none';
};
});
};
This will iterate through all of the images on the page, so I can't make any guarantees about the speed of such a solution. You can preview it here:
jsfiddle

Targeting an iframe with Js/jQuery BEFORE the DOM loads

In order to prevent an iframe from flashing, I'm setting its visibility inside a setTimeout (the CSS is set to visibility:hidden)
setTimeout(function(){
$n('#myFrame').css('visibility','visible');}, 750);
Works great, although when I load subsequent locations inside the frame, the flashing behavior returns since the visibility is already set.
What I'd like to do is create a function that targets the iframe BEFORE the DOM/page has loaded to set the visibility to hidden again and then setTimeout.
Keep in mind that this script will run on the ServiceNow platform, meaning some options are limited (can't load in document head, etc.)
It's sort of like a reverse document.ready(). Is this even possible?
Thanks for any leads,
Paco
Just set it in your source:
<iframe style="display: none;"></iframe>
Then un-hide it when you want to.
$('buttonToChangeTheIframePage').click(function(e){
e.preventDefault();
$('#myFrame').css('visibility','hidden');
$('#myFrame').delay(1000).css('visibility','visible');
});
This assumes you are loading locations from OUTSIDE the iframe - anything within the iframe (like a link) will still trigger this behaviour.
EDIT
This is actually better and will work for all circumstances (I think - just check no silly errors as not tested)
<iframe id="myFrame" src="http://www.google.com/" onLoad="hideUnhide();"></iframe>
function hideUnhide(){
$('#myFrame').css('visibility','hidden').delay(1000).css('visibility','visible');
}
Use addAfterPageLoadedEvent(func) in js_include_doc_type.js
<iframe id="gsft_main" style="visibility: hidden;">
anything ....
<script>
addAfterPageLoadedEvent(function() {
$j('#gsft_main').css('visibility','visible');
});
</script>
</iframe>

click a button to load a different video player into div

i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!

Javascript problem with iframe that's hidden before loaded

I have a page that contains an iframe that gets loaded using Javascript:
index.html
<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>
<script type="text/javascript">
function someFunction() {
var myFrame = document.getElementById('myFrame');
var loader = document.getElementById('loader');
loader.style.display = 'block';
myFrame.src = 'myFrame.html';
myFrame.onload = function() {
myFrame.style.display = 'block';
loader.style.display = 'none';
};
}
</script>
The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions).
myFrame.html
<div id="scrollingElement" style="overflow: auto;">
<div id="several"></div>
<div id="child"></div>
<div id="elements"></div>
</div>
<script type="text/javascript">
$(document).load(function() {
$('#scrollingElement').jScrollPane();
});
</script>
This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions.
Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.
Some browsers assume that when "display:none" is applied to replaced elements (like Flash or an iframe) the visual info for that element is no longer needed. So, if the element is later displayed by the CSS, the browser will actually recreate the visual data form scratch.
I imagine that having the iframe default to "display:none;" makes the browser skip the rendering of the HTML so the tags don't have any dimensions. I would set the visibility to "hidden" or position it off the page rather than use "display:none;".
Good luck.
instead of making the iframe invisible by using display:none, you could try to...
... set visibility:hidden
... set position:absolute; top:-600px;
... set opacity:0
or something else that makes jQuery "see" the objects but not the user (and reset the used css-attributes in your myFrame.onload function).
visibility:collapse;
display:hidden;
height:0px;
Will work to get rid of white space too..
The iframe will also load..
Hidden iframes are a huge security issue. Probably best to try to find another way to accomplish what you want, if it is legitimate, because hopefully future browsers will get rid of this feature altogether. http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

Categories

Resources