Develop Reference

Disabling the button of an anchor tag

I have a button inside the anchor tag(defined it using class).
<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>
Now I want to disable it.So I have used the following code to disable the anchor tag.
moreButton.disabled = true;
The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled i.e. not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.

The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:
a {
pointer-events: none;
}
I am a disabled anchor tag

As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:
.contactButtonSmall {
position:absolute;
left:225px;
top:165px;
font-weight:normal;
font-size:11pt;
}
Then you can use the :disabled selector to change the appearance of the button when it is disabled:
.contactButtonSmall:disabled {
/* Styling for disabled button */
}

I have used button along with the style attributes
background-color: Transparent;
border: none;
instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.
example code is given below:
<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>
In CSS file:
.contactButtonSmall {
position:relative;
display: block; /* 'convert' <a> to <div> */
width: 60px;
max-height: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../contactImages/blankSmallButton.gif);
text-decoration: none;
text-align: center;
cursor:pointer;
background-color: Transparent;
border: none;
}

You can use a mixture of CSS and JS to accomplish this:
HTML:
<a href="/" id="myLink">
click me!
</a>
CSS:
#myLink {
background: red
}
a#myLink.disabledLink {
background: grey;
cursor: not-allowed;
}
JS:
document.getElementById("myLink").onclick = function(e)
{
e.preventDefault();
this.className += " disabledLink";
}
jsfiddle here
this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.

Javascript - Adding Class and Style Prescience

I'm trying to make little progress indicators for a form that change depending on the page you are on. I thought the easiest way to do this would be to create the circle ID's, style them, and then just add a class list with one or two stylistic changes to show something different as a specific page was brought up.
When my function executes, the new class with the changes is being added -- the dom is proving that -- but, the style is not overtaking the original.
I've tried classList.Add, classList.toggle, className.add/Classname.toggle. Nothing seems to work.
Why might that be?
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>

Calculating CSS Specificity Value:
As we know, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.
For more info https://css-tricks.com/specifics-on-css-specificity/
So, more specificity use Class aswell as IDs.
!importent, also works but it note a good practice.
Hope this will help you..

Your id step2 will always override your class newClass.
Easiest solution is just to change .newClass { ... } to #step2.newClass { ... } in your CSS to make it more specific
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
#step2.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>

How to change css background-image on click?

I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/

You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.

1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.

$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image

There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>

Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}

If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked

Problems with .addClass().removeClass()

I spent a few hours last night trying to figure out what was going wrong here, but was unsuccessful.
I have a div that when clicked will expand and create a close button that will return the div to its original state. I am doing this by adding and remove classes. The issue I am having is that when the original div (.talent) is clicked it does change to fill the containing div. However when the button (.btn) is clicked the div does not return to its original state.
JS -
$(".talents .talent").click(function(){
if ($(this).hasClass("talent")) {
$(this)
.removeClass("talent")
.addClass("tree")
.append("<div class=\"close btn\">X</div>");
$(".tree .btn").click(function(){
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});
$(".talents .talent").hide();
}
});
CSS -
.talents{
border:1px solid white;
border-radius:10px;
overflow:hidden;
height:165px;
margin:10px;
}
.talents .talent{
text-align:center;
font-size:2.4em;
height: 50px;
width: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
display: inline-block;
border: 3px solid white;
border-radius: 15px;
margin: 5px 7px 5px 7px;
}
.tree{
position:relative;
width:100%;
height:100%;
}

$(".talents .talent").click(function(){
if ($(this).hasClass("talent")) {
THE ABOVE CODE WILL ALWAYS EVALUATE TO TRUE
if you want this to work better, whatever element has the class of talent should also have another class, and work similiar like this(I would say use .tree as .other_class but can't be 100% certain without seeing html):
$(".talents .other_class").click(function(){
if ($(this).hasClass("talent")) {
Also, it would be a better practice to keep the btn click handler outside the first click handler.

Events are bound to the elements in question, not to a specific class. You need to delegate the events in such cases as the classes are being added dynamically.
In your case if you put a debug point you can see the issue properly. Th event bubbles up to the parent which at that time is .talent . So first it works as expected when clicked on close, but then fires the click event on .talent again which places the tree class on that element again. Event delegation should solve this problem.
$(".talents").on('click', ".talent", function () {
$(this)
.removeClass("talent")
.addClass("tree")
.append("<div class=\"close btn\">X</div>");
$(".talents .talent").hide();
});
$(".talents").on('click', ".tree .btn", function () {
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});
Check Fixed Fiddle

Haven't tested but another problem may be because the class .tree is appended dynamically. Also try using on like:
$(document).click('.tree .btn',function(){
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});

First remove the class and then try to add a class and see if it is working.
$(".tree").removeClass("tree");
$(".tree").addClass("talent");

simple onclick applied on <a> not working IE and FF

I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!

If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>

Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)

You might want to try something like this instead:
Default Categories