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.

Put <i> inside <li> at the bottom autoresize height

I am trying to style a little bit my menu.
I am using bootstrap and font awesome css styles.
I think it will much better to show the problem on live page.
I need to achieve two goals
I need to put this chevron icon at the bottom with little margin (2-3px)
like this. So it should be at the bottom in any case with little margin.
The problem is that < li > items is not resized according to the content inside it. As you can see on this screenshot. It is sticked to the bottom border and if I add some margin I will get following result
I am using following styles
.item-icon-container {
margin: 2px 0 15px 0;
float: right;
display: block;
height: 100%;
}
.item-icon-container .expand-indicator {
display: block;
}
.item-icon-container .badge {
display: block;
}
Here is full HTML code http://pastebin.com/S26C9xSU
Please help to solve the problem.
I would be grateful for any help

To make sure that all elements inside LI affected it's height we can add last element into LI with style clear:both
Possible solutions:
1) Use CSS with :after selector
.list-group-item a:after{
content:"";
font-size: 1px;
display:block;
clear:both;
}
2) Extra element. At the end of each li you can add
<div style="clear:both;"></div>
Something like:
<li id="cat-id-5" class="cat-parent-empty list-group-item">
<div class="item-icon-container">
<span class="badge">1</span>
<i class="fa expand-indicator fa-chevron-down"></i>
</div>
<a href="http://crosp.net/category/technology/" title="View all posts in Technology">
<i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
Technology
</a>
<div style="clear:both;"></div>
</li>
CSS style looks better. Extra element has better compatibility.

Try adding padding to your expand-indicator element (I'm guessing, without seeing your HTML). https://jsfiddle.net/ve39a1qj/
.item-icon-container .expand-indicator {
display: block;
padding-bottom: 20px;
}

How can I make png image act as a button?

I am using Dreamweaver for the first time to code. I am intermediate in HTML.
I've been trying to use a png file as a button. I've found some sources stating that a ...
<button src=Home_button> </button>
... will work, but I have tried it, and to no avail, it does not work. Any suggestions?
NOTE:
I am also using a CSS to build this Very basic website.

Just add background-image to your button.
<button id="home_button">click me</button>
and then add:
#home_button {
background-image: url(...);
}
You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.
Here's a working demo as well:
#home_button {
width: 150px;
height: 150px;
background-image: url('http://i.stack.imgur.com/sfed8.png');
background-size: cover;
background-color: #eee;
}
<button id="home_button"></button>

You can add an img tag inside your button tag.
<button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>

There are many ways to create something that looks like an image and behaves like a button.
Here-below are code examples demonstrating 5 options worth considering...
Option 1 :
You could put an <img> element inside a <button> element :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
button, img {
padding: 0;
font-size: 0;
border: none;
}
<button id="myButton">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</button>
(see also this Fiddle)
Option 2 :
You could use an <a>-tag instead :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
a {
border: none;
display: inline-block;
font-size: 0;
}
<a id="myButton" href="#">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</a>
(see also this Fiddle)
Option 3 :
You could just attach your click handler directly to your image :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
<img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
(see also this Fiddle)
Option 4 :
You could set your image as a background-image of a <button>-tag or other tag that represents a button.
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
input[type=submit] {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<input type="submit" id="myButton">
(see also this Fiddle)
Option 5 :
You could set your image as a background-image of an <a>-tag, a <div>-tag or another tag that doesn't represent a button :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
div {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<div id="myButton"></div>
(see also this Fiddle)

You could do <img src="#" alt="" /> to achieve what you want.

There are several ways to use an image as a button..
<a href="your_link.html">
<img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
</a>
css..
#mypic {
background: #390239;
color:#7e4a00;
border:#7e4a00 2px solid;
border-color:;
outline:none;
padding: 6px;
border-radius:5px;
text-align: center;
}
Chris also has a good answer... it depends on what looks good on the page, as well as your coding knowledge.

Here's what you can do...
HTML
<button>Click Me</button>
CSS
button {
display: inline-block;
height: 50px // height of your button image
text-indent: -9999px // hide if you have text inside <button>
width: 100px // width of your button image
}
Hope this will help :)

how to prevent focus on any button, input, etc on a div?

I have a div which is a container of various things. Sometimes it contains some simply tables, and other layout stuff. But sometimes it contains buttons and forms.
This container div can show another div modally. Which I achieved by simply making its position: absolute, and have its top/bottom/left/right 0.
It looks nice but when I press the tab button focus can go to the elements on the div behind. How can I prevent this?
I know I can disable focus on one element by setting tabIndex=-1 so I could iterate however when the modal disappears I would need to restore all this elements. Which means extra work. I wonder if there is a general way of doing this with jQuery or maybe jqueryui or vanilla js?
EDIT:
Working example in jsbin:
https://jsbin.com/veciju/1/edit?html,css,js,output

I am not sure what is the exact issue without the fiddle, and did not check the code. But here is my solution (pure javascript) hope it helps
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<p id="filler">
Hello World.
</p>
<form id="myForm">
<input type="text" />
<input type="submit" value="submit"/>
</form><br>
<button id="openModal" onclick="openModal();"> Open Modal</button>
<div id="modal" class="hidden">
<p id="modelP"> This is a modal DIV. You cannot escape me</p>
<button id="closeModal" onclick="closeModal();">Close Me</button>
</div>
</div>
</body>
<style>
#container{
margin: 50px auto;
padding: 100px;
color: white;
width: 50%;
height:400px;
background-color: black;
text-align: center;
}
.hidden{
display: none;
}
#modal{
background-color: green;
border: 5px solid red;
z-index: 100;
width:80%;
height: 80%;
left: auto;
}
</style>
<script>
function openModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.removeAttribute('class');
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].setAttribute('disabled','disabled');
}
}
function closeModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.className='hidden';
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].removeAttribute('disabled');
}
}
</script>

Checkbox inside button?

Is there any way to get a checkbox inside a button?
At the moment I have this solution:
<html>
<body>
<div id="menu">
<button><input type="checkbox" /></button>
</div>
</body>
</html>
It's ok, it works fine with Chrome and Firefox...but really awful with IE, so I need another way to achieve this goal.
Any ideas?
Thanks

I think its not a valid mark up to place a checkbox within a button. It would be better to replace the button with span or div and apply some CSS to span or div to make look like button and apply click event to that and change the checkbox state.
Just an example for you

I'm not entirely sure what you're trying to achieve here, so please forgive me if my answer isn't what you were looking for. If you want a button which changes the state of a checkbox, then #thecodeparadox's answer should work great, however if you're looking for a button which performs a function but also has a checkbox inside of it which can be toggled, you might want something like the following:
HTML:
<div id="button" href="#">
<input type="checkbox" class="check">Submit
</div>​
CSS:
body {
margin: 10px;
}
#button {
display: inline-block;
background: #ddd;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
.check {
display: inline-block;
margin-right: 10px;
}
​jQuery:
$('#button').on('click', function() {
window.location = '#';
})​
http://jsfiddle.net/QStkd/278/

It's not valid markup but you can cheat IE with jquery -
<button>hi</button>
$('button').prepend('<input type="checkbox" />');
Demo: http://jsfiddle.net/Gg9fG/