...

View Full Version : Limit to three words, mouseover shows full



exzrael
11-10-2006, 06:34 AM
Now this might be a tricky one.

I would like to fetch a number of names from a database and show them in a table. Furthermore, only three words from each name should be visible until mouseover, then the full name.

Could this be done?

wallport10
11-10-2006, 07:50 AM
let me clarify what your looking for, you want 3 characters of that name to show until scroll over! correct?

exzrael
11-10-2006, 07:57 AM
let me clarify what your looking for, you want 3 characters of that name to show until scroll over! correct?

If the name is Charles Andreas Heftner Swansson I want Charles Andreas Heftner to show until mouseover; when mouseover the full name should be shown.

littlejones
11-10-2006, 09:21 AM
It should be possible. I don't know much about Javascript or if this is achievable but the way I would do it is like this.



<html>
<head><title></title>

<script language="JavaScript">

</head>

<body>

<?php

$name = "Marcus Andreas Rory Muntzer";

$shortName = explode(" ", $name);

?>

<table border="1">

<tr>
<td><?php echo $shortName[0]." ".$shortName[1]." ".$shortName[2]." ".$thirdName; ?></td>
</tr>

</table>

</body>
</html>


That currently would output Marcus Andreas Rory and then an empty string. What you need to do is use the Javascript 'onMouseOver' function and if possible (not sure if it is) put php inside it such as $thirdName = $shortName[3];

Then you would also need to set 'onMouseOut' function so that $thirdName is empty again.

I have to say though I don't know enough Javascript to know if that is possible?

Bill Posters
11-10-2006, 11:48 AM
Rough e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">

li a span {
display: none;
}

li a:hover span {
display: inline;
}

</style>
</head>
<body>

<ul>
<?php

$names[] = 'Charles Andreas Heftner Swansson';
$names[] = 'Boris Johnson';
$names[] = 'Billy Ray Cyrus';
$names[] = 'John Paul George Ringo';
$names[] = 'Helena Bonham-Carter';

for ($n=0; $n<count($names); $n++) {

$name = $names[$n];
$nameArr = explode(' ',$name);

echo "\t".'<li><a href="#">';

for ($i=0; $i<count($nameArr); $i++) {
echo ($i == 3) ? '<span> '.$nameArr[$i] : $nameArr[$i];
echo (($i < 2) && ($i < count($nameArr)-1)) ? ' ' : '';
echo (count($nameArr) > 3 && $i == count($nameArr)-1) ? '</span>' : '';
}

echo '</a></li>'."\r";

}

?>
</ul>

</body>
</html>

…or without anchors…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">

body.hasJS li span {
display: none;
}

body.hasJS li:hover span,
body.hasJS li.show span {
display: inline;
}

</style>
<script type="text/javascript">

window.onload = function() {

document.getElementsByTagName('body')[0].className = 'hasJS';
namer();

}

function namer() {

var names = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
for (var i=0, tLi; tLi=names[i]; i++) {
tLi.onmouseover = function() { this.className = 'show'; }
tLi.onmouseout = function() { this.className = ''; }
}

}

</script>
</head>
<body>

<ul>
<?php

$names[] = 'Charles Andreas Heftner Swansson';
$names[] = 'Boris Johnson';
$names[] = 'Billy Ray Cyrus';
$names[] = 'John Paul George Ringo';
$names[] = 'Helena Bonham-Carter';

for ($n=0; $n<count($names); $n++) {

$name = $names[$n];
$nameArr = explode(' ',$name);

echo "\t".'<li>';

for ($i=0; $i<count($nameArr); $i++) {
echo ($i == 3) ? '<span> '.$nameArr[$i] : $nameArr[$i];
echo (($i < 2) && ($i < count($nameArr)-1)) ? ' ' : '';
echo (count($nameArr) > 3 && $i == count($nameArr)-1) ? '</span>' : '';
}

echo '</li>'."\r";

}

?>
</ul>

</body>
</html>

exzrael
11-10-2006, 01:23 PM
Thank you guys for your replies. Will try them out asap.

rafiki
11-10-2006, 01:50 PM
wouldnt it be easrier if you used javascript to extend the names when you roll over?

Bill Posters
11-10-2006, 02:42 PM
wouldnt it be easrier if you used javascript to extend the names when you roll over?
Not really. It's better to have all the content in place and use CSS and/or js to hide/show the extraneous name parts.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum