The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.0 » Templates & CSS - 1.0.x

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  Page 1 of 1
  [ 14 posts ] 
  Print view Previous topic | Next topic 
Author Message
wood_flower
PostPosted: Tue Mar 21, 2006 3:35 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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 head> tag add
Code:
<!-- 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 <body> tag to similar as below
Code:
<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 body> tag add
Code:
<!-- 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
Top
 Profile  
 
DreamWeb
PostPosted: Wed Jun 07, 2006 3:43 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
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/mbcom/international/international_website/en/com/international_home/home/services/fleet/fleetsales/trucks.html

What do you think?
Top
 Profile  
 
wood_flower
PostPosted: Wed Jun 07, 2006 4:57 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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/mbcom/international/international_website/en/com/international_home/home/services/fleet/fleetsales/trucks.html

What do you think?


You can do this by changing the parameters of the setUp function as described below
Quote:
2. Change the <body> tag to similar as below
Code:
<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
Top
 Profile  
 
DreamWeb
PostPosted: Wed Jun 07, 2006 5:32 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
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.
Top
 Profile  
 
wood_flower
PostPosted: Wed Jun 07, 2006 8:01 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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:
if (isNS) {
   pageHeight = window.innerHeight - 20;
} else {
   pageHeight = document.body.clientHeight;
}
right after the block of code below
Code:
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:
<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
Top
 Profile  
 
DreamWeb
PostPosted: Wed Jun 07, 2006 4:44 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
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
Top
 Profile  
 
wood_flower
PostPosted: Wed Jun 07, 2006 7:52 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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:
<body onload="setUp(60, 15, 15, 1500)">
, leave it just
Code:
<body>
in your template.

2. Right before/above the closing </body> tag, add
Code:
<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.

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


Last edited by wood_flower on Wed Jun 07, 2006 7:54 pm, edited 1 time in total.

Top
 Profile  
 
DreamWeb
PostPosted: Wed Jun 07, 2006 10:15 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
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
Top
 Profile  
 
wood_flower
PostPosted: Thu Jun 08, 2006 4:44 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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 </script> tag of the block of code i have suggested in my previous post:
Code:
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
Top
 Profile  
 
DreamWeb
PostPosted: Thu Jun 08, 2006 2:57 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
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
Top
 Profile  
 
wood_flower
PostPosted: Thu Jun 08, 2006 4:19 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Nov 30, 2005 3:33 pm
Posts: 292
Location: Hanoi, Vietnam
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
Top
 Profile  
 
DreamWeb
PostPosted: Fri Jun 09, 2006 4:30 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Mar 13, 2006 5:15 am
Posts: 31
Thanks very much for all of your help!

Terrific code! :)

David
Top
 Profile  
 
yerg
PostPosted: Wed May 23, 2007 8:13 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Thu Aug 18, 2005 12:22 pm
Posts: 960
Location: Ballarat, Australia
You could use the Module Floater here

_________________
We cannot become what we need to be ... by remaining what we are
Top
 Profile  
 
chloregy
PostPosted: Mon Jan 16, 2012 2:56 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Mar 11, 2009 3:18 am
Posts: 13
Location: San Francisco, CA
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
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 14 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.0 » Templates & CSS - 1.0.x

Who is online

Users browsing this forum: No registered users and 7 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group