Mootools SCROLLBAR in main content area

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

Hi,
I found a very nice scrollbar which use MooTools library but I don't know how to place it in template.

This is link for scrollbar:
http://greengeckodesign.com/?q=mooscroll

Maybe somebody of you already did it

Karol

wlrdq · **Posted:** Sat Nov 07, 2009 5:31 am

This is MooTools 1.2 and Joomla! currently uses MooTools 1.11. This may cause you some issues.

If you still are interested in trying, I can try to help guide you a little. Let me know.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

Oh I would never guess that it means for it.
I heard that update to 1.2 is little dangerous for admin panel.

I need to scroll Main Content area in my template.

wlrdq · **Posted:** Sat Nov 07, 2009 3:06 pm

So you want a scrollbar in the middle of your page? If you can provide a screenshot, that might make it easier to understand what you need to do and there might be an easy solution:
http://www.cmsmarket.com/resources/dev-corner/105-taking-a-screenshot

Let me know.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

O.K. so here is the screenshot:

http://www.murmen.pl/screenshot.jpg

In this case I need to upgrade joomla, because it is 1.0.15 but the same I must to do on the other pages.

I need to do mootools scrollbar instead of the one which now is.

wlrdq · **Posted:** Sat Nov 07, 2009 4:20 pm

So you have scrollbars working, but you just want to change them. Is it the way they look that you want to change? If so, you might be able to do that just with CSS styles. If not, let me know what it is that you want to do and I will investigate.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

I know that is possible to little change scrollbar with using style css, but I want to change it with using mootools. I downloaded this file: http://mooscroll.googlecode.com/files/M ... l_0.59.zip
and I'am thinking about how I can integrate one of examples (contained in the file) with joomla template 1.5. Where should be the files coppy and what should be write in template.css and index.php

wlrdq · **Posted:** Sat Nov 07, 2009 5:48 pm

I would create a js folder in your template directory and drop the js files in there (I think the source one isn't required and is just there for reference). Then modify your index.php to add links to include them.
.../templates/YOURTEMPLATE/js/MooScroll_0.59.js
.../templates/YOURTEMPLATE/js/MooScroll_0.59-source.js
.../templates/YOURTEMPLATE/index.php

Code:

<head>
...
   <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/MooScroll_0.59.js" type="text/javascript" charset="utf-8"></script>
...
</head>

At that point, you have the JS included and should be able to use it.

I'm not sure if you are supposed to include their CSS files or just add your own. If you are supposed to include theirs, I would drop them in your template's css folder and then include them in index.php.

Any style changes you need to make, I would just do them in your template's template.css file.

You may run into issues or conflicts with MooTools 1.11, but I will try to help you work through them if you do.

Let me know how it goes.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

O.K. I put the files which you talked about in appropriate directory, and code in index.php.
Now I think that we should copy mooScroll.css and mooscroll-ie6.css to CSS directory (in my template style.css is in main template directory). Then I think we should copy the img directory to main template directory). Now we have all to integrate with template in the right place?
I see that the area of scroll in the example.css have name: .scroll{

I named .contentLayout .scroll in style.css my main content area, and now it looks that:
http://www.szpejarnia.pl/index.php?opti ... e&Itemid=6

This is joomla 1.5.14

What could be wrong?

wlrdq · **Posted:** Sat Nov 07, 2009 11:39 pm

I don't see mooScroll.css being included in your HTML. Have you added something like this to index.php to include the new stylesheet files?

Code:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/mooScroll.css" type="text/css" />

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

My head in index.php of template looks that:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/style.css" />

<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/script.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/MooScroll_0.59.js" type="text/javascript" charset="utf-8"></script>
</head>

wlrdq · **Posted:** Sun Nov 08, 2009 12:01 am

Yep. I don't see mooScroll.css in there. I see mooScroll.js, but I think you need to add both. Make sense?

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

O.K. I little undarstand.

Now my head look that:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/style.css" />

<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/script.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/MooScroll_0.59.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/MooScroll_0.59-source.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/mooScroll.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/mooscroll-ie6.css" type="text/css" />

</head>

But still doesn't work

wlrdq · **Posted:** Sun Nov 08, 2009 3:03 am

It looks like the .scroll definition in mooscroll-ie6.css is empty and I don't see it defined in mooscroll.css. Are you sure that is the correct class name?

Attachment:

detlilto_1.jpg

By the way, the screenshot above is me using a tool called Firebug to inspect your page and styles. Similar functionality exists in many browsers and I highly suggest using it if you don't already:
http://www.cmsmarket.com/resources/dev-corner/106-how-to-inspect-your-html-and-css

Let me know what you find.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

I think that class name is correct.

On the page http://greengeckodesign.com/?q=mooscroll in Options > (selector [string]: CSS style selector to determine what elements get MooScrolled. Default = ".scroll")

I used the very good tool with which he is Firebug to explore example page:
http://greengeckodesign.com/projects/mo ... /example1/

I saw that div also had the entry: rel="MooScrollArea"
I added it to div in my index.php

But still doesn't work

wlrdq · **Posted:** Sun Nov 08, 2009 3:38 pm

Nice catch and one last thing to try that the link you sent mentions:

Code:

<script type="text/javascript" >
window.addEvent('domready', function() {  
  var myScrollArea = new MooScroll({});  
});
</script>

Hopefully that's it. If not, we keep looking. Let me know how it goes.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

I head looks that:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/style.css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/mooScroll.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/mooscroll-ie6.css" type="text/css" />

<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/script.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>js/MooScroll_0.59.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>js/MooScroll_0.59-source.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>js/mootools-1.2-more(slider-drag-scroll)yuic.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("mootools", "1.1.1");</script>
<script type="text/javascript" >window.addEvent('domready', function() { var myScrollArea = new MooScroll({}); });</script>

</head>

Maybe you have right that will be conflict joomla with mootools 1.2, because when I change <script>google.load("mootools", "1.1.1");</script> to <script>google.load("mootools", "1.2.1");</script> the site have problem with loading...

wlrdq · **Posted:** Sun Nov 08, 2009 4:58 pm

I would leave the Google thing as 1.1.1 for now. Once we get the scrollbars working, you can check to make sure other things work.

I see this javascript error in Firefox:

Code:

Error: MooScroll is not defined
Source File: http://www.szpejarnia.pl/index.php?option=com_content&view=frontpage&Itemid=6
Line: 80

http://www.cmsmarket.com/resources/dev-corner/92-how-to-check-for-javascript-errors

And it looks like the Mootools.js file can't be found:
http://www.szpejarnia.pl/templates/techline_de_template-j15-010js/MooScroll_0.59.js

It looks like you are missing a slash. This should be:
http://www.szpejarnia.pl/templates/techline_de_template-j15-010/js/MooScroll_0.59.js

Let me know if that helps.

detlilto · **Joined:** Sun Oct 25, 2009 11:33 pm **Posts:** 12

Of course shlash is needed.

Now is more errors in error console...

wlrdq · **Posted:** Mon Nov 09, 2009 6:27 am

If you can post the errors, I'll see if I can help.

It's funny. I'm a member of the Joomla! Bug Squad and a topic that is being discussed over the past couple days has been if we can get MooTools 1.2 support into Joomla! 1.5. Just to let you know, I'm pushing for it and using you as an example user that would love this

I also posted a few times on the Unofficial MooTools forums to see if I can figure out if there's a way to have 1.11 and 1.2 living side by side. That currently doesn't sound hopeful, but we'll see.

I'll let you know if I hear anything. Let me know if you need more of my help.

Joomla! Discussion Forums

Forum rules

Mootools SCROLLBAR in main content area

Quick reply

Who is online