I am trying to build a faculty page for a project and I want to add a float box on my site. My idea behind this is when the user hovers over a faculty member's hyperlinked name, a floatbox appears on the right showing their picture and brief information. The only problem is is that I'm new to scripting and I have no clue as to what to do. I also wanted to set it up where the user can enter the department name and/or search by first name from a drop down menu and find the teacher they are looking for. I am basing what I want my site to look at based on http://www.wharton.upenn.edu/faculty/faculty-profiles.cfm. Can anybody please help me with this? I would really appreciate it. Here's the code i have so far

<!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">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Faculty Profiles</title>

    <script type="text/javascript" src="/javascript/profiles.js"></script><!-- Profiles-->
        <link type="text/css" rel="stylesheet" href="/css/floatbox-plus.css" />
        <script type="text/javascript" src="/javascript/jquery132.js"></script>
    <script type="text/javascript" src="/javascript/features.js"></script>
    <script type="text/javascript" src="/javascript/tabs.js"></script>
    <script type="text/javascript">$(function() { Tabs.init(); })</script>

    <script type="text/javascript" src="/javascript/jquery132.js"></script>
    <script type="text/javascript" src="/javascript/features.js"></script>
    <script type="text/javascript" src="/javascript/tabs.js"></script>
    <script type="text/javascript">$(function() { Tabs.init(); })</script>
<style type="text/css">
.auto-style1 {
	background-color: #C0C0C0;
.auto-style2 {
	margin-left: 0px;

<script type="text/javascript">            $(document).ready(                function()                {                    $('#box').floating();                }            );                   

  function floatboxplus_insert() {
    if(window.tinyMCE) {
        var postnumber = document.getElementById('post_ID').value;

        tinyMCE.activeEditor.windowManager.open( {
            url : tinyMCE.activeEditor.documentBaseURI + '../../../wp-content/plugins/floatbox-plus/tinymce/floatbox-plus-popup.php?post='+postnumber,
            width : 550,
            height : 330,
            resizable : 'no',
            scrollbars : 'no',
            inline : 'yes'
        }, { /* custom parameter space */ }
        return true;
    } else {
        window.alert('This function is only available in the WYSIWYG editor');
        return true;

function lp_insertVideoCode(portal, vid, linktext) {
    var text = (linktext == '') ? ('['+ portal + ' ' + vid + ']') : ('['+ portal + ' ' + vid + ' ' + linktext + ']');
    if(window.tinyMCE) {
        var ed = tinyMCE.activeEditor;
        ed.execCommand('mceInsertContent', false, '<p>' + text + '</p>');
    return true;

function lp_checkData(formObj) {
    if (formObj.vid.value != '') lp_insertCode(formObj);

function lp_insertCode(formObj) {
    var portal = formObj.portal.value;
    var vid = formObj.vid.value;
    var linktext = (formObj.nolink.checked) ? 'nolink' : formObj.linktext.value;

    lp_insertVideoCode(portal, vid, linktext);

function disable_enable(objCheckbox, objTextfield) {
    objTextfield.disabled = (objCheckbox.checked) ? true : false;
    objTextfield.value = '';
    objTextfield.style.backgroundColor = (objTextfield.disabled) ? '#ccc' : '#fff';

function dailymotion(objSelectBox, objTextfield, objCheckbox) {
    if (objSelectBox.value=='dailymotion' || objSelectBox.value=='garagetv') {
        objCheckbox.checked = true;
        objTextfield.disabled = true;
        objTextfield.style.backgroundColor = '#ccc';
        objTextfield.value = '';
    objCheckbox.disabled = (objSelectBox.value=='dailymotion' || objSelectBox.value=='garagetv') ? true : false;

function init() {
  <!-- close metaNav -->
<div id="facultySearchBar"></div>
Sort By:</p>
<div class="auto-style1">
<input id="searchProfileName" name="searchProfileName" type="text"value="Type faculty name or department" onfocus="this.value='';this.onfocus=null;Profiles.search(this.value)" onkeyup="Profiles.search(this.value)" style="width: 260px" class="auto-style2" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select id="sort" name="sort" onchange="Profiles.chunk(this)">
            <option value="a-f">A-F</option>
            <option value="g-j">G-J</option>
            <option value="k-p">K-P</option>
            <option value="q-u">Q-U</option>
            <option value="v-z">V-Z</option>
<p id="profilesCount"> <!-- <strong id="searchResultsPage">12</strong> of <strong id="searchResultsTotal">53</strong>  results in <strong id="searchDepartment">Finance</strong> --></p>
      <div id="profilesList" style="position:relative;z-index:100;clear:both;">
       <div class="profilesListItem" id="profileHolder1001" style="position:relative;z-index:110;">
          <p><a class="profileName click830" href="http://ntweb.deltastate.edu/jziegelmayer">
		  Z</a><a href="http://ntweb.deltastate.edu/jziegelmayer">iegelmayer, 
		  Jennifer</a><br />
Computer Information Systems


7 Years
Discussion Span
Last Post by jameskodo85

could have a look at jQuery FadeIn()


what i would try to do is create the floating box so it static, hide it, then use FadeIn() to make it appear when you hover/click on the persons name or whatever?


forgot to mention, as a fallback for users without JavaScript enabled, you could use :hover in your css to make the box appear and have it hidden as standard


I rather like the hidden div/ hover div way to do this. That way you dont rely on your visitors to have js enabled.

I always like to use js only as a last resort and only when the site is fully finctional without it.


Good stuff, glad i could help.

although its not really required, the jquery will just make it look a little nicer


I forgot to say, as the reserve for users without JavaScript enabled, you can use: hover in CSS to make the window appear and are hidden from the norm

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.