test JS array Object

by spacexplorer

HTML

<body>
    
<div id="loginMenu">
    <div id="loginButtons"> 
        <div id="loginUserName">Hello Guest!</div>
        <div id="loginButton"><a href="#">+ Login|Register</a>
            <div id="loginPanel" class="dropdown-menu">
                <ul>
                    <li><a href="#">test item 001</a></li>
                    <li><a href="#">test item 002</a></li>
                    <li><a href="#">test item 003</a></li>
                </ul>
            </div>
        </div>
        
        <div class="questionButton"><a href="#">send a question</a>
             <div id="emailPanel" class="dropdown-menu">
                 <form method="POST" action="javascript:login()" id="emailForm"><label class="grey" for="emailName">*name:</label><input type="text" name="emailName"/><label class="grey" for="emailAdress">*email:</label><input type="text" name="emailAdress"/><label class="grey" for="emailSubject">subject:</label> <input type="text" name="emailSubject"/><label class="grey" for="emailMessage">*message:</label><textarea name="emailMessage"></textarea><label class="rememberMeLabel"><input name="sendMe" id="sendMe" type="checkbox" checked="unchecked" value="0" />&nbsp;Send me a copy</label><input type="submit" value="send" class="bottomLeftButton"/></form>
            </div>
        </div>
        
        <div class="textButton"><a href="#">"</a>
            <ul class="dropdown-menu">
                <li><a href="javascript:void()" onclick="javascript:changeProfile();">Change My Profile</a></li>
                <li><a href="javascript:void()" onclick="javascript:buyMoreCredit();">Buy More Credit</a></li>
                <li><a href="javascript:void()" onclick="javascript:viewAccountHistory();">View Account History</a></li>
                <li><a href="javascript:void()" onclick="javascript:talkToConsultant();">Talk to a consultant</a></li>
                <li class="divider"></li>
                <li><a href="javascript:void()"...

CSS

#loginMenu {
 margin-right: 100px;   
    
}


#loginMenu, #loginButtons {
    background: yellow;
    float: right;
    display: block;
    position: relative;
    z-index: 990;
    height: 20px;
}

#loginButtons {
    
    
}

#loginMenu > div {
    position: relative;    
    display: block;
   /* float: left;*/
}


#loginMenu #loginUserName {
    width: 100px;
    height: 20px;
    background: orange;
    float: left;
}



.dropdown {
 background: green;
position: relative;    
    display: block;
    float: left;
    border: 1px white solid;
    padding: 1px 5px 1px 5px;
}
.dropdown-menu {  
   position: absolute;
   top: 20px;
  left: 0;
   float: left;
  display: none;
  background: orange;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.dropdown.active {
    background: red;
    z-index: 995;
}
.dropdown.active > .dropdown-menu { 
    display: block;
    z-index: 999;
}


.dropdown.normal > .dropdown-menu {
    display: none; 
}

.videoDummy {
 width: 400px;
 height: 240px;   
 background: red;
 padding: 10px;
 border: 2px black solid;   
}



div#coverLoader
{
/*
background: rgba(0,0,0,.35);
*/
background: black;     
z-index: 980;
position: absolute;
left: 0;
top: 0;

}

.dropdown > a {
 float: left;
display: block;    
background: rgba(50,50,200,.5); 
 color: white;   
}


.testBlock {
background: rgba(50,50,200,.1); 
    
}

JavaScript

var $dropDownList = new Array();

console.log("jaco: chromedebugging");

var $coverHTML = $('<div id="coverLoader"></div>');

//add items
addDropdown($("#loginButton"), "modal", "- Login|Register", $("#loginPanel"));
addDropdown($(".questionButton"), "modal", "alternative", $("#emailPanel"));
addDropdown($(".textButton"), "menu", "alternative");
addDropdown($(".videoButton"), "modal", "alternative", $("#videoPanel"));
addDropdown($("#userMenuButton"), "menu", "alternative");
//test duplicate
//addDropdown($("#userMenuButton"), "menu", "alternative");


function addDropdown($target, $mode, $label, $dropTarget){
    //use jquery data()
    //test if has class
    //if (!$target.hasClass('dropdown'))
    //rather test if has data
    if ($target.data("mode") == undefined)
    {
        //
        $target.data('mode', $mode);
        //
        $target.data('label', $label);
        //
        
        //if undefined
         $target.data('dropTarget', $dropTarget);
        
         //$dropTarget.css('display', 'block');
        
        //$target.data('bar', { myType: 'test', count: 40 });
        //alert( $target.data("dropTarget")); //undefined
        
        //use class instead of state
        //$target.data('state', "normal");
        $target.addClass("dropdown");
        //
        //$target.click(function(){
        //$('#id1:first-child').attr('id')
        //native way
       // $target.firstChild().click(function(){
        $("a:first", $target).click(function(){
             //showDropdown($(this).parent());
            showDropdown($target);
        });
        
        
        
        //$('html').width()
        
        
        
        
        
        

    }
    
    
}

function showDropdown($target){
    //$target.css( "width","+=5");
    //alert("clicked "+$target.attr('id'));
    //$dropDownList[i].target.css( "width","+=5");
    //alert(i);
    //$target.children($(".dropdown-menu")).css('display', 'block');
   ...