Solved

Hide text strings until you mouseover

Posted on 2010-11-14
6
549 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 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 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