Develop Reference

Resize set of List Elements to width of widest list element?

I'm trying to get my list elements in my pure css dropdown to be uniform size based on the width of the largest element in the ul. This is the current html:
<nav>
<ul id="drop-nav">
<li>Home</li>
<li onmouseover="SizeChildren('DropDown1')">Filler
<ul id="DropDown1">
<li>Filler1</li>
<li>Filler223456</li>
<li>Filler212314235234523</li>
</ul>
</li>
</ul>
<nav>
I run the SizeChildren function passing the parent containers id to the function (note: I realize there is redundant code in here, it's stuff I was messing with):
function SizeChildren(ElementID)
{
var WidthArray = new Array();
UOList = document.getElementById(ElementID);
WidthArray = UOList.getElementsByTagName('li');
var MaxWidth;
for(i = 0; i < WidthArray.length; i++)
{
if(i == 0)
{
MaxWidth = WidthArray[i].offsetWidth;
}
else
{
var curr = WidthArray[i].offsetWidth;
if(curr > MaxWidth)
{
MaxWidth = curr;
}
}
}
var nodes = document.getElementById(ElementID).childNodes;
for(i = 0; i < nodes.length;i++)
{
if(nodes[i].nodeName.toLowerCase() == 'li')
{
nodes[i].style.width = MaxWidth;
}
}
}
There are two problems I am running into with the current code, first off, it is calculating the max width to be 82 (should be closer to 150 or close to it) and it is not actually setting the widths, meaning that nothing is actually changing on the page, and that I have no clue about, even with the max width getting miscalculated this portion of the code should still work, so what am I missing? I tried using .offsetWidth as well and that still produced no fruit.
I can't use JQuery, flex boxes, or anything like that, it has to be done in JavaScript if possible.

Duplicate a CSS rule using JavaScript only

I have a list that is generated elsewhere and I cannot change that.
The indent level is via & nbsp;, however the font-size is the same for each indent and I would like to change the font-size based on the indent level.
Therefore, I need to duplicate a css rule and change the new id and the font-size.
The following is the HTM generated code, which I cannot change:
<style type="text/css">
span.text12Font1 {
font-size:14px;
font-family:"Arial", sans-serif;
color:#010101;
font-weight:normal;
font-style:normal;
text-decoration:normal;
}
</style>
<div id="text12">
</a>
<ul style="margin-left:4px;text-align:left;" >
<li>
<span class="text12Font1">Emphasize the beginning of the bullet point</span>
</li>
<li>
<span class="text12Font1"> </span >
<span class="text12Font1">As in this list, when the first few words capture the main idea</span >
</li>
<li>
<span class="text12Font1"> That way, readers can skim easily</span>
</li>
</ul>
</div>
I can get each point and I can find all of the class names in each point.
What I need is the ability to duplicate a css class, give it a new id and just change the font-size.
I have the following so far:
function getNewClassName(className, newName, fSize){
var spanID = 'span.' + className;
//e.g.: span.text12Font1
for(var i=0; i<document.styleSheets.length; i++){
var sheet = document.styleSheets[i];
var cssText = sheet.ownerNode.innerText;
var posn = cssText.indexOf(spanID);
if(posn!=-1){
var oSheet = document.styleSheets[i];
var oRules = oSheet.cssRules ? oSheet.cssRules : oSheet.rules;
for(var r=0; r<oRules.length; r++){
if(oRules[r].cssText.indexOf(spanID)!=-1){
// Here I have the rule that I want to duplicate, change it's name to newName and change the font-size.
// I must not change the existing rule and it must remain as it could be used elsewhere
return true;
}
}
}
}
return false;
}

See update at the bottom of this post for a reference to editing CSS through JavaScript
Can you add a CSS class with Javascript to the containing li items.
You could count the number of occurences in each li and give the li a CSS class accordingly.
Something like this: http://jsfiddle.net/ncdajzur/
CSS
span.text12Font1 {
font-size:14px;
font-family:"Arial", sans-serif;
color:#010101;
font-weight:normal;
font-style:normal;
text-decoration:normal;
}
.whitespace1 span.text12Font1 {
font-size: 12px;
}
.whitespace2 span.text12Font1 {
font-size: 8px;
}
JavaScript (I used jQuery for quick testing purposes)
function formatText(id) {
var $list = $('#' + id);
$list.find('li').each(function(i) {
var numWhitespaces = ($(this).html().match(/ /g) || []).length;
$(this).addClass('whitespace' + numWhitespaces);
});
}
formatText('text12');
Update
An extensive explanation of how to manipulate stylesheets through JavaScript is available here:
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript#quickIDX1

AFAIK, you cannot duplicate a CSS rule with javascript. You can only apply a certain style on an element, but that will be applied within an inline style. So you can either change it by applying to the inline style or try something else.
I only know jquery way of doing that, that's by using $('.className').css('font', 'somefont')

I now have the following:
function duplicate_cssRule(passClassID, newClassID, fSize){
var nClassID = 'span.' + newClassID;
if(findCSS_Rule(nClassID)) return true; // Must have already done this one
var classID = 'span.' + passClassID.split(' ')[0]; // Might have multiple classes, we always want the first
var ruleObj = findCSS_Rule(classID)
if(!ruleObj) return false;
var cssText = ruleObj.cssText ? ruleObj.cssText : ruleObj.style.cssText;
var posn = cssText.indexOf('{');
cssText = cssText.substr(posn+1).trim().split(';');
for(var i=0; i<cssText.length; i++){
var fontData = cssText[i].toLowerCase().trim(); // IE is uppercase
if(fontData.substr(0,10)=='font-size:'){
cssText[i] = 'font-size:' + fSize + 'px';
break;
}
}
cssText = cssText.join(';');
cssText = cssText.substr(0,cssText.length-1);
if( styleSheet.insertRule ){
cssText = nClassID + ' {' + cssText + '}';
styleSheet.insertRule(cssText,styleSheet.cssRules.length);
}else if(styleSheet.addRule){
styleSheet.addRule(nClassID,cssText);
}
return true;
}
var styleSheet;
function findCSS_Rule(classID){
var sheets = document.styleSheets;
for(var i=0; i<sheets.length; i++){
styleSheet = sheets[i];
var styleRules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules;
if(styleRules){
for(var r=0; r<styleRules.length; r++){
if(styleRules[r].selectorText&&styleRules[r].selectorText.toLowerCase()==classID.toLowerCase()) return styleRules[r];
}
}
}
return false;
}
Works in all browsers, even IE8.

JavaScript Hiding li tag by selecting an html attribute not working

I have 3 columns which include dynamically generated list elements (li tags)
these have an attribute that I try to use to hide a row / li when an amount of character is not reached in this element.(by using opacity property)
I have it working...sometimes and sometimes it only works for one column out of the 3...
So I'd appreciate some insight on what's wrong here.
(function() {
// selecting all elements with class
// class="checkout-tariff-meta-maybe-hidden"
var elems = $(".checkout-tariff-meta-maybe-hidden");
// interact between founded elements
for (var k = 0; k < elems.length; k++) {
// getting text content size
var textSize = elems[k].textContent.length;
// if text size is one we will hide element
if (textSize <= 1) {
// hiding
elems[k].style.opacity = "0";
}
}
}());

You can just go straight to the point and do something like:
// Adjust as needed
$(document ).ready(function() {
$('.checkout-tariff-meta-maybe-hidden').filter( function() {
return $(this).text().length<3; } ).hide();
});

Since you're using jQuery, to hide an element you can just do:
$(elems[k]).hide();
Alternatively, if you're looking to hide it without collapsing (since you're changing opacity, I assume this is the case), look into .fadeTo():
$(elems[k]).fadeTo(1, 0);

You might look at ...
if (textSize <= 1) {
elems[k].style.opacity = "0";
} else {
elems[k].style.opacity = "1";
}
... to ensure they get turned back on when longer.

Show hide multiple tables

I was wondering if someone could help me out with a command;
If have the following script:
<script type="text/javascript">
function show_table(id){
document.getElementById('table1').style.display='none';
document.getElementById('table2').style.display='none';
document.getElementById('table3').style.display='none';
document.getElementById('table4').style.display='none';
document.getElementById('table6').style.display='none';
document.getElementById('table'+id).style.display='block';
}
</script>
And it shows the tables just fine that I have, but now I want to use a command to open two tables at the same time, so with one click on the below reference link;
Table6
Is it possible to use it with a double onclick="" command? I would like to open as example table(6) and table(2). What should I write? By the way I can only use javascript, no PHP.
I tried something like this, but is does not do the job
Table6 and Table2

Try this version, which can take a number or an array:
function show_table(id) {
var ix;
for (ix = 1; ix <= 6; ++ix) {
document.getElementById('table' + ix).style.display='none';
}
if (typeof id === "number") {
document.getElementById('table'+id).style.display='block';
} else if (id && id.length) {
for (ix = 0; ix < id.length; ++ix) {
document.getElementById('table'+ix).style.display='block';
}
}
}
Then you can say show_table([1, 2]) instead of just show_table(1).

function show_table(ids) {
var idArr = ids.split(",");
document.getElementById('table1').style.display='none';
document.getElementById('table2').style.display='none';
document.getElementById('table3').style.display='none';
document.getElementById('table4').style.display='none';
document.getElementById('table6').style.display='none';
for(var i = 0; i< idArr.length; i++) {
document.getElementById('table'+idArr[i]).style.display='block';
}
}
<a href="#" onclick="show_table('6,2')">

If you prefer minimum force aproach, try this:
function hide_all_tables(){
document.getElementById('table1').style.display='none';
document.getElementById('table2').style.display='none';
document.getElementById('table3').style.display='none';
document.getElementById('table4').style.display='none';
document.getElementById('table6').style.display='none';
}
function show_table(id){
document.getElementById('table'+id).style.display='block';
}
And then use the code this way:
Table6 and Table2

I have never used a 'double onclick command' and to be honest don't think they work, or are good practice. Why don't you just house both show table comands in a javascript function and call the function onclick?
If i am understanding you correctly.

You can change them all at once without looping, if the tables have logical associations (they must, right?).
The idea is to assign them a class (or multiple classes) and change the whole class at once:
<script>
function f(classname, show)
{
var mysheet=document.styleSheets[0];
/* Each class in the styleSheet is called a 'rule' */
var myrules=mysheet.cssRules;
var value = show ? '' : 'none'; /* show or hide? */
for (i=0; i<myrules.length; i++){
/* find the class we want to change */
if(myrules[i].selectorText==classname){
/* change the rule */
myrules[i].style.display = value;
}
}
}
</script>
<style type="text/css" >
.hasPets { color: green; display: none; }
.hasCats { font-weight: bold; display: none; }
</style>
​<button onclick="f('.hasPets', true)">Show Pets</button>
​<button onclick="f('.hasCats', true)">Show Cats</button>
​<button onclick="f('.hasPets', false)">Hide Pets</button>
​<button onclick="f('.hasCats', false)">Hide Cats</button>
<div class="hasPets">Pets</div>
<div class="hasCats hasPets">Cats</div>
In this example, Show Pets shows both, Hide Cats hides only Cats. You can't show only Cats -- Pets overrides it.
Note: I've kept this short for clarity. In practice you'll have to add a few more lines because not all versions of IE support the .cssRules property, I think they called it .rules.

This function allows for any number of tables to show.
function show_table(){
for(var i = 1; i < 7; i++) // change 7 to the amount of tables
if(document.getElementById('table'+i))
document.getElementById('table'+i).style.display='none';
for (var i = 0; i < arguments.length; i++)
if(document.getElementById('table'+arguments[i]))
document.getElementById('table'+arguments[i]).style.display='block';
}
To show tables with ids of table3 and table5 then:
show_table(3,5);

Generating random divs multiple times on load

let me just give a quick story. I have made a page. (VERY simple - two divs with a different background image, see here.)
Anyway, I need to make it so that when a new page loads, the two divs that I have load in a random order over and over, filling the entire screen content. So there's no pattern of the first div and then the second, it's just randomly generated. Sort of like a huge grid, with the two divs repeated with no pattern.
My question is...is that possible? I assume I'd need to know PHP, but I have no knowledge of it.
Thanks guys, I appreciate all help!

http://jsfiddle.net/uYPRq/
jquery
var div1 = '<div class="one">';
var div2 = '<div class="two">';
var len =
Math.floor(window.innerWidth/30)*Math.floor(window.innerHeight/30);
for (x = 0; x < len; x++) {
if ( Math.random() > 0.5 ) {
$(div1).appendTo('body');
}
else {
$(div2).appendTo('body');
}
}
css
div.one, div.two {
height:30px;
width:30px;
float:left;
}
div.one { background-color:#EBE1E4; }
div.two { background-color:#F0F5DF; }
edit:
changed screen.availWidth to window.innerWidth

Something like so? Just loop through how ever many times you like and add elements in.
for (i = 0; i < 300; i++) {
var type1 = document.createElement("div");
var type2 = document.createElement("div");
type1.innerHTML = "div1";
type2.innerHTML = "div2";
type1.setAttribute("class", "type1");
type2.setAttribute("class", "type2");
document.body.appendChild(type1);
document.body.appendChild(type2);
}

No PHP needed. This can be done client-side using Javascript (Jquery might be easier).