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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating Menu 1

Status
Not open for further replies.
Clanger67

Clanger67

Programmer
Mar 28, 2002
28
GB
I have some code that creates a floating menu. It works fine when the script is on the page, but when i put the code onto a seperate .js page and try to reference it, it does not work.

Any ideas as to what I am missing would be much appreciated.


<script src="includes/JScript1.js" type="text/javascript"></script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<div id="floatdiv" style="BORDER:#2266aa 2px solid; PADDING:16px; BACKGROUND:#ffffff; height:150px; width:200px; position:absolute; top:40px; left:20px; Z-INDEX:100;">
This is a floating javascript menu.
</div>
<asp:panel id="Panel1" style="Z-INDEX: 101; LEFT: 230px; POSITION: absolute; TOP: 16px; border:red 1px dashed;" runat="server"
Width="912px" Height="1816px">Panel</asp:panel>

<!-- <script>

var target_x = 10;
var target_y = 10;

var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;

var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];

var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;

function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}

function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;

fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}

function float_menu()
{
var target_x = 10;
var target_y = 10;

var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;

var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];

var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;

var step_x, step_y;

compute_shifts();

step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;

step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;

if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}

setTimeout('float_menu()', 20);
};

compute_shifts();
if (document.layers)
{
// Netscape 4 cannot perform init move
// when the page loads.
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
*/

</script> -->

</form>
</body>
</HTML>
 
Sort by date Sort by votes
Posting the contents of the script file you're having problems with would be a good start.

Make sure first that you've not got any "<script>" or "<!--" comments inside your script, however.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for your reply Dan

I have checked my code and I have no comments inside of it. The code below is what is in the .js file

var target_x = 10;
var target_y = 10;

var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;

var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];

var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;


function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}

function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;

fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}

function float_menu()
{

var step_x, step_y;

compute_shifts();

step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;

step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;

if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}

setTimeout('float_menu()', 20);
};

compute_shifts();
if (document.layers)
{
// Netscape 4 cannot perform init move
// when the page loads.
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();

Thanks

David
 
Upvote 0 Downvote
You probably want to add an onload handler to call the code - move the following lines from the bottom of the script file into a function:

Code: 
function initMenu() {
   compute_shifts();
   if (document.layers) {
       // Netscape 4 cannot perform init move
       // when the page loads.
       fm_next_x = 0;
       fm_next_y = 0;
   } else {
       fm_next_x = fm_shift_x + target_x;
       fm_next_y = fm_shift_y + target_y;
       move_menu();
   }
   float_menu();
}

and then add a line at the bottom of the script:

window.onload = initMenu;

also you might need to re-calculate the variables at the top of the page within the function (in fact, i'd strongly advise it).

Hope this helps,
Dan


and then you'll probably need to

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan

Have tried adding the extra function and line of code, but still no luck.

The <div> displays fine on the page, it just doesnt move. I am not getting any errors on the page, its as though the page isnt seeing the js file.

Not sure what you meant by recalculating the variables.

Thanks for you time

David
 
Upvote 0 Downvote
Re. the recalculting vars bit, change this lot at the top of the JS file:

Code: 
var target_x = 10;
var target_y = 10;

var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;

var fm_id='floatdiv';
var floating_menu =
    document.getElementById
    ? document.getElementById(fm_id)
    : document.all
      ? document.all[fm_id]
      : document.layers[fm_id];

var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;

to this:

Code: 
var target_x, target_y, has_inner, has_element, fm_id, floating_menu, fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;

and then add this at the top of the "initMenu" function:

Code: 
target_x = 10;
target_y = 10;

has_inner = typeof(window.innerWidth) == 'number';
has_element = document.documentElement && document.documentElement.clientWidth;

fm_id='floatdiv';
floating_menu = (document.getElementById) ? document.getElementById(fm_id) :
				(document.all) ? document.all[fm_id] : document.layers[fm_id];

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
its as though the page isnt seeing the js file.
Click to expand...

You can test if it is getting to the "initMenu" function by putting an alert statement as the first line.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan

I am still having problems. This is the code for the web page. The panel is on the page just to make it scroll.

Code: 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="floatingsidebar.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5">[/URL]
		<script src="includes/JScript1.js" type="text/javascript"></script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<div id="floatdiv" style="BORDER:#2266aa 2px solid; PADDING:16px; BACKGROUND:#ffffff; height:150px; width:200px; position:absolute; top:0px; left:0px; Z-INDEX:100;">
				This is a floating javascript menu.
			</div>
			<asp:Panel id="Panel1" style="Z-INDEX: 101; LEFT: 230px; POSITION: absolute; TOP: 16px; border:red 1px dashed;" runat="server"
				Width="912px" Height="1200px">Panel</asp:Panel>
				
				
		

</form>
	</body>
</HTML>

And this is the code for the .js file. Am I missing something still as the <div> just sits there when I load the page up

Code: 
var target_x, target_y, has_inner, has_element, fm_id, floating_menu, fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;

function move_menu()
{
    if (document.layers)
    {
        floating_menu.left = fm_next_x;
        floating_menu.top = fm_next_y;
    }
    else
    {
        floating_menu.style.left = fm_next_x + 'px';
        floating_menu.style.top = fm_next_y + 'px';
    }
}

function compute_shifts()
{
    fm_shift_x = has_inner
        ? pageXOffset
        : has_element
          ? document.documentElement.scrollLeft
          : document.body.scrollLeft;
    if (target_x < 0)
        fm_shift_x += has_inner
            ? window.innerWidth
            : has_element
              ? document.documentElement.clientWidth
              : document.body.clientWidth;

    fm_shift_y = has_inner
        ? pageYOffset
        : has_element
          ? document.documentElement.scrollTop
          : document.body.scrollTop;
    if (target_y < 0)
        fm_shift_y += has_inner
            ? window.innerHeight
            : has_element
              ? document.documentElement.clientHeight
              : document.body.clientHeight;
}

function float_menu()
{

    var step_x, step_y;

    compute_shifts();

    step_x = (fm_shift_x + target_x - fm_next_x) * .07;
    if (Math.abs(step_x) < .5)
        step_x = fm_shift_x + target_x - fm_next_x;

    step_y = (fm_shift_y + target_y - fm_next_y) * .07;
    if (Math.abs(step_y) < .5)
        step_y = fm_shift_y + target_y - fm_next_y;

    if (Math.abs(step_x) > 0 ||
        Math.abs(step_y) > 0)
    {
        fm_next_x += step_x;
        fm_next_y += step_y;
        move_menu();
    }

    setTimeout('float_menu()', 20);
}

function init_menu()
{

target_x = 10;
target_y = 10;
has_inner = typeof(window.innerWidth) == 'number';
has_element = document.documentElement && document.documentElement.clientWidth;
fm_id='floatdiv';

floating_menu = (document.getElementById) ? document.getElementById(fm_id) : (document:all) ? document.all[fm_id] : document.layers[fm_id];

compute_shifts();
if (document.layers)
{
    // Netscape 4 cannot perform init move
    // when the page loads.
    fm_next_x = 0;
    fm_next_y = 0;
}
else
{
    fm_next_x = fm_shift_x + target_x;
    fm_next_y = fm_shift_y + target_y;
    move_menu();
}

float_menu();
}

window.onload = init_menu;

Thanks again for any help

David
 
Upvote 0 Downvote
Yes I did Dan, it hasnt worked. I didnt see your last post until after I had put up my last post.

Thanks again

David
 
Upvote 0 Downvote
OK - so probably:

- The path & name to your JS file is incorrect (or maybe the wrong case). Try visiting "includes/JScript1.js" relative to the page you're loading and see if you get the JS file back.

- You have something else overriding the onload event. Do you have ANY other script on the page that might be doing this?

- Are you seenig any JS errors (try in Firefox if you're not in IE)

Failing that, can you post a URL to your page?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan

Thanks for all your help yesterday.

I have spent most of today going through the code and I have started again from scratch. I have put some alert messages in the code, and i do now see the alerts.

The one's i see are Line 85, compute_shifts and Line 43. They display in the order listed. But the box still does not scroll.

I did try your code with the initMenu but I could not get it to run.

Code: 
var target_x = 10;
var target_y = 10;

var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;

var fm_id='floatdiv';
var floating_menu = document.getElementById ? document.getElementById(fm_id) : document.all ? document.all[fm_id] : document.layers[fm_id];

var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;



//------------------FUNCTION START---------------------------
function move_menu()
{
alert('line 28');
    if (document.layers)
    {
alert('line 31');
        floating_menu.left = fm_next_x;
        floating_menu.top = fm_next_y;
    }
    else
alert('line 36');
    {
        floating_menu.style.left = fm_next_x + 'px';
        floating_menu.style.top = fm_next_y + 'px';
    }
}
//------------------FUNCTION END-----------------------------
//------------------FUNCTION START---------------------------

function compute_shifts()
{
[COLOR=red yellow]alert('compute_shifts');[/color red yellow]
[COLOR=red yellow]alert('line 43');[/color red yellow]
    fm_shift_x = has_inner ? pageXOffset : has_element ? document.documentElement.scrollLeft : document.body.scrollLeft;
    if (target_x < 0)
alert('line 46');
        fm_shift_x += has_inner ? window.innerWidth : has_element ? document.documentElement.clientWidth : document.body.clientWidth;
		fm_shift_y = has_inner ? pageYOffset : has_element ? document.documentElement.scrollTop : document.body.scrollTop;
    if (target_y < 0)
alert('line 50');
        fm_shift_y += has_inner ? window.innerHeight : has_element ? document.documentElement.clientHeight : document.body.clientHeight;
}

//------------------FUNCTION END-----------------------------
//------------------FUNCTION START---------------------------

function float_menu()
{
alert('float_menu');
    var step_x, step_y;
alert('line 61');

    compute_shifts();
alert('line 64');

    step_x = (fm_shift_x + target_x - fm_next_x) * .07;
    if (Math.abs(step_x) < .5)
        step_x = fm_shift_x + target_x - fm_next_x;
		step_y = (fm_shift_y + target_y - fm_next_y) * .07;
		
    if (Math.abs(step_y) < .5)
        step_y = fm_shift_y + target_y - fm_next_y;

    if (Math.abs(step_x) > 0 ||
        Math.abs(step_y) > 0)
    {
        fm_next_x += step_x;
        fm_next_y += step_y;
        move_menu();
    }

    setTimeout('float_menu()', 20);
}

[COLOR=red yellow]alert('line 85');[/color red yellow]

compute_shifts();
if (document.layers)
{
    // Netscape 4 cannot perform init move
    // when the page loads.
alert('line 92');
    fm_next_x = 0;
    fm_next_y = 0;
}
else
{
alert('line 98');
    fm_next_x = fm_shift_x + target_x;
    fm_next_y = fm_shift_y + target_y;
    move_menu();
}

//float_menu();

window.onload = float_menu();
 
Upvote 0 Downvote
Dan

Lots of hair pulling....not that I had much to pull in the first place [afro]

David
 
Upvote 0 Downvote
To clarify, this:

Code: 
document.getElementById(fm_id)

will try and find the element with an ID of "floatdiv" - which will not be on the page when the vars are initialised first time. This is why you need to do this after the page has loaded.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
246
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
231
nanbread
nanbread
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
87
Dara2020
Dara2020
Diego Donate
  • Locked
  • Question
How to close JQuery context menu in HTML/js code
Replies
1
Views
148
Diego Donate
Diego Donate
Diego Donate
  • Locked
  • Question
Qt. Access application ts file from JS code (context menu translated texts)
Replies
0
Views
69
Diego Donate
Diego Donate

Part and Inventory Search

Sponsor

Back
Top