Both tab & hover triggered popups problem
- by carpenter
I am trying to display divs when hovering over thumb-nails and/or both when tabbing onto them. If I stick to my mouse, the popups seem to work OK - if I start with a tab press
I can show the popops also (foward only - no shift + tab yet). Any help getting them to play well together?
<script type="text/javascript">
// Note: the below is being run from an onmouseover on a asp:HyperLink at the moment
function onhovering_and_tabbingon2() {
var active_hover = 0;
var num_of_thumb;
// set the default focus onto the first thumb-nail and make its popup display
document.getElementById('link_no' + active_hover).focus(); // set focus on the first thumb
$('#pop' + active_hover).toggleClass('popup'); // show its popup as it is hidden
// for when hovering over the thumbs
$(".box img").hover( // so as to effect only images/thumb-nails within divs of class=box when hovering over them
function () {
// test for if the image is a thumb-entry and not a popup image - of class=thumbs2
thumb = $(this).attr('class');
if (thumb != "thumbs2") {
// I need to add/toggle the class here to a "div" and not to the image being hovered on, a div with text that corrosponds to the hovered on image though
// so grab the number of the thumb_entry - to use to id the div.
num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');
// find the div with id 'pop' + num_of_thumb, and toggleClass on it
$('#pop' + num_of_thumb).toggleClass('popup'); // shows the hovered on pic's popup
// move the focus to the hovered on pic's a tag ??????
document.getElementById('link_no' + num_of_thumb).focus();
// if the previous popup that was showing was in box2..
if (active_hover == 1 || active_hover% 2 == 1) {
$('#pop' + active_hover).toggleClass('popup4_line2');
}
else {
// remove/toggle the previous active popup's visibility
$('#pop' + active_hover).toggleClass('popup');
}
// set the new active_hover to num_of_thumb
active_hover = num_of_thumb;
}
},
function () {
}
);
// same thing again - but for my second row/line of entries/thumb-nails...
$(".box2 img").hover( // so as to effect only images/thumbs within divs of class=box2
function () {
// test if the image is a thumb-entry and not a popup image
thumb = $(this).attr('class');
if (thumb != "thumbs2") {
// I need to add the class here to a "div" and not to the image being hovered on, a div that corrosponds to the hovered on image though
// so grab the number of the thumb_entry being hovered on, so as to id the div.
num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');
// find the div with id='pop' + num_of_thumb, and toggleClass on it
$('#pop' + num_of_thumb).toggleClass('popup4_line2');
// move the focus to the hovered on pic's a tag ??
document.getElementById('link_no' + num_of_thumb).focus();
// if the previous popup that was showing was in box.. // or if the active_hover is even (modulus)
if (active_hover == 0 || active_hover % 2 == 0) {
$('#pop' + active_hover).toggleClass('popup');
}
else {
// remove the previous active visible popup
$('#pop' + active_hover).toggleClass('popup4_line2');
}
// set the new active_hover to num_of_thumb
active_hover = num_of_thumb;
}
},
function () {
}
);
// todo: I would like to try to show the popups when tabbing through the thumb-nails also
// but am lost...
document.onkeyup = keypress; // ????
function keypress() {
// alert("The key pressed was: " + window.event.keyCode);
if (window.event.keyCode == "9") {
//alert("The tab key was pressed!");
active_hover = active_hover + 1;
// for tabbing into box 2 (odd numbers)
if (active_hover == 1 || active_hover % 2 == 1) {
// toggle visibility of previous popup
$('#pop' + (active_hover - 1)).toggleClass('popup');
// toggle visibility of current popup
$('#pop' + active_hover).toggleClass('popup4_line2');
//
}
else {
// for tabbing into box from box2
// toggle visibility of previous popup
$('#pop' + (active_hover - 1)).toggleClass('popup4_line2');
// toggle visibility of current popup
$('#pop' + active_hover).toggleClass('popup');
//
}
// ??????
//
// if (window.event.keyCode == "shift&9") { }
}
}
}
</script>
