show hide content

i have a hidden span with time display.
when i tab, it should get focus and show time and next tab it should be hidden and go to sun.com link.please suggest in jquery or javascript.
<html>
<head>
<script>

function showTime() {
	
	alert('t');
	document.getElementById('mm').style.display ='';
}

</script>
<style>

#mm { display:none }

</style>
</head>

<body>
<span id="mm" tabindex="0" onfocus="showTime()" style="display:none"> 10:03 AM</span>

<a href="http://www.sun.com">sun</a>
</body>

</html>

Open in new window

jcbmttAsked:
Who is Participating?
 
JohnSixkillerConnect With a Mentor Commented:
As I stated before. Add a new span which will be visible and FOCUSABLE. Then remove CSS definition.

Something like this:

<html>
<head>
<script>

function showTime() {	
	document.getElementById('mm').style.display ='';
}

</script>
<style>


</style>
</head>

<body>
<span tabindex="0" onfocus="showTime()">&nbsp;</span>
<span id="mm" style="display:none"> 10:03 AM</span>

<a href="http://www.sun.com">sun</a>
</body>

</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
First,
you won't be able to click on anything if that is not visible

second,
you can't focus on an element which is not an input element
0
 
jcbmttAuthor Commented:
when you tab, needs to make the hidden content visible. some elements with ids get focus.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
JohnSixkillerCommented:
gurvinder372: ad2: Actually you can. But you CANNOT if it is NOT visible.

Use another span witch wil be visible.
0
 
jcbmttAuthor Commented:
hidden content has an id, pass it to the function and and make it visible.
0
 
Gurvinder Pal SinghCommented:
on which event?
0
 
jcbmttAuthor Commented:
please look at cisco.com, start tabbing u get a bar which was invisible with links. appears and disappears.
0
 
Gurvinder Pal SinghCommented:
but the tabs are visible right? your tab is not visible

Also, they are looking for onmouseover event not focus event
0
 
jcbmttAuthor Commented:
open cisco.com and start tabbing, an invisible tab will appear with links above the menu and close after you go through the links.
0
 
jcbmttAuthor Commented:
killer,
you are almost there.
can we combine the two spans to one?
<span tabindex="0" onfocus="showTime()">&nbsp;</span>
<span id="mm" style="display:none"> 10:03 AM</span>
that will be perfect. otherwise we get an empty focus thats unnecessary.
0
 
jcbmttAuthor Commented:
experts, please look at cisco.com and see how its invisible menus are implemented.
0
 
JohnSixkillerCommented:
You cant combine it. You have to start somewhere. For example on BODY and tab to something visible that triggers the ShowTime. Or use onblur instead of onfocus. So time will be visible after you leave particular span/element.

Desired behavior depends on layout of your page. I dont knwo how cisco binds its events, but top menu is displayed AFTER you leave/blur search icon.
0
 
jcbmttAuthor Commented:
black top menu appears from invisible state before getting any focus on the page. it has nothing to do with search icon. that's the first thing that comes up when you tab from location bar.
0
 
jcbmttAuthor Commented:
killer,

you are right. it goes from search icon to the black menu. i want to change your code little bit to meet my requirement in the question. once you move from the empty focus it should get focus on the time span and after you move to sun.com, time should dissappear as in my question. pl suggest.
0
 
Gurvinder Pal SinghCommented:
I am not sure why are you looking to change tabs at the click of 'tab' key. It doesn't even look good.

If you really want to show the tab change, at the 'tab' key event, then just capture the tab key
see the tab handler here
http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box

and then at each tab handle, show the next tab

why worrying about how cisco is doing it? it looks really tacky on their site
0
 
JohnSixkillerCommented:
<html>
<head>
<script>

function showTime() {
	var span = document.getElementById('mm');	
	span.style.display = '';
	span.focus();
}

function hideTime(){
	var span = document.getElementById('mm');
		span.style.display = 'none';
}

</script>
<style>


</style>
</head>

<body>
<span tabindex="0" onfocus="showTime()">&nbsp;</span>
<span tabindex='0' onblur='hideTime();' id="mm" style="display:none"> 10:03 AM</span>

<a href="http://www.sun.com">sun</a>
</body>

</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.