开发者

Tiny scrollbar doesn't work with javascript (javascript conflict)

开发者 https://www.devze.com 2023-04-04 18:36 出处:网络
I\'m using tiny scrollbar for my new website www.digimobjobs.com I\'m usi开发者_高级运维ng this scrollbar in many places, but this webste is the only place that has a scrollbar problem.

I'm using tiny scrollbar for my new website www.digimobjobs.com I'm usi开发者_高级运维ng this scrollbar in many places, but this webste is the only place that has a scrollbar problem. This is where: http://www.digimobjobs.com/news.php.

At the twitter tab and news tab, I have to put a specific scroll height:

#newsWidget
{
    font-weight:lighter;
    font-size:12px; 
    height:2000px;
    color:#333333;
    text-align:left;
}

#twitter-ticker{
    width:610px;
/*  height:921px; */
height:1025px;
    color:#4297f9;
/*  display:none; */
    text-align:left;
}

In the rest of the places I'm using the same code of the tiny scrollbar. I think the conflict is between javascript. Actually I don't have enough knowledge of javascript. Could any one help me please? If you use firebug you can see my entire code. Please help me!


I have tested your site with Google Chrome and Firefox and I don't see any problem.


Extra

However, if you are still having problems on yours, you might want to consider changing the scrollbar using CSS3.

Learn more:

  • Surfin' Safari Blog (harder to understand)
  • CSS-Tricks* (easier to understand)

In conclusion, it is basically working like this: (From the CSS-Tricks site)

::-webkit-scrollbar              { /* CSS here */ }  /*the whole scrollbar*/
::-webkit-scrollbar-button       { /* CSS here */ }  /*the scrollbar buttons*/
::-webkit-scrollbar-track        { /* CSS here */ }  /*the scrollbar's whole track*/
::-webkit-scrollbar-track-piece  { /* CSS here */ }  /*the scrollbar's track*/
::-webkit-scrollbar-thumb        { /* CSS here */ }  /*the scrollbar's moving piece*/
::-webkit-scrollbar-corner       { /* CSS here */ }  /*bottom corner piece (when no resize)*/
::-webkit-resizer                { /* CSS here */ }  /*bottom corner piece (when there's resizing)*/

Update

I have done a few testing, and I fixed the second tab:

// Try running this in the console when it the page is completely loaded.
$("#news_feed").tinyscrollbar();
$("#news_feed").tinyscrollbar_update();

According to the Tiny Scrollbar site, it said,

The update (.tinyscrollbar_update()) method can be used for adjusting a scrollbar to its new content.

So you will have to call it every time you change the content. For example, your XML updating needs to call it every time.

But why the problem is happening?
After a few testing, it seems like the api runs before your content is loaded.
As a result, it thought that the two <div>s are empty and has no height (so no scrollbar for you).

The first Twitter tab?
Try to fix it by yourself.

I have never used this plugin before, so I might be wrong. Fix me if you see a mistake.


Please Re Init tinyScroller bar by this mathod.

$('#scrollbar1').tinyscrollbar_update();

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号