Say I have the following situation:
<div draggable="true" ondragstart="behavior">
Text Link
</div>
And I want the whole div to behave the same when dragged and dropped, how would I do this? The anchor tag seems to have it's own default behaviour that overrides the dragging on in the div. If I suppress that, by adding ondragstart="return false" I can't drag the div at all by dragging the link.
I suppose I could manually add the dragging behavior to the anchor tag so that it overrides the default behavior and matches the div behavior, but that seems kludgey.
I could also make a new tag to replace the anchor tag, but that also seems lame.
Is there a more elegant way to solve this?
Seems like this is the answer you are looking for: HTML5 - Drag N Drop with divs and inner-images
In short - add draggable="false" attribute to the link.
Related
I am working on tabbing through the whole web page using the keyboard(tab key, shift+tab key) and everything is working fine and smooth. Also when i keep pressing the tab key, the focus cycles through all the elements(address bar, elements, back to address bar and so on).
Now in some cases, i have an modal and an transparent overlay on top of my content. Now when this happens, when i use tab key, i move from the left menu to the overlay and from the last focusible element on the overlay, i have to force the focus to the body element(or the address bar). So Basically when there is an overlay, i want to ignore the element below the overlay from tabbing. Is there any way i can achieve it cleanly?
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
Thanks
This is an oldish question, but I just ran into this issue today, so I thought I'd share my solution.
As long as you know the tab order of items in your overlay, you can just add a blur event listener on the final item and use it to move the focus back to the first item in your overlay:
lastElementInOverlay.addEventListener('blur', function()
{ firstElementInOverlay.focus(); });
It strikes me that this would be easier than changing the tabIndex of all the elements under the overlay (and then having to change them back when the overlay is gone.
The 'modern/future' solution to this problem seems to be the inert attribute...
So taking the example above, it would look like this with overlay opened
<div id="menu" inert>
<a>
<a>
<a>
</div>
[...other code with tabindex]
<div id="overlay">
<a>
<a>
<a>
</div>
Now since inert is still a work in progress; you'll need to use the following polyfill (for now): https://github.com/WICG/inert
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
This is what i usually do when fixing the tabbing of elements.
There is one other solution i can think of:
Setting the overlay tab-element lower then that of the rest.
Eg:
<div menu>
<a tabindex="10">
<a tabindex="11">
<a tabindex="12">
</div>
[...other code with tabindex > 10]
<div overlay>
<a tabindex="1">
<a tabindex="2">
<a tabindex="3">
</div>
The downside of this will be that after you have tabbed trough the overlay you will go to the menu again.
You could assign an id like "lastFocusableOverlayElement" to the last focusable HTML-element of your overlay and assign the focus to your trigger element (for example "menu-button") when leaving the last element's focus:
$('#lastFocusableOverlayElement').on('blur', function(){
if ($("body").hasClass("overlay-is-open")){
$('#toggleOverlay').focus();
}
});
In my case the last focusable element is always visible, regardless of whether the overlay is open. For this reason i needed an if query. It can be omitted if not necessary.
I have an IMG tag which has an associated OnClick event.
I see that TAB-key navigation skips this image field, but I need to have it stop there and treat the element as a regular tabbable control field.
Is there a way to do this? I can't just wrap a simple A-tag around it, since that affects various stylesheets and breaks the design.
In general, the best approach is to use a button instead, and bind the click event to that.
<button type="button"><img src="..." alt="..."></button>
You can also stick tabindex="0" onto the image so that it will appear in the tab order (without specifying a specific place so the ordering is natural), but this doesn't give as good results with AT.
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.
Does anyone know how to fix (or what causes) the page up/down bug in FF when contentEditable is present on a div?
See an example
Navigate to contentEditable article with FireFox (3 or 3.5) and use the Page Up/down arrows on your keyboard. You should be unable to scroll to the bottom of the page, and it should appear to flicker and jump back up.
I think it's a bug of Firefox which even exists in the newest version, 3.6.8.
For the sample page there are 2 ways to make the page up/down buttons work:
Change all the three DOM node's contenteditable="true" to false.
Find the id="main-content" node, and delete the style float: left;.
Seems the problem for Firefox is contenteditable="true" conflict with the style float:left;.
The only way i can see is to use an iframe... like TinyMCE and CKEditor WYSIWYG editors, they both use iframes. However content loaded in an iframe does not posses the styling rules of its parent. Therefor has to be adapted ... the reason to herald the contentEditable div in the first place.
Since no one answered i'm going to sulk and play with matches
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:
<div class="myclass" href="example.com">
<div>...</div>
<table><tr>..</tr></table>
....
</div>
And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.
You can add the onclick for JavaScript into the div.
<div onclick="location.href='newurl.html';"> </div>
EDIT: for new window
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
You can put an <a> element inside the <div> and set it to display: block and height: 100%.
You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:
<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>
and the example CSS:
#smallbox {
cursor: pointer;
}
So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!
This is a late answer, but this question appears highly on search results so it's worth answering properly.
Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.
That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.
Add an onclick to your DIV tag.
http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/
Why don't you just do this
<div>...</div>
That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.
alternative would be javascript and forwarding via the onclick event
<div onclick="window.location.href='somewhere...';">...</div>