How can I selectively turn off image resize handles in IE 7+'s contenteditable mode? I've tried setting the image's contentEditable to false and its onresizestart to "return false" to no avail.
I'm using tinyMCE.
Set unselectable="on" for your images. Works for older IEs, but is lately deprecated.
I was using the advimagescale plugin in tinyMCE to stop all images from being resized.
However, I found it stopped images from being dragged and dropped into an editor instance.
I found I could strip the size attributes on mouseup using:
setup : function(ed) {
ed.onMouseUp.add(function(ed, e) {
if (e.target.nodeName == "IMG") {
e.target.removeAttribute("width");
e.target.removeAttribute("height");
}
});
}
I would dearly love to get rid of those damn handles though.
This took pain, time and luck to find: You want the 'controlselect' event to remove the resize handles in IE.
element.oncontrolselect = function () { return false; };
The above line of code worked for me (caveat: Not using TinyMCE, but then, this seems to be a contentEditable headache, not a specific TinyMCE one). You need to set this handler on any element you want to not have these drag handles (in my case, images).
You can disable the function of the handles by defining a behaviour file. I couldn't find anything which would let you hide the handles. The result of the code below is that dragging the handles has no effect.
noresize.htc:
<public:component lightweight="true">
<script language="javascript">
function CancelEvent()
{
return false ;
}
this.onresizestart = CancelEvent ;
this.onbeforeeditfocus = CancelEvent ;
</script>
</public:component>
Then in css:
img.noresize {
behaviour:url(/css/noresize.htc);
}
Note that you'll need to get that url() path right. Add the css class to the images you want to selectively disable.
This article has an alternative .htc file which didn't work for me:
http://nickw101.wordpress.com/2011/02/25/disabling-image-resizing-in-ie-contenteditable-elements/
Just the best fix ever:
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
or any html element that wraps your input/img
Works like a charm on IE11 with img too.
Often you will not want the resize functionnality for any element to be accessible. You can set the onresizestart handler of the contenteditable container so it cancels any resize.
That is:
<div id="editor" contenteditable="true" onresizestart="return false;">
<img src="..." />
</div>
Or with JS:
var editor = document.getElementById('editor');
editor.onresizestart=function(){return false;}
That will not hide the handles but the users will not be able to resize the element, whatever type it is.
Hope this helps!
Related
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
I've created a video gallery which loads a Youtube video via swfobject, based on the element's data attributes. It functions quite well in all browsers, except IE. The strange behavior I am seeing doesn't make sense.
The markup for each thumbnail is as follows:
<li>
<div class="movie-image">
<a class="" data-videotitle="Title" data-videoid="$node.contribution('video')" href="http://www.youtube.com/watch?v=41ZskpgQqZ4">
<img class="video-link" data-videotitle="Title" data-videoid="41ZskpgQqZ4" src="http://img.youtube.com/vi/41ZskpgQqZ4/default.jpg" alt="Title">
<h5>Title</h5>
</a>
</div>
</li>
With this javascript binding the event:
$('.video-link').click(function(){
player.setVideo(this.getAttribute("data-videoid"), true);
player.setTitle(this.getAttribute("data-videotitle"));
window.event.returnValue = false; //IESUX
if(window.event.stopPropagation) window.event.stopPropagation();
window.event.cancelBubble = true;
//Yes, there's a lot of redundancy here. None has worked.
return false;
})
Now, here's the weird part: When I click a link in any browser except IE, the event works fine.
However, in IE, if I click on the h5 element, everything works fine. If I click on the image, however, the browser navigates to the thumbnail. Which is really odd, since that's not even the target of the link.
EDIT: I forgot to mention, I am stuck using JQuery 1.4.2 on this particular webpage.
Edit 2: Well... crap. I just tried putting together a fiddle to show the problem, but the fiddle is working fine, even with the old version of JQuery.
jQuery wraps the event object and gives it methods that do what you're trying to do only better:
$(".video-link").click(function (e) {
player.setVideo(this.getAttribute("data-videoid"), true);
player.setTitle(this.getAttribute("data-videotitle"));
e.stopPropagation();
e.preventDefault();
});
Note that return false is explicitly left out -- you don't need it.
My guess is that IE is either throwing some sort of error that stops the JS execution and ends up following the link, or the default action is not properly being stopped.
Want to display another image onmouseover and onmouseout on my site. I have the following:
<img src="#(Model.ThumbPath)" alt='#Model.Description'
onmouseover='iconMouseOver(this,"#Model.ThumbInvPath")'
onmouseout='iconMouseOut(this,"#Model.ThumbPath")'/>
Called Javascript methods:
function iconMouseOver(targetImg, replaceImg) {
$(targetImg).attr('src', replaceImg);
}
function iconMouseOut(targetImg, replaceImg) {
$(targetImg).attr('src', replaceImg);
}
The code above works in IE but none of the other browsers. ( I know, right ? Usually it's other way around ). Images are displayed but mouse over/hover effects don't work.
What am I missing ?
Thank you in advance!
I've prepared you an example here
I'm using the jQuery hover method
How would I change the below to jquery? It works in IE but not Firefox so I am hoping if I change it to jquery it will work for both.
THIS
function subform() {
if (parent.option_view.document.vform_.dispatchEvent('onsubmit') != false) {
parent.option_view.document.vform_.submit();
}
}
AND THIS
img class="save_bttn" src="/images/save.gif" height="16" width="16" border="0" onclick="subform()"
IS INSIDE ONE CHILD FRAME
and
It is trying to init in another child frame that is why its going to parent option_view.
*note: I was not trying to scream with the caps I was just trying to show where talking was and where the javascript is
Maybe:
$("#vform_").submit();
?
fireEvent is a IE only feature. I don't think including JQuery just to fix this is the best solution. (why add more download time/process time if you can avoid it). Switch to using The W3C equivalent: dispatchEvent.
Take a look at http://www.howtocreate.co.uk/tutorials/javascript/domevents on how to use EventListener...
There are two ways I would suggest you do this, the first with jquery, the second without:
$('.save_bttn').bind('click', function(e) {
if (parent.option_view.document.vform_.dispatchEvent('onsubmit') != false) {
parent.option_view.document.vform_.submit();
}
});
The other is:
<img class="save_bttn" id='somebutton' ... />
document.getElementById('somebutton').onclick = function(e) {
// if(...)
}
I would think that your using this subform() function means that there is something flawed in your approach. I am not certain why you have needed dispatchEvent, as you could have just submitted directly from the onclick event handler, but these should work, or, at least, be close enough so that someone here can correct me. :)
I have this piece of Javascript and it just won't work. I allready checked JSlint but that said everything works. Still doesn't work. The javascript is located not in the HTML but is linked in the <head>
note: I am working with a local server, so pageload in instant.
function changeVisibility() {
var a = document.getElementById('invisible');
a.style.display = 'block';
}
var changed = document.getElementById('click1');
changed.onchange = changeVisibility;
This here is the corresponding HTML
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
So what happens is I click on the input, select a file and approve. Then then onchange event triggers and the style of my invisible div is set to block.
Problem is, I keep getting this error:
"changed is null:
changed.onchange = changeVisibility;"
i don't get it, I seriously don't get what I'm overlooking here.
EDIT: question answered, thank you Mercutio for your help and everyone else too of course.
Final code:
function loadEvents() {
var changed = document.getElementById('click1');
var a = document.getElementById('invisible');
document.getElementById('addField').onclick = addFileInput;
changed.onchange = function() {
a.style.display = 'block';
}
}
if (document.getElementById) window.onload = loadEvents;
This here is the corresponding HTML:
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
Also, thanks for the link to JSbin, didn't know about that, looks nifty.
This sounds like the DOM object doesn't exist at the time of referencing it. Perhaps change your code to execute once the document has fully loaded (or place the javascript at the bottom of your page)
note: I am working with a local server, so pageload in instant.
that's not the issue - the constituent parts of a document are loaded in order. It doesn't matter how fast they are loaded, some things happen before others :D
The onlything I'd like to do now is remove the Javascript link from the ...
Place an id on there, and inside your function do this:
document.getElementById('addField').onclick = addFileInput;
Or, as you already have the div as the variable 'a':
a.firstChild.onclick = addFileInput;
But this obviously leaves you with an invalid anchor tag. Best practice suggests that you should provide a way to do it without javascript, and override that functionality with your javascript-method if available.
mercutio is correct. If that code is executing in the HEAD, the call to "document.getElementById('click1')" will always return null since the body hasn't been parsed yet. Perhaps you should put that logic inside of an onload event handler.
I think its because you are trying to modify a file element.
Browsers don't usually let you do that. If you want to show or hide them, place them inside of a div and show or hide that.
Right, I've modified things based on your collective sudgestions and it works now. Onlything bothering me is the direct reference to Javascript inside the anchor
You need to wrap your code in a window.onload event handler, a domReady event handler (available in most modern js frameworks and libraries) or place at the bottom of the page.
Placing at the bottom of the page works fine, as you can see here.
Decoupling event responder from your markup is covered under the topic of "Unobtrusive JavaScript" and can be handled in a variety of ways. In general, you want to declare event responders in a window.onload or document.ready event.