Joomla Templates Club 406,261 posts

[jayblaq Friend jayblaqJoin date: September 2007Posts: 66Downloads:7Uploads:2 Thanked: 1 times in 1 posts]

#122982

Hello. I think floating is what its called… I have moved the menu to the top of the page like on the JA_TELINE template – using that css and layout. Next I would like the menu to “FLOAT (I guess)” – meaning stay in place when the user scrolls down the page. I have seen this done with other menus on other sites. How can this be done?

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#230254

To make it happen you need to add a script to your template and some changes in the css file.

[jayblaq Friend jayblaqJoin date: September 2007Posts: 66Downloads:7Uploads:2 Thanked: 1 times in 1 posts]

#230259

so am i right calling it float?

can you post an example of how to do this… i guess i will search the internet and try and find a script

jay

[jayblaq Friend jayblaqJoin date: September 2007Posts: 66Downloads:7Uploads:2 Thanked: 1 times in 1 posts]

#230260

here is what i found

<div id=”floatdiv” style=”
position:absolute;
width:200px;height:50px;left:0px;top:0px;
padding:16px;background:#FFFFFF;
border:2px solid #2266AA”>
This is a floating javascript menu.
</div>

<script type=”text/javascript”><!–
/* Script by: http://www.jtricks.com
* Version: 20060303
* Latest version:
* http://www.jtricks.com/javascript/navigation/floating.html
*/
var target_x = -270;
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();
//–></script>

seems to work ok, i just need to tweak a bit… my new header image is ontop of the menu, whereas the rest of the content is below….. maybe some tweaks and it will work proper. If you know of a better way – please advise.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#230262

Do you have a live url i can take a look at?

[jayblaq Friend jayblaqJoin date: September 2007Posts: 66Downloads:7Uploads:2 Thanked: 1 times in 1 posts]

#230263

PM SENT with all the info – Hit me on MSN messenger if you can

The menu is not floating right now, it will be in a moment as I work

[jayblaq Friend jayblaqJoin date: September 2007Posts: 66Downloads:7Uploads:2 Thanked: 1 times in 1 posts]

#230264

I HAVE MORE ?’s I will post them in the forum so others can find easy

[Author]

Posts