July 5, 2008 11:55pm pdt

1. hielo 386,397
2. Kravimir 376,543
3. Steggs 245,900
4. GreenGhost 94,190
5. VirusMinus 85,980
6. TName 76,385
7. glumlun 69,115
8. zemond 65,705
9. bluefezteam 58,707
10. jason1178 54,865
11. Rouchie 53,810
12. mplungjan 49,735
13. Eternal_... 45,043
14. b0lsc0tt 41,464
15. nexusnation 41,350

1. VirusMinus 1,293,260
2. Steggs 1,084,490
3. GrandSch... 1,081,204
4. seanpowell 807,340
5. TName 775,768
6. Roonaan 484,352
7. Eternal_... 423,020
8. COBOLdin... 415,775
9. hielo 403,865
10. Kravimir 376,543
11. oceanbeach 262,232
12. mreuring 246,046
13. Batalf 232,544
14. GoofyDawg 183,739
15. brunobear 180,148

03.01.2008 at 10:06AM PST, ID: 23206384

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.3

Text appearing onclick

Zones: Cascading Style Sheets (CSS), JavaScript

Tags: css, mouseover, onclick

I have a client who wants to have a block of text appear on the same page when a link is clicked. He has a page that is appropriate for the text, but the customer is always right, right? He does not want the text to be visible until someone actually asks to see it.

I know. I'm scratching my head over it too.

I know I can do this using javascript, and if necessary, I'll do it that way, but I'd prefer to avoid scripting (it's a public agency site, so I'm trying to keep from using it wherever possible). What I prefer, therefore, is a solution in CSS.

Essentially, I need to be able to have a <div> appear when the "click here" text is either clicked or mouseovered (is that a word?), and have it stay visible.

Suggestions?

ep

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: ericpete

Solution Provided By: b0lsc0tt

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

03.01.2008 at 10:23AM PST, ID: 21022809

Rank: Genius

b0lsc0tt:

ericpete,

The page below will do this. There are also Javascript frameworks, etc that you can use to enhance this a bit or make it "easier." I haven't messed with them much but could recommend some if you want. I like to do it myself. The example below is a simple one but we can definitely tailor it as you need.

Let me know if you have any questions or need more information.

b0lsc0tt

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Show/Hide the div</title> 
<script type="text/javascript">
<!--
function changeDiv() {
	var div = document.getElementById("hiddenDiv");
	div.style.display = (div.style.display=='none')? '':'none';
}
//-->
</script>
</head> 
<body bgcolor="Background">
<h3>Hide/Show the div</h3>
<p>Run your mouse over the link below to see the surprise. &#169;</p>
<a href="#" onmouseover="changeDiv();" onmouseout="changeDiv();">The magic link</a> 
<div id="hiddenDiv" style="display: none; background-color: #ffff99; width: 50%;" onmouseover="changeDiv();" onmouseout="changeDiv();">
asdfasdf asdfadsf adsadsfadsf adsf asfd adsf asdf asf adsf asdf asdf asdf asdf asd fasfd asdf asdf asf
asdfasdf ads fasdfasdf ads fasdf asd asdf asdf asdf asdfasdf asdf asd fsadf asdf adsf afds asfd dsaf
adsfa asd fasd fads fas fasdf asf ad fas df
</div> 
</body>
</html>
           
         

Open in New Window

Accepted Solution

03.01.2008 at 10:25AM PST, ID: 21022820

Rank: Genius

b0lsc0tt:

ericpete,

Just curious .... do you use a formula do calculate the value of a question?? ;) I really miss that nice even (multiple of 5) number I had for the first few months here. :D

b0lsc0tt

03.01.2008 at 10:28AM PST, ID: 21022833

Rank: Genius

b0lsc0tt:

ericpete,

Another simple example of this that I have liked is at http:Q_21945840.html#17265590 . A great example of this done by GrandSchtroumpf.

Let me know if you have a question. I can explain anything that is new or unfamiliar.

b0lsc0tt

03.01.2008 at 10:31AM PST, ID: 21022842

Mehuge:

AFAIK its not possible to do this in just CSS. Maybe I am about to be educated.

I expect you know already how to do this in javascript, but I will include some code anyway.

                       
         
           
           
             <style type="text/css">
	#d1 { display: none; }
	#d2 { display: none; }
	#d3 { display: none; }
</style>
 
<h1>Click Link Reveils Text</h1>
<a onclick="d1.style.display = 'block'">Click Me</a>
<div id="d1">Some Text</div>
 
<h1>Reveils Text while hovering over link</h1>
<a onmouseover="d2.style.display = 'block'" onmouseout="d2.style.display='none'">Hover Over Me</a>
<div id="d2">Some Text</div>
 
<h1>Reveils Text first time hover over link</h1>
<a onmouseover="d3.style.display = 'block'">Hover over me Once</a>
<div id="d3">Some Text</div>
           
         

Open in New Window

Assisted Solution

03.01.2008 at 11:18AM PST, ID: 21023029

Rank: Genius

b0lsc0tt:

Mehuge,
You are correct that you can't just use CSS. All of the examples I provided use Javascript to do this "on demand." CSS won't change with an event (like a click) unless Javascript is used to notice the event and make the change.

bol

03.01.2008 at 12:01PM PST, ID: 21023241

ericpete:

b0lsc0tt,

"...do you use a formula do calculate the value of a question?..."

Yep. I developed an algorithm that incorporates my grandson's birthday (expressed as a ten-digit number in an Access table), the last four digits of my Social Security number, and the square root of a randomly selected telephone number (xxx - xxx + xxxx) from the telephone book for the Lake Of The Ozarks, Missouri. In other words, it is pure whim. It's always high enough to let people know I'm serious about getting a response, but doesn't end in two zeros, so it stands out on a page.

b0lsc0tt / Mehuge,

I have tested all three, and will let my client decide which he wants. Thanks for the quick responses!

ep

b0lsc0tt

03.01.2008 at 01:20PM PST, ID: 21023601

Your welcome! I'm glad I could help. Thanks for the fun question, the grade and the points. I hope your client enjoys what you work out for them. :)

bol

p.s. Thanks for "fixing" my point total. Now I just have to be real careful on the questions I answer and avoid "reckless" splits. :D

Mehuge

03.01.2008 at 04:59PM PST, ID: 21024452

Thanks for awarding the assist. Only glad to be of some help. I hit reply, tested my proposed solution, then posted only to then find b0lsc0tt had beat me to it :) So he deserves the accept.

20080236-EE-VQP-29 / EE_QW_EXPERT_20070906