Solved

Hide text strings until you mouseover

Posted on 2010-11-14
6
548 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
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!

 
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

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!

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

733 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