I've got a facebook like button ( iFrame edition ) that is overlaid on top of a full browser Flash application. The like button is hooked up to like separate images within the application, and when each new images is shown, the like button is refreshed with data using ExternalInterface.
The like button fades in and out for each new image using JQuery fadeIn() / fadeOut(), again being called with ExternalInterface.
The issue I'm having is that on Windows, this does not seem to want to work, in Firefox specifically...
CSS:
html {
height: 100%;
overflow: hidden;
min-width: 800px;
min-height: 600px;
}
#flashContent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
body {
margin: 0;
padding: 0;
background-color: #000000;
}
#fb-like {
position: absolute;
bottom: 32px;
left: 510px;
width: 280px;
z-index: 9999;
display: none;
}
fb-like is the div containing the iFrame, and it's z-index is 9999 just to ensure it is always on top.
Here is the JS being used:
<script type="text/javascript">
var isVisible = false;
function showLikeButton( visible ){
if( visible == true )
{
$('#fb-like').fadeIn( 'slow' );
isVisible = true;
}
else if ( isVisible )
{
$('#fb-like').fadeOut( 'slow' );
isVisible = false;
}
}
var begOfUrl = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmywebsite.com%2fdirectory";
var endOfUrl = "&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21";
function sendIdToLikeButton( title, id ){
$( '#facebook-like' ).attr( 'src', begOfUrl + "%3Fid=" + id + endOfUrl );
}
</script>
where the sendIdToLikeButton method is taking the id of the photo sent from Flash using ExternalInterface to recreate the src attribute of the iFrame.
And of course, as this is a flash application, here is the minimal HTML:
<body>
<div id="fb-like">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnfb.designaxiom.com/build13&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21" scrolling="no" frameborder="0" style="position: absolute; border:none; overflow:hidden; width:300px; height:40px;" allowTransparency="true" id="facebook-like"></iframe>
</div>
<div id="flashContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
Again, this works everywhere except for Firefox in Windows, and I'm not sure what to do about it. I'm assuming that it is an error in the CSS or the Javascript somewhere.
Any help is greatly appreciated.
Thanks in advance.
Grammar
I finally figured this out after a couple weeks of back and forth. As it turned out the issue was with the iframe being placed over top of the flash content.
This was resolved by adding a param to the swfobject call -- setting wmode to transparent:
var params = {};
params.bgcolor = "#000000";
params.allowfullscreen = "true";
params.allowscriptaccess = "true";
params.wmode = "transparent";
var attributes = { id: "nfb", name:"nfb" };
var swfUrl = "Runner.swf";
swfobject.embedSWF( swfUrl, "flashContent", "100%", "100%", "10.0.0", false, flashvars, params, attributes );
Setting the wmode to transparent allowed for the "transparent" iframe to be placed over top of the application in every browser.
So as it turns out this was not an issue with the facebook like button at all, but with iframes and Flash. Of course if you are not using SWFObject to display your swf files, the wmode is a parameter that can be set in the Publish Properties in Flash when you publish your swfs.
Cheers
Related
I have an embed element in which I provided path to pdf file. I want to prevent it from being download.
<embed src="test.pdf" width="760" height="800" oncontextmenu="return false" />
but when I right click on that t gives me options to save and print pdf. I want to prevent these options.
I tried
<script type="text/javascript">
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
</script>
but it disables right click on entire page except for PDF.
One simple and reliable solution, that is not affected by CORS or CSP, is to cover the embed with another element. I'm using an image here because you cannot embed pdfs on stack overflow.
.embed-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Just for demonstration, remove this part */
opacity: 0.25;
background-color: red;
}
.wrapper {
position: relative;
overflow: hidden;
}
/* Not Important*/
img {
width: 300px
}
<h3>Normal img/embed/object element</h3>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
<hb/>
<h3>With cover</h3>
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
<div class="embed-cover"></div>
</div>
The covering element 'catches' any click events and prevents them from reaching the underlying element (the image in this case)
You should use iframe and inject your javascript code.
To do:
Use iframe tag instead of embed tag and use myFrame as id. ex:
<iframe id="myFrame" width="760" height="800" />
In your parent document get iframe from DOM.
Call window.eval method of iframe, use
'document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);'
as string parameter.
Now iframe should not effected by right click.
It should look like this at the end:
var myFrame = document.getElementById('myFrame');
myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
with Wendelin's answer i was able to achieve what i wanted to achieve.
<html>
<head>
<style>
.embed-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Just for demonstration, remove this part */
opacity: 0.25;
}
.wrapper {
position: relative;
overflow: hidden;
}
</style>
<script type="text/javascript">
function disableContextMenu() {
window.frames["pdfframe"].contentDocument.oncontextmenu = function(){return true;};
var myFrame = document.getElementById('pdfframe');
myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
}
</script>
</head>
<body onload="disableContextMenu();" oncontextmenu="return false">
<div class="wrapper">
<embed id="pdfframe" src="<url of myfile.pdf>#toolbar=0" width="100%" height="100%" ></embed>
<div class="embed-cover"></div>
</div>
</body>
You can try to use CSS to disable clics, but it will disable the scroll bar :
iframe {
pointer-events: none;
}
On my website, when clicking on links, I need to display a modal popup (see also this solution) that:
sometimes shows an external website (link #1 below)
sometimes shows just a JPG image (link #2 below)
Problem: when displaying:
external website in a modal popup, the size is ok (see link #1)
jpeg image in a modal popup, the size is not ok, in the sense it doesn't adapt to the screen (see link #2):
jpeg image in a new window, the size is ok, automatically adapted to fit to screen (see link #3)
Question: How to make that a JPG image displayed in a modal popup iframe auto-adapts its size, i.e. if the JPG's height is high, it's automatically resized? i.e. exactly like it would happen when displaying the image in a new window (see link #3)
PS: don't forget to enable Load unsafe scripts in browser when trying this code snippet. If not, iframes won't be displayed.
Or use this live demo jsfiddle.
document.getElementById("link1").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
document.getElementById("link2").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "https://i.imgur.com/pz2iPBW.jpg";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
document.getElementById("link3").onclick = function(e) {
window.open('https://i.imgur.com/pz2iPBW.jpg', 'newwindow', 'width=700,height=500');
e.preventDefault();
return false;
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me (website, modal popup)<br>
Click me (jpg image, modal popup)<br>
Click me (jpg image, new window)<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
If you need to fit the image to <iframe> window, you have to apply some CSS style or set image dimension by JavaScript. But in this case images are being served from different domain, so you cannot access the contents of the <iframe>.
The best way in this case and even if the image is not being served from different origin, is to make an html page for the image and load that html page in the <iframe>.
image-preview.py
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%}
img{
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img src="https://i.imgur.com/pz2iPBW.jpg" alt="">
</body>
</html>
You can make it dynamic by using get parameters in url like, http://yourdomain.com/image-preview.py?src=https://i.imgur.com/pz2iPBW.jpg.
Are you saying you need to sometimes display an image but in an iframe?
Without an iframe, here is one way you could do it using background-image:
https://jsfiddle.net/um2799fu/8/
If you only need to load images from the other websites you can use <img/> with width:100; height: auto; balise.
You can keep the iframe popup for websites on an other event. Of course you could detect what content (img/website) you want to show and display the corresponding popup.
Here is the fiddle
You can use width only for that
width: 100%;
Before using width: 100%;
After using width: 100%;
I tried many solutions, but finally the easiest was to use both an iframe and an img (only one of them is used at a precise time, the other is empty):
<div id="popup">
<iframe id="popupiframe"></iframe>
<img id="popupimg"></img>
<div id="popupclose">❌</div>
</div>
<div id="popupdarkbg"></div>
and to check with JavaScript if the URL is an image or not:
var url = this.getAttribute('href');
if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.png')) {
document.getElementById('popupimg').src = url;
document.getElementById('popupimg').style.display = "block";
document.getElementById('popupiframe').style.display = "none";
} else {
document.getElementById('popupiframe').src = url;
document.getElementById('popupimg').style.display = "none";
document.getElementById('popupiframe').style.display = "block";
}
Note: it uses endsWith.
How can you make Google VR View responsive?
https://codepen.io/EightArmsHQ/pen/mwLyvy
I've obviously set the the CSS width to 100%, but it doesn't crop as the screen becomes smaller than the view.
JavaScript
$( window ).on('load', function() {
$(".vrview").each(function(){
var $this = $(this);
var id = $this.attr('id');
var src = $this.attr('data-src');
var vrView = new VRView.Player('#' + id, {
image: src,
is_stereo: false,
width: '100%',
height: '400px'
});
});
});
CSS
.vrview{
width:100%;
max-width:100%;
}
But that doesn't seem to do anything.
I don't think there are any setters like setWidth(x) or set('width', x) so I can't do anything like this:
$(window).resize(function(){
for(var v = 0; v < vrViews.length; v ++){
var view = vrViews[v];
view.set('width', 40);
}
});
I believe if you omit the width and height in the JavaScript you can then size the iFrame (not the .vrview container) via CSS.
I actually had some joy with embed responsively.
I created the standard code, made an iframe, then copied the iframe into embed responsively to get the following code:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe allowfullscreen='true' scrolling='no' src='https://storage.googleapis.com/vrview/2.0/index.html?image=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg&is_stereo=false&' style='border: 0px;'></iframe>
</div>
Result:
https://codepen.io/EightArmsHQ/pen/Bdvrrw
I'm developing a website and the home page has a few embedded youtube videos. The videos worked great until recently, but now it seems they no longer work! It fetches the video from YouTube, but I'm not able to play any of them.
I compared the code to an earlier version and the code is still the same. I've been searching and scratching my head on this for hours trying to figure out why it won't work anymore. Here's a JSFiddle with the code I'm using.
https://jsfiddle.net/ftmLsaym/
Any ideas what I need to do to fix this?
HTML
<div class="splashdiv">
<iframe id="teaser" src="https://www.youtube.com/embed/PNT39y4N4H4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div style="width: 100%">
<button style="width:50%;float:left" onclick="previousVideo()">Previous</button>
<button style="width:50%;float:right" onclick="nextVideo()">Next</button></div>
CSS
.splashdiv {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
z-index:-1;
}
.splashdiv iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;
}
JS
var frame = document.getElementById('teaser');
var pos = 0;
var src = [
"https://www.youtube.com/embed/PNT39y4N4H4?rel=0",
"https://www.youtube.com/embed/M--kEKu8-IE?rel=0",
"https://www.youtube.com/embed/3wgd8fHidzg?rel=0",
"https://www.youtube.com/embed/2yf4bUW9mlE?rel=0",
"https://www.youtube.com/embed/CueAcWRsaY8?rel=0",
"https://www.youtube.com/embed/ulsa6Aog7Yw?rel=0",
"https://www.youtube.com/embed/7qTp3lk7gt4?rel=0"
]
function nextVideo() {
if (pos < 6) {
pos += 1;
showVideo();
}
}
function previousVideo() {
if (pos > 0) {
pos -= 1;
showVideo();
}
}
function showVideo() {
frame.src = src[pos];
}
function barnaby() {
pos = 1;
frame.src = src[pos]+"&autoplay=1";
}
The z-index is too low, you need to increase it, it's behind another div a solution is shown here although you don't need to use 200, just an example : ) https://jsfiddle.net/ftmLsaym/5/
Just delete this line:
z-index:-1
z-index:-1 sets the whole .splashdiv div (including the iframe) to be behind the body layer. So the YouTube iframe cannot capture your mouse click.
Move the iframe out of the splashdiv - that should let the video run.
replace your .splashdiv css code with this
.splashdiv {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
z-index:2;
}
I have a web page where I want to use the full height (no more, no less) of the screen with two stacked divs, so that the second div fills out the height that remains after the first one.
At the moment I am doing it like this:
css
body { height: 100%; }
JavaScript
window.onload=function(){
document.getElementById('div2').style.height =
(document.getElementById('body').offsetHeight -
document.getElementById('div1').offsetHeight) + 'px';
}
This works fine, but in mobile browsers (tested on Android default browser and Chrome) the address bar remains visible, although it can be hidden and the space used for the second div. I assume similar behaviour can be expected from iPhones.
So my question is: Does anyone know how to get the available height in a mobile browser, including retractable address bar?
edit
Ifound this:http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, but I can't get it to work in Chrome.
update
I am now using this code, but it still doesn't work in Android Chrome (and I haven't tried it in iPhones).
JavaScript function:
if(typeof window.orientation !== 'undefined') {
document.body.style.height = (window.outerHeight) + 'px';
setTimeout( function(){ window.scrollTo(0, 50); }, 50);
}
document.getElementById('div2').style.height =
(document.body.offsetHeight -
document.getElementById('div2').offsetHeight) + 'px';
I am calling this function in window.onload and window.onresize.
Try this:
HTML
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear"></div>
</div>
CSS
html, body { height: 100%; }
div.box { background: #EEE; height: 100%; width: 600px; }
div.div1{background: #999; height: 20%;}
div.div2{ background: #666; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }
See the demo.
Hope it helped.