Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Hide text strings until you mouseover

Posted on 2010-11-14
6
Medium Priority
?
552 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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 how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 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