I have a situation similar to this one where I have a button that I need to have no pointer events AND show a not-allowed cursor.
The answer given by #Petr Odut worked spectacularly (many thanks) except for the part about the tab index and on focus.
The solution he gave to that problem involves hard coding the tab index and on focus attributes into the specific element. However my element has its disabled class added programmatically with jQuery. Sometimes it is disabled, sometimes it isn't, so I cannot hard code those attributes.
I know I could set those attributes with jQuery at the same time I set the disabled class, but this button is not the only button I'd like to have this functionality for. I'd like some way to set the tab index/on focus globally, so that any disabled button exhibits that behavior.
So, is there a way to do that?
Note: I'm still new on stackoverflow and don't have enough reputation to ask this question directly in a comment on the post, which is why I am doing this. I apologize if asking this way is improper etiquette.
Also, much thanks Petr.
Something like this?
and pure JS version:
[...document.querySelectorAll('a.disabled')].forEach(a => {
a.setAttribute("tabindex", "-1");
a.setAttribute("onfocus", "this.blur()");
console.log(a.getAttribute("tabindex"));
})
$("a.disabled").each(function(i) {
$(this).attr('tabindex', "-1").attr('onfocus', "this.blur()");
console.log($(this).attr('tabindex'))
});
/* Adding cursor just works: */
.disabled {
cursor: not-allowed;
}
/* Makes link non-clickable: */
.disabled:active {
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Disabled link
Disabled link2
NOT Disabled link3
Related
So this follows along with some similar questions that have been asked on here but mine is a very specific scenario I'm trying to work within. The situation is I'm on the production end of a CMS and I need to manipulate a forms module in a very specific way but my current access is very limited. In plain english, I need to be able to click a button, have that click append a specific string into a text field and then trigger the click event on another button after this string has been appended. What I have so far, while not perfect, seems like it should work but is not. And yes I'm aware that this is a very odd, roundabout way of doing this but it's a short-term hotfix to accommodate a deadline so trust me when I say this approach is the only current option.
The code:
CSS:
<style>
.form-group {
visibility: hidden;
}
input[type="submit"] {
visibility: hidden;
}
</style>
Js:
<script>
$("#yes").click(function(){
$('#yesHide').contents().appendTo('#textFieldID');
$('#submitID').trigger('click');
});
$("#no").click(function(){
$('#noHide').contents().appendTo('#textFieldID');
$('#submitID').trigger('click');
});
</script>
HTML:
<a id="yes">yes</a>
<a id="no">no</a>
<p id="yesHide" style="visibility: hidden;">This page was helpful</p>
<p id="noHide" style="visibility: hidden;">This page was not helpful</p>
If the button lives in a form, you can try triggering the submit on the form like this:
$('#formID').trigger('submit');
Otherwise, you'll need an event handler on your #submitID button that actually does something, otherwise you'll be triggering an event that isn't being listened for.
I am trying to generate a dynamic dropdown on a mouse over event over an object. I accomplished it like so,
canvas.on('mouse:move', function (e) {
$('body').append("<div id='imageDialog' style='position: absolute; top: 0; left: 0'><select id='mySelect' onchange='copy();'><option value='wipro' >wipro</option><option value='Hcl' >Hcl</option><option value='krystal kones' >krystal kones</option></select></div>");
});
This functionality works fine. But there is an issue in my next requirement where I need to capture the selected item when the user selectes an item from the drop down. I know its a long shot but I tried it by having onchange='copy();' in the drop down and alerting out the selection made like so,
function copy(){
alert(document.getElementById("imageDialog").value);
}
But as expected it gave the error Uncaught ReferenceError: copy is not defined.
I was at this for some time and had no luck whatsoever and I would really appreciate any help from you experts regarding this.
Thanks.
I'm not sure I understand some of these design decisions (generating select boxes is an odd way to do a dropdown menu) but we'll skip that part for now and get to the good stuff.
When you add new elements to the DOM after initial load, you need to think of event binding a little differently. Since these initial elements weren't around when you first said "Hey, all elements do this when I hover on you", the way you handle it is by telling a parent element instead. Sticking in jQuery-land:
$('.parent-element').on('click', '.child-element', function (){ });
This gives you the same result as assigning click directly to .child-element if it was around at initial render. You can read more about delegated events here: http://api.jquery.com/on/
Here's a fiddle that cleans up your stuff a bit: http://jsfiddle.net/g6r8k6dk/1/
without using pure javascript, use jQuery like the following code.
$('document').ready(function(){
$('#imageDialog').on('click',function(){
alert($('#imageDialog select').value);
})
})
When I am updating links with JavaScript
$('#link_id').attr('href', some_new_url)
the color theme for visited/non-visited links persists, regardless of the status of the new url address.
Is there a way to change link address forcing browser to re-check its visited status?
Further notes:
I am (on OSX 10.8) experiencing this problem in Chrome (32) and Safari (6.1). In Firefox (26) the links status gets updated automatically, as desired.
The example above is in jQuery, but the problem is the same way with with vanilla JavaScript, i.e. document.getElementById and setAttribute.
(I would prefer to avoid deleting and adding <a></a>, if possible.)
EDIT:
Minimal (non-)working example (by Joeytje50): http://jsfiddle.net/3pdVW/
Definitive answer
What you could do to fix this, is simply forcing the browser to recalculate the styles by completely removing the href attribute, and then re-adding it back again immediately afterwards. That will make the browser first calculate the styles, since the <a> is no longer a link without the href, and then you add the href you want to give it. The code would then be:
$('#link_id').removeAttr('href').prop('href', some_new_url);
Demo
PS: in this case, using .attr('href', some_new_url); would probably work equally fine.
Previous attempts
What I'm thinking is that this is a rendering glitch. It doesn't recalculate the styles when the :visited state changes because of the script. This minimal example of your problem shows this well. What you could try is either of the following:
Using the element's properties
What the problem might be is that you're changing the attribute, which in turn changes the href property. If you directly change the href property it might work. You can do this via jQuery.prop, which would use the following code to change the link:
$('#link_id').prop('href', some_new_url);
Demo. I don't really have very high hopes about this one, but it's worth trying. What I do suspect will work much better is:
Forcing to recalculate the styles
If you want to force a recalculation of the styles, you can simply change a class on the highest element you want updated. Since you're updating the <a> element alone, you'd need something like this:
$('#link_id').prop('href', some_new_url).toggleClass('webkit-force-recalculate');
Demo
I think that is quite likely to do the trick.
If neither of these approaches work for you, you could of course use maximgladkov's solution.
You can change it like this:
$('#link_id').replaceWith($('' + $('#link_id').text() + ''));
It should do the trick. Tested: http://jsfiddle.net/maximgladkov/L3LMd/
Frequently experience similar issues, e.g. when setting size of elements with border, there are stray borders left etc.
Though this is not directly the same, I have found that hiding the element does the trick. Have not had any trouble with it.
Simple fiddle
$("#change_link").on("click", function(e) {
$("#anchor1").hide();
$("#anchor1").attr('href', $("#url").val());
$("#anchor1").show();
});
This should force a redraw of the element.
I think what you might be looking for is the following CSS code:
a:link {
text-decoration: none;
color: #00F;
}
a:visited {
color: #00F;
}
My CODE
HTML:
<p id="console"></p>
<button>Click <span class="icon"></span>
</button>
JS:
$('.icon').click(function () {
$('#console').html('Icon has been clicked');
return false;
});
$('button').click(function () {
$('#console').html('Button has been clicked');
});
CSS:
.icon {
background-position: -96px 0;
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
line-height: 14px;
vertical-align: text-top;
background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");
background-repeat: no-repeat;
}
Demo
Problem
I am able to click on .icon in Chrome , but not in Firefox. When I click on .icon, it clicks on whole button.
Question:
Isnt my code valid ? If my code is valid, whats the solution to this problem.
What I have tried
I have tried doing $('.icon').click() from console and it works perfectly in ff, so I guess the problem is that span is not clickable inside button.
e.preventDefault() and e.stopPropagation are not working either.
I've tried putting inside span but its not working either.
Refer to the spec, most notably the forbidden contents (in the SGML definition; for assistance reading that, look here): as, forms, form "controls" (input, select, etc), and fieldsets.
While you are correct in asserting that spans (and divs, etc) are legal contents of a button element, the illegal elements are all to do with having button content that does anything other than layout / styling.
I don't see anything in the spec precluding what you're trying to do, but I do see a lot discouraging it, and would be unsurprised if various browsers also "discouraged" that by not supporting it.
Which is to say: find another way to do what you want if you want to have cross-browser support. I don't understand what you're actually trying to do, so I don't think its possible to propose alternatives. I get that you want to respond differently to clicking on the button vs the icon -- but that's a (good, btw) demonstration of what you don't want to happen, not an explanation of an actual problem you want to solve.
One way might be to not use a button, and instead use another span or a div:
<p id="console"></p>
<div class="button_replace">Click <span class="icon"></span></div>
<script>
$('.icon').click(function () {
$('#console').html('Icon has been clicked');
return false;
});
$('.button_replace').click(function () {
$('#console').html('Button has been clicked');
});
</script>
If you're here, maybe this solution will work for you, even though it's not really related directly to the question.
If you've applied a
$("button").click() listener, and
your button contains a <span> or any other <tag>, and
your .click callback function refers to $(this) (or even this)
Then, if you click on the button, this will likely be the top-most tag you CLICKED ON.
This will often, such as in my case, misattribute the caller, causing script errors.
Hope it helps someone out there!
Using previous answers, I found that just changing my to fixed the problem and allowed me to have content inside the button.
The styling is virtually the same, I just left the same bootstrap button classes and element in there and it behaves just the same as before. The tabindex is there because I'm using a dropdown list inside the button so that the button (now div) can be focused and have (blur) or (focusout) event in Angular.
I've got the following list item:
<li>
<input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
<label for="ctl00_mainContent_someRadioButton">
<img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" />
</label>
</li>
So what shows up is a radio button and an image next to it. When I am in FireFox, Chrome, and Safari clicking on that image fires the showSomeInfo() that's specified in the radio's onclick. I'm not sure why I guess because it's wrapped in a label and that label is relating to that radio button....
But anyway that's not my problem. I like that when you click the image, that javascript method showSomeInfo() is called. But the problem is that it works in all browsers except IE 8. If I open this page in IE 8, clicking on the image does nothing and I'm not sure why. I'm baffled at this one.
I was looking for an answer to this and wrote a quick dirty jquery handler for it:
$("label").click(function(){
if ($(this).attr("for") != "")
$("#" + $(this).attr("for")).click();
});
There's a slightly cleaner approach to change the markup that doesn't involve (ugly) CSS hacks or Javascript; change the <img> tag to a <span> tag with a background-image of the appropriate size. For example:
<li>
<input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
<label for="ctl00_mainContent_someRadioButton">
<span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" />
</label>
</li>
Replacing the width and height of your image appropriately.
The reason it works the way it does in Firefox et al is that that's what <label> is supposed to do when it's got a "for" attribute that points to an input field (by "id" value). If it doesn't work that way in IE, it's because Microsoft either interpreted the standard differently or simply failed to implement it correctly. (I don't see any clear language in the w3c reference I found to stipulate whether anything but text content of a label should get focus and transfer it.)
I've also discovered that if you have a hidden input with display:none or visibility:hidden and are relying on the label for selection it will not work in ie8.
My workaround was to have an overflow:hidden on the containing element and position the input outside of this area.
I Guess I have a better hack solution for this problem.
I will explain why for first.
Using jquery to hit the label click works, but not when you are using an Input File, because you will receive access denied.
Using css and display the image as a background it´s not good too because you need to have an image with the exactly size, which is not the case when the user uploads the Image or you have a lot of images with different sizes.
Ok now I´ll explain the idea of the hack:
You have a Label with an image inside, when you click the image, IE8 doesn´t fire the Label. But if you write some text into the Label, when you click the text IE8 fire the label.
The Idea is to put a span inside the label, with the size of the label (width and height)
Ok but if you don´t have text inside it won´t work, but if you change the background color it will work.
So what you need to do is:
Place a Span with the role size of the Label
Write a background color and make it transparent
Position the Span using relative position to put the Span exactly over the Label.
It´s a little hard to do it, but I guess it will cover many more situations.
An example of a Label firing the Input type File:
<label for="" id="lblInput" style="cursor: pointer; z-index:3;">
<img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" />
<span style="position:relative;
top:-180px;display:block;height:180px;width:280px;
z-index:1;background-color:Aqua;
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
background: rgba(255, 255, 255, 0.0);" >
</span>
</label>
I hope it works and save you Like it saved-me
Are you sure you aren't simply looking at a typo?
Check "ctl00_mainContent_someRadioButton" vs. "ctl00_mainContent_somelRadioButton"
It looks like IE doesn't properly handle labels with img elements in them. The only reasonable ways I have been able to find for dealing with this problem are either using HTML component behaviors, Javascript handlers, or CSS hacks. I haven't tried all of these so I can't guarantee that they will work.
I tried some of the other solutions posted here and eventually amended them to get a working fix to your problem. My problem was similar, though the HTML looked a little different, with the LABEL tag wrapping both the image and the INPUT radio button.
The solution I include below will ensure that any onClick handlers fire correctly on the radio button itself. It also does this only once and not in browsers where the radio button label behaves normally.
This is the jQuery code I used to solve the problem in Internet Explorer 11:
$('LABEL > IMG').click(function () {
var inputId = $(this).parents('LABEL:first').attr("for");
if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click();
});
The code above uses the jQuery method attr() to manipulate the checked property. If you're using jQuery 1.6 or higher you should modify this to use the jQuery method prop() instead.
This works for me with a group of radio inputs followed by labels containing an image. Basically used it instead of using for attribute in all browsers
inputs.each(function() {
$(this).click(function (e) {
// do stuff ...
});
// adding click handler to label containing image
$(this).next().on('click', function(event) {
// prevent 'for' attribute firing
event.preventDefault();
// check and trigger click on input
$(this).prev().prop("checked", true).trigger('click');
});
});