Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

mousePosition div placing 1

Status
Not open for further replies.
ThomasJSmart

ThomasJSmart

Programmer
Sep 16, 2002
634
Hi

iv made a script with which i position a DIV at a given X location, it works ok, the div moves within the space it should but the problem is its VERY jittery, translated to frames per second its like its doing the moving at about 1 FPS...

iv seen javascripts doing this kind of thing real time so why isnt mine working like that?




Code: 
<html>
<head></head>


<body onResize="resetWidth()">


<div id="menuHolder" style="width:950px; height:378px; position:relative;">
<div id="mainmenuDiv" style="width:267px; height:378px; z-index:10; left:0px; top:0px; position:absolute; background-image:url(img/menuBack.png); background-repeat:no-repeat;">menu1 <br>menu2<br>menu3<br>menu4</div>
</div>



<script>

function FindIt(n, d){
	var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
	{d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
	if(!(x=d[n])&&d.all) x=d.all[n];for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=FindIt(n,d.layers[i].document);
	if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function mouseCoords(ev){
	if(ev.pageX){ return ev.pageX; }
	return ev.clientX + document.body.scrollLeft  - document.body.clientLeft;
}

function mouseMove(ev){
	ev=ev||window.event;
	var mousePos = mouseCoords(ev);
	
	posX = mousePos-sideWidth;
	if(posX<0){ posX=0;} if(posX>(950-menuWidth)){ posX=(950-menuWidth);}

	FindIt('mainmenuDiv').style.left=posX+'px';
	
	return false;
}

function resetWidth(){
	pageWidth = getWinWidth();
	sideWidth = (Math.round((pageWidth-950)/2))+menuWidth;
	if(sideWidth<0){ sideWidth=0;}
}

function getIECanvas(){
	var canv = null;
    if (!window.opera && document.all && typeof document.body.clientWidth != "undefined"){
		var cm = document.compatMode && document.compatMode == "CSS1Compat";
		canv = cm ? document.documentElement : document.body;
	}
	return canv;
}

function getWinWidth(){
	var canv;
	if (canv=getIECanvas()){
		width = canv.clientWidth;
	}else{
		width = window.innerWidth - 18;
	}
	return width;
}

var menuWidth=134;
var pageWidth = getWinWidth();
var sideWidth = Math.round(		((pageWidth-950)/2)+menuWidth		);
document.onmousemove = mouseMove;
</script>

</body>







I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Sort by date Sort by votes
ps. its only jittery in Internet Explorer apparently

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Perhaps if you explained what the FindIt function is supposed to do it might help us give you a suggestion. It looks like it's some sort of faux getElementById function. Why not just use getElementById instead?

I will say this - the FindIt function has a couple loops and also seems to be recursive. So figure that it has to run this function every time your page moves even a pixel then I would guess that it is the culprit giving you the massive slow down. Additionally, it seems like you're "finding" that div every time the page scrolls. Why not just initially store a reference to that div when the page loads in a global variable - that way you have direct access to it when the page moves instead of having to go "find" it each time.

I just typed up a post that is similar to this today:


-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Hi
The findit function is a function iv used for ages to find objects in a page. very usefull crossbrowser/system thing. always works.

added a line: var divObj = FindIt('mainmenuDiv');
and now using the var to reference the div but its still the same effect. it only seems to be the case in IE 6 it seems, IE7 / FF etc all work fine.

thomas







I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Show your updated code with the line you added.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Code: 
<html>
<head>
</head>
<body onResize="resetWidth()">
<script language="javascript" type="text/javascript">
<!--
function FindIt(n, d){
	var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
	{d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
	if(!(x=d[n])&&d.all) x=d.all[n];for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=FindIt(n,d.layers[i].document);
	if(!x && d.getElementById) x=d.getElementById(n); return x;
}

var divObj = FindIt('mainmenuDiv');

function mouseCoords(ev){
	if(ev.pageX){ return ev.pageX; }
	return ev.clientX + document.body.scrollLeft  - document.body.clientLeft;
}

function mouseMove(ev){
	ev=ev||window.event;
	if(moveMenu==1){
		var mousePos = mouseCoords(ev);
		posX = mousePos-sideWidth;
		if(posX<0){ posX=0;} if(posX>(950-(menuWidth*2))){ posX=(950-(menuWidth*2));}
		divObj.style.left=posX+'px';
	}	
	return false;
}


function resetWidth(){
	pageWidth = getWinWidth();
	sideWidth = (Math.round((pageWidth-950)/2))+menuWidth;
	if(sideWidth<0){ sideWidth=0;}
}


function getIECanvas(){
	var canv = null;
    if (!window.opera && document.all && typeof document.body.clientWidth != "undefined"){
		var cm = document.compatMode && document.compatMode == "CSS1Compat";
		canv = cm ? document.documentElement : document.body;
	}
	return canv;
}

function getWinWidth(){
	var canv;
	if (canv=getIECanvas()){
		width = canv.clientWidth;
	}else{
		width = window.innerWidth - 18;
	}
	return width;
}

var moveMenu=1;
var menuWidth=134;
var pageWidth = getWinWidth();
var sideWidth = Math.round(		((pageWidth-950)/2)+menuWidth		);
document.onmousemove = mouseMove;

//-->
</script>


<div id="menuHolder" style="width:950px; height:378px; position:relative;">
<div id="mainmenuDiv" style="width:267px; height:378px; z-index:10; left:0px; top:0px; position:absolute; background-image:url(img/menuBack.png); background-repeat:no-repeat;">
</div>
</div>
<body>
</html>

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Does the page even work like that? Usually if you try to access elements before a page has loaded you get a null reference. I would have done it like this:
Code: 
var divObj;
window.onload = function () {
   divObj = FindIt('mainmenuDiv');
};

Also, I've noticed in the past that if I had a very convoluted div that it would not move smoothly on the screen. This does not appear to be the case with your code at all, since you have posted empty divs. Maybe it's the background image you're using? I took out the reference to the background image, and just used a bordered div instead and the code ran equally as smooth in both FF and IE7:
Code: 
<html>
<head>
</head>
<body onResize="resetWidth()">
<script language="javascript" type="text/javascript">

function FindIt(n, d){
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
    {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n];for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=FindIt(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function mouseCoords(ev){
    if(ev.pageX){ return ev.pageX; }
    return ev.clientX + document.body.scrollLeft  - document.body.clientLeft;
}

function mouseMove(ev){
    ev=ev||window.event;
    if(moveMenu==1){
        var mousePos = mouseCoords(ev);
        posX = mousePos-sideWidth;
        if(posX<0){ posX=0;} if(posX>(950-(menuWidth*2))){ posX=(950-(menuWidth*2));}
        divObj.style.left=posX+'px';
    }    
    return false;
}


function resetWidth(){
    pageWidth = getWinWidth();
    sideWidth = (Math.round((pageWidth-950)/2))+menuWidth;
    if(sideWidth<0){ sideWidth=0;}
}


function getIECanvas(){
    var canv = null;
    if (!window.opera && document.all && typeof document.body.clientWidth != "undefined"){
        var cm = document.compatMode && document.compatMode == "CSS1Compat";
        canv = cm ? document.documentElement : document.body;
    }
    return canv;
}

function getWinWidth(){
    var canv;
    if (canv=getIECanvas()){
        width = canv.clientWidth;
    }else{
        width = window.innerWidth - 18;
    }
    return width;
}

var moveMenu=1;
var menuWidth=134;
var pageWidth = getWinWidth();
var sideWidth = Math.round(        ((pageWidth-950)/2)+menuWidth        );
var divObj;
window.onload = function () {
   divObj = FindIt('mainmenuDiv');
};
document.onmousemove = mouseMove;

</script>


<div id="menuHolder" style="width:950px; height:378px; position:relative;">
<div id="mainmenuDiv" style="width:267px; height:378px; z-index:10; left:0px; top:0px; position:absolute; border:1px solid black;">
</div>
</div>
<body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
i pasted my code the wrong way around here, the divs actually come before the code.

in ie7/ff it already works fine, its ie 6 thats the problem.

you found the problem with the background image tho, if i remove that its working peachy. i think its because the background image is a PNG file and IE6 has a problem with it just been put in the background like that. anyhoo i need the image there. so i did some work on the CSS and now its working perfect :D

Code: 
#mainmenuDiv{ background-image: url(img/menuBack.png); }

* html #mainmenuDiv{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(trans.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/menuBack.png", sizingMethod="scale");
	}

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
136
malibu65k
malibu65k
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
313
bluemask11
bluemask11
GRIFFIJ
  • Locked
  • Question
Centre a div
Replies
5
Views
87
vacunita
vacunita
BobMCT
  • Locked
  • Question
Using js to modify html div with message (help?)
Replies
6
Views
124
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top