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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover causes text to appear and allows layers

    I searched long and hard for an example of how to do this but couldn't find anything similar, even after searching a good number of other forums.

    Below is a script I have that displays a list of summary info for multiple people. When you mouse over some ones summary info, a bio appears below that summary info (pushing everything below it down). What I'd like to do is take it further and allow more layers. For example, when you hover over their bio, more info about them pops up below that, and so on.

    I know you're probably tired of seeing mousevent/text questions but I'm desperate at this point. If some one could just add a mouseover event to the bio section that displayed more text below it would suffice and I could take it from there.

    Heres the code:
    Code:
    <p>
    <script type="text/javascript">
        var BrowserDetect = {
            init: function () {
                this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
                this.version = this.searchVersion(navigator.userAgent)
    			|| this.searchVersion(navigator.appVersion)
    			|| "an unknown version";
                this.OS = this.searchString(this.dataOS) || "an unknown OS";
            },
            searchString: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var dataString = data[i].string;
                    var dataProp = data[i].prop;
                    this.versionSearchString = data[i].versionSearch || data[i].identity;
                    if (dataString) {
                        if (dataString.indexOf(data[i].subString) != -1)
                            return data[i].identity;
                    }
                    else if (dataProp)
                        return data[i].identity;
                }
            },
            searchVersion: function (dataString) {
                var index = dataString.indexOf(this.versionSearchString);
                if (index == -1) return;
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            },
            dataBrowser: [
    		{
    		    string: navigator.userAgent,
    		    subString: "Chrome",
    		    identity: "Chrome"
    		},
    		{ string: navigator.userAgent,
    		    subString: "OmniWeb",
    		    versionSearch: "OmniWeb/",
    		    identity: "OmniWeb"
    		},
    		{
    		    string: navigator.vendor,
    		    subString: "Apple",
    		    identity: "Safari",
    		    versionSearch: "Version"
    		},
    		{
    		    prop: window.opera,
    		    identity: "Opera"
    		},
    		{
    		    string: navigator.vendor,
    		    subString: "iCab",
    		    identity: "iCab"
    		},
    		{
    		    string: navigator.vendor,
    		    subString: "KDE",
    		    identity: "Konqueror"
    		},
    		{
    		    string: navigator.userAgent,
    		    subString: "Firefox",
    		    identity: "Firefox"
    		},
    		{
    		    string: navigator.vendor,
    		    subString: "Camino",
    		    identity: "Camino"
    		},
    		{		// for newer Netscapes (6+)
    		    string: navigator.userAgent,
    		    subString: "Netscape",
    		    identity: "Netscape"
    		},
    		{
    		    string: navigator.userAgent,
    		    subString: "MSIE",
    		    identity: "Explorer",
    		    versionSearch: "MSIE"
    		},
    		{
    		    string: navigator.userAgent,
    		    subString: "Gecko",
    		    identity: "Mozilla",
    		    versionSearch: "rv"
    		},
    		{ 		// for older Netscapes (4-)
    		    string: navigator.userAgent,
    		    subString: "Mozilla",
    		    identity: "Netscape",
    		    versionSearch: "Mozilla"
    		}
    	],
            dataOS: [
    		{
    		    string: navigator.platform,
    		    subString: "Win",
    		    identity: "Windows"
    		},
    		{
    		    string: navigator.platform,
    		    subString: "Mac",
    		    identity: "Mac"
    		},
    		{
    		    string: navigator.userAgent,
    		    subString: "iPhone",
    		    identity: "iPhone/iPod"
    		},
    		{
    		    string: navigator.platform,
    		    subString: "Linux",
    		    identity: "Linux"
    		}
    	]
    
        };
        BrowserDetect.init();
        //Declaring Variables to be used later
        var staff_members = -1;
        var max_staff_members = 9;
        var staff_name_array = new Array(); //Array of strings
        var staff_title_array = new Array(); //Array of strings
        var staff_length_array = new Array(); //Array of strings
        var staff_info_array = new Array(); //Array of strings
        var staff_array = new Array(); //Array of strings
        var staff_id_array = new Array(); //Array of answer IDs
        var image_source_array = new Array(); //Array of full html code, for images
        var staff_start = new Array(); //Array of starting pos for staff bios
        var staff_end = new Array(); //Array of ending pos for staff bios
        var start_span = '<span style="font-size: 12px;">';
        var end_span = '</span>';
        var img_start_str = "<img alt=";
        var img_end_str = '">'; //"border-style: solid;";//Followed by " />
        var img_end_str_len = 3; //24;
    
        function init() {
            remove_staff_tag();
      
            for (i = 0; i < staff_members; i++) {
                staff_name_array[i] = ""
             
            }
       
            for (i = 0; i < staff_members; i++) {
                staff_title_array[i] = ""
             
            }
        
            for (i = 0; i < staff_members; i++) {
                staff_length_array[i] = ""
            
            }
    
            for (i = 0; i < staff_members; i++) {
                staff_info_array[i] = pull_bio(i) 
               
            }
    
            for (i = 0; i < staff_members; i++) {
                staff_array[i] = start_span + staff_name_array[i] + //"<br/> " +
    				staff_title_array[i] + //"<br/> " +
    				staff_length_array[i] + //"<br/> " +
    				staff_info_array[i] + end_span; //"<br/> " +
            }
    
            for (i = 0; i < staff_array.length; i++) {
                staff_id_array[i] = "emp_bio_long_" + (i);
            }
            remove_unused_staff();
        }
    
        function remove_staff_tag() {
            var ret = document.getElementById("div_tag").innerHTML;
    
            var ind = ret.indexOf("(max 9):[");
            var text_after_num = ret.substring(ind + 8);
    
            staff_members = liferay_workaround("," + ret.substring(ind + 9, ind + 10));
            document.getElementById("div_tag").innerHTML = text_after_num.substring(8);
        }
    
        function remove_unused_staff() {
            var div_html = document.getElementById("div_tag").innerHTML;
    
    
           
            for (i = 0; i < max_staff_members; i++) {
                staff_start[i] = div_html.indexOf("emp_bio_short_" + i) - 29;
                staff_end[i] = div_html.indexOf("Bio " + (i + 1) + " End") - 26;
            }
          
            end_pos = staff_end[staff_members - 1];
    
         
            document.getElementById("div_tag").innerHTML = div_html.substring(0, end_pos);
        }
     
        function pull_bio(emp_num) {
            var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
            var len = ret.length;
            var img_start_pos = ret.indexOf(img_start_str);
            var img_end_pos = ret.indexOf(img_end_str);
            return ret;
        }
       
        function set_all_bios() {
           
            for (i = 0; i < staff_memebrs; i++) {
    
                staff_info_array[i] = "changed";
            }
        }
    
        function pull_pic_test(emp_num) {
            var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
            var img_start_pos = ret.indexOf(img_start_str);
            var img_end_pos = ret.indexOf(img_end_str);
            var ret2 = ret.substring(img_start_pos, img_end_pos + img_end_str_len);
            return ret2;
        }
    
        function get_bio(emp_num) {
            return staff_array[emp_num];
        }
      
        function clear_all_bios() {
            for (i = 0; i < staff_id_array.length; i++) {
                document.getElementById(staff_id_array[i]).innerHTML = '';
            }
        }
        function change_text(id_to_change, value_to_change_to) {
            clear_all_bios();
            document.getElementById(id_to_change).innerHTML = value_to_change_to;
           
        }
    
        function liferay_workaround(almost_number) {
            var adj = false;
            if (almost_number == ",0") {
                almost_number = 0;
                adj = true;
            }
            if (almost_number == ",1") {
                almost_number = 1;
                adj = true;
            }
            if (almost_number == ",2") {
                almost_number = 2;
                adj = true;
            }
            if (almost_number == ",3") {
                almost_number = 3;
                adj = true;
            }
            if (almost_number == ",4") {
                almost_number = 4;
                adj = true;
            }
            if (almost_number == ",5") {
                almost_number = 5;
                adj = true;
            }
            if (almost_number == ",6") {
                almost_number = 6;
                adj = true;
            }
            if (almost_number == ",7") {
                almost_number = 7;
                adj = true;
            }
            if (almost_number == ",8") {
                almost_number = 8;
                adj = true;
            }
            if (almost_number == ",9") {
                almost_number = 9;
                adj = true;
            }
            if (!adj) {
                almost_number = 1;
            }
            return almost_number;
        }
      
    </script></p>
    <div class="faq-content" id="div_tag">
    	<p id="staff_num">
    		Enter number of staff members within the brackets (max 9):[4]</p>
    	<p class="emp_bio_short" id="emp_bio_short_0" onmouseout="" onmouseover="change_text('emp_bio_long_0', get_bio(0))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
    		<strong>Length of Time with Company:&nbsp;</strong>18 years</span></p>
    	<p class="answer" id="emp_bio_long_0" style="text-align: left;">
    		[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
    <!---------------------- Bio 1 End --------------------------><!---------------------- Bio 2 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_1" onmouseout="" onmouseover="change_text('emp_bio_long_1', get_bio(1))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
    		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
    		<strong>Length of Time with Company:&nbsp;</strong>5 years</span></p>
    	<p class="answer" id="emp_bio_long_1" style="text-align: left;">
    		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
    <!---------------------- Bio 2 End --------------------------><!----------------------- Bio 3 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_2" onmouseout="" onmouseover="change_text('emp_bio_long_2', get_bio(2))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
    		<strong>Title: </strong>President &amp; General Manager<br />
    		<strong>Length of Time with Company:&nbsp;</strong>6 years</span></p>
    	<p class="answer" id="emp_bio_long_2" style="text-align: left;">
    		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
    <!---------------------- Bio 3 End --------------------------><!----------------------- Bio 4 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_3" onmouseout="" onmouseover="change_text('emp_bio_long_3', get_bio(3))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
    		<strong>Title: </strong>President &amp; General Manager<br />
    		<strong>Length of Time with Company:</strong> 5 years</span></p>
    	<p class="answer" id="emp_bio_long_3" style="text-align: left;">
    		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
    <!----------------------- Bio 4 End --------------------------><!----------------------- Bio 5 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_4" onmouseout="" onmouseover="change_text('emp_bio_long_4', get_bio(4))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_4" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!----------------------- Bio 5 End --------------------------><!----------------------- Bio 6 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_5" onmouseout="" onmouseover="change_text('emp_bio_long_5', get_bio(5))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_5" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!----------------------- Bio 6 End --------------------------><!----------------------- Bio 7 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_6" onmouseout="" onmouseover="change_text('emp_bio_long_6', get_bio(6))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_6" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!---------------------- Bio 7 End --------------------------><!----------------------- Bio 8 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_7" onmouseout="" onmouseover="change_text('emp_bio_long_7', get_bio(7))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_7" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!----------------------- Bio 8 End --------------------------><!----------------------- Bio 9 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_8" onmouseout="" onmouseover="change_text('emp_bio_long_8', get_bio(8))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_8" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!----------------------- Bio 9 End --------------------------><!---------------------- Bio 10 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_9" onmouseout="" onmouseover="change_text('emp_bio_long_9', get_bio(9))" style="text-align: left;">
    		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
    		<strong>Title:&nbsp;</strong>John Smith's Title<br />
    		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
    	<p class="answer" id="emp_bio_long_9" style="text-align: left;">
    		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
    <!----------------------- Bio 10 End --------------------------></div>
    <p>
    <script type="text/javascript">
        init(); 
        change_text('emp_bio_long_0', get_bio(0))
    </script></p>
    Last edited by Malisk; 09-06-2011 at 06:03 PM.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one? Is this way more uncommon than I thought?


  •  

    Posting Permissions

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