Smooth Div Scroll jquery not scrolling

[madnhate]

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

[Nile]

Is there a specific reason you would like to get rid of it? I don't see why it's causing you trouble... It's how the script works and it needs it to function correctly.

[jscheuer1]

Where it says:

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

It really means not the selectors like you seem to want to do, but some of the properties, and only within reason.

It would be easier to help if we had a link to your page and you told us what you want it to look like that it doesn't.

[madnhate]

LINK to what the page is like now


Sorry for not posting the link. I just uploaded it to a website.

Basically what I want is for it to look like I how it looks like already(kind of like a polaroid wall canvas effect) but instead of being frozen that it actually scrolls through.

Another issue is having both sides of the buttons being available and for it to be able to go in a full circle. Right now the button (when the script does work) on the left side appears only after content has reached that edge I want it to always be visible.

And I also want it to basically not stop at the end but instead loop it so it kind of continues by going back to the beginning like no breaks just going back full circle(if that makes sense) For example going ABCDEFABCDEFABCDEF etc. Basically not stopping continuously keep scrolling like a roll of film or something.

Thanks in advance. Hopefully I made sense if not I sincerely apologize.

And about removing the script... I don't want to remove the script it's just that the script doesn't seem to let me style the other parts of my page. So I wanted to remove it. But if I could style my content through their code I will be fine keeping it. I just don't know how I guess...sigh.

[jscheuer1]

I don't think you're using the right scripts. For the scroller I think Agile Carousel:

http://www.agilecarousel.com/

And for the lightbox, SlimBox 2.04:

http://www.digitalia.be/software/slimbox2

Start a fresh page with those, get rid of all of the old code. Slimbox may need a little tweak to work inside the scroller, but so would the lightbox script you have. Slimbox and Agile both use jQuery, so you need only one copy of it for the page and can forget about prototype/scriptaculous. Less chance of conflicts.

[madnhate]

Hi thanks!

hmm but I don't want it to move like that. The agile carousel seems to work more like each image shown at a time. I like this script because it just moves it all like one of those stock scrolls so you see more things then just one image at a time. I guess you can say I like the effect of this one more.

Actually there is no conflict in the javascripts because when I leave this part of the css as is it scrolls just that it scrolls without the boxes or the styles I have for the box around the images. because of the padding and margins.

#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}

[jscheuer1]

Agile is highly configurable, but I'm not certain if it can show more than one image at a time. Probably . . .

But if all you're worried about is the margin on your current scroller, leave it alone and just put a container division around it. Set this container to the same dimensions and give it any styles that you want.

[madnhate]

I'm not worried about the margins themselves but more worried about my styles. I want to keep it looking the same with my code. But that only works when I remove that makemescrollable styling. However it doesn't move. When I keep the code it works but it does not display in the right location or it's lacking certain styles.