I mean android, ios, etc.
While there's no solution / replacement for mouse over on those interfaces, how can we gather all those relevant infos, for instance from stack exchange, while navigating through them? In SE case, it becomes even more relevant when you want to grab the tags info. But I mean in general, for any website.
Should we consider making a complete different style to accomodate this specific lack of info on ipads?
Is there already any good solution for this?
I'm using jQuery to create a click event that is an alternative to the normal mouseover event, In the example a tooltip is inserted after .tooltip on a normal mouseover event.
/**
* when tooltipss are clicked trigger their mouseover event then fade the tooltip
* (this is friendly to touch interfaces)
*/
$('.tooltip').click(function(){
$(this).mouseover();
// after a slight 2 second fade, fade out the tooltip for 1 second
$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
$(this).fadeOut(1000);
}});
});
The idea here is to show the tooltip for a few seconds and then have it fade naturally. But in general all you need to do is have the click event call the mouseover event and then do something to remove the tooltip when you are done with it.
I do not know about other approaches, but what i have done to facilitate non visual browsers is to have a button that when the mouse is over it shows a tooltip and when clicked or pressed shows a messagebox with the same information as the tooltip. Keep in mind "messagebox" does not have to mean the ugly alert box it can be custom. the thought being the alert allows screen readers etc to know about the additional information being provided.
Related
I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.
The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;
This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?
Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.
The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?
I've written a simple script that displays circles over an image.
When you hover over a circle it expands to a tooltip.
$('div.tooltip').live({mouseenter:function(e){
... animate tooltip open;
},mouseleave:function(e){
... animate tooltip closed;
}});
When you click on the open tooltip it displays a lightbox with more information.
$('div.tooltip').live('click',function(e){
... open related lightbox
});
Everything works as it should, except on mobile devices. When I tap the circle to open the tooltip it fires the click event and completely bypasses the mouseenter/mouseexit events.
Any ideas would be greatly appreciated :) Thanks
Because of the nature of touch screen devices they dont support hover events at all. The best you could do in this regard is use a jquery plugin that supports gestures and use the single-tap and double-tap events, otherwise you would need to place the tooltip somewhere else and make it visible always or have a separate button that solely activates the tip... or you could make it so the first click activates the press and then the next click activates the second function.
I have a div in which there is a link. When a user takes the mouse pointer over the link, I call the basic_nav_mouseover() function which changes the background-image of the parent div. I have also added the function basic_nav_mouseout to the ommouseout attribute of the parent which should set the background-image of the parent div to none when the mouse pointer leaves the div. However, strangely, the function basic_nav_mouseout() is getting called as soon as the mouse pointer in leaving the link in the parent div. Here is a test page : http://spats.in/test/. Look at the links 'about' ,'people','connect' on the top right corner.
Where am I going wrong?
There's a really good explanation of the limitations of the mouseover and mouseout events in the jQuery docs (about half way down that page).
Mouseover and mouseout events trigger when you move the mouse over the bound element, as expected, but they also fire a separate event when you mouse over any inner elements within the parent element - this is obviously undesirable in most circumstances.
Basically, to fix your problem, use the mouseenter and mouseleave events instead.
From a user experience point of view, I'd encourage you to bind both events to the link, so that the special background colour actually indicates that the link is active - I think I'd find the effect you are trying to achieve quite misleading, because the highlighted background would make me think that I can still click the link, even though I cannot..
If you want to keep the visual effect you've current got (with a tall coloured area behind each link), make the link take up the whole box - i.e. 100% of the height and width of the div.
If onmouseover is set on the link, onmouseout should be set on the same element.
onmouseout gets triggered every time a child node is hovered over, you need to check the calling target.
http://www.quirksmode.org/js/events_mouse.html is a good resource.
I'm no javascript expert, but shouldn't you wait with binding the function to the event until the page is fully loaded? So:
window.onload = function(){
$('.item1').bind('mouseleave',basic_nav_mouseout);
};
Also (correct me if I'm wrong) I don't think you have to give the object as an argument in 'basic_nav_mouseout('.item1','red')', you can just use the 'this' keyword. So:
function basic_nav_mouseout(){
this.css('background-image',"none");
}
I don't know anything about the JQuery library though, my only (little) experience is with the Prototype library.
I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.