I can get all of the below scripts to work individually, but when I bring them all together there seems to be a conflict and the slider just displays as loading.
Any help anyone has would be greatly appreciated.
Thanks
Goose
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Matthew Bolton - Gas and Heating Services | Boiler Repairs, Installation, breakdown and Servicing | Wirral, Merseyside, Liverpool, Chester, North Wales</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<meta name="Keywords" content="web design, template, php, mysql, professional, studio, company, website, web2, w3c standard, web standard, css, applications, designing, graphics, xhtml, affordable, US web, UK web, India Web" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="Description" content="Matthew Bolton - Gas and Heating Services | Boiler Repairs, Installation, breakdown and Servicing | Wirral, Merseyside, Liverpool, Chester, North Wales" />
<meta name="Author" content="Mark Bolton" />
<meta name="RE-VISIT" content="7 Days" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="./css/liquid-slider-1.1.css">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 5 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/jquery.liquid-slider-1.1.min.js"></script>
<script>
$(function(){
/* Here is the slider using default settings */
$('#slider-id').liquidSlider();
/* If you want to adjust the settings, you set an option
as follows:
$('#slider-id').liquidSlider({
autoSlide:false,
autoHeight:false
});
Find more options at http://liquidslider.kevinbatdorf.com/
*/
/* If you need to access the internal property or methods, use this method.
var sliderObject = $.data( $('#slider-id')[0], 'liquidSlider');
console.log(sliderObject);
*/
});
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
<!--
.applemenu { margin: 5px 0;
padding: 0;
width: 300px; /*width of menu*/
border: 1px solid #9A9A9A;
}.applemenu{
margin: 5px 0;
padding: 0;
width: 300px; /*width of menu*/
border: 1px solid #9A9A9A;
}.applemenu div.silverheader a{
background: black url(images/silvergradientover.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(images/silvergradient.gif);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
-->
</style>
</head>
<body>
<div id="logo">
<div id="contacts"><img src="images/logo.jpg" alt="Matthew Bolton Gas and Central Heating Services" width="436" height="157" id="Matthew Bolton Gas and Central Heating Services" title="Matthew Bolton Gas and Central Heating Services" /></div>
<div id="contacts2">
<div id="email">
<div id="mail-logo"> <img src="images/mail.png" alt="" width="30" height="30" /></div>
<div id="mail-logo1">enquiries@matthewboltonhgs.com</div>
</div>
<div id="email">
<div id="mail-logo"><img src="images/phone.png" alt="" width="30" height="30" /></div>
<div id="mail-logo1"><span id="callus">CALL US TODAY</span> 0800 612 8829</div>
</div>
</div>
<div id="contacts3"><a href="www.gassaferegister.co.uk" target="_parent"><img src="images/gas-safe-register.jpg" alt="Gas Safe Registered" title="Gas Safe Register" width="68" height="68"/></a></div>
</div>
<div id="wrap">
<div id="header">
<div id="topnav">
<ul>
<li id="first" class="active"><a href="/">Home</a></li>
<li><a href="#">Heating, Boilers and Gas</a></li>
<li><a href="#">Contact Us</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<div id="contents">
<div id="homepage">
<div class="services">
<h2 class="subhead">What we do ?</h2>
<div class="applemenu">
<div class="silverheader"><a href="http://www.dynamicdrive.com">We provide the following heating and gas services:</a></div>
<div class="submenu">
<div><ul>
<li>Central heating installation</li>
<li>Power flushing</li>
<li>Boiler upgrades</li>
<li>Boiler repairs</li>
<li>Gas safety checks</li>
<li>Gas fires and cookers</li>
</li>
</ul>
</div>
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu"> Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<div class="submenu"> Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
<div class="submenu"> Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" alt="" /> </div>
<div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
<div class="submenu"> Some random content here<br />
</div>
</div>
</div>
<div class="portfolio_preview">
<h1><strong>Gas and Heating Services </strong>|Wirral, Merseyside, Liverpool, Cheshire, Chester, North Wales</h1>
<div id="from_portfolio">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper"> <img src="portf_thumbs/gas-central-heating-services-cooker.jpg" alt="temp" width="501" height="158" />
<div class="photo-meta-data"><span> Call us today for all your Gas and Central Heating requirements</span></div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper"> <img src="portf_thumbs/gas-central-heating-services-radiator.jpg" alt="temp" width="501" height="158" />
<div class="photo-meta-data"><span>Brand new A Rated Gas Safe Combi Boilers fitted from £799</span></div>
</div>
</div>
</div>
</div>
<div id="movers-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="blog_column">
<h2 class="subhead">Heating and Gas Services in Cheshire, Merseyside and North Wales.</h2>
<div class="post">
<div class="post_head">
<h3><a href="#">Lorem Ipsum Dolor Sit</a></h3>
</div>
<p>Matthew Bolton is a well established, family run gas and central heating business based in the Wirral, Merseyside. </p>
<p>As well as a providing a range of general heating services we also specialize in the installation, maintenance, servicing and repair of central heating systems and gas appliances.</p>
<p> We always aim to provide a professional and cost effective solution for all your heating and plumbing requirements.</p>
</div>
</div>
<div class="clear">
</div>
<br />
<div class="clear"></div>
</div>
<div id="topbar">
<h1> </h1>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<div class="columns">
<p>“Matthew Bolton is a well established, family run gas and central heating business based in the Wirral, Merseyside. As well as a providing a range of general heating services we also specialize in the installation, maintenance, servicing and repair of central heating systems and gas appliances.”</p>
</div>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<!-- Liquid Slider Ends Here -->
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="bottom">
<div class="columns">
<h3>Chat with us</h3>
<p>
<strong><img src="images/irc_protocol.png" alt="Gtalk" width="16" height="16" /> Gtalk :</strong> gtalk@gtalk.com </p>
<p>
<strong><img src="images/yahoo_protocol.png" alt="Yahoo" width="16" height="16" /> Yahoo :</strong> yahoo@yahoo.com</p>
<p>
<strong><img src="images/msn_protocol.png" alt="MSN" width="16" height="16" /> MSN :</strong> msnmessenger</p>
<p>
<strong><img src="images/skype.png" alt="Skype" width="16" height="16" /> Skype:</strong> skypeout</p>
</div>
<div class="columns">
<h3>Contact Us</h3>
<p>
<img src="images/telephone.png" alt="Call" width="16" height="16" /> Call : +91 9124563789</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" /> General Emails : email@server.com</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" /> Careers Related Enquiries : hr@server.com</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" /> Partnership enquiries : Partners@server.com</p>
</div>
<div class="columns">
<h3>Reach Us</h3>
<p>1st Floor</p>
<p>ABCD Building, XYZ Street</p>
<p>City of God, State</p>
<p>Country, Zip Code - 123456</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div class="footercontent">
<p>Matthew Bolton Gas and Cental Heating Services</p>
<p>Home | <a href="#">Heating, Boilers and Gas</a> | Contact Us</p>
<!-- Removing this link back to Ramblingsoul.com will be violation of the Creative Commons Attribution 3.0 Unported License, under which this template is released for download -->
<p> </p>
<!-- Copyright - Ramblingsoul.com -->
</div>
</div>
</div>
</body>
</html>
Last edited by VIPStephan; 03-05-2013 at 12:50 AM..
Reason: added code BB tags
And also, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
Before you post, read our: 
