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">
<head>
<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;
}
</style>
</head>
<body>
<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>');
ed.execCommand('mceCleanup');
}
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);
tinyMCEPopup.close();
}
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() {
tinyMCEPopup.resizeToInnerSize();
}
</script>
<!-- close metaNav -->
<div id="facultySearchBar"></div>
<p>
Search:
Sort By:</p>
<form>
<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" />
<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>
</select>
</div>
<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>
<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
</p>
</div>
</form>
</body>
</html>