Home/ Questions/Q 5993603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:41:54+00:00

This problem refers to the main (header) nav menu on THIS PAGE . When

  • 0

This problem refers to the main (header) nav menu on THIS PAGE.

When any of the items in the “Services” drop-down submenu is clicked, I want the “Services” page to open (in the existing browser window) AND for a specific anchor tag element on the “Services” page to be in focus. I’ve achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items – text will slide down to the right of the list.

HTML for the “Services” submenu link:

<li> <a href="services.html#collabSol" class="pagefade" onclick="var w=window.open(this.href, '_self'); w.focus();">collaborative law</a></li>

HTML for the targetted “a” tag and its parent div (ie “a” tag that should be in focus on “Services” page):

<div id="mylist1"><h3><a href="" id="myTag1" name="collabSol">Collaborative Solutions</a></h3></div>

Script to drive the hover behaviour of the focussed “a” tag and its parent div:

//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
    $('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
  if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear'); 
  }
    });
//capture click events as well:
/* $('#mylist1').click(function() {  
  if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed 
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
} 
   });*/
//capture focus events on <a> as well:
 $('#myTag1').focus(function() {  
  if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed 
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
} 
});
});

Note the main nav menu has been created using jquery, via a Dreamweaver extension.

What I have so far:

When the “Services” page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.

Am I hoping for too much? Have I misunderstood the limitations of ‘in focus'” Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure your use of “in focus” is quite what I expect… Having a fragment in the url doesn’t necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.

    What I’d suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.

    It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code – you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. 🙂

    P.S. I guess yes for Mt Hotham. I’d never heard of it before but I’m going to be optimistic.

    • 0