Hi Paul,
So sorry I havent been back to you sooner, I sudeenyl came down with the flu and it knocked me side ways.
I’ve lost my thread a bit with this now and in honesty Im struggling a bit, I have used what you put and I dont seem to be able to get it working.
This is what I got, and would you mind advising me a bit further, its very comprehensive but a bit of a step up especially in jscript for me.
Here is the link to the site:
http://www.c6512511.myzen.co.uk/index2.php
Here is the nav as I have it:
<div id="menu">
<div id="menuNav">
<span><a id="left" href="#" title="Home"> < </a></span>
<span><a id="link1" href="#" title="Home"> home </a></span>
<span><a id="link2" href="#" title="Profile"> profile </a></span>
<span><a id="link3" href="#" title="Gallery"> gallery </a></span>
<span><a id="link4" href="#" title="Contact"> contact </a></span>
<span><a id="right" href="#" title="Home"> > </a></span>
</div>
</div>
And have placed the script at the bottom of the page.
(function () {
var index = 0,
nav = document.getElementById('menuNav'),
links = nav.getElementsByTagName('a');
// change the links from a live nodeList to an array
links = Array.prototype.slice.call(links);
links.shift(); // remove the first link - the left arrow
links.pop(); // remove the last link - left arrow
document.getElementById('left').onclick = function () {
index -= 1;
if (index < 0) {
index = links.length - 1;
}
links[index].click();
return false;
};
document.getElementById('right').onclick = function () {
index += 1;
if (index >= links.length) {
index = 0;
}
links[index].click();
return false;
};
}());
The 4 buttons thats are there already are being made functionalo by a js file on the server called slider.js, and this is the full code:
window.addEvent("domready",function(){
$('enviar').addEvent("click",function(e){
e = new Event(e);
//stop propagation
if(!$('response').hasClass("loading")) $('response').addClass("loading");
$('contacto').setStyle("display","none");
$('response').setStyle("display","block");
var myAjax = new Ajax('mailer.php', {
data:$('consulta'),
update:$('response'),
onComplete:function(){
var desaparecer = new Fx.Style('response', 'opacity', {duration:3000});
if($('response').hasClass("loading")) $('response').removeClass("loading");
desaparecer.start(1,0).addEvent("onComplete",function(){
$('response').setStyle("display","none");
$('response').setStyle("opacity","1");
$('response').empty();
$('contacto').setStyle("display","block");
}); //margin-top is set to 10px immediately
}
}).request();
})
})
//Tooltips
var Tips2 = new Tips($$('.tooltip'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 300, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});
// SiFR
//<![CDATA[
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"sifr/sifr.swf", sColor:"#000000", sLinkColor:"#FFFFFF", sBgColor:"#000000", sHoverColor:"#CCCCCC", sWmode:"transparent",sFlashVars:"textalign=right"}));
};
//]]>
var scroll = new Fx.Scroll('slider', {
wait: false,
//duration: 2500,
duration: 2000,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Sine.easeInOut
});
$('link1').addEvent('click', function(event){
event = new Event(event).stop();
scroll.toElement('content1');
});
$('link2').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content2');
});
$('link3').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content3');
});
$('link4').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content4');
});
Thanks for your help Paul, but I cant work this out sorry, and would be grateful for a little bit more help.