The Smooth Div Scroll is great but for some reason the area no longer scrolls when I edit or remove the #makeMeScrollable or #makeMeScrollable div.scrollableArea *
When I leave it as is it works. Which is a problem for customization.
and it won't work after I take the "*" out of div.scrollableArea *
If I edit the part with the
It's been frustrating figuring out why that part which is supposed to be editable not work at all.
Any help with this jquery would be helpful! Thanks in advance!
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 75 pixels
and if there is room the will grow and occupy 10%
of the scrollable area (20% combined).
Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to
solve some problems I experienced in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first cursor url is for Firefox and other
browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
/* Standard CSS3 opacity setting */
opacity: 0.35;
/* Opacity for really old versions of
Mozilla Firefox (0.9 or older) */
-moz-opacity: 0.35;
/* Opacity for Internet Explorer. */
filter: alpha(opacity = 35);
/* Use zoom to Trigger "hasLayout" in
Internet Explorer 6 or older versions */
zoom: 1;
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and
height as the containing element (div). Overflow
is hidden because you don't want to show all of
the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
http://www.smoothdivscroll.com/
//^above link to the jquery I am talking about
