?
Solved

Hide text strings until you mouseover

Posted on 2010-11-14
6
Medium Priority
?
551 Views
Last Modified: 2012-05-10
Hi

I want to slightly better secure my flat html password list.

The format of the data is like so:

<th><th>servername</th><th>server attribute</th><th>password</th></th>
<tr><td>example</td><td>webserver</td><td>securepass</td></tr>

Which renders unsurprisingly as:

servername | server attribute | password
example | webserver | securepass

What I'd like to is add a class or something to either each 'password' td or just once to the th which means unless you mouse over the password cell in question you get this:

servername | server attribute | password
example | webserver | ********

It should support being able to click and copy paste the password data and hide itself on mouseout.

Pure CSS or javascript/jquery solution would be fine
0
Comment
Question by:Borgs8472
[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
6 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 34131890
<th><th style="background:#00ff00;color:#fff;">servername</th><th>server attribute</th><th>password</th></th>
<tr><td>example</td><td>webserver</td><td>securepass</td></tr>


see this link for more details:

http://www.4html.com/?html;css1
0
 
LVL 3

Accepted Solution

by:
KCWebMonkey earned 2000 total points
ID: 34132091
This is a solution I came up with using jQuery that does what you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".passwordText").hide();	
	$(".password").hover(
		function() {
			$(this).find(".passwordHidden").hide();
			$(this).find(".passwordText").show();
		},
		function() {
			$(this).find(".passwordHidden").show();
			$(this).find(".passwordText").hide();
		}
	);
});
</script>
</head>
<body>
<table border="1">
  <tr>
    <th>servername</th>
    <th>server attribute</th>
    <th>password</th>
  </tr>
  <tr>
    <td class="servername">example 1</td>
    <td class="attribute">webserver 1</td>
    <td class="password">
    	<span class="passwordText">password 1</span>
        <span class="passwordHidden">***********</span>
    </td>
  </tr>
  <tr>
    <td class="servername">example 2</td>
    <td class="attribute">webserver 2</td>
    <td class="password">
    	<span class="passwordText">password 2</span>
        <span class="passwordHidden">***********</span>
    </td>
  </tr>
  <tr>
    <td class="servername">example 3</td>
    <td class="attribute">webserver 3</td>
    <td class="password">
    	<span class="passwordText">password 3</span>
        <span class="passwordHidden">***********</span>
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34132385
but this doesn't hide the PWs from anyone wanting to see the page source and find out what they are.

You should tag each TR line of the table in the PW TD field, and put the ******** in automatically, then have a module that can read the PW for that line from another file, one by one.  THat way they are hidden.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Expert Comment

by:KCWebMonkey
ID: 34132496
the OP said that it is a flat(static) html file, meaning that he is not pulling in the passwords from another source or file. they just said that they want to hide the password from view until the user mouses over the field.
0
 
LVL 4

Author Comment

by:Borgs8472
ID: 34132934
Hi KCWebMonkey

What you've done does work, however I have 50 rows to apply this to, is there a way the password column can have a style applied to it to process the effect for every row? :/
0
 
LVL 3

Expert Comment

by:KCWebMonkey
ID: 34133045
not that i can think of since spans and classes need to be added to each row.
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 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