Need serious help with float boxes

Question

newb_webdevelop 0 Newbie Poster

14 Years Ago

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>&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; 
Search:&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;&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; 
Sort By:</p>
<form>
<div class="auto-style1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>
          </select>&nbsp;
       
</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>

web-design

4 Contributors
5 Replies
152 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by jameskodo85

scottgm 1 Newbie Poster

14 Years Ago

could have a look at jQuery FadeIn()

http://api.jquery.com/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?

scottgm 1 Newbie Poster

14 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

teedoff 3 Posting Pro · Answer 1 · 2010-12-16T02:36:12+00:00

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.

scottgm 1 Newbie Poster · Answer 2 · 2010-12-16T02:43:36+00:00

Good stuff, glad i could help.

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

jameskodo85 0 Newbie Poster · Answer 3 · 2010-12-21T14:47:22+00:00

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