Solved

Hide text strings until you mouseover

Posted on 2010-11-14
6
545 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
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 500 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

813 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now