I added a twitter feed widget via adobe widget and it was working. Then I added an image cycle widget and the image cycle widget worked, but the twitter feed widget stopped showing up in the browser. Here's my 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=UTF-8" />
<title>CBB — Creative By Becky</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/twitter_search.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2125523" binding="#twitter" />
<oa:widget wid="2559022" binding="#slideshow" />
</oa:widgets>
-->
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2125523: #twitter */
#twitter {
height: 200px;
width: 200px
}
</style>
<style type="text/css">
/* BeginOAWidget_Instance_2559022: #slideshow */
#slideshow {
padding: 0px;
margin:0;
}
#slideshow-caption{
padding:0;
margin:0;
}
#slideshow img, #slideshow div {
padding: 0px;
background-color: transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin: 0;
}
/* EndOAWidget_Instance_2559022 */
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header.png" width="900" height="150" alt="cbb - creative by becky freelance print and web designer" /></div>
<div id="logo">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
slideshowAddCaption=false;
$(document).ready(function() {
$('#slideshow').cycle({
after: slideshowOnCycleAfter, //the function that is triggered after each transition
autostop: false, // true to end slideshow after X transitions (where X == slide count)
fx: 'fade,',// name of transition effect
pause: true, // true to enable pause on hover
randomizeEffects: true, // valid when multiple effects are used; true to make the effect sequence random
speed: 2000, // speed of the transition (any valid fx speed value)
sync: false, // true if in/out transitions should occur simultaneously
timeout: 6000, // milliseconds between slide transitions (0 to disable auto advance)
fit: true,
height: '400px',
width: '900px' // container width (if the 'fit' option is true, the slides will be set to this width as well)
});
});
function slideshowOnCycleAfter() {
if (slideshowAddCaption==true){
$('#slideshow-caption').html(this.title);
}
}
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
<!--All elements inside this will become slides-->
<img src="images/beach1.jpg" width="100" height="100" title="caption for image1" /> <img src="images/beach2.jpg" width="300" height="300" title="caption for image2" /> <img src="images/beach3.jpg" width="200" height="200" title="caption for image3" />
<div title="sample title"> you can add blocks of text instead!</div>
<img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
<!--It is safe to delete this if captions are disabled-->
<div id="slideshow-caption"></div>
</div>
<div id="menu">
<ul id="crr_menu" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a> </li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="leftcolumn">
<div id="twitter"></div>
<script type="text/javascript">
// BeginOAWidget_Instance_2125523: #twitter
$(document).ready(function() {
$('#twitter').twitterSearch({
term: 'from%3Acreativebybecky',
title: 'creativebybecky twitterfeed',
titleLink: 'http://www.twitter.com/creativebybecky',
bird: true, // true or false (show or hide twitter bird image)
birdSrc: 'images/tweet.gif', // twitter bird image
birdLink: '', // url that twitter bird image should like to
avatar: false, // true or false (show or hide twitter profile images)
anchors: true, // true or false (enable embedded links in tweets)
animOutSpeed: 500, // speed of animation for top tweet when removed
animInSpeed: 500, // speed of scroll animation for moving tweets up
pause: true, // true or false (pause on hover)
time: false, // true or false (show or hide the time that the tweet was sent)
timeout: 8000, // delay betweet tweet scroll
css: {
a: { textDecoration: 'none', color: '#990066', fontWeight: 'normal'},
container: { backgroundColor: '#000000' },
frame: { border: '10px solid #333333', borderRadius: '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' },
img: { width: '30px', height: '30px' },
loading: { color: '#888' },
text: {fontWeight: 'normal', fontSize: '12px', color:'#ffffff'},
time: { fontSize: '12px', color: '#CCC' },
title: { backgroundColor: '#990066', padding: '5px 0 5px 0', textAlign: 'center', fontWeight: 'bold', fontSize: '12px'},
titleLink: { textDecoration: 'none', color: '#ffffff' },
user: { fontSize: '12px'},
fail: { background: '#6cc5c3 url(/images/failwhale.png) no-repeat 50% 50%'}
}
});
});
// EndOAWidget_Instance_2125523
</script>
</div>
<div id="content">
<h1>You've made it to my homepage.</h1>
<p>That means I'm well on my way to expanding my creative portfolio beyond print design and setting foot into the world of digital. I think I'm getting the hang of it.</p>
<p>This inaugural site, while not perfect, will showcase my progress in this new venture as well as highlight my current accomplishments. Thanks for visiting! </p>
</div>
<div id="footer">cbb — creative by becky — 2012</div>
</div>
<p> </p>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("crr_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
