Web Design Forum: Mikec1uk - Viewing Profile - Web Design Forum

Eskymo, on 13 January 2012 - 03:05 PM, said:

Try giving the list items a width...e.g.

#carousel ul li {
     width:320px;
}

or give each hyperlink a width e.g. #btn-cfp

Hey,

If your js files are in your js folder, it should work.

The code i have looks like this:

In head section:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

and the HTML/jQuery:

     <div id="carousel">
          <ul>
               <li><a href="http://www.financialplanning.org.uk/directory/united-kingdom/london-city/london/duncan-glassey" title="CFP - We hold the globally recognised standard of excellence" target="_blank" id="btn-cfp"></a></li>
	       <li><a href="http://www.sifa-centre.info/search/firm_individuals.asp?reference=4408" title="We are members of SIFA" target="_blank" id="btn-sifa"></a></li>
	       <li><a href="http://www.apil.org.uk/" title="1st tier expert in financial planning" target="_blank" id="btn-apil"></a></li>
	       <li><a href="http://www.fpanet.org/professionals/Connect/CommunitiesofInterest/InternationalCommunity/" title="Members of International FPA Community" target="_blank" id="btn-fpa">1</a></li>		
	       <li><a href="#" title="New Model Adviser® awards 2012 - Finalist: Best IFA Firm (Scotland and Northern Ireland)" target="_blank" id="btn-nma">2</a></li>	
	       <li><a href="#" title="The Personal Finance Society - The professional body for the financial planning profession in the UK" target="_blank" id="btn-pfs">3</a></li>		
          </ul>
     </div>
     <script type="text/javascript">
          $(function() {
               $("#carousel").jCarouselLite({
                    auto: 800,
                    speed: 1000
	       });
          });
    </script>

and it all works fine for me...

I just tried it and it should work. Are the links to the js files right?

Try linking to Google's hosted jquery library:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Rather than one hosted on your server.

Hey,

Should the jquery be:

<script type="text/javascript">
	$(function() {
		$("#carousel").jCarouselLite({
			auto: 800,
			speed: 1000
		});
	});
</script>

I'm not sure where the .auto and .jCarouselLite come from?

Hi,

I haven't got an iPad, but it is probably this bit which is the problem:

#bar{
	background: url('/images/site/barBg.png') top center no-repeat;
	position: absolute;
	top: 372px;
	left: -505px;
	width: 1950px;
	height: 50px;
}

The Ipad only has a resolution of 1024 x 768 so it too big too fit on one screen. I had to scroll horizontally on my laptop too.

Changing it to width:100%; should sort it out.