CODEWITHSUNDEEP
jquerycsshtml
MadeInDreams
MadeInDreams

Reputation: 2136

JQuery Smooth Div Scrolling

So here is my issue.

I am using smoothdDivScrolling on my page.

For some reason the Scrollable area that contain all the items i want to scroll is always bigger then the actual content.

So when i reach the last item in the scrollable area it keep scrolling empty. It seams that smoothdivscrolling auto adjust the width of the scrollable area to twice the value i need!

Now you probably want some code to see what i mean so...

<figure  id='block$id'>
 <img src='$img' alt='image $name' />
 <h2>$name</h2>
</figure>

This is the items i have in my 

<div class="scrollableArea"></div>

And of course i have more then one. and they are scrolling as expected

Now the CSS code for my figure element is as follow

figure {

    display:block;
    position: relative;
    float:left;
    vertical-align:top;
    width:172px;
    height:125px;
    background:rgba(255,255,255,0.2);
    border:12px solid rgba(255,255,255,0.2);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border:1px solid #000000;
    border-radius:8px;
    -moz-box-shadow:1px 1px 13px #999;
    -webkit-box-shadow:1px 1px 13px #999;
    box-shadow:1px 1px 13px #999;
    margin:5px;
    margin-top:30px;
    padding-left:0px;
    padding-right:0px;
    margin-bottom:5px;
    -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  z-index:199;
}

They are displaying corectly. Now i was wondering why does my scrollable area is twice the size of my content.

CSS of my scrolable area :

div.scrollableArea
{   
   display: block;
    position:relative;
    float:left;
    margin:0px;
    padding:0px;
    height:190px;
    border:1px solid #000000;
}

As you can see i dont provide a width value but even if i do and no mather if its a fixed value or the auto value. The result is always the same.

Here is the line that call for smoothdivscrolling

$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart", 
autoScrollDirection: "backandforth", 
autoScrollStep: 2,
autoScrollInterval: 15, 
startAtElementId: "startme", 
visibleHotSpots: "always"
});

If you would like to see more of my code please let me know i really want to get this fixed.

Thank you

Upvotes: 0

Views: 160

Answers (1)

Keyfer Mathewson
Keyfer Mathewson

Reputation: 1075

$(window).load(function(){
    var initialW = $('selector').width();
    $('selector').css('width', initialW/2);
});

Upvotes: 1

Related Questions