Solved

show hide content

Posted on 2011-09-21
16
283 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:jcbmtt
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
  • 4
16 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36572124
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
 

Author Comment

by:jcbmtt
ID: 36572159
when you tab, needs to make the hidden content visible. some elements with ids get focus.
0
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 36572167
gurvinder372: ad2: Actually you can. But you CANNOT if it is NOT visible.

Use another span witch wil be visible.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jcbmtt
ID: 36572195
hidden content has an id, pass it to the function and and make it visible.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36572219
on which event?
0
 

Author Comment

by:jcbmtt
ID: 36572220
please look at cisco.com, start tabbing u get a bar which was invisible with links. appears and disappears.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36572233
but the tabs are visible right? your tab is not visible

Also, they are looking for onmouseover event not focus event
0
 

Author Comment

by:jcbmtt
ID: 36572354
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
 
LVL 11

Accepted Solution

by:
JohnSixkiller earned 500 total points
ID: 36572410
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
 

Author Comment

by:jcbmtt
ID: 36572433
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
 

Author Comment

by:jcbmtt
ID: 36572452
experts, please look at cisco.com and see how its invisible menus are implemented.
0
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 36572496
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
 

Author Comment

by:jcbmtt
ID: 36574366
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
 

Author Comment

by:jcbmtt
ID: 36574599
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575274
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
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 36578696
<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

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP Web Development 6 68
Set css in function 11 54
Check for Numeric Phone Field 14 47
Selenium cssSelector and attribute 5 11
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question