Dynamic div position 1

[ClulessChris]

I'm new to Javascript so sorry in advance if this turns out to be a stupid mistake.

I'm calling the following functions from the rollover over event of a div.
I'm trying to have a hidden div display at the same height as the div it's called from, as part of my navigation menus.
This works fine in opera, but in IE7 I seem get an extra 100 pixels added and the div displays too low in the window.

can you please help?

	function getElementTop(Elem) {
		if(document.getElementById) {	
			var elem = document.getElementById(Elem);
		} else if (document.all) {
			var elem = document.all[Elem];
		}

		var yPos = elem.offsetTop;
		tempEl = elem.offsetParent;
		while (tempEl != null) {
  			yPos += tempEl.offsetTop;
	  		tempEl = tempEl.offsetParent;
  		}
		return yPos + 'px';
	
	}	

	// Turns the layers on and off
        function showLayer(layerName, matchElem){
        	var elemY = getElementTop(matchElem)
        	if(check){
        		if (what =="none"){
        			return;
        			}
	        	else if (what == "moz"){
        			document.getElementById(layerName).style.visibility="visible";
        			alert("moz " + elemY)
        			document.getElementById(layerName).style.Top=elemY;
        			}
        		else{
                  		eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
                  		eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top="'+elemY+'"');
                  		alert( elemY)
                  		}
		 		}
        	else {// alert ("Please wait for the page to finish loading.");
        		return;}
		}

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[dwarfthrower]

What CSS rules are applied to the two divs?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[ClulessChris]

Thanks for your responce.
None for the dive the functions are called from. and the following for the div being displayed:

#layer1{
	background-color : #FFCC66; 
   	border-width : 1px; 
   	border-style : solid; 
   	border-color : #006666; 
	padding: 5px;
   	width : 150px; 
   	top : 200px; 
   	left : 150px; 
   	line-height: 2em; 
   	position : absolute; 
   	z-index : 90; 
   	visibility : hidden; 
	}

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[Ascalonian]

Just so I understand the setup of the page... you have two DIV's on the page. You want one to hide and the other show?

I would need to see how the page is setup to help you. Would you please show us some source code?

If you have the DIV under one another, you just need to change the display property as:

function changeDivs(hideDivId, showDivId) {
    document.getElementById(hideDivId).style.display = "none";
    document.getElementById(showDivId).style.display = "";
}

Also, as a side note... eval is a horrible practice to get into. You should avoid using this at any cost.

 

[ClulessChris]

I have a number of hidden div's that show / hide on rollover (at the moment of a hyperlink). The trouble is that I have to set the Y position on these div's in the css. this mean that should the link that calls the div change position on the screen (due to window resizing) then the div appears out of position.
I wish to dynamicly set the Y position of the when t's called.
To do this I wrap each link that calls a div in it's own 'wrapper' div.
The idea being that I pass the name of the div I wish to display, and the name of the div I'm rolling over (the 'wrapper') the the functions posted.
The called div should then display at the same height at the 'wrapper' div.
And this work well in Opera. but in IE7, the value returned by my fuction 'getElementTop' is approx 100px greater that what is returned in Opera.

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[blackhawkdoc64]

I'm not sure how much this will help you but as i was explained about using css with multiple browsers is that since internet explorer won't recognize css properties that are escaped you can have two sizes listed. the non escaped is for IE the escaped the rest of the browser types will use.

#yourdiv {
    width: 200px;
    wid\th: 300px;

So the width will be set to 200px in every browser then will be resized to 300px for every browser except IE.

 

[blackhawkdoc64]

Most browsers when viewing the box model take the width for instance to mean that the content box itself should be a specific width. Most versions of Internet Explorer on the other hand will decide that that same width is for the content box plus the padding and the border. I think I did it backwards in my example above.

 

[ClulessChris]

Sorry I think I've confused the issue.
In the simplest terms:

The code below run in Opera will return a (for instance) 70px.

However run on the same page for the same element in IE7 it will return 171px.

    function getElementTop(Elem) {
        if(document.getElementById) {    
            var elem = document.getElementById(Elem);
        } else if (document.all) {
            var elem = document.all[Elem];
        }

        var yPos = elem.offsetTop;
        tempEl = elem.offsetParent;
        while (tempEl != null) {
              yPos += tempEl.offsetTop;
              tempEl = tempEl.offsetParent;
          }
        return yPos + 'px';

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[dwarfthrower]

Is Opera returning an object with offsetParent?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[ClulessChris]

dwarfthrower, many thanks. As star for a star.

Never knock on Death's door: ring the bell and run away! Death really hates that!