I am try to load an uploaded PDF file to my view file with an <iframe> tag, How can i disable the mouse right click in that specific <iframe> tag
My code is like this:-
<iframe id="your_iframe_id" src="http://localhost/employee/assets/documents/1582002009.pdf#toolbar=0&navpanes=0&scrollbar=0" onload="injectJS()" readonly="true" style="width:1000px; height:600px;" frameborder="0"></iframe>
<script type="text/javascript">
function disableContextMenu()
{
window.frames["your i frame id"].document.oncontextmenu = function(){alert("No way!"); return false;};
// Or use this
// document.getElementById("your i frame id").contentWindow.document.oncontextmenu
= function(){alert("No way!"); return false;};;
}
</script>
dont remember call this function too. if its not working tell me
Related
I have an icon, which when you hover, pops up some extra information in a bootstrap popover
This works as expected, however, if I then click on any field on the page, which then does a partial refresh of a div containing the icon, it then loses the hover functionality.
Icon code:
<!--INFO BUTTON START-->
<xp:text escape="false" id="computedField4">
<xp:this.value><![CDATA[#{javascript:try{
var text = #DbLookup(#DbName(), "LookupKeywordLists", "Info"+compositeData.fieldName, "Members");
return " <i class='fa fa-info-circle' data-container='body' data-toggle='popover' data-trigger='hover' data-placement='right' data-content='"+text+"'></i>"
}catch(e){
openLogBean.addError(e,this.getParent());
}
}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:try{
return compositeData.showInfoIcon;
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.rendered>
</xp:text>
<!--INFO BUTTON END-->
Script block on the page:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(function(){
$('[data-toggle="popover"]').popover({
trigger: 'hover',
title: 'Information'
});
});]]></xp:this.value>
</xp:scriptBlock>
The script block is currently outside the div that the partial refresh "refreshes" however I tried putting it within the div, which didn't resolve the issue. Any ideas? Thanks
You need to add the popover when the partial refresh occurs. In order to do so you use Dojo to subscribe to the partialrefresh-complete event.
This answer can help you: https://stackoverflow.com/a/49014247/785061.
We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.
I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.
The code works but the problem is if I choose to resize frame with my mouse manually first and then press the minimize button it will resize incorrectly in IE8 and Chrome. It resize correctly in FF.
I have this HTML structure
...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="dummy">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...
and this code that executes when pressing on the button.
// Minimize frame button
$('.minimizeFrame').toggle(function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});
I can see that cols="32%,*" changes to cols="22,*" in the developer tools, but still it render in wrong size.
Why do it resize incorrectly after changes by the mouse? Am I missing something or is it a bug in browser? Or are there maybe an alternative solution to resize the frame without this bug?
Example
http://jsbin.com/ohihiy/2
Looks like it's this bug in Webkit that has been ignored since 2010:
https://bugs.webkit.org/show_bug.cgi?id=36584
This worked for me. I created a function that "resets" cols and "later" sets correct widths. It seems there must be a timeout after reset or a kind of loop that "touches" child frames
function init_page() {
function setCols(frms, cols) {
// for some magic reason we have to 1st -> reset current cols
frms.setAttribute('cols', '');
// and 2nd ask about child width (it's now clientWidth)
for (var i = 0; i < frms.children.length; ++i) {
if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
}
}
frms.setAttribute('cols', cols);
}
// Minimize frame button
$('#minimizeButton')
.toggle(function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
},
function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
});
}
If I understand correctly your trying to set an attribute of an object that's in a different frame.
Some browsers don't accept that.
If I try to reproduce your problem I can see that in firefox I can toggle the frame's size (no problem).
In chromium however, I get a security error because I'm trying to set a property on another page namely the frameset page from within a page inside a frame.
edit: The following code works in IE8. Is that what you need?
Don't forget to add the jquery-1.8.2.min.js file
file: index.html
<!doctype html public "-//w3c//dtd html 4.01 frameset//en"
"http://www.w3.org/tr/html4/frameset.dtd">
<html>
<head>
<title>a simple frameset document</title>
</head>
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="frame1.html">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
</html>
file: frame1.html
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(init_page);
function init_page()
{
// Minimize frame button
$('#minimizeButton')
.toggle(function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','22,*');
},
function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','32%,*');
});
}
</script>
</head>
<body>
<button id='minimizeButton'>toggle</button>
</body>
</html>
I was having the same issue, and I used the suggestion of hiding, then setting and then reappearing and it worked for me. See below example:
var $frames = $( <parentElement> ).find( '<framesetname>' )[ 0 ];
frames.hide().attr('cols', '*,500').show();
They worked for Chrome, Firefox, IE11 & Opera.
Hope it works for you.
Using Chrome (22.0....), sometimes, when I try to take :
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
it fails. I mean, if I check the Network console, it says "Pending...", and my .load() events are stuck.
Why? And how can I fix it?
Also tried with :
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
but it is the same...
I don't see the HTML container for the +1 button defined anywhere in the source of the page that you linked. I see the first script that you referenced on the page, but your page appears to be missing:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
The second snippet of script is intended for asynchronous loading (preferred) that you reference also would require you to insert the same type HTML container.
You can generate the code to include in your page using the +1 button configuration tool.
[UPDATE]
The g-plusone element apparently is being injected dynamically by jQuery, which has a different onload timing than the +1 button's own onload handler, which explains why sometimes it might display. In this case, you need to use the parseTags: explicit option:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
And then after your own JavaScript injects the g-plusone div, you must call:
gapi.plusone.go();
Which will explicitly render all +1 buttons on the page when initiated.
For example, I am trying to iframe the youtube subscription box on the homepage, and the problem is, if I make the iframe really long, then it wastes space, but if I make the size I want, then if the user clicks the "load more videos" button, then it gets cut off. So is there any way to make the iframe (or any alternatives) be a percentage of the size, or dynamically change when the page changes?
Create a file and call it iframe.html
<html>
<head>
<script type="text/javascript"></span>
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if (innerDoc == null){
// Google Chrome
frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
}
else{
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 18;
}
}
catch(err){
alert('Err: ' + err.message);
window.status = err.message;
}
}
</script>
</head>
<body>
<iframe id="tree" name="tree" src="tree.html" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
</body>
</html>
Now create an html page called tree.html and put some dummy content in it.Make sure that the iframe.html and the tree.html are in the same directory. Open the .html files in browser and you will observe the o/p.
Some more useful links :
How to detect iframe resize?
How to detect iframe iframe resize