grids


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="sticky.css" rel="stylesheet" type="text/css">
<title>MiniMasonry.js: Masonry Layout Demo</title>
<meta name="referrer" content="origin"/>
<meta name="referrer" content="origin-when-crossorigin"/>
<meta name="referrer" content="origin-when-cross-origin"/>

<script>
/*
var items = ['a', 'b', 'c'];
for (  i=0; i<items.length; i++) {
  alert(items[i])
}
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);
  alert(res )

var reg = /div/g, // regexp for an image element
query = document.querySelector('.class1'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);

}
*/
</script>
</head>
<body>
<!--
https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element
IE code resize
-->
<h1 id="id1">My Heading 1</h1>
<div class="col-9">Found.</div>

<div class="col-6">nothing happens hear.</div>
<div class="col-6">nothing happens hear.</div>
<div class="class1 col-6">This element will receive yout code.</div>
<div class="class1 col-3">This element will receive yout code.</div>
<div class="class1 col-2"> col-xs-2  col-2 </div>
<div class="class1 col-1">This element will receive yout code.</div>
<div id="test" class="class1 class5"></div>
<p id="demo"></p>

<script type="text/javascript">
function function_one()
{
   // alert("The function called 'function_one' has been called.")
    //Here u would like to call function_two.
    function_two();
}
// Pessoal muito já sabem que estou a fazer uma encomenda,.... e como vou ter mais uma pessoal interessada
function function_two() {
    //alert ("<p> checkWinWH " + checkWinWH() + "  </p> " ) ;
    // achar o numero de divs que a paguina tem
    var array = FindClassNames ( 'div' ) ;
    //alert(array);
    var count =  array.length ;
   // alert(count);

    //check each span element for class 'italic' or 'bold'
    for ( var i = 0 ; i < count ; i++ ) {
        var AllClass = array[i].className ;
        //alert("<p>" + AllClass + "</p>");
        // agora vou separar as class para achar a que quero de acordo com a largura da janela
        var strSplit = AllClass.split(" ") ;
        if ( strSplit.length > 1 ) {
            for ( var a = 0 ; a < strSplit.length ; a++ ) {
                var singleClass = strSplit[a] ;
                //alert ( singleClass ) ;
            }
        }
        else {
            AddCssStyleViaClass ( AllClass , "width:100%;" ) ;
                var nxt = AllClass;
           nxt = undefined; // unset
      delete(nxt); // this removes the variable completely
        }
    }
}

function FindClassNames ( TagName ) {
    var array = document.getElementsByTagName ( TagName ) ; // get all span elements
    var found = [] ;
    for ( var i = 0 ; i < array.length ; i++ ) {
        var names = array[i].className ;
        found.push ( array[i] ) ;
    }
    return found ;
}
/*
    //document.write("<p> found " + founds + " " + TagName + " tags </p> " ) ;
    for ( var i = 1 ; i <= 12 ; i++ ){
        //alert("<p> col-md-"+i1+"</p>");
        //document.write("<p> col-md-"+i+"</p>");
        document.getElementById("demo").innerHTML = "<p> col-md-"+i+"</p>" ;
    }
*/
function checkWinWH() {
    var viewportwidth , viewportheight ;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if ( typeof window.innerWidth != 'undefined' ) {
        viewportwidth  = window.innerWidth,
        viewportheight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (
        typeof document.documentElement             != 'undefined' &&
        typeof document.documentElement.clientWidth != 'undefined' &&
               document.documentElement.clientWidth != 0 ) {
                viewportwidth  = document.documentElement.clientWidth,
                viewportheight = document.documentElement.clientHeight
    } // older versions of IE
    else {
        viewportwidth  = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    return viewportwidth ;
    /*
    if ( document.body && document.body.offsetWidth ) {
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }
    if (
        document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
            winW = document.documentElement.offsetWidth  ;
            winH = document.documentElement.offsetHeight ;
    }
    if ( window.innerWidth && window.innerHeight ) {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }

    alert('Window width = '+winW+' Window height = '+winH);
    alert('Window width = '+viewportwidth+' Window height = '+viewportheight);

    var color = ( viewportwidth > 400 ) ? 'red' : 'blue' ;
    var color2 = ( viewportwidth < 400 ) ? 'green' : 'yellow' ;
    document.getElementById('id1').style.color = color ;
    AddCssStyleViaClass ( "asdf" , "color:"+color+"; border: 1px solid "+color2+";" ) ;
    */
}

function getElementsByClassNames ( className ) {
    var found    = [] ;
    var elements = document.getElementsByTagName( "*" ) ;
    for ( var i = 0 ; i < elements.length ; i++ ) {
        var names = elements[i].className.split ( ' ' ) ;
        for ( var j = 0; j < names.length ; j++ ) {
            if ( names[j] == className ) found.push ( elements[i] ) ;
        }
    }
    return found ;
}
/* funcao para dar suporte ao firefox abaixo do 4
    como usar
    var e = getElementsByClassNames("YourClassName");
    //alert(e[0].innerHTML);
    e[0].setAttribute("style", "color:"+color+"; border: 1px solid "+color+";");
*/
function AddCssStyleViaClass ( ClassName , setAttributeData ) {
    var e = getElementsByClassNames ( ClassName ) ;
    return e[0].style.color = "blue";
    //return e[0].setAttribute ( "style" , setAttributeData ) ;
}

//window.onload=checkWinWH ;
window.onload=function_one ;
window.onresize=window_resize ;
var resizeTimeoutId;
function window_resize(e) {
    window.clearTimeout(resizeTimeoutId);
    resizeTimeoutId = window.setTimeout('function_one();', 100);
    // resizeTimeoutId = window.setTimeout('checkWinWH();', 100);
}

</script>

</body>
</html>