| stickygoblin |
06-07-2007 01:33 AM |
Moot Tools Welcome Page
Hi all,
I'm trying to integrate the Kwicks moo tools function into the front of my store and I'm having a few issues with it.
First of all i got a test page with the items working in it and setup all the html and everything that i needed.
I have modified my home.tpl file to include the mootools.tpl, this then calls the stylesheet, the fx javascript and adds the functions.
In my welcome message i have added the html that is exactly what works fine on the html file.
So to my questions -
Has anyone managed to get mootools functionality working in thier cart - if so is there any rules i am missing?
What IF statment can i use to only load the mootools.tpl file into the welcome page (it slows the cart down in subsequent pages if it loads throughout)?
The Code:
home.tpl
Code:
{include file="mootools.tpl"}
mootools.tpl
Code:
<link rel="stylesheet" type="text/css" href="/skin1/splash_css.css" />
<!-- load fx.elements for mootools -->
<script type="text/javascript" src="/skin1/elements.js" />
<script type="text/javascript" >
window.addEvent('domready', function(){
var szNormal = 280, szSmall = 220, szFull = 385;
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 800, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
});
$("kwicks").addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
});
fx.start(o);
})
});
</script>
splash_css.css
Code:
#kwicks_container {
width:854px;
background-color: white;
height: 450px;
padding:0;
margin:0;
}
#kwicks {
position: relative;
}
#kwicks_container .kwick {
float: left;
display: block;
width: 280px;
height: 450px;
}
#kwick_blue {background-image: url('/skin1/front/blue.jpg');}
#kwick_orange {background-image: url('/skin1/front/orange.jpg');}
#kwick_green {background-image: url('/skin1/front/green.jpg');}
#kwicks_container ul {list-style-type:none;margin:0;padding:0;}
#kwicks_container li {margin:0;padding:0;display:block;}
#kwicks_container li {border-left:5px solid white;}
.content{float:left;padding:10px;margin:0;/*border:1px dotted white;*/width:250px;color:white;font-family:tahoma, sans;font-size:12px;}
#kwicks_container h2{margin-top:2em;font-family:Arial-Black;font-weight:bolder;font-size:25px;}
#kwicks_container h3{margin-top:1em;margin-bottom:0.5em;}
.content .button{width:100%;height:45px;position:relative;text-align:center;}
#kwicks_container table.tab{height:450px;margin:0;padding:0;}
td.top21{height:400px;display:block;vertical-align:top;}
td.bottom21{text-align:center;font-size:12px;display:block;height:30px;}
td.bottom21 a{width:150px;text-align:center;border:1px solid white;padding:5px;text-decoration:none;color:white;}
td.bottom21 a:hover{background-image:url('/skin1/front/whiteb.jpg');opacity:0.5;filter: alpha(opacity=50) ;}
And finally of course the welcome html actually in the languages in the cart
Code:
<table width="864"><tr><td>
<div id="kwicks_container">
<ul id="kwicks">
<li id="kwick_blue" class="kwick">
<table class="tab"><tr><td class="top21">
<div class="content">
<h2>Shower Enclosures</h2>
<h3>Shower Trays</h3>
- Completely Level Access<br />
</div><!-- content 1 -->
</td></tr><tr><td class="bottom21">
<div class="button"><a href="#">find out more >></a></div>
</td></tr></table>
</li>
<li id="kwick_orange" class="kwick">
<table class="tab"><tr><td class="top21">
<div class="content">
<h2>Seating</h2>
<h3>Bathroom Products</h3>
- Bath Stools<br />
</div><!-- content 3 -->
</td></tr><tr><td class="bottom21">
<div class="button"><a href="#">find out more >></a></div>
</td></tr></table>
</li>
<li id="kwick_green" class="kwick">
<table class="tab"><tr><td class="top21">
<div class="content">
<h2>Grab Rails</h2>
- Straight or Angled<br />
</div><!-- content 2 -->
</td></tr><tr><td class="bottom21">
<div class="button"><a href="#">find out more >></a></div>
</td></tr></table>
</li>
</ul><span class="clr"><!-- spanner --></span>
</div>
</td></tr></table>
All help gratefully recieved.
Cheers
Sticky |
