Yahoo API AJAX Script Help

bubbles19518 · 04-05-2007, 04:12 AM

I have a script:

http://www.reactor.net.pl/clients/slideshow/

I tried to add it to this page:

http://interiordesignbusiness.net/ho...ony/index.html

And I can't seem to get it to work.

In IE I can get it to slide half, firefox can slide one image out, but it doesnt work like the first link. I can't figure out why, the code looks good to me.

index.html

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>House In Harmony</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">td img {display: block;}</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/dom/dom-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/animation/animation-min.js"></script>
</head>
<body>
<div align="center">
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><div id="header"><div align="left"><a href="index.html"><img src="images/logo.gif" border="0" /></a></div></div></td>
</tr>
<tr>
<td valign="top" bgcolor="#000000">
<table border="0" cellpadding="0" cellspacing="0" width="185" bgcolor="#000000">
<!-- fwtable fwsrc="navbarpng.png" fwbase="navbarpng.png" fwstyle="Dreamweaver" fwdocid = "1773638727" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="185" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r1_c1" src="images/navbarpng_r1_c1.gif" width="185" height="55" border="0" id="navbarpng_r1_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="navbarpng_r2_c1" src="images/navbarpng_r2_c1.gif" width="185" height="3" border="0" id="navbarpng_r2_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r3_c1" src="images/navbarpng_r3_c1.gif" width="185" height="55" border="0" id="navbarpng_r3_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="navbarpng_r4_c1" src="images/navbarpng_r4_c1.gif" width="185" height="2" border="0" id="navbarpng_r4_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r5_c1" src="images/navbarpng_r5_c1.gif" width="185" height="55" border="0" id="navbarpng_r5_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="navbarpng_r6_c1" src="images/navbarpng_r6_c1.gif" width="185" height="2" border="0" id="navbarpng_r6_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r7_c1" src="images/navbarpng_r7_c1.gif" width="185" height="55" border="0" id="navbarpng_r7_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="navbarpng_r8_c1" src="images/navbarpng_r8_c1.gif" width="185" height="2" border="0" id="navbarpng_r8_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r9_c1" src="images/navbarpng_r9_c1.gif" width="185" height="55" border="0" id="navbarpng_r9_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="navbarpng_r10_c1" src="images/navbarpng_r10_c1.gif" width="185" height="2" border="0" id="navbarpng_r10_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:next();"><img name="navbarpng_r11_c1" src="images/navbarpng_r11_c1.gif" width="185" height="54" border="0" id="navbarpng_r11_c1" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="54" border="0" alt="" /></td>
  </tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF">
<div style="width: 280px;height: 187px; overflow: hidden">
<div id="slider">
<img src="images/slideshow1.jpg" /><img src="images/slideshow2.jpg" /><img src="images/slideshow3.jpg" /><img src="images/slideshow4.jpg" />
</div>
</div>
<script type="text/javascript">
var images = document.getElementById('slider').getElementsByTagName('img');
var totalWidth=0;
for(var i=0;i<images.length;i++){
	totalWidth=280+totalWidth;
}
document.getElementById('slider').style.width=totalWidth+'px';
var hPosition = 0;
next = function (){
if(-1*(hPosition-280)<totalWidth){
	hPosition = hPosition-280;
	var goRight = new YAHOO.util.Anim('slider', {marginLeft: { to: hPosition}}, 0.7);
	goRight.animate();
}
}
prev = function (){
if(hPosition<0){
	hPosition = hPosition+280;
	var goRight = new YAHOO.util.Anim('slider', {marginLeft: { to: hPosition}}, 0.7);
	goRight.animate();
}
}

</script>
<br /><br />
Maecenas vitae mi. Aliquam consequat lobortis mauris. Proin sagittis sagittis velit. Curabitur interdum faucibus enim. Nulla vitae massa a eros mollis pretium. Quisque dictum velit a est. Aenean tempus luctus sem. Pellentesque in lorem sed lorem bibendum pellentesque. Nam a justo at lacus laoreet blandit. Curabitur sit amet leo. Nulla sapien. Donec fermentum sollicitudin sem.
</td>
<td valign="top" bgcolor="#FFFFFF">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam feugiat, ligula id rutrum convallis, diam mi convallis ante, id vestibulum turpis felis eget nibh. Curabitur mattis, erat ac interdum tristique, lectus enim porttitor odio, a auctor sapien turpis eu arcu. Aenean molestie nulla sit amet quam. Suspendisse et tortor ac nunc ullamcorper accumsan. Nullam sit amet erat sit amet felis volutpat ullamcorper. Fusce blandit, metus in tincidunt sagittis, purus lacus pellentesque mauris, nec mattis sem quam et tortor. Aenean ornare nunc vitae neque. Duis ut eros. Aliquam elementum tempor lacus. Etiam porta, enim eget placerat laoreet, risus velit iaculis sapien, vel porttitor urna nisi vel velit. Morbi lobortis nisi sit amet risus aliquam accumsan. In ligula magna, gravida sit amet, fringilla ac, aliquam volutpat, sapien. Donec quis felis. Cras tempus.
<br /><br />
Maecenas vitae mi. Aliquam consequat lobortis mauris. Proin sagittis sagittis velit. Curabitur interdum faucibus enim. Nulla vitae massa a eros mollis pretium. Quisque dictum velit a est. Aenean tempus luctus sem. Pellentesque in lorem sed lorem bibendum pellentesque. Nam a justo at lacus laoreet blandit. Curabitur sit amet leo. Nulla sapien. Donec fermentum sollicitudin sem.
</td>
</tr>
<tr>
<td colspan="3"><div id="footer">&copy; House In Harmony 2007</div></td>
</tr>
</table>
</div>
</body>
</html>

Any idea why its not working?

NancyJ · 04-05-2007, 10:17 AM

The link you gave works perfectly for me in IE7 and FF2

david_kw · 04-05-2007, 04:32 PM

I suspect your other css is somehow messing it up. I think the images are stacked instead of side to side which suggests they are display: block.

I see in your code

td img {display: block;}

which I'd guess is the problem. I'm still working on my CSS skills but I'd try this first.

<style type="text/css">
td img {display: block;}
div#slider img { display: inline; }
</style>

To override the display to inline for imgs. That's some place to start at least.

david_kw

FJbrian · 04-25-2007, 03:08 AM

You're not supposed to link to yahoo yui directly and should download the js files and install them on your own site.

Overflow hidden, show that for now.

I believe this is rooted from an old script from Peter Gehrig at 24fun.com if you want to just go get the original.
I recommend checking out Jack Slocum's work with yahoo yui.

david_kw · 04-25-2007, 04:38 AM

It was my understanding that now you can directly link to yahoo for the yui JS files. I haven't looked in to it enough yet so I could be wrong, but that's what I heard.

david_kw

FJbrian · 04-25-2007, 03:24 PM

Quote:

Originally Posted by david_kw

It was my understanding that now you can directly link to yahoo for the yui JS files. I haven't looked in to it enough yet so I could be wrong, but that's what I heard.

david_kw

I saw that but despite what I read, the bandwidth limit is small.
Getting my site going again, my traffic isn't very high at all and within a day or so I get a javascript error Access Denied. I would figure the average site owner would get this in a few hours.
If I upload the exact same script to another server with no changes it works for a short time too then gets access denied again.
Yahoo may have increased the bandwidth somehow in the last few weeks but....I just felt like I didn't need the headache