Hello everybody,
it's about the homepage:
www.ombient.ch
As you can see I used some javascript for the Menu (when you hover over the menu link you will see what I mean)
I also used javascript for the costum scrollbar.
This works fine except for the Guestbook section.
When you click on Gästebuch (what is german for Guestbook)
You can't scroll neither the menu effect does work.
So it looks like the java script import doesn't work or someting like that.
I really hope you can help me to fix this problem!
Here is the source code:
The Code for the costum Scrollbar:
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getSize().scrollSize.x - content.getSize().size.x):(content.getSize().scrollSize.y - content.getSize().size.y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 10;
slider.set(step);
});
}
}
window.addEvent('domready', function(){
// -- first example, vertical scrollbar --
makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
});
The Code for the Menu effects:
window.addEvent('domready', function() {
var list = $$('ul.menu-nav li a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:300, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left' : 10,
'margin-right' : 10,
'color': '#b10000'
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left' : 0,
'margin-right' : 0,
'color': '#ffffff'
});
});
});
var list = $$('ul.menu-nav li a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:400, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'color': '#b10000'
});
});
element.addEvent('mouseleave', function(){
fx.start({
'color': '#ffffff'
});
});
});
});
The css code:
/**
* @version $Id: position.css 10387 2008-06-03 10:59:16Z pasamio $
* @author Design & Accessible Team ( Angie Radtke / Robert Deutz )
* @package Joomla
* @subpackage Accessible-Template-Beez
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
*/
*
{
margin: 0;
padding: 0;
}
body
{
background: #000;
font-family: arial, helvetica, sans-serif;
font-size: 100.1%;
padding: 0px;
text-align: center;
}
.scrollbar-vert{
background-color: #d2e8ff;
height: 350px;
width: 20px;
float:left;
padding: 0px 0px 0px 0px;
}
.handle-vert{
height: 42px;
width: 20px;
padding: 0px 0px 0px 0px;
background: url(http://www.solutoire.com/experiments/scrollbar/styles/img/handle.gif) no-repeat;
}
/* ################ Position ################ */
ul.menu-nav li {
background: #000;
display: inline;
float:left;
margin-left:3px;
padding-top:5px;
padding-bottom:5px;
}
ul.menu-nav li a {
text-decoration: none;
text-transform: none;
color: #FFF;
font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
padding: 0 10px;
}
ul.menu-nav li a:hover {
text-decoration: none;
}
#all
{
border-style:solid;
border-width:5px;
border-color:white;
font-size: 0.8em;
margin: 0 auto;
max-width: 1000px;
padding: 0 3px 3px 3px;
text-align: left;
height:670px;
width:900px;
margin-top:20px;
margin-bottom:20px;
background:url("../../images/OMBIENT/background_guestbook.jpg") no-repeat;
}
#picture_left
{
width: 240px;
height: 160px;
margin-top:20px;
margin-left:20px;
margin-right:30px;
margin-bottom:20px;
float:left;
}
#picture_right
{
width: 240px;
height: 160px;
margin-top:20px;
margin-bottom:20px;
float:left;
}
#navi
{
padding-top:20px;
padding-left:20px;
margin: 0;
position: relative;
text-align: right;
height:30px;
width:775px;
}
#contentarea
{
margin-top:50px;
margin-left:20px;
margin-right:20px;
padding: 0px 0px 0px 0px;
position: relative;
overflow: hidden;
}
#content1
{
height:343px;
width:670px;
float:left;
background: url("../../images/middle_bg.PNG") repeat-y;
overflow:hidden;
padding-left:15px;
padding-right:15px;
padding-top:7px;
}
#top_bg
{
height:5px;
width:720px;
float:left;
background: url("../../images/top_bg.PNG");
overflow:hidden;
position: relative;
padding: 0px 0px 0px 0px;
}
#bottom_bg
{
height:5px;
width:720px;
float:left;
background: url("../../images/bottom_bg.PNG");
overflow:hidden;
position: relative;
padding: 0px 0px 0px 0px;
}
The index.php code:
<?php
/**
* @copyright
Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license
GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
defined('_JEXEC') or die('Restricted access');
$url = clone(JURI::getInstance());
$showRightColumn = $this->countModules('user1 or user2 or right or top');
$showRightColumn &= JRequest::getCmd('layout') != 'form';
$showRightColumn &= JRequest::getCmd('task') != 'edit'
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/position.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/print.css" type="text/css" media="Print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/general.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/fx_styles.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/scrollbar.js"></script>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template_rtl.css" type="text/css" />
<?php endif; ?>
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="all">
<div id="navi">
<jdoc:include type="modules" name="top_navi" id="top_navi" />
</div>
<div id="contentarea">
<div id="content1">
<jdoc:include type="component" />
</div>
<div id="scrollbar1" class="scrollbar-vert">
<div id="handle1" class="handle-vert">
</div>
</div>
<div id="picture_left">
</div>
<div id="picture_right">
</div>
</div><!-- contentarea -->
</div><!-- all -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12514329-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Thank you in advance!
Greetings
TempleClause
