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.

Make popup have smart positioning

I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?

A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}

Click one div and goes to another on responsive website

Hi I am trying to get my website to be responsive. I have two different divs one on the left and one on the right on my website like so...
http://jsfiddle.net/1fupx7aa/2/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
On the website, when I click on the red div, content appears on the yellow div.
I am now trying to make my website responsive, so what I would like to do is on a smaller screen, the yellow div I set to display:none; and the red div width:100% like so...
http://jsfiddle.net/3jmbxumb/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
#media (max-width: 600px) {
.menu {
width:100%;
}
.view {
display: none;
}
}
Now what I need to do is, when I click on the red div, I would like the content in the yellow div to appear where I would create a back button that would lead back to the red div.
Is this possible?
I have been looking at the bootstrap carousel option, but I don't think this works for my website.
What would I call this and is this possible? Might there be a way where if I click on the red div on a mobile device the red div becomes hidden and only the yellow div appears?

You can do this using jQuery and having a specific hidden class for small screens - so you don't have to check for screen width in js.
Javascript:
var showContent = function () {
var $yellow = $('#yellow-view'),
$this = $(this);
//Hide red and show yellow
$yellow.removeClass('hidden-small');
$this.addClass('hidden-small');
//Add content to yellow view
$yellow.html('<strong>my content</strong>');
};
$('#menu').click(showContent);
CSS:
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
#media (max-width: 600px) {
.menu {
width:100%;
}
.hidden-small {
display: none;
}
}
https://jsfiddle.net/s9wkbL9m/2/

You might want to use jQuery to do this.
$(document).ready(function(){
$('.menu').click(function(){
$('.view').fadeIn();
});
});
Here is the updated Fiddle.

A quick JS writeup that would work for your scenario
$(function(){
$(".back_btn").hide();
if($(window).width() <= 600){
$(".view").hide();
}
$(".menu").click(function(){
if($(window).width() <= 600){
$(".menu").hide();
$(".view").show().text("Some text");
$(".back_btn").show();
}
else {
$(".view").text("Some text");
}
});
$(".back_btn").click(function(){
$(".view").hide();
$(".menu").show();
});
});

How to render an element on top of every other element on page without depending on the structure/styles used in the page?

I wish to display a button at a fixed position(sticky) on the page and it should always be on top of other elements on the page, assuming I have no knowledge of the structure and styles used on that page. The solution can only use Javascript(no jQuery), CSS3 and HTML5.
The solution has to be dynamic/adaptive i.e not directly dependent on the z-index values used on the page.

Demo: http://jsfiddle.net/lotusgodkk/sf1fukm5/
CSS:
.a {
position:fixed;
right:10px; //optional
top:10px; //optional
z-index:1;
background:grey; //optional
color:#000; //optional
padding:20px; //optional
}
HTML:
<div>--Content--</div>
<div class="a">Fixed</div> //Fixed div
<div>--Content--</div>....
For dynamic z-index using jQuery:
var highest = -999;
$("*").each(function () {
var current = parseInt($(this).css("z-index"), 10);
if (current && highest < current) highest = current;
});
$('your-element-selector').css('z-index',highest);
Using javascript:
How can you figure out the highest z-index in your document?
Refer: How to find the highest z-index within a document no matter what tags they are?

JSFIDDLE
CSS:
.fixed-button {
width: 125px;
background: #FFFFFF;
border-style: solid;
border-width: 1px;
border-radius: 3px;
padding: 5px;
margin-left: 0px;
position: fixed;
z-index: 999;
top: 70px;
}
HTML:
<button class="fixed-button"> fixed-button </button>
I hope you got the answer. You can change the position of button where ever you need

"Vertical accordian" design with HTML5/CSS3?

I have an idea for my personal website layout. I'd like stacked menu items on the left side (with like 10% width) and content on the right side. By 'vertical abacus' (the original calculator with beads on a rod), I'd like menu items to appear as boxes of varying colors with a set height for each box. Because they're a set height, there will be a large portion of empty space (colored depending on what menu you select).
Utilizing the new HTML5/CSS3, I'd like to know how I'd go about creating the menu so that when you select an item, that particular item (and the items above it) slide up and stack to the top, while changing the color of the empty space below it according to the color of the respective menu item. When a menu item that is stacked at the top is selected, the items stacked below it will move back down to their original position.
First visit to the website:
After clicking 'Page2':
(I'm such an excellent MSPaint artist, I know.)
Did I lose anyone yet? :)
Would I have to tweak this process with Javascript?
I'm not asking someone to code it for me (though obviously welcome), I just have no idea where to start since W3Schools.com is frowned upon and I have an amateur knowledge of the new features in HTML5/CSS3. Would something as seemingly simple as this be difficult to begin with?
Any help is greatly appreciated! :)

Create a Fiddle for you:
http://jsfiddle.net/M8bQH/
Please adapt Width/Height and colors to your needs!
HTML:
<div id="container">
<div id="sideBar">
<ul id="myMenu">
<li class="topic1 activeItem">Home</li>
<li class="topic2">Page 2</li>
<li class="topic3">Page 3</li>
</ul>
</div>
<div class="mainContent activeContent">
Content1
</div>
<div class="mainContent">
Content2
</div>
<div class="mainContent">
Content3
</div>
</div>
JavaScript (jQuery needed!)
$('#myMenu li').click(function(){
// Set active menu item
$('#myMenu li').removeClass('activeItem');
$(this).addClass('activeItem');
// Set active content according to item
$('.mainContent').removeClass('activeContent');
$('.mainContent').eq($(this).index()).addClass('activeContent');
// Adapt background color of content according to item
$('.mainContent.activeContent').css('background-color', $(this).css('background-color'));
});
CSS:
#container {
width: 800px;
height: 600px;
}
#myMenu {
list-style-type:none;
padding: 0;
margin: 0;
}
#myMenu li {
width: 100px;
height:48px;
border-bottom: 5px solid black;
-webkit-transition: height linear 0.5s; /* For Safari 3.1 to 6.0 */
transition: height linear 0.5s;
}
#myMenu li:last-child {
border-bottom: 0px;
}
#sideBar {
width: 100px;
height: 600px;
float:left;
border-right: 5px solid black;
}
.mainContent {
width: 700px;
height: 100%;
background-color: gray;
display: none;
}
.topic1 {
background-color: gray;
}
.topic2 {
background-color: #33CCFF;
}
.topic3 {
background-color: #99FF00;
}
.activeItem {
height: 494px !important;
}
.activeContent {
display: block !important;
}