homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Need menu to drop down with keyboard
badams1




msg:4528150
 5:32 pm on Dec 14, 2012 (gmt 0)

I have a unified drop down menu (when you mouseover any top level item, the whole thing drops where you can see the submenus for each heading) that works great with the mouse, but I need it to drop down when a user tabs onto it.

html:
<div id="buttonbar">
<ul id="bar">
<li id="prospective" class="rightborder"><a>Future Students</a>
<ul id="prospective-links">
<li><a href="/admissions">Undergraduate Admissions</a></li>
<li><a href="/graduate">Graduate Admissions</a></li>
<li><a href="/admissions/international">International Admissions</a></li>
<li><a href="/transfer">Transfer Admissions</a></li>
<li><a href="/advising-center">Academic Advising Center</a></li>
<li><a href="/financial_aid">Financial Assistance</a></li>
<li><a href="/info/schedules/tuition">Tuition and Fees</a></li>
<li><a href="#">Test Item 8</a></li>
<li class="last-item"><a href="/prospective">Go to Future Students</a></li>
</ul></li>
<li id="students" class="rightborder"><a href="/current">Current Students</a>
<ul id="current-links">
<li><a href="/info/calendars/academic">Academic Calendar</a></li>
<li><a href="/info/schedules">Enrollment Schedule</a></li>
<li><a href="/studentservices">Student Life</a></li>
<li><a href="/housing">Housing</a></li>
<li><a href="/financial_aid/workstudy.html">On-Campus Jobs</a></li>
<li><a href="#">Bookstore</a></li>
<li><a href="#">Athletics</A></li>
<li class="fill"><a name="hold">&nbsp;</a></li>
<li class="last-item"><a href="/current">Go to Current Students</a></li>
</ul></li>
</ul>
</div>


jquery/js:
if (ie === "1") {
if ($(window).width() > 949) {

$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}
else {
$("#accordion").accordion({active:false});
}
}

function showElement(d){
var s=document.getElementById(d).style;
if ($(window).width() < 950) {
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
if ($(window).width() > 949) {
if (s.display != "block" ) { s.display = "block"; }
}
}
}
function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}

}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');

s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/

}

}
$(window).resize(showHide); //Run when resized

jQuery(function($) {
var path = location.pathname.substring(1);
$('#nav a[href$="' + path + '"]').addClass('active');
});

// This section makes the skip to anchor links such as the skip to content link work in webkit browsers like Chrome and Safari
(function(linkList,i,URI) {
if (!(URI = document.documentURI)) {
URI = URI.split('#')[0];
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
linkList = document.links;
for (i in linkList) {
if (!linkList[i].hash) {
if (linkList[i].hash.match(/^#./)) {
if ((URI+linkList[i].hash)==linkList[i].href){
linkList[i].addEventListener("click", function(e,f,g) {
f = document.getElementById(this.hash.slice(1));
if (!(g = f.getAttribute('tabIndex'))) f.setAttribute('tabIndex',-1);
f.focus();
if (!g) f.removeAttribute('tabIndex');
}, false);
}
}
}
}
}, false);
}
return true;
})();
}
else {
function showElement(d){
var s=document.getElementById(d).style;
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
};


};

 

penders




msg:4528548
 12:33 am on Dec 16, 2012 (gmt 0)

You perhaps need to attach your handlers to the "focus" and "blur" events as well?

badams1




msg:4528974
 2:44 pm on Dec 17, 2012 (gmt 0)

How would I do that. I don't know JS/Jquery.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved