I have right-click disabled in the header of a website using
<body oncontextmenu="return false">
Which gives the functionality that I have been asked for.
But I have a requirement to then re-enable right click on an iframe within this site and I'm not sure this is possible.
Without going into the "Why?", "Don't bother", etc... comments, I was wondering if someone could kindly answer if (or not) this will be possible, and how?
On the iframe I have tried to give it it's own <body> tag, but the main parents <body oncontextmenu="return false"> tag seems to be overriding it.
Edit :
This line is in the parent page <body oncontextmenu="return false">
The iframe is on a different domain to the parent page.
Below SO answer should work, including an alternative to disabling it in the html and flexibility for different browsers.
https://stackoverflow.com/a/2405835/5741308
If you are in the same domain, you can use jquery like this:
HTML
<iframe id="iframeID" src="/your_page.html"></iframe>
JAVASCRIPT
$(document).ready(function () {
$('#iframeID').load(activeContextMenu);
});
function activeContextMenu() {
$('#iframeID').contents().find('body').attr('oncontextmenu', '');
}
Related
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_image
this is about changing html content with js, but it is about images. is it possible to do something like this too, so the same but doing it with a new html file so that you can switch pages inside a page?
So the plan is to replace the html underneath (with id="id") by another html file using js.
document.getElementById("id").src = "otherfile.html";
<html>
<body>
hey guys! here is my html page. If you click underneath, content will be changed.
<html id="id">
<body>
here is the text that will change if id="id" will be changed by a different html file
</body>
</html>
</body>
</html>
Of course, I know that this won't work.
But is there a way to archieve this?
Thank you if you are reading and trynna answer my post, I understand if it's a messy and shitty question so shoutout to you.
How about changing the contents of a div instead the whole HTML? Via jQuery.
<div id="dynamic-html">
here is the text that will change if id="id" will be changed by a different html file
</div>
$( "#btnChangeHTML" ).click(function() {
$( "#dynamic-html" ).html("<div class='myclass'>This is the custom HTML</div>");
});
Here's a fiddle:
https://jsfiddle.net/u8xsker2/2/
Read about iframe. Perhaps it is what you want.
Assume I have an iframe in my HTML webpage that contains a part of my HTML data. It has an input for a search text box. I want, when I write something inside the input, using onkeypress event, I can show the data in the span.
How can I do this?
I read many different suggestions but none of them worked correctly for me!
Note that pages are at same domain but I don't have access to the iframe page code!
Can anyone help me writing it?
Here is the simplified code of what I need:
$(document).ready(function() {
$('#iframeDoc').ready(function(){
$(this).contents().on('keypress', function(event) {
// add pressed keys to span });
});
$('#iframeDoc').attr("src","JavaScript:'iframe content'");
});
Main page HTML:
<html>
<body>
<iframe id="iframeDoc" src="iframepage.html"></iframe>
</body>
</html>
iframepage html:
<html>
<body>
<input type="text" />
<span id="result"></span>
</body>
</html>
A generic function to capture any keyup events within the iframe, e.g.
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
//code here
});
Separately you can access elements in iframes with code like (note that I added an ID to your input element):
$('#iframe').contents().find('#element_id');
So putting them together, could you not do something like:
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
if($('#iframe').contents().find('#element_id').is(":focus")){
//code here
}
});
Fiddle of what I think is working example for your code:
https://jsfiddle.net/42j45kmn/7/
In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
I'm new here and like to know how to refresh 2 different iframes on one page.
I found something on google using getElemenById. But it has to work in firefox and firefox has some problems with Id's.
thanks in advance.
<form action="managecartform.html" onclick="deleteAllCookies();"><button type="submit" >Empty cart</button></form>
What does your form have to do with iframes?
Do you mean this? Load the managecartform into one frame and reload the other?
<form action="managecartform.html" target="iframe1"
onsubmit="deleteAllCookies(); window.frames[0].location.reload(1);">
<input type="submit" value="Empty cart"/>
</form>
<iframe name="iframe0"></iframe>
<iframe name="iframe1"></iframe>
firefox doesn't have problems with ids -- 99% of the time it's because you've either got a missing id or you've duplicated an id.
ids must be unique throughout the entire document.
to answer your question though:
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>
<input type="button" onclick="refreshFrames()" value="refresh frames" />
<script type="text/javascript">
function refreshFrames(){
frame1 = document.getElementById('frame1');
frame2 = document.getElementById('frame2');
if(frame1.contentDocument){
frame1.contentDocument.location.reload(true);
frame2.contentDocument.location.reload(true);
} else {
frame1.contentWindow.location.reload(true);
frame2.contentWindow.location.reload(true);
}
}
</script>
(For IE, you might have to use contentWindow instead of contentDocument depending on the version of IE you're trying to support)