[jQuery] cool cycle demo and using .load("foo.html")
I have a simple product demo that uses the fabulous "cycle" plug in.
http://www.whatbird.com/wwwroot/Components/Tour%20Tabbed%20Interface%20Final.html
I want to move the text that appears in the box into its own HTML file
that would be loaded with
$('#noteframe').load("demo_text.html");
So I did this and it doesnt work right as you can see here
http://www.whatbird.com/wwwroot/Components/Tour%20Tabbed%20Interface%20Final2.html
As you can see it loads the entire HTML page into the noteframe
container and defeats the cycle plug in.
Is what I am trying to do impossible?
Here is the core code:
$(document).ready(function(){
$('#noteframe').load("demo_text.html");
$('#birds, #noteframe').cycle(
{ fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2' }
);
});
<body class="body">
<table width="860" border="0" cellspacing="0" cellpadding="0"
style="margin-left: auto; margin-right: auto ">
<tr>
<td >
<table width="818" height="617" border="0" cellpadding="0"
cellspacing="0" style="margin-left: auto; margin-right: auto; ">
<tr>
<td height="49" colspan="3" > </td>
</tr>
<tr>
<td width="263" >
<div id="col1"></div>
</td>
<td width="300" >
<div id="col2">
<table width=300 border=0 align="center" cellpadding=0
cellspacing=0>
<TR>
<TD><IMG SRC="images/ipaq200_01.gif" WIDTH=28
HEIGHT=58 ALT="" /></TD>
<TD><IMG SRC="images/ipaq200_02.gif" WIDTH=240
HEIGHT=58 ALT="" /></TD>
<TD><IMG SRC="images/ipaq200_03.gif" WIDTH=32
HEIGHT=58 ALT="" /></TD>
</TR>
<TR>
<TD><IMG SRC="images/ipaq200_04.gif" WIDTH=28
HEIGHT=320 ALT="" /></TD>
<TD><div id="birds" class="birds"> <img src="../
images/winged_explorer/Splash_Progress_0000_Layer Comp 1.jpg" /> <img
src="../images/winged_explorer/Splash_Progress_0001_Layer Comp
2.jpg" /> <img src="../images/winged_explorer/
Splash_Progress_0002_Layer Comp 3a.jpg" /> <img src="../images/
winged_explorer/Splash_Progress_0003_Layer Comp 4a.jpg" /> <img
src="../images/winged_explorer/Splash_Progress_0004_Layer Comp
5.jpg" /> <img src="../images/winged_explorer/
Splash_Progress_0005_Layer Comp 6.jpg" /> <img src="../images/
winged_explorer/Splash_Progress_0006_Layer Comp 7.jpg" /> <img
src="../images/winged_explorer/Splash_Progress_0007_Layer Comp
8.jpg" /> <img src="../images/winged_explorer/
Splash_Progress_0008_Layer Comp 9.jpg" /></div></TD>
<TD><IMG SRC="images/ipaq200_06.gif" WIDTH=32
HEIGHT=320 ALT="" /></TD>
</TR>
<TR>
<TD><IMG SRC="images/ipaq200_07.gif" WIDTH=28
HEIGHT=178 ALT="" /></TD>
<TD><IMG SRC="images/ipaq200_08.gif" WIDTH=240
HEIGHT=178 ALT="" /></TD>
<TD><IMG SRC="images/ipaq200_09.gif" WIDTH=32
HEIGHT=178 ALT="" /></TD>
</TR>
</table>
</div>
</td>
<td width="244" >
<div id="col3">
<div id="noteframe">
</div>
<div id="start"><a href="">Start</a></div>
<div id="prev2"><a href="">Prev</a></div>
<div id="next2"><a href="">Next</a></div>
</div>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>