Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как изменить стандартный скроллбар на свой / 2 сообщений из 2, страница 1 из 1
24.02.2007, 12:37
    #34352686
geo_life
geo_life
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как изменить стандартный скроллбар на свой
предположим у меня есть div
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<div id="oDiv2" style=" width: 100px; height: 100px;  overflow-x: hidden; overflow-y: auto">
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
        </div>
, в нем какой то текст , если текста много то в div-е появятся скроллбар, скажите как мне программно определить overflow - т.е. выходит ли внутренний текст за пределы div-а (т.е. у него появляется scrollbar). Я хочу вместо скролл бара поставить две кнопки-img (скролл-кнопкам) и если внутреннй текст выходит за overflow то показывать эти кнопки, если нет - то прятать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.02.2007, 11:11
    #34356847
geo_life
geo_life
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как изменить стандартный скроллбар на свой
переписал свой, вот исходники, работает только под IE:
JavaScript
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
/* VScrollButton */
function SetVScrollBtns(strContainer, strVScrollBtnUp, strVScrollBtnDown)
{
    var Container  = document.getElementById(strContainer);
    var VScrollBtnUp  = document.getElementById(strVScrollBtnUp);
    var VScrollBtnDown  = document.getElementById(strVScrollBtnDown);
    if (Container && VScrollBtnUp && VScrollBtnDown) 
    {
        if (Container.scrollHeight > Container.clientHeight)
        {
            VScrollBtnUp.style.visibility = 'visible';
            VScrollBtnDown.style.visibility = 'visible';
        }
        else
        {
            VScrollBtnUp.style.visibility = 'hidden';
            VScrollBtnDown.style.visibility = 'hidden';
        }

    }
}    

function DoBtnScroll(obj, direction)
{
  var TextComtainer = document.getElementById(obj);
  if (TextComtainer)
  {
      if (direction=="up")
      { 
         TextComtainer.scrollTop = TextComtainer.scrollTop - TextComtainer.clientHeight *  0 . 8 ;
      } 
      else
      { 
         TextComtainer.scrollTop = TextComtainer.scrollTop + TextComtainer.clientHeight *  0 . 8 ;
      }
  }
}
/* End VScrollButton */


/* VScrollBar */
function VScrollBar(strContainer, strVScrollBar)
{
    this.Container  = document.getElementById(strContainer);
    this.ScrollBar  = document.getElementById(strVScrollBar);
    this.ScrollBarTop = null;
    this.ScrollBarCenter = null;
    this.ScrollingCenter = null;
    this.ScrollBarBottom = null;
    if (this.Container && this.ScrollBar) 
    {
        this.Container.style.overflow = 'hidden';
        this.Container.style.display = 'inline';
        for (var i= 0 ; i < this.ScrollBar.childNodes.length; i++)
        {
            if (this.ScrollBar.childNodes.item(i).tagName == "DIV")
            {
                if (!this.ScrollBarTop)
                {
                    this.ScrollBarTop = this.ScrollBar.childNodes.item(i);
                }
                else if (!this.ScrollBarCenter)
                {
                    this.ScrollBarCenter = this.ScrollBar.childNodes.item(i);                
                }
                else if (!this.ScrollBarBottom)
                {
                    this.ScrollBarBottom = this.ScrollBar.childNodes.item(i);                
                }
            }
        }
        for (var i= 0 ; i < this.ScrollBarCenter.childNodes.length; i++)
        {
            if (this.ScrollBarCenter.childNodes.item(i).tagName == "DIV")
            {
                if (!this.ScrollingCenter)
                {
                    this.ScrollingCenter  = this.ScrollBarCenter.childNodes.item(i);
                }
            }
        }
        if (this.Container.scrollHeight > this.Container.clientHeight)
        {
            this.ScrollBarCenter.style.height = this.Container.clientHeight - this.ScrollBarTop.offsetHeight *  2 ;
            this.ScrollingCenter.style.height = this.ScrollBarCenter.clientHeight  * this.Container.clientHeight / this.Container.scrollHeight;
            this.ScrollBar.style.visibility = 'visible';
        }
        else
        {
            this.ScrollBar.style.visibility = 'hidden';    
        }
        
       /* this.ScrollBarBottom.onclick = 
        function () 
        { 
            alert(this.Container.clientHeight);
        };
        */
    }
    
}
function DoScroll(obj, direction)
{
  var scrollbar = eval(obj);
  var objContainer = scrollbar.Container;
  var objScrollBarCenter = scrollbar.ScrollBarCenter;
  var objScrollingCenter = scrollbar.ScrollingCenter;
  
  if (direction=="up")
  { 
     objContainer.scrollTop = objContainer.scrollTop - objContainer.clientHeight *  0 . 8 ;
  } 
  else
  { 
     objContainer.scrollTop = objContainer.scrollTop + objContainer.clientHeight *  0 . 8 ;
  }
  var MaxScroll = objContainer.scrollHeight - objContainer.clientHeight;
  objScrollingCenter.style.top = (objScrollBarCenter.offsetHeight - objScrollingCenter.offsetHeight) / MaxScroll * objContainer.scrollTop ;
  
}
/* End VScrollBar */

HTML:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<div class="scroll_textscroll_container">
<div id="ContainerDiv" class="scroll_text_container">
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>

</div>
           <!-- VScrollBar --> 
            <script language="javascript" type="text/javascript">
                onload = init;
                function init()
                {
                    ScrollBar1 = new VScrollBar('ContainerDiv', 'VScrollBar');
                }
            </script>
            <div id="VScrollBar" class="scroll_bar">
                <div id="VScrollTop" class="scroll_divs scroll_top_div">
                    <input id="Button9" type="button" class="button_key scroll_buttons scroll_top_button" value=" UP "
                        onclick="javascript:DoScroll('ScrollBar1', 'up');" />
                </div>
                <div id="VScrollCenter" class="v_scroll_center_div">
                    <div id="VScrollingCenter" class="scroll_divs v_scrolling_center_div">
                        <input id="Button12" type="button" disabled="disabled" class="button_key scroll_buttons v_scrolling_center_button"
                            value="  " />
                    </div>
                </div>
                <div id="VScrollBottom" class="scroll_divs scroll_bottom_div">
                    <input id="Button11" name="Button11" type="button" class="button_key scroll_buttons scroll_bottom_button" value="DOWN"
                        onclick="javascript:DoScroll('ScrollBar1','');" />
                </div>
            </div>
           <!-- End VScrollBar --> 
</div>
CSS:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
/* scroll_bar */
.scroll_bar
{
	height:  1 %; 
   width:  1 %; 
	display: inline; 
	background-color: #CAD9F0;
	margin-bottom: 1px;
	position: absolute;
	top: 0px;
	right: -66px;
	visibility: hidden;
	/* visibility: hidden !important; */
}
.scroll_divs
{
   Height:50px;
   width: 66px;	
}
.scroll_buttons
{
	background-repeat: no-repeat;
   Height: 100 %;
   width:  100 %;	
	margin:  0 ;
	padding:  0 ;
	font: bold 12pt Verdana, Geneva, Arial, Helvetica, sans-serif;

	border: 2px outset #b9c9ef;
	PADDING: 1px; 
	MARGIN: 0px; 
	BACKGROUND-COLOR: #D5E2F3;
	FONT-FAMILY: Verdana; 

}
.scroll_top_div
{
}
.v_scroll_center_div
{
	Height:42px;
}
.v_scrolling_center_div
{
	position: relative;
	top:  0 ;
	left:  0 ;
   Height:33px;
}
.scroll_bottom_div
{
}
.scroll_top_button
{
	/* background-image: url(../images/ScrollTop_1024_768.jpg); */
}
.v_scrolling_center_button
{
	/*	background: url(../images/ScrollCenter.jpg) repeat; */
}
.scroll_bottom_button
{
	/* background-image: url(../images/ScrollBottom_1024_768.jpg); */
}
/* end scroll_bar */


/* scroll_textscroll_containers */
.scroll_textscroll_container
{
	position: relative;
	width:  1 %;
}
.scroll_text_container
{
	overflow:hidden;
}
/* scroll_textscroll_containers */
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как изменить стандартный скроллбар на свой / 2 сообщений из 2, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 821ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1458717]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 432ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 65ms
get tp. blocked users:
 2ms
others: 283ms
total:  821ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]