I have external links opening with the "fancybox" jquery plug-in when clicked on. I want to be able to have the web page in the fancybox scroll down when it loads. (Any place on the page is fine, this is just a learning exercise) I have marked my code to get it to work with " // will not scroll "
I know my page is not long enough in the code below. I took out some content to shorten the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Open in new tab</title>
<link href="../_css/site.css" rel="stylesheet">
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet">
<style type="text/css">
.small {
font-size:8px
}
</style>
<script src="../_js/jquery-1.7.1.js"></script>
<script src="../_js/jquery.easing.1.3.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.js"> </script>
<script>
$(function() {
$('a[href^="http://"]').attr('class' , 'iframe')
box = $('.iframe').fancybox({
cyclic: true ,
width: '30%' ,
height: '30%' ,
scrolling: 'yes'
});
$('#fancybox-outer').scrollTo( 200, 200 ); // Will not scroll
$('#Links').scrollBy(1500 , 1500); // Will not scroll
});
</script>
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div class="content">
<div class="main" id="Links">
<h1> <a href="http://news.yahoo.com/" >Yahoo news</a></h1>
<h1> <a href="http://www.Pigs.com" >Pig info</a></h1>
<div id="bibliography"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>
</body>
</html>