Ref. http://jsfiddle.net/a4LJv/2/
In IE/Firefox, having a parent element's draggable attribute equal to true prevents manual textbox caret positioning via mouse-clicks (keyboard arrows work fine). Chrome does not exhibit this behavior. I'm curious whether the former browsers have the proper implementation or if this is unexpected behavior. Also, my current workaround is to disable the draggable attribute on mousedown and re-enable on mouseup.
second workaround is to remove drag event from directly textarea like this:
$('textarea').on('dragstart', function(event){
event.preventDefault();
});
don't have IE to test, but it works for FF.
I have a simple demo page working with video.js and haven't changed a thing with it yet. I would like to have it so that I can hover over it and see a menu appear, much like the way vimeo does with their menu for sharing etc.
I am trying to work out if this should be done on the html / css side of things, or if there is funcationality in video.js itself to add menus. A quick example would be great if there is one online somewhere that I can be linked to.
Thanks in advance
One way would be to use the video.js ready event to modify the DOM.
If you inspect the DOM when the ready event fires from your video.js instance, you'll notice that your video tag has been wrapped with a div, and the id you used has been transferred to that div.
If you have enabled controls, you'll notice that the video element also has sibling elements in your new wrapper div. These are the controls video.js adds.
You can create additional controls, and add those as siblings to the video element (alongside the ones video.js creates).
So, a quick example would look like this (using jQuery, although this could be done without it):
var vimeoMenu = '<ul id="vimeo"><li id="like"></li><li id="later"></li><li id="share"></li></ul>';
var videoId = "example_video";
var playerInstance = videojs(videoID).ready(function(){
// Add elements to DOM
var playerWrapper = $("#" + videoId);
playerWrapper.append(videoMenu);
});
Using CSS, you can position the controls in the top right (like Vimeo). Video.js adds a class to the wrapper element that you can use to show / hide your controls. By default, hide your elements (display, visibility, opacity, etc.). When the class of the instance changes to .vjs-user-active, you can show your elements. Video.js uses a 1 second transition (if you want to match it perfectly).
I am a newbie to javascript programming, but am making progress! I am developing a web app in house for children with autism, for touch screen browsers (55" touch screen PCs and Nexus 7 tablets). We will only use Firefox as it appears most compatible. The children will click on image "buttons" to make choices and to communicate their needs. The buttons need to give visual feedback when touched. I have solved this by using the active state in CSS:
img { opacity:1.0 };
img:active { opacity:0.4 };
This works fine. Hover is no good for use on touch screens. I also have a need for some images to be made invisible but to remain where they are, and to toggle on and off on a long press. For this I have found a toggle function and a timer function and combined them.
JAVASCRIPT (in <head> of page):
var t
function tog_vis(id) {
var e = document.getElementById(id);
if(e.style.opacity == 1 )
e.style.opacity = 0 ;
else
e.style.opacity = 1 ;
HTML:
<img id="myimg" onclick="DoSomething();" onmousedown="t=setTimeout(function(){ tog_vis('myimg'); }, 1500);" onmouseup="clearTimeout(t);" src="images/img1.png">
Problem is the active state gets taken over by the onmousedown and onmouseup events (I have read that this is because they are both part of the click event - makes sense!), and I am guessing that the onclick event may also mess things up further.
Expected/Desired behaviour:
1.On a normal click, the image changes opacity to 0.4, and when released returns to 1, then completes the onclick request.
2.On a long click, the image opacity goes to 0, and on a second long click the opacity returns to 1, with NO onclick event.
The app will eventually have # 100 similar images that must perform the first behaviour, whilst the second behaviour will only be needed on # 10 buttons so I could happily code functions individually if necessary. I have also found that the 55" touchscreens (Windows 7) are not responding to the img:active CSS, so guessing these are relying on the touchdown and touchup events, whilst the tablets are very well behaved.
Any help here much appreciated.
Tim
You could you css3 transitions and a little javascript for this use case. Have a look at this fiddle: http://jsfiddle.net/Ce8J5/
Also you could realise the hover with javascript/jquery, just remove the hover css statement and define some addionatial css classes and add them via javascript.
E.g.
$("#element").mouseenter(function(){
$(this).addClass(".hover");
});
$("#element").mouseleave(function(){
$(this).removeClass(".hover");
});
I just finished a web app for iOS using HTML5 and CSS webkit animations.
Lets say I have element "A" which follows my finger when I drag anywhere on the screen. I have noticed some dropped frames when element A follows my finger. This is only noticeable on iPad. If I keep touching element A, it is A LOT better at following my touch move without dropping frames but if I touch anything else rather than element A and comeback to element A then element A drops frames big time trying to follow my finger as if browser lost focus on the element because I tapped some place else.
Is there a way to force the browser to keep the focus on element A so that it doesn't drop frames?
Thanks in advance
You can basically cancel the blur event by refocusing the element. Here's how to do it using jQuery:
$(document).ready(function () {
$(element).blur(function () {
var self = this;
setTimeout(function () { self.focus(); }, 20);
});
});
I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this?
Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off.
Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:
document.execCommand("enableObjectResizing", false, false);
AFAIK, this can only safely be done once the document has loaded, and there's no way I know of to disable the grabber, which is a separate feature.
It looks like I'll be able to work around this by adding a wrapper div and absolutely positioning the wrapper and then making the inner div contentEditable.
In Chrome 39, these handles don't seem to exist, even if you wanted them to.
In Firefox, one can simply use execCommand, like ZoogieZork answered.
But in Internet Explorer this can't be turned off. It must be worked around.
In WYMeditor development, here's what I've found.
The following results in:
In IE, the resize UI shows up for a split second and then disappears. There seems to be no way for the user to use it.
Images are text selected on mouseup
Ability to drag images. In some browsers, they may have to be selected before dragging. As written in the previous item, a simple mouseup will result in an image being selected.
Images are selected using text selection and not "control selection" (that which provides the resize UI).
This is the best I could come up with after hours of very deep breaths. I think it is good enough if you really want to get rid of those handles.
In IE, Setting oncontrolselect to return false on the image, really does prevent those handles from appearing, and you can do it cleverly, by attaching the following handler to the mousedown event:
function (evt) {
var img;
function returnFalse() {
return false;
}
if (evt.tagName.toLowerCase() === "img") {
img = evt.target;
img.oncontrolselect = returnFalse;
}
}
It actually doesn't work completely well. The reason that it didn't work very well is that in order to begin a drag and drop operation on the image, one had to press and hold the mouse, without moving it, for a split second, and only then begin moving it for the drag. If one pressed the mouse and immediately began dragging, the image would remain in its place and not be dragged.
So I didn't do that.
What I did is the following. In all browsers, I used mouseup to text select the target image exclusively. In non-IE and IE11, synchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
selectSingleNode(img); // In my case, I used Rangy
}
}
In IE 7 through 10, asynchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() !== "img") {
return;
}
window.setTimeout(function () {
selectSingleNode(img); // In my case, I used Rangy
}, 0);
}
This made sure that after those handles show up, they disappear ASAP, because the image loses its "control selection" because that selection is replaced with a regular text selection.
In Internet Explorer 7 through 11, I attached a handler to dragend that removes all selection:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
deselect(); // I use Rangy for this, as well
}
}
This makes the handles that show up after drag and drop, disappear.
I hope this helps and I hope you can make it even better.
I just face that problem.
I tried document.execCommand("enableObjectResizing", false, false); but, the move icon was still appearing. What just fix my problem was just e.preventDefault() when onmousedown event occurs.
element.onmousedown = function(e){
e.preventDefault();
}
for IE11 (I havn't tested the older versions of IE, but I feel like it would work) you can add contenteditable="false" attribute to the img tag. This will prevent any re-sizing from being done while keeping drag and drop in place.
... just the best fix ever
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
or any html element that wraps your input/img
Works on IE11 like a charm
Have you tried adding the style
border: none;
to the div?