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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    Div not going to correct position :(

    How can I get this div to go above the element? Here is the HTML:
    Code:
    <div id="tooltip_container"><div id="690.298" class="tooltip_style_wrapper" style="position: absolute; top: 298px; left: 690px; opacity: 1;"><div class="tooltip_style">Tooltip.</div></div>
    Sorry for lack of spaces, my computer seems to be bugging up and deciding to ignore me pressing enter. Just needs to be restart. The Div is made with some JavaScript and positioned to the current divs position with this JavaScript:
    Code:
    /*
    Title: Tool Tip
    Auther: Martyn Lee Ball
    Version: 1.5
    
    Credits:
     - codingforums.com: Old_Pedant
    */
    
    //Listen elements which can display a tooltip
    var scanE = Array("img","a","div");
    
    function attachTooltips() {
    	for ( j = 0; j < scanE.length; j++ ) {
    		var objs = document.getElementsByTagName(scanE[j]);
    		for ( var i = 0; i < objs.length; ++i ) {
    			var elm = objs [ i ];
    			if ( elm.getAttribute ( 'tooltip' ) == "true" ) {
    				elm.onmouseover = function() { display_tooltip(this); };
    				elm.onmouseout = function() { delete_tooltip(this); };
    			}
    		}
    	}
    }
    /*
    Global functions are stored in here as they are needed
    for many other functions. 
    */
    
    //This function attaches events to elements. 
    var addEvent = function( elm, evt, fun ) {
    	if ( elm.addEventListener ) {
    		elm.addEventListener( evt, fun, false );
    	} else if ( elm.attachEvent ) {
    		elm.attachEvent( 'on' + evt, fun );
    	} else {
    		elm [ 'on' + evt ] = fun;
    	}
    };
    addEvent ( window, "load", attachTooltips );
    
    //This is the name of the style for the tooltip
    //The style for the container of this will be the same as this but with _wrapper added on
    var s_class = 'tooltip_style';
    //This is the height in pixals which the tooltip is raised from the image
    var img_tip_height = 5; 
    //This is the id of the div container which the tooltip's will be created in
    var tooltip_container = 'tooltip_container';
    //Below are the start and end of the image tag, add styles if you wish, and define the width ect
    var imgSt = '<img style=\"display:block; height:80px;\" src=\" ';
    var imgEn = '" />';
    //Below is the value which is used to raise the tooltip if it contains the image. This value much also be given
    //to the style for the tooltip so the img is not bigger than it should be. 
    var maxIMGheight = 80 /*Don't change value to the right*/ + 6;
    
    function display_tooltip(obj) {
        //First of all get the position data for current element
        //Also get the message to be displayed- contained in the alt
        var data = obj_position(obj);
       
        //Get the position of the element which has been rolled over
        var left_pos = data[0];
        var top_pos = data[1];
        var message = data[2];
    	
    	//Check to see if tooltip containes link to an image
    	var image = check_image(message);
    	if (image[0] == true) { 
    		message = imgSt + image[1] + imgEn + image[2];
    		var heightAdd = maxIMGheight;
    	}
    	else {
    		heightAdd = 0;
    	}
    	
        var container = document.getElementById(tooltip_container);
        var newdiv = document.createElement('div');
    	
        newdiv.setAttribute('id',left_pos + "." + top_pos);
        newdiv.className = s_class + "_wrapper";
        newdiv.innerHTML = "<div class=\""+s_class+"\">" + message +  "</div>";
       
        //Position div 
        newdiv.style.position="absolute";
        newdiv.style.top=top_pos - heightAdd +"px";
        newdiv.style.left=left_pos+"px";
    	newdiv.style.opacity=1;
    	
        //Append newly created div to container
        container.appendChild(newdiv);
    }
    function check_image(mess) {
    	//Check for img tags
    	if (mess.search("-/img/") != -1) {
    		var img = mess.split("-/img/",2); img2 = img[1].split("-//img/");
    		
    		var img_data = Array(true, img2[0], img[0]);
    		return img_data;
    	} else {
    		return false;
    	}
    }
    function obj_position(obj) {
        //Setup variables to hold position values
        var x = 0;
        var y = 0;
    	var id = obj.id;
    	
    	//Give a bit more space if its an image
    	if ( obj.tagName == "IMG" ) { y = y - img_tip_height; }
       
        while (obj.offsetParent !== null) {
            //Get position values and put in variables
            x += obj.offsetLeft;
            y += obj.offsetTop - 23;
            obj = obj.offsetParent;
        }
        
        //Get alt content for tooltip
        var alt_message = document.getElementById(id).getAttribute('alt');
        
        //Create array containing data
        var data=new Array(x,y,alt_message);
        return data;
    }
    // Values for fading
    var fadeBy = 10; //Amount to fade by
    var fadeTime = 30; //Time in milliseconds to fade. 
    var ie_counter = 100; //Counter for crappy IE. 
    
    function delete_tooltip(obj) {
    	//Get the ID of the tooltip container
    	var data = obj_position(obj);
    	
    	//ID of tooltip which is being faded
    	var xy_id = data[0] + "." + data[1];
    	//fade( xy_id );
    }
    
    function fade( theID ) {
        var div = document.getElementById(theID);
    
        //Object details
        var opacity = div.style.opacity * 100 - fadeBy; //Fade (FF)
    	ie_counter = ie_counter - fadeBy;
    	var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
        if ( opacity <= fadeBy ) opacity = 0; if ( ie_counter <= fadeBy ) ie_couner = 0;
        div.style.opacity = opacity / 100;
        if ( opacity == 0 || ie_counter == 0 ) 
        {
             document.getElementById(tooltip_container).removeChild(div);
    		 ie_counter = 100; //Reset counter for crappy IE
             return;
        }
        setTimeout( "fade('" + theID + "')", fadeTime );
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    Erm, I will have to setup another page on a different host as this is an administrator section for a clients website. Gimmi 5.

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Code:
    function display_tooltip(obj) {
        //First of all get the position data for current element
        //Also get the message to be displayed- contained in the alt
        var data = obj_position(obj);
       
        //Get the position of the element which has been rolled over
        var left_pos = data[0];
        var top_pos = data[1]-40;
        var message = data[2];
    See above snippet of your javascript. I used -40, but you can play with this to get it where you like it.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    That is all well and all but what if the element hovered over is much bigger so the div is positioned differently, or if there is more text in the tooltip.

    Then that value will need to be changed again for that single element :/ There not a different way to do it?

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm not sure if this is very clean, but one possible method you could use is an invisible element that you preload the text into with the given style attributes for your tooltip. Then, invisibly populate that container and measure its height and pass that into the formula for calculating top position of the tooltip. This is a rough example of how you would do this:

    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    .tooltip_style {
    	background-color:#1a1a1a;
    	border-color:#ccc;
    	border-style:solid;
    	border-width:0 1px;
    	color:#fff;
    	font-family:Calibri;
    	font-size:12px;
    	padding:5px;
    }
    #test_div {
    	z-index:-999;
    	max-width:20em;
    	position:absolute;
    	top:0;
    	left:0px;
    	visibility:hidden;
    }
    </style>
    <script type="text/javascript">
    function text_height(text){
    	test=document.getElementById("test_div");
    	test.innerHTML=text;
    	var result=test.clientHeight+' px height';
    	test.innerHTML="";
    	return result;
    }
    function run_me(){
    alert("Test 1: "+text_height("Transfer the review to a different catagory is posted to incorrect girl/if should be to questions."));
    
    alert("Test 2: "+text_height("Transfer the review to a different catagory is posted to incorrect girl/if should be to questions. However, I have added some text to this line in order to make it so long that it wraps again and demonstrates the ability of this script to calculate the height of the element after adding text."));
    }
    </script>
    </head>
    <body>
    <input type="button" value="Go!" onclick="run_me();" />
    <div id="test_div" class="tooltip_style"></div>
    </body>
    </html>
    From here you just need to insert/style the test_div element (either dynamically or just plop it into your HTML) and then put this check into the script for display_tooltip so that it runs without the button - then you're pretty much there.

    Instead of alerting the result you capture it as a variable and make that number (only negative rather than positive) be your distance rather than the 40px I used earlier. The bonus for this is that it includes padding and borders in calculating the total height of the element so any style changes for the tooltips will not wreck the code.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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