We help IT Professionals succeed at work.

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
Comment
Watch Question

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

Commented:
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

Author

Commented:
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

Commented:
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 ?

Author

Commented:
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 PremrajanEngineering Manager

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

It will work.
HonorGodSoftware Engineer

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

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

Author

Commented:
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.

Author

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

james
Software Engineer
Commented:
ok, you could have the code that is executed when the page is loaded check for the presence of the required items.  For example using this type of logic:

... onload='startup()' ...


function startup() {
  setTimeout( 'init()', 500 );    // Call init() in 1/2 a second
  setTimeout( 'detach()', 500 );  // Then call detach() next
}

Open in new window

Author

Commented:
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()')" > 
      &nbsp;&nbsp;<a href="javascript:detach()" class="style6">ACTIVATE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:jumpScrollmiddle()">MIDDLE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:jumpScrollbottom()">BOTTOM</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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

Author

Commented:
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

Author

Commented:
just to say thanks again !!
HonorGodSoftware Engineer

Commented:
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.

Author

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

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

Commented:
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