Let's Code X

I was messing around with some OO JavaScript just sort of keeping my mind loose for a big test I have to take tomorrow, when from the haze of studying I accidentally did this:

<script> function obj(){  //the base object, on which all other objects depend to exist      this.size=0;  //These are just arbitrary traits      this.idea=1; } function plane(x,y){  //When this object comes into 'existence' by being instantiated it requires an obj. It has it's own qualities, but it doesn't exist without existing as a descendent of obj.      this.width=x;      this.length=y; } function box(x,y){   //this object is comprised of 6 planes, each of which have an associated obj. It, however, doesn't have an obj.  It does not exist in and of itself, it only exists by virtue of the things that are defining it.  There's a metaphor here, is what I'm saying.  I'd make it, but yours will be better.     this.sides=new Array(6);     for(i=0;i<this.sides.length;i++){         this.sides[i]=new plane(x,y);     } //    alert("ss"); } plane.prototype=new obj(); var t=new box(3,4); alert(t.sides[0].idea);  //See the sides all exist in that they have the traits of existing(the idea) alert(t.idea); //But the box object itself doesn't exist\lacks the traits of existence(the idea) </script>

Hello, and welcome.  Drop down menus, that slide smooth and beautiful with each click, can be produced so easily with jQuery that you're going to want to slap someone. 

$(document).ready(function(){     $("nav ul li").click(function(){//jQuery allows a universal element selection method.  This unifies all the "getElementBy" and "getElementsBy" functions in vanilla JS.  This same uses the DOM to isolate by parent/child relation         $(".hideAway").slideUp("250");//It's literally this easy.  This selects all elements with the class 'hideAway' and works to hide all the elements and resets the menu with every click.        if($('.hideAway',this).is(':visible'))$('.hideAway',this).slideUp("250");//The '.is' function checks a variety of different states and returns a boolen type response. In this sample it checks to see if the menu item is visible and hides it if it is, allowing a user to close the menu altogether by clicking on an open element.         else $(".hideAway",this).slideDown("slow");//this will open the menu item if it isn't already open.     }); });

These five lines of code are all you need to create a drop down menu on par with any website out there.  The only thing missing is your CSS, which is, of course, a matter of taste, but here's what I used:

.hideAway{     display:none;/*This removes the element from the document flow, and is changed with the jquery '.slide' functions*/     position:absolute;/*this prevents the opening of the menu items from altering the overshape of the page*/     background:#5162a1;     font-size:1em;     width:20%; } .hideAway li{     display:list-item;/*I use a css resetter, so this is necessary*/     line-height:2em;     padding-left:2em;     width:100%;     list-style-type:disc;     list-style-position:inside;     font-size:.75em; }

Well, I guess there's one more thing that's missing, so I'll include that as well:

        <nav>             <ul>                 <li>Catagory 1<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu1"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 1</li>                         <li>Sample 2</li>                     </ul>                 </li>                 <li>Catagory 2<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu2"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 3</li>                         <li>sample 4</li>                         <li>sample 5</li>                         <li>sample 6</li>                     </ul>                 </li>                 <li>Catagory 3<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu3"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 7</li>                         <li>sample 8</li>                         <li>sample 9</li>                     </ul>                 </li>                 <li >Catagory 4<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu4"><!--This is what the $(".hideAway") is referencing-->                         <li>Sample 10</li>                         <li>Sample 11</li>                         <li>Sample 12</li>                     </ul>                 </li>             </ul>         </nav>

jQuery is your friend.  jQuery only wants to help. Here is jQuery making a dice rolling page easier to make than it has any right to be:

The js file (jquery has been linked through google)

$(document).ready(function(){  //think of this as 'priming' jquery

         var ecc=0;

         $(".dice").click(function(){ //this handles user clicks on elements with a '.dice' class

             var type=$(this).val();//the 'this' keyword, in this case, isolates the specific element the user clicked and assigns its value(val) to type

             if(type=="reset"){

                $(".feedBack").text(""); $(".feedBack2").text("");//this resets if the reset value is clicked

                ecc=0;

             }

             else{

                ecc=Math.floor((Math.random()*type)+1);//this uses the value stored in type as the number of sides the dice should have

                $(".feedBack").text(ecc);//the text of any element with the 'feedBack' class is replaced with the value assigned to ecc. 

                $(".feedBack2").append(ecc+" : ");//the text of any element with the 'feedBack2' class had ecc's value appended to it.

             }

      });

});

The functioning (if somewhat ugly) page can be found HERE

I also added a very simple but effective responsive bit of code to make it a little more functional on smaller displays:

var wide=$(window).width();//This quickly and easily grabs the screen width in pixels. if(wide<1100)$(".dice").css({"width":"5em","height":"3em"});//checks the width and modifies the css of the .dice class elements appropriately

What's the advantage over vanilla JS?  It's not a big one in this simple application, but even here you can plainly see how easily the DOM is accessed and altered, and it only goes up from here.  jQuery only wants to help you, to hold your hand, to guide you to safe, less frustrating and verbose shores. 

What's the disadvantage?  I don't really see one at the practical level.  With the loading of jQuery itself the page does weigh a little more than it otherwise would, but the traffic on this will be so low that it would never be noticeable at any level.  Combine this with the incredibly short dev time to create it and you're really in a win-win scenario.

My intention here is to provide a starting point for people who are interested in learning jQuery.  It really is a wonderful framework that really aids in the creation of beautiful, dynamic websites.  Here are a few other links that might help a person get started:

The jQuery home page

W3 Schools walkthru

The API documentation