is it possible to add a Floating Menu?

Is it possible to add a Floating Menu?
If yes, who?

image

Spoiler:

Hello,

You mean that 'quick links' box? and that should move along as the page scrolls, right?

ankillien wrote:Hello,

You mean that 'quick links' box? and that should move along as the page scrolls, right?

Hi,
Yes Sir.

Spoiler:

- Source

Hello,
You can modify this code and add in your menu.

Code:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--Source Of Your Menu-->





<!--END OF Menu-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
   var startX = 3,
   startY = 150;
   var ns = (navigator.appName.indexOf("Netscape") != -1);
   var d = document;
   function ml(id)
   {
      var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
      if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x;this.style.top=y;};
      el.x = startX;
      if (verticalpos=="fromtop")
      el.y = startY;
      else{
      el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      el.y -= startY;
      }
      return el;
   }
   window.stayTopLeft=function()
   {
      if (verticalpos=="fromtop"){
      var pY = ns ? pageYOffset : document.body.scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
      }
      else{
      var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
      }
      ftlObj.sP(ftlObj.x, ftlObj.y);
      setTimeout("stayTopLeft()", 10);
   }
   ftlObj = ml("divStayTopLeft");
   stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Edit the code and add in your menu between these tags. The space where the red text are is the place you can enter your menu in the code.

<!--Source Of Your Menu-->

***/Youe menu here

<!--END OF Menu-->

Hope I helped,

Where do you put it?

You can add it anywhere if there is an html source,

Example :

~By using template editing
~On an html page
~Homepage Message

How would you do it on an HTML page? I get lost when i try to do HTML pages.

blogger wrote:How would you do it on an HTML page? I get lost when i try to do HTML pages.

First, you'll have to get a little knowledge about html.

Tutorials => http://www.w3schools.com/

Then, you'll be able to create your own html pages once you learnt about html.

ACP=>Modules Tab=>HTML=>HTML pages management=>Create a new html page

Add the code, and make sure that you have lots of content on your page so that there are scroll bars, so when you scroll down, the floating menu would scroll as well,

Well, I am not sure if this is exactly what you wnt but try putting this code in homepage message.

Code:

<div style="position:fixed; bottom:30px; right:20px; padding:5px; background:white; border:1px solid #666; color : #333; width:150px; min-height:100px;">

<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a>

</div>

I did it and both didn't work. Can you just give me a step-by-step guide on how to do this?

Hello Blogger,
I've added Ankillien's menu to the code I've posted.

Code:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--Source Of Your Menu-->

<div style="position:fixed; bottom:30px; right:20px; padding:5px; background:white; border:1px solid #666; color : #333; width:150px; min-height:100px;">

<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a>

</div>

<!--END OF Menu-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
  var startX = 3,
  startY = 150;
  var ns = (navigator.appName.indexOf("Netscape") != -1);
  var d = document;
  function ml(id)
  {
      var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
      if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x;this.style.top=y;};
      el.x = startX;
      if (verticalpos=="fromtop")
      el.y = startY;
      else{
      el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      el.y -= startY;
      }
      return el;
  }
  window.stayTopLeft=function()
  {
      if (verticalpos=="fromtop"){
      var pY = ns ? pageYOffset : document.body.scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
      }
      else{
      var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
      }
      ftlObj.sP(ftlObj.x, ftlObj.y);
      setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("divStayTopLeft");
  stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

You can change the menu if you would like. Modify Ankillien's menu and add it between these tags as I said before:

<!--Source Of Your Menu-->

***/Youe menu here

<!--END OF Menu-->

Note : You have to scroll down your page so that this script would work,

Master Marc wrote:Hello Blogger,
I've added Ankillien's menu to the code I've posted.

Code:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--Source Of Your Menu-->

<div style="position:fixed; bottom:30px; right:20px; padding:5px; background:white; border:1px solid #666; color : #333; width:150px; min-height:100px;">

<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a>

</div>

<!--END OF Menu-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
  var startX = 3,
  startY = 150;
  var ns = (navigator.appName.indexOf("Netscape") != -1);
  var d = document;
  function ml(id)
  {
      var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
      if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x;this.style.top=y;};
      el.x = startX;
      if (verticalpos=="fromtop")
      el.y = startY;
      else{
      el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      el.y -= startY;
      }
      return el;
  }
  window.stayTopLeft=function()
  {
      if (verticalpos=="fromtop"){
      var pY = ns ? pageYOffset : document.body.scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
      }
      else{
      var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
      }
      ftlObj.sP(ftlObj.x, ftlObj.y);
      setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("divStayTopLeft");
  stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

You can change the menu if you would like. Modify Ankillien's menu and add it between these tags as I said before:

<!--Source Of Your Menu-->

***/Youe menu here

<!--END OF Menu-->

Note : You have to scroll down your page so that this script would work,

o copied it right but it come sin a red box and there is no x to close it my use is complaining about it

Hello,
Am getting the feeling that you don't want this for an html page...

I think you will like the pop up log in menu that forumotion provides.

Please read this tutorial here.

sorry i know about pop up .

Oh. You wanted the floating menu to close.

Add this code please where ever you want the close button.

Code:

<form><input type=button value="Close Window" onClick="javascript:window.close();"></form>

when i click on close window it does not close

Try this:

Code:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--Source Of Your Menu-->

<div style="position:fixed; bottom:30px; right:20px; padding:5px; background:white; border:1px solid #666; color : #333; width:150px; min-height:100px;">

<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a><br />
<a href="LINK URL HERE">TEXT</a>
<br/>
<form><input type=button value="Close Window" onClick="javascript:window.close();"></form>
</div>

<!--END OF Menu-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
  var startX = 3,
  startY = 150;
  var ns = (navigator.appName.indexOf("Netscape") != -1);
  var d = document;
  function ml(id)
  {
      var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
      if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x;this.style.top=y;};
      el.x = startX;
      if (verticalpos=="fromtop")
      el.y = startY;
      else{
      el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      el.y -= startY;
      }
      return el;
  }
  window.stayTopLeft=function()
  {
      if (verticalpos=="fromtop"){
      var pY = ns ? pageYOffset : document.body.scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
      }
      else{
      var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
      }
      ftlObj.sP(ftlObj.x, ftlObj.y);
      setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("divStayTopLeft");
  stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

not working

Mystic_gohan2 wrote:not working

I forgot to ask you to add it between your body tags,sorry.

Code:

<body></body>

Test : Click Here

thankyou it works

Master Marc wrote:

Mystic_gohan2 wrote:not working

I forgot to ask you to add it between your body tags,sorry.

Code:

<body></body>

Test : Click Here

the position of the box is fixed?

thanks for the help.

have a nice day