Floating module how-to...

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Floating module how-to...

Post by wood_flower » Tue Mar 21, 2006 3:35 am

Sometimes you might want to have a floating module automatically slides smoothly to a predefined position on browser window when page is scrolled. This idea is very good for displaying high-cost banner ads on your site or just to attract attention from customers to your new product. Then below is how to create floating module for Joomla.

Open up your template`s index.php file in any text editor then make the following changes:

1. Right before tag add

Code: Select all

<!-- Floating Object container \-->
<script type="text/javascript">
var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;

/*
	h - height in pixel of the floating object
	x - padding in pixel from the left side of floating object to the left side of browser window
	y - padding in pixel from the top side of floating object to the top side of browser window
	z - slide time in milisecond
*/
function setUp(h, x, y, z) {
	if (document.getElementById) {
		isDOM = true;
		floaterObj = document.getElementById("floater").style;
	} else {
		isDOM = false;
		floaterObj = document.floater;
	}
	if (navigator.appName == 'Netscape') {
		isNS = true;
	} else {
		isNS = false;
	}

	paddingX = x;
	paddingY = y;
	slideTime = z;

	floaterObj.left = paddingX + (isDOM ? 'px' : '');
	floaterObj.top = '-' + h + (isDOM ? 'px' : '');

	window.onresize = refreshValues;
	window.setInterval("placeFloater()", 10);

	refreshValues();
}

function refreshValues() {
	if (isNS) {
		pageHeight = window.innerHeight - 20;
	} else {
		pageHeight = document.body.clientHeight;
	}

	placeFloater();
}

function placeFloater() {
	if (isNS) {
		scrollTop = window.pageYOffset;
	} else {
		scrollTop = document.body.scrollTop;
	}

	currentY = parseInt(floaterObj.top);

	mainTrigger();

}

function mainTrigger() {
	var newTargetY = scrollTop + paddingY;
	if ( currentY != newTargetY ) {
		if ( newTargetY != targetY ) {
			targetY = newTargetY;
			floatStart();
		}
		animator();
	}
}

function floatStart() {
	var now = new Date();
	A = targetY - currentY;
	B = Math.PI / ( 2 * slideTime );
	C = now.getTime();
	if (Math.abs(A) > pageHeight) {
		D = A > 0 ? targetY - pageHeight : targetY + pageHeight;
		A = A > 0 ? pageHeight : -pageHeight;
	} else {
		D = currentY;
	}
}

function animator() {
	var now = new Date();
	var newY = A * Math.sin( B * ( now.getTime() - C ) ) + D;
	newY = Math.round(newY);
	if (( A > 0 && newY > currentY ) || ( A < 0 && newY < currentY )) {
		floaterObj.top = newY + (isDOM ? 'px' : '');
	}
}
</script>
<!-- Floating Object container /-->
2. Change the tag to similar as below

Code: Select all

<body onload="setUp(60, 15, 15, 1500)">
The setUp() function has 4 parameters:
  • * First parameter is the height in pixel of the floating module
  • * Second parameter is the padding in pixel from the left side of floating module to the left side of browser window
  • * Third parameter is the padding in pixel from the top side of floating module to the top side of browser window
  • * Fourth parameter is the slide time in milisecond for floating module to slide to the predefined position when page is scrolled
3. Right before tag add

Code: Select all

<!-- Floating Object container \-->
<div id="floater" name="floater" style="position: absolute; z-index: 1000">
<!-- Banner Module code \-->
	<?php if (mosCountModules('banner')) mosLoadModules('banner'); ?>
<!-- Banner Module code /-->
</div>
<!-- Floating Object container /-->
Please remember that you can change the module position to fit your need, e.g: advert1 instead of banner.

4. Save then upload the modified template`s index.php file to your server overwrite the original one. Now, login to your Joomla administration panel and configure a module to show at banner position then refresh the frontend to see the difference.

I have just tested this mod in FireFox and IE only. If any of you see that it does not work on your favorite browser, please feel free to post.

Any recommendation is appreciated.
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Wed Jun 07, 2006 3:43 am

Wow.  This is really terrific.

Any chance this could be modified to allow for the floating module to appear from the bottom of the screen?

I'm thinking about somehow using it as a floating footer...  As seen on the Mercedes Benz website

http://www.mercedes-benz.com/content/mb ... rucks.html

What do you think?

User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Re: Floating module how-to...

Post by wood_flower » Wed Jun 07, 2006 4:57 am

DreamWeb wrote: Wow.  This is really terrific.

Any chance this could be modified to allow for the floating module to appear from the bottom of the screen?

I'm thinking about somehow using it as a floating footer...  As seen on the Mercedes Benz website

http://www.mercedes-benz.com/content/mb ... rucks.html

What do you think?
You can do this by changing the parameters of the setUp function as described below
2. Change the tag to similar as below

Code: Select all

<body onload="setUp(60, 15, 15, 1500)">
The setUp() function has 4 parameters:
  • * First parameter is the height in pixel of the floating module
  • * Second parameter is the padding in pixel from the left side of floating module to the left side of browser window
  • * Third parameter is the padding in pixel from the top side of floating module to the top side of browser window
  • * Fourth parameter is the slide time in milisecond for floating module to slide to the predefined position when page is scrolled
Good luck!
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Wed Jun 07, 2006 5:32 am

Yes.. but that only works if you know the user has his browser sized to a certain height..  Or.. if he's running at a certain resolution.

If you can't control the resolution that the website is being viewed at, then setting a distance from top (if you want to use the floater as a footer) is no good, right?

Sorry if I'm mistaken here..  I may be.  Am I making sense?

If you want to use this floater as a footer...  Then setting the distance from the top at 700 will only work if the user is browsing at 800x600.  If the user is browsing at 1024x768, then the floater will only appear 2/3 of the way down the screen?

The floater really needs to be setup to be relative to the bottom of the browser.

Please correct me! :)

d.

User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Re: Floating module how-to...

Post by wood_flower » Wed Jun 07, 2006 8:01 am

DreamWeb wrote: Yes.. but that only works if you know the user has his browser sized to a certain height..  Or.. if he's running at a certain resolution.

If you can't control the resolution that the website is being viewed at, then setting a distance from top (if you want to use the floater as a footer) is no good, right?

Sorry if I'm mistaken here..  I may be.  Am I making sense?

If you want to use this floater as a footer...  Then setting the distance from the top at 700 will only work if the user is browsing at 800x600.  If the user is browsing at 1024x768, then the floater will only appear 2/3 of the way down the screen?

The floater really needs to be setup to be relative to the bottom of the browser.

Please correct me! :)

d.
Hello,

You must first detect the window height by placing this block of code

Code: Select all

if (isNS) {
	pageHeight = window.innerHeight - 20;
} else {
	pageHeight = document.body.clientHeight;
}
right after the block of code below

Code: Select all

var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;
then call the setUp function this way

Code: Select all

<body onload="setUp(60, 15, pageHeight - 60, 1500)">
.

Good luck.
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Wed Jun 07, 2006 4:44 pm

Thanks so much for spending your time on this solution.

The banner now appears for a split second at the bottom of my page.. and then quickly disappears.

I double-checked to ensure that I entered all of this code correctly.

Any other ideas?

Thank you so much,

david

User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Re: Floating module how-to...

Post by wood_flower » Wed Jun 07, 2006 7:52 pm

DreamWeb wrote: Thanks so much for spending your time on this solution.

The banner now appears for a split second at the bottom of my page.. and then quickly disappears.

I double-checked to ensure that I entered all of this code correctly.

Any other ideas?

Thank you so much,

david
This is my fault. Please avoid the tip i have written in the previous post and apply the guide below:

1. Dont use

Code: Select all

<body onload="setUp(60, 15, 15, 1500)">
, leave it just

Code: Select all

<body>
in your template.

2. Right before/above the closing tag, add

Code: Select all

<script type="text/javascript">
var winHeight;
if (document.body.clientHeight)
	winHeight = document.body.clientHeight;
if (document.body.clientHeight && document.body.clientHeight < winHeight)
	winHeight = document.body.clientHeight;
if (window.innerHeight && window.innerHeight < winHeight)
	winHeight = window.innerHeight;

if (window.addEventListener) {
	window.addEventListener('load', function(){setUp(60,15,winHeight-60,1500);}, false);
} else if (window.attachEvent) {
	var tmev = window.attachEvent('onload', function(){setUp(60,15,winHeight-60,1500);});
} else {
	setUp(60, 15, winHeight-60, 1500);
}
</script>
.

3. Demonstration: http://demo.designformambo.com/demo4/index.php

Hope this help.
Last edited by wood_flower on Wed Jun 07, 2006 7:54 pm, edited 1 time in total.
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Wed Jun 07, 2006 10:15 pm

Wow!  This is really quite terrific!

I've noticed a couple of things, however.

#1.  It doesn't work in Internet Explorer..  Only Firefox.

#2.  If you resize the browser, you need to reload before it will position itself correctly again.

Looking really good though!  Thank you.

david

User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Re: Floating module how-to...

Post by wood_flower » Thu Jun 08, 2006 4:44 am

DreamWeb wrote: #1.  It doesn't work in Internet Explorer..  Only Firefox.
I have only FireFox v1.5.0.4 and IE v6.0 installed on my PC and both of them work good with the modification i have written above.
DreamWeb wrote: #2.  If you resize the browser, you need to reload before it will position itself correctly again.
Put the block of code below to your template right before/above the closing tag of the block of code i have suggested in my previous post:

Code: Select all

function updateOnResize() {
	if (document.body.clientHeight)
		winHeight = document.body.clientHeight;
	if (document.body.clientHeight && document.body.clientHeight < winHeight)
		winHeight = document.body.clientHeight;
	if (window.innerHeight && window.innerHeight < winHeight)
		winHeight = window.innerHeight;
	paddingY = winHeight - 61;
}
if (window.addEventListener) {
	window.addEventListener('resize', updateOnResize, false);
} else if (window.attachEvent) {
	var tmev = window.attachEvent('onresize', updateOnResize);
}
.

You might want to look around for a horizontal scrollbar detection javascript code which works on FireFox.

Hope this help.

P.S: I have updated the demonstration page.
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Thu Jun 08, 2006 2:57 pm

Haha!  Yes!  That's it.  Exactly!  It works perfectly now, in all browsers!  I made the mistake of just copy and pasting the link as opposed to clicking on the link to check it in IE. (what's seen on screen, and the actual link are different)

Just one last request... and please let me know if this is a major change.  Is it possible to have the item appear from the bottom, as opposed to coming all the way down from the top?  It's great as it is.. but, for the application of using it as a footer.. it's a little odd to see it come down from the top of the screen.

The workaround is to change the speed at which it moves... (basically, make it instantaneous if you want it to just 'appear' at the bottom)... but, this isn't quite as slick looking as a fluid moving bar!

Thanks!!

David

User avatar
wood_flower
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Wed Nov 30, 2005 3:33 pm
Location: Hanoi, Vietnam
Contact:

Re: Floating module how-to...

Post by wood_flower » Thu Jun 08, 2006 4:19 pm

DreamWeb wrote: Just one last request... and please let me know if this is a major change.  Is it possible to have the item appear from the bottom, as opposed to coming all the way down from the top?  It's great as it is.. but, for the application of using it as a footer.. it's a little odd to see it come down from the top of the screen.

The workaround is to change the speed at which it moves... (basically, make it instantaneous if you want it to just 'appear' at the bottom)... but, this isn't quite as slick looking as a fluid moving bar!
You need to modify the mechanism used in the function floatStart() and animator(). Good luck.
http://designforjoomla.com/ - Visit now for:
- Professional Joomla templates
- Reliable Joomla extensions
- Joomla tutorials, tips and trick

DreamWeb
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Mar 13, 2006 5:15 am

Re: Floating module how-to...

Post by DreamWeb » Fri Jun 09, 2006 4:30 pm

Thanks very much for all of your help!

Terrific code! :)

David

User avatar
yerg
Joomla! Ace
Joomla! Ace
Posts: 1013
Joined: Thu Aug 18, 2005 12:22 pm
Location: Ballarat, Australia
Contact:

Re: Floating module how-to...

Post by yerg » Wed May 23, 2007 8:13 am

We cannot become what we need to be ... by remaining what we are

chloregy
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Wed Mar 11, 2009 3:18 am
Location: San Francisco, CA
Contact:

Re: Floating module how-to...

Post by chloregy » Mon Jan 16, 2012 2:56 am

i spent a long time trying to find this for j1.7

but here it is, haven't installed it yet but the demo looks fine... can't believe there isonly oe of these out there (as far as I can tell)

http://extensions.joomla.org/extensions ... anel/15318

aantickg
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Mon May 03, 2010 6:45 pm

Re: Floating module how-to...

Post by aantickg » Sat Nov 14, 2015 12:24 pm

Can this be modified to use percentages instead of px so I can define the placement of the module in percentages from the top and left side of the browser window?


Locked

Return to “Templates & CSS - 1.0.x”