asked on

Calling Javascript Function

Hi I have a javascript enabled floating toolbar which I found on the web. It works perfectly for me, however there is one problem - each time I go to the page where it is used, I have to enable the toobar by clicking on the ACTIVATE link - which make it somewhat awkward to use.

<a href="javascript:detach()" class="style6">ACTIVATE</a> (see javascript function below)

This enables the toolbar and I can then click on the other links to scroll to middle and bottom and back again to the top of a long listing. (see image of toolbar attached.)

I want to enable the toolbar automatically either by adding the 'detach' function to one of the other links - BOTTOM, MIDDLE, TOP ..... or by having it fire with a mouseover command - the bar is contained in a div tag, which is in in turn in dv table tags. I have also tried incorporating it into the body tag. However I have not succeeded - it still requires me to click on the ACTIVATE link.

The codes I have tried are shown below.

Must be doing something stupid.. Appreciate someone to run an eye over it and flag the problem

Many thanks

function detach(){
      lay=document.getElementById('floatlayer');
      l=getXCoord(lay);
      t=getYCoord(lay);
      lay.style.position='absolute';
      lay.style.top=t;
      lay.style.left=l;
      getFloatLayer('floatlayer').initialize();
      alignFloatLayers();

Incorporating into body tag

BODY MARGINWIDTH=0 MARGINHEIGHT=0 
 onload="init();detach()"
 onresize="alignFloatLayers()"
 onscroll="alignFloatLayers()">

================================================

OnMouseOver approach

<td colspan="9" <div id="floatlayer" style="width:35%;background:#ffffff;padding:5px;border:solid blue 1px" onmouseover="MM_callJS('detach()')" > 

======================================================

Include the function within one of the other links .. like
<a href="javascript:jumpScrollmiddle()">MIDDLE</a> ... but dont know how to do this

Open in new window

toolbar.jpg

NurAzije

Can you give us a link to the actual site/page?

mostart

you might get problems if all elements your funtion depends on are not yet loaded.

Try adding this to the end of your file (right before the </body> tag):

<script>
detach();
</script>

I encourage you to use a javascript framework like jquery or mootools. They will ease up your life with JS a lot

jameskane

ASKER

thanks NurAzije and mostart for your replys

Tried the script you gave me mostart, but does not work. I checked again, and the function is already loaded
by the time the body tag is reached.

NurAzije, I have a small technical problem with my link at the moment. It may not work for a while - here is the link
http://artsurligne.com/dance_project/

Thanks again to you both for taking the time

James

mostart

I did not mean the function is not loaded but the page elements it uses. So the page should be entirely loaded before you fire the function.

Anyway what does it mean it does not work ? Could you try adding an alert('detach function called'); to your detach function and see if it is called at all ?

jameskane

ASKER

mostart, thats a good point - I am in fact using a page with includes in it. The main page is has the body tag of course and one of the includes has the bar. I can now see why the body tag approach will not work. HOWEVER, the bar does work - when I click the ACTIVATE link it gets enabled and then works fine - the bottom, middle and top links cause the page to be scrolled and the bar follows.

Maybe this means that the approach has to be in the 'onmouseover' the div idea or to somehow have the detach function embedded into one of the existing <a> tags... bottom, middle, top

James

Shinesh Premrajan

copy the code of the detach function and place it in init().

It will work.

HonorGod

Why not just execute the detach() when the page is loaded?

<body onload='detach()'>
...
</body>

jameskane

ASKER

Hi HonorGod, have tried this

BODY MARGINWIDTH=0 MARGINHEIGHT=0
onload="init();detach()"
onresize="alignFloatLayers()"
onscroll="alignFloatLayers()">

but does not work. It seems that this is probably because I am using two INCLUDE pages - the main page has the body tag, but the div with the toolbar is on one of the include pages.

jameskane

ASKER

Hi shinuq, do you mean copy the function code inside the brackets of the function init() ?

james

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jameskane

ASKER

Thanks HonorGod for you help.

I have tried this but with no success - I have attached the code extract from the page. Also, you can take a look at the page on line at
http://artsurligne.com/dance_project/

You should select the menu item PLAYLIST CREATOR. You will see the toolbar at the top, left. Click the ACTIVATE link and you will see the Toolbar 'float' upwards. Then click the link MIDDLE and you will be moved down the listing. The toolbar will follow.

Would it be feasible to integrate the detach function into the <a> tags - MIDDLE, BOTTOM, TOP - this way I elliminate the ACTIVATE link and integrate it into the other <A> tags ? Here is the code from the top of the table for the toolbar as it now stands :
===============================================================================
<td colspan="9" <div id="floatlayer" style="width:35%;background:#ffffff;padding:5px;border:solid blue 1px" onclick="MM_callJS('detach()')" >
        <a href="javascript:detach()" class="style6">ACTIVATE</a>        <a href="javascript:jumpScrollmiddle()">MIDDLE</a>        <a href="javascript:jumpScrollbottom()">BOTTOM</a>        <a href="javascript:jumpScrolltop()">TOP</a>
      </div>
      </td>
===================================================================================

Thanks again for you help, James

<script language="javascript"> 
function startup() {
  setTimeout( 'init()', 1000 );    // Call init() in 1/2 a second
  setTimeout( 'detach()', 1000 );  // Then call detach() next
}
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dance Browser</title>
</head>



<BODY MARGINWIDTH=0 MARGINHEIGHT=0 
onload='startup()'
 <!---onload="init();detach()"--->
 onresize="alignFloatLayers()"
 onscroll="alignFloatLayers()">

Open in new window

jameskane

ASKER

HonorGod, I have realized that there is another page involved which needed the body tag altered and the startup function used. Did this and it works fine.

Very many thanks for sorting this for me !!

james

jameskane

ASKER

just to say thanks again !!

HonorGod

You are very welcome.

Thanks for the grade & points.

More thanks for sharing the actual solution that worked for you!.

Good luck & have a great day.

jameskane

ASKER

http://www.fiendish.demon.co.uk/html/javascript/layerfloat.html

This is the link to the page with the code for the floating toolbar.

HonorGod

Thanks for sharing.

Suggestion:

Instead of:

<script language="javascript"...>

use:

<script type='text/javascript'...>

The "language" attribute has been deprecated.
See section 18.2.1 The SCRIPT element on page http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.2