Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Limit to three words, mouseover shows full

    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?

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    let me clarify what your looking for, you want 3 characters of that name to show until scroll over! correct?

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by wallport10 View Post
    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.

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    PHP Code:
    <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?

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Rough e.g.
    Code:
    <!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…

    Code:
    <!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>
    Last edited by Bill Posters; 11-10-2006 at 11:55 AM.

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you guys for your replies. Will try them out asap.

  • #7
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    wouldnt it be easrier if you used javascript to extend the names when you roll over?

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by rafiki View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •