Develop Reference

Javascript dynamically set width based on number in class name

I have a table and within each cell with reside one single div with a class that is prefixed with perc- and will contain on number ranging from 0 to 100. For instance perc-60 which would equate to 60%.
I can do this in CSS by generating a SASS loop and processing 100 variants on the perc- class. For purposes of learning I'd like to know how I can achieve an inline style via Javascript where by I can set the width of the div based on the number in the class. The numbers get applied via a backend system out of my control, but will related to some data from the user.
Example markup:
<table>
<tr>
<td class="perc-60"><div></div></td>
</tr>
<tr>
<td class="perc-15"><div></div></td>
</tr>
<tr>
<td class="perc-45"><div></div></td>
</tr>
<tr>
<td class="perc-16"><div></div></td>
</tr>
<tr>
<td class="perc-88"><div></div></td>
</tr>
<tr>
<td class="perc-79"><div></div></td>
</tr>
<tr>
<td class="perc-98"><div></div></td>
</tr>
</table>
At the moment I use a SASS loop to go through all the classes and target the divs width within the td.

I got carried away, I made it fancy, sorry. I used JavaScript as originally requested. There are comments for each step of the script.
var td = selArray('td'); // Make an array of <td> selectors
for (var i = 0; i < td.length; i++) { // Loop thru array
var perc = td[i].className; // Find each <td> class
//console.log('Cell '+i+': '+perc);
var cell = document.querySelector('.' + perc); // Create DOM Object for <td>
//console.log(cell.className);
var div = cell.querySelector('div'); // Create DOM Object for <td> > <div>
var str = perc.split('-').pop(); // Strip 'perc-' from class, now a String "number" remains
/* http://stackoverflow.com/a/3568968/2813224 */
var divWidth = str + "%"; // Add a "%" to String "number"
//console.log(divWidth);
div.style.width = divWidth; // Assign String "number" as <div> width
//console.log(div.style.width);
div.innerHTML = divWidth; // Insert width as text into <div>
}
/* This function will accept a selector (ex. #elementID, .elementCLASS, elementTAGNAME, etc.) like jQuery does and then returns an array of selectors that matched.
https://developer.mozilla.org/en-US/docs/Web/API/NodeListhttps://developer.mozilla.org/en-US/docs/Web/API/NodeList */
function selArray(sel) {
var eleArr = Array.prototype.slice.call(document.querySelectorAll(sel));
return eleArr;
}
html {
box-sizing: border-box;
font: 900 16px/1.5'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
height: 100vh;
width: 100vw;
background: #666;
}
table.x {
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
border-radius: 6px;
margin: 20px auto;
width: 80%;
table-layout: fixed !important;
}
.x th {
color: #FFF;
background: #086ac8;
padding: 10px;
text-align: center;
vertical-align: middle;
height: 2em;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #2e90ef;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #57acff;
padding: 5px;
text-align: left;
vertical-align: middle;
height: 2em;
}
thead th:first-child {
border-top-left-radius: 6px;
}
thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.x td div {
height: 1.5em;
outline: 1px solid #FC0;
background: hsla(60, 100%, 50%, .3);
vertical-align: middle;
}
<table class='x'>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="perc-60">
<div></div>
</td>
</tr>
<tr>
<td class="perc-15">
<div></div>
</td>
</tr>
<tr>
<td class="perc-45">
<div></div>
</td>
</tr>
<tr>
<td class="perc-16">
<div></div>
</td>
</tr>
<tr>
<td class="perc-88">
<div></div>
</td>
</tr>
<tr>
<td class="perc-79">
<div></div>
</td>
</tr>
<tr>
<td class="perc-98">
<div></div>
</td>
</tr>
</tbody>
</table>

Here is a jQuery solution that would iterate through the td's and use the class as a parameter:
Hopefully your backend is already outputting single-digit values preceded by a zero.
$(document).ready(function(){
$("td").each(function(){
$(this).width($(this).attr("class").substring(5,7) + "%");
});
});
Make sure your tds are already using the right box-sizing:
td {
box-sizing: border-box;
}

Classes are abstractions which can be re-used across elements and easily bring in sets of properties. This is more modular and maintainable, since the classes can be changed or added to and the changes automatically propagate to all the elements that use them.
There is also a CSS architectural style which involves classes with very small number, even just one, property ("micro-classes"). In this case, it is not about modularity or ability to change the class; it is more a matter of syntactic sugar and compactness. For instance, I can define a class absolute which is defined as .absolute { position: absolute; }, then apply it to an HTML element by simply saying class='absolute', instead of style='position: absolute; '.
In your case, there is no advantage of using classes, especially if you plan to introduce additional preprocessor machinery to generate all of them. What you propose is exactly equivalent to merely putting a style='width: 60%; ' attribute on the element. And that is precisely what you should do.
Putting in-line style attributes directly on HTML elements is not "evil", in the sense that eval is, for example. It's a practice which has been deprecated to help encourage people to write modular, orthogonal style rules independent of the HTML. However, there's absolutely nothing wrong with it if the style is specific to the particular element. In fact, in such cases, it can be be considered bad design to separate and externalize classes whose only purpose is to assign one or more properties to a specific HTML element.

How to Hide TextBox without using Visibility:none

Goal:
Hide the textbox () without using css's "visibility:none;" and it should not take any white space row.
Problem:
Don't know any good solution to it.
Info:
*The code works only for EE and Chrome.
*Tried display: none, visibility: none and visibility: hidden but don't work to fullfill the goal.
"https://jsfiddle.net/yszq53jm/16/"
document.querySelector('p').addEventListener('mouseup', function(ev) {
var test = document.querySelector('.lame');
var bkp = test.value;
test.select();
document.execCommand('cut');
test.value = bkp;
});
.lame {
z-index: -1;
opacity: 0;
}
textarea:not(.lame) {
width: 100%;
height: 60px;
}
<p style="cursor: pointer;">
link
</p>
<textarea class="lame">
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</textarea>
<textarea></textarea>

Under the assumption that your intention is to mimic display: none(element not visible, no space reserved for it in the layout), you can try setting the element height to 0 and removing all padding/borders from it. So you could change your CSS for .lame to this:
document.querySelector('p').addEventListener('mouseup', function(ev) {
var test = document.querySelector('.lame');
var bkp = test.value;
test.select();
document.execCommand('cut');
test.value = bkp;
});
.lame {
background: transparent;
border: none;
display: block;
height: 1px;
outline: none;
padding: 0;
resize: none;
}
textarea:not(.lame) {
width: 100%;
height: 60px;
}
<p style="cursor: pointer;">link</p>
<textarea class="lame">
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</textarea>
<textarea></textarea>
Hope this helps! Let me know if you have any questions.
EDIT: I've now modified the CSS so the content is still focusable, since it cannot properly select the content when height is 0.

Change td class on click with javascript doesn't work

tried to apply this answer to make change the class of the cells in my table on click, yet it doesn't work :(
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
})
My example code in jsfiddle is here..
Could someone take a short look and point what to change?
I am trying to make font red and change background image of clicked cell, other cells leaving with (or returning to) grey font and default backround image.
Thank you in advance!
Valdas

Because you've included MooTools instead of jQuery ;)
Check out this fiddle. It works when using jquery...
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
});
Edit
Here you go, a proper version. What I've done: put buttons inside the table cell (instead of transforming table cells into buttons), used an active class for the active button (instead of copying the button css to the active_button class), and altered the javascript a bit (less lines = nice :))
Check it out here (fiddle)
And the relevant code:
HTML
<table>
<tr>
<td>Link One</td>
</tr>
<tr>
<td>Link Two</td>
</tr>
<tr>
<td>Link Three</td>
</tr>
<tr>
<td>Link Four</td>
</tr>
</table>
CSS
.button {
display: block;
width: 113px;
height: 30px;
text-decoration: none;
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button.svg);
background-repeat: no-repeat;
background-size: 138px 33px;
border: 1px solid #e6e6e6;
text-align: right;
padding: 0 25px 0 0;
font: 16px/30px 'Ubuntu';
color: #737373;
}
.active {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_active.svg);
color: #ff0000;
cursor: default
}
.button:not(.active):hover {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_hover.svg);
color: #000000;
}
Javascript
$('a.link').click(function(e) {
e.preventDefault();
$('a.active').removeClass('active');
$(this).addClass('active')
});
Note: In a live version, don't forget to wrap your javascript in a $.ready or closure

Be more accurate with libraries defined in jsfiddle. Here is what you need.
$('td.link').click(function() {
$('td.button_active').each(function(index) {
$(this).removeClass('button_active');
});
$('td.link').each(function(index) {
$(this).addClass('button')
});
$(this).removeClass('button');
$(this).addClass('button_active')
})

On Mouse Over, my text and image moves on left side in a weird way

I just added a small code to an existing one; to have a Text below an image. Plus On Mouse Over the Text should be highlighted in blue.
The things working for me, but somehow the text and image moves to left side on mouse over. I really don't know why. Can someone help me pls.
The image is in tag.
<td align="right" valign="bottom" id="helpid">
<a href="javascript: void(null)" onClick="if(legendDIV.style.visibility=='visible') { legendDIV.style.visibility='hidden'; isClickonLegend = 1; } else { legendDIV.style.visibility='visible'; isClickonLegend = 1;}">
Help
hghlightBG id the JS function i have written to make Text color blue on mouse over.
This is the only modification I have done in existing tag .
Javascript Code :
function highlightBG(id,action) {
if(action==0)
{
document.getElementById(id).className='AttachOnMouseOverText';
}
else
{
document.getElementById(id).className='AttachOnMouseOutText';
}
}
CSS Code:
.AttachOnMouseOverText{
color: blue;
font-size: 9px;
text-align: center;
}
.AttachOnMouseOutText{
color: black;
font-size: 9px;
text-align: center;
}

I'm guessing at least some of it is because you change the font size.
And another thing, when you use javascript to change style always try to check if you can do it directly with css selectors.
HTML:
<table>
<tr>
<td align="right" valign="bottom" id="helpid">
<a href="javascript: void(null);" onClick="{...}">
<img src="#ContactsImagePath#qmark_sm.gif" border="0" alt="Help">
</a>
<br>Help
</td>
</tr>
</table>
CSS:
#helpid {
color: black;
font-size: 9px;
text-align: center;
}
#helpid:hover {
color: blue;
}
This way you set a default display and only change one parameter.

Center Aling a Dynamic Width Table's Caption

I Have a Caption with Dynamic Width, and i Want it in the center of the table, but inline-block isnt working right, the inline make it in the center of the td, not of all the table, How can i make it in the center of the table? Here is a example of this html:
<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>
Thanks a lot in Advance!

If you want it to be both vertically and horizontally aligned in the center, you could use the following CSS:
table { position: relative; }
caption {
​position: absolute;
top: 50%;
left: 50%;
margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}​
jsFiddle
If you only want it to be horizontally aligned (at the top of the table, you could use:
caption { text-align: center; }
​
jsFiddle
Edit: Here is a solution that will allow a background behind a centered caption but also create a white background behind just the text part of the caption:
HTML
<caption>Title</caption>
CSS
div { background: url('background_image.jpg') repeat; }
caption {
text-align: center;
background: rgba(0,0,0,0);
}
span { background: white; }
JS
$(function() {
var caption = $('caption');
caption.html('<span>' + caption.html() + '</span>');
});​
jsFiddle