1 Replies - 3695 Views - Last Post: 15 November 2012 - 12:34 PM

#1 joshualee   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-November 12

jquery smooth div scroll problem

Posted 15 November 2012 - 09:53 AM

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="body.css" rel="stylesheet" type="text/css" />
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">

#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}

/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>

</head>

<body>
<table width="632" height="850" border="0" align="center">
<tr>
<td height="212" align="center" valign="middle"><img src="logo.jpg" width="150" height="123" /></td>
</tr>
<tr>
<td height="315" align="center" valign="top"><table width="200" height="27" border="0" align="center">
<tr>
<td align="center" valign="middle"><a href="portfolio.html">PORTFOLIO</a></td>
</tr>
</table>
<p>&nbsp;</p>


<div id="makeMeScrollable">

<img src="images/demo/FINAL_IMG_9886.jpg"/>
<img src="images/demo/IMG_0255.jpg"/>
<img src="images/demo/IMG_0409_redone.jpg"/>
<img src="images/demo/IMG_0428.jpg"/>
<img src="images/demo/IMG_0605.jpg"/>
<img src="images/demo/IMG_1811.jpg"/>
<img src="images/demo/IMG_1836.jpg"/>
<img src="images/demo/IMG_6557.jpg"/>
<img src="images/demo/IMG_9891.jpg"/>
<img src="images/demo/IMG_9842.jpg"/>
</div>

<!-- LOAD Javascript LATE - JUST BEFORE THE BODY TAG 
That way the browser will have loaded the images
and will know the width of the images. No need to
specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" 
type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron....ousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" self.startAutoScrolling(); type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
js/jquery.smoothDivScroll-1.3.js -->

<!-- Plugin initialization -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
// None of the options are set
$("div#makeMeScrollable").smoothDivScroll({
autoScrollingMode: "onstart"
});
});
</script>

</div>
</p>
<p>
</p></td>
</tr>
<tr>
<td height="315" valign="top"><table width="200" border="0" align="center">
<tr>
<td height="34" align="center"><a href="about.html">ABOUT</a></td>
</tr>
<tr>
<td height="34" align="center"><a href="resume.html">RESUME</a></td>
</tr>
<tr>
<td height="34" align="center"><a href="contact.html">CONTACT</a></td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>









Webpage & problem:
file:///Network/Servers/PhotoNet-MacLab-Server.local/Volumes/Network_Storage_01/User-Accounts/huttonj/Desktop/FinalSite/portfolio2.html

Smooth Scroll Website:
http://www.smoothdivscroll.com/

This post has been edited by Martyr2: 15 November 2012 - 12:31 PM
Reason for edit:: Fixed code tags. It is [/code] to end the code block. :)


Is This A Good Question/Topic? 0
  • +

Replies To: jquery smooth div scroll problem

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5552
  • View blog
  • Posts: 14,558
  • Joined: 18-April 07

Re: jquery smooth div scroll problem

Posted 15 November 2012 - 12:34 PM

We can't see files you have setup locally. They have to be posted on the web somewhere. If you still need help, state the actual problem you are having and put your web page file on a host somewhere we can access it. That is, starts with http:// not file://.

Btw... we also only help with code you yourself has written, we are not customer support for scripts or software products you have simply tried downloading. If you have questions regarding that, email the author.

:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1