SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Post What Does this Line of Code Mean?

    Hello everyone,

    I'm trying to learn about this function's job line-by-line

    Code:
    function jsddm_open()
    {  jsddm_canceltimer();  //this is another function in my code - why is it here?
       jsddm_close();  //this is another function in my code - why is it here?
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');} //what does this selector actually mean?

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It calls 2 other functions (code not included), then sets a variable (ddmenuitem, presumably defined elsewhere) to the dom id of a <ul> with the visibility style set to visible.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by speda1 View Post
    It calls 2 other functions (code not included), then sets a variable (ddmenuitem, presumably defined elsewhere) to the dom id of a <ul> with the visibility style set to visible.
    The rest of the code can be seen at the jQuery Drop Down Menu page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is where I got this JavaScript from, Paul. Thank you for the reply, Speda1.

    The problem I see now is that none of my hidden sub lists have a visibility style set to visible, which makes me question the jsddm_open function because showing a list that already has a visibility style set to visible is pointless, so I'm unclear still as to how this code works.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    so I'm unclear still as to how this code works.
    Look at the example at the jQuery simple drop down menu page. When you hover over example menu, the red dropdown entries appear.

    What the script is doing is changing the visibility of those dropdowns. When the mouse moves away, the visibility is set to hidden. The dropdowns are still there in place in the DOM, they're just not visible for you to see.

    When your mouse moves to the appropriate menu link, the script sets the appropriate dropdown section to visible.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question

    After studying in-depth the linked material in this thread, I have a full understanding of the basic concepts. I did my html a different way, and I think I want to use the custom classes I have defined in my CSS, which are called pMenuMain, pMenu2, pMenu3, and they are placed in the div tags inside the <li> tags. I like this way because the user can't click a non-link and reset the menu.

    This is what the HTML looks like:

    Code:
    <div class="pWrapper">
    	<ul class="pMenu">
    		<li style="width:10%;"><div class="pMenuMain">health</div>
        		<ul style="left:18em;">
            		<li><div class="pMenu2">weight loss</div>
                		<ul>
                   		  <li><div class="pMenu3">fitness</div>
                    			<ul>
                           		  <li><a href="#">under construction</a></li>
                            	</ul>
                        	</li>
                        	<li><div class="pMenu3">dieting</div>
                        		<ul>
                           		  <li><a href="#">under construction</a></li>
                            	</ul>
                        	</li>
                		</ul>
                	</li>   
                	<li><div class="pMenu2">skin care</div>
                		<ul>
                   		  <li><a href="#">under construction</a></li>
                    	</ul>
                	</li>
            	</ul>
        	</li>
    	</ul>
    </div>
    This is the CSS associated with the menu:

    Code:
    /********************/
    /*PERSONAL NAV MENU**/
    /********************/
    .pWrapper {
        padding-bottom:53%;
        padding-left:21%;
    }
    
    .pMenu {
        margin:0;
        padding:0;
        list-style:none;
    }
    
    /*IE 6 & 7 need inline block feature*/
    ul.pMenu ul li{
        width:100%;
        display:inline-block;
    }
    ul.pMenu ul ul li{
        width:100%;
        display:inline-block;
    }
    ul.pMenu ul ul ul li{
        width:100%;
        display:inline-block;
    }
    
    /*begin main list attributes*/
    ul.pMenu > li:hover{
        background:#F00;
        border:.33em ridge #C90;
        color:#FF0;
    }
    
    ul.pMenu > li{
        float:left;
        list-style:none;
    	margin-right:1%;
    	display:block;
        color:#FFF;
        background:#900;
        border:.33em ridge #C30;
        text-decoration:none;
    }
    
    .pMenuMain{
        text-shadow:1px 1px 1px #000;
        white-space:nowrap;
        padding-top:.7em;
        padding-bottom:.7em;
    	text-align:center;
    }
    
    /*first sub-list*/
    ul.pMenu li li{
    	margin-right:0;
    }
    
    ul.pMenu ul {
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
    }
    
    .pMenu2{
    	background:#CCC;
    	border:.25em outset #999;
    	width:10em;
    	font-size:12px;
    	padding-top:.5em;
    	padding-bottom:.5em;
    	padding-right:2em;
    	padding-left:.5em;
    	text-decoration:none;
        text-shadow:1px 1px 1px #000;
        color:#000;
        position:relative;
    	text-align:left;
    	top:.33em;
    }
    
    .pMenu2:hover{
        background:#999;
        border:.25em inset #666;
        text-decoration:blink;
    }
    
    ul.pMenu ul li a{
    	background:#CCC;
    	border:.25em outset #999;
    	width:10em;
    	font-size:12px;
    	padding-top:.5em;
    	padding-bottom:.5em;
    	padding-right:2em;
    	padding-left:.5em;
    	text-decoration:none;
        text-shadow:1px 1px 1px #000;
        color:#000;
        position:relative;
    	text-align:left;
    	top:.33em;
    }
    
    /*second sub-list*/
    ul.pMenu ul ul{
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
        display:none;
    }
    
    .pMenu3{
    	background:#999;
    	border:.25em outset #666;
    	width:13em;
    	font-size:11px;
    	padding-top:.35em;
    	padding-bottom:.35em;
    	padding-right:2em;
    	padding-left:.5em;
    	text-decoration:none;
        text-shadow:1px 1px 1px #000;
        color:#000;
        position:relative;
    	text-align:left;
    	top:.33em;
    	visibility:hidden;
    }
    ul.pMenu ul ul li {
        float:none;
        display:inline;
    }
    
    ul.pMenu ul ul li a {
        width:auto;
        background:#999;
        border:.15em outset #666;
        text-shadow:1px 1px 1px #000;
        color:#FFF;
    }
    
    ul.pMenu ul ul a:hover {
        background:#999;
        border:.15em inset #666;
        text-decoration:blink;
    }
    
    /*third sub-list*/
    ul.pMenu ul ul ul {
        margin:0;
        padding:0;
        position:absolute;
        visibility:hidden;
    }
    
    ul.pMenu ul ul ul li {
        float:none;
        display:inline;
    }
    
    ul.pMenu ul ul li a {
        width:auto;
        background:#999;
        border:1% outset #666;
        text-shadow:1px 1px 1px #000;
        color:#FFF;
    }
    
    ul.pMenu ul ul li a:hover {
        background:#999;
        border:1% inset #666;
        text-decoration:blink;
    }
    /******************/
    /*End Personal Nav*/
    /*****************/
    With that said, the original JavaScript at jQuery Drop Down Menu would need to be changed from:

    Code:
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
    
    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    
    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
    
    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}
    
    $(document).ready(function()
    {  $('#jsddm > li').bind('mouseover', jsddm_open)
       $('#jsddm > li').bind('mouseout',  jsddm_timer)});
    
    document.onclick = jsddm_close;
    to a hypothesis of the solution highlighted in red:

    Code:
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
    
    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
    if {pMenuMain:hover} //how can I use JavaScript to detect if pMenuMain, pMenu2, and pMenu3 are being hovered by the mouse?
    {
    
          //need to test at the top level if the dating or education lists are the ones being hovered
          if {list is dating or education}
              ddmenuitem = $(this).find('ul.pMenu ul li a').css('visibility', 'visible');
          else
              ddmenuitem = $(this).find('ul.pMenu ul').css('visibility', 'visible');
    }
    else if {pMenu2:hover}
       ddmenuitem = $(this).find('ul.pMenu ul ul').css('visibility', 'visible');
    else {pMenu3:hover}
       ddmenuitem = $(this).find('ul.pMenu ul ul ul').css('visibility', 'visible');
    }
    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
    
    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}
    
    [COLOR="SeaGreen"]//changed the bind() function to hover() function
    $(document).ready(function()
    {  $('.pMenu > li').hover(jsddm_open, jsddm_timer)
       $('.pMenu li > li').hover(jsddm_open,  jsddm_timer)
       $('.pMenu li li > li').hover(jsddm_open, jsddm_timer});
    
    document.onclick = jsddm_close;
    I'm sure there's a laundry list of a syntax errors, but I'm just beginning my path to JavaScript success.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    //how can I use JavaScript to detect if pMenuMain, pMenu2, and pMenu3 are being hovered by the mouse?
    You would use an event-driven technique, where you assign function handlers to the hover event of each menu. See: hover
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah I understand the function handlers on the last line, but I would need to write a few line of code that evaluates to true or false if the menu is being hovered because of doing the menu differently, right?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    Yeah I understand the function handlers on the last line, but I would need to write a few line of code that evaluates to true or false if the menu is being hovered because of doing the menu differently, right?
    Let's look at that first if statement:

    Code:
    if {pMenuMain:hover} //how can I use JavaScript to detect if pMenuMain, pMenu2, and pMenu3 are being hovered by the mouse?
    {
    You can use a jQuery selector to assign the hover functions to all those at the same time:

    Code javascript:
    $('.pMenuMain, .pMenu2, .pMenu3').hover(function () {
        // do stuff with the individual element that is hovered over
    }, function () {
        // stop doing stuff when the individual element is not being hovered over
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •