I have a map, which has about 3-5 divs on it. When someone clicks a div, it flips and a text appears on the back of the div. But if someone has the curser on a div and scrolls, the map should behave like it always does and zoom.
I found this in another question: http://jsfiddle.net/ZqfTX/. Is there a way to say
dblclick: function(){$(this).[IGNORE]} ?
My idea is only an idea. If you have another way to do it, even better.
This should take care of what you want. Here is an updated jsFiddle which sets a timeout and prevents a double click from occurring. You can set whatever amount of time you want before a second single click is allowed. It also detects the scroll of the mouse wheel and alerts up or down based on the direction of the scroll.
From your OP and comments, I believe this should accomplish everything you were asking. As far as the animation of your div, I don't know what you are doing with it so that part would need to be changed to do what you want.
The code snippet below was found and modified from this other SO post and many thanks to that poster: How to disable double clicks or timeout clicks with jQuery?
Preventing Double Click
jQuery('.flip').click(function() {
var $this = jQuery(this);
if ($this.data('activated')) return false; // Pending, return
$this.data('activated', true);
setTimeout(function() {
$this.data('activated', false)
}, 1500); // Time to wait until next click can occur
doFlip(); // Call whatever function you want
return false;
});
function doFlip() {
if ($('.flip').find('.card').hasClass('flipped')) {
$('.flip').find('.card').removeClass('flipped');
} else {
$('.flip').find('.card').addClass('flipped');
}
}
On a side note, if you do not want the user to have the ability to even single click the div a second time, take a look at jQuery's .one() event handler attachment as it only allows execution once per element. Not sure if you want to have the ability to click it a second time but figured I'd throw it out there just in case.
If you want to prevent double click, you can try to use event.preventDefault
$(".yourClass").dblclick(function (e) {
e.preventDefault();
});
Looks like you'll have to bind event handlers for the events you want to pass through to the map and perform the zooming actions manually. This might help:
https://code.google.com/p/jquery-ui-map/
Related
Hi I need my drop down list boxes to close once they are out of focus or if the user is hovering over any other html element other than it. How can this be achieved?
I could think of a blur event, are there any better way to handle this?
Good question, just this will work only in FF cause IE and Chrome do not recognize events targeting option elements :(
a way to (not) accomplish this is to set a timeout for the option elements that will trigger once we mouseleave it. If a new mouseenter is registered for another option in the tree, we simply clear the timeout that will otherwise .blur() any select on the page*.
LIVE DEMO
var blurSelectTimeout;
function blurSelect(){
blurSelectTimeout = setTimeout(function(){
$('select').blur();
},200);
}
$('select').mouseleave(blurSelect).find('option').hover(function(e){
if(e.type=='mouseenter') clearTimeout(blurSelectTimeout);
else blurSelect();
});
Interestingly $(this).parent('select').blur(); would not work, so this is my best try.
I have a Grid component and it's verticalScrollPolicy is set to "auto".
And every time when verticalScrollBar appears or disappears, I want to handle this event.
I tried to listen to the RESIZE event:
private function onGridResize(event:Event):void
{
if (_grid.verticalScrollBar && _grid.verticalScrollBar.visible)
{
trace("scroll on");
}
else
{
trace("scroll off");
}
}
but it does not work: it seems to me, that RESIZE event actually dispatches before grid visual update and scrollbar appear/disappear.
I tried to listen ChildExistenceChangedEvent.CHILD_ADD and ChildExistenceChangedEvent.CHILD_REMOVE events as well, but it doesn't work for me too.
Maybe I just don't see some obvious solution.
Thanks in advance for any help or advise.
You do not specify which grid. (Spark, MX, or one of ours (http://www.flexicious.com/Home/Ultimate) )
One thing you could do is throw a validateNow prior to checking:
private function onGridResize(event:Event):void
{
_grid.validateNow(); //add this.
if (_grid.verticalScrollBar && _grid.verticalScrollBar.visible)
{
trace("scroll on");
}
else
{
trace("scroll off");
}
}
The other thing you could also do, is use a timer or call later.
private function onGridResize(event:Event):void
{
callLater(checkForScrollBar); //check for scrollbar would have the code above.
}
Perhaps you can listen for the "show" event of the ScrollBar itself. Something along the lines of this should work:
_grid.verticalScrollBar.addEventListener(ComponentEvent.SHOW, onGridResize);
I haven't tested this, but I'm pretty sure it should work. (Of course, you may want to rename onGridResize to something more suitable like onVerticalScrollShow.)
By the way, you don't have to check that the ScrollBar exists; in pure AS3 at least, they are instantiated along with the DataGrid and exist regardless of their ScrollPolicy value.
The reason the resize event appears to fire right away is because it is dispatched as soon as its dimensions change. I'm assuming that in your application, the user drags to manually adjust the grid's size, and thus the events fires as soon as any adjustment is made.
I'm currently design an application that when a button is pressed it expands to display further information. A major issue I am faced with is that if the button is pressed whilst contracting so that it expands again, the co-ordinates are saved from when it was clicked, meaning it will never return to its original state.
I either need a way of disabling the mouse click on the button whilst the TweenMax is doing its job in contracting the button, or by extracting the coordinates from an array.
I've managed to get the array of coordinates from my menu class into the main class, but can't work out the best way in order to stop the problem from occurring.
--
expand = false;
(run menu function)
item.addEventListener(MouseEvent.CLICK, boxExCo);
private function boxExCo(e:MouseEvent):void
{
if (!expand)
{
selectedBox = e.target as Box;
boxX = selectedBox.x;
boxY = selectedBox.y;
expand = true;
TweenMax.to.... (expand)
}
else
{
expand = false;
TweenMax.to... (contract to coordinates)
}
}
You need to use item.removeEventListener(MouseEvent.CLICK, boxExCo); when you no longer want the event to be able to fire, and then just add it back on using
item.addEventListener(MouseEvent.CLICK, boxExCo); when you want the event to be able to fire again.
Once you start your tween max, remove the event.
Once it is finished, add the event back on.
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.
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?