Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > "прикрутить" бегунки

Автор: Grig 6.10.2005, 03:55

Здравствуйте!
Возможно средствами JS намертво прикрутить scrollbar?
Вертикальный ползунок к верхнему краю, а горизонтальный к левому
И чтобы при любой погоде, они там и оставались?
Спасибо!

Автор: Aliance 6.10.2005, 16:07

Можно, используя CSS:

Код


.class {
   overflow: scroll;
}

Автор: Sardar 6.10.2005, 22:29

Цитата(Grig @ 6.10.2005, 02:55)

Возможно средствами JS намертво прикрутить scrollbar?

В смысле что бы ползунок не двигался вообще? не проще ли его скрыть (overflow: hidden)?

Автор: Grig 7.10.2005, 01:54

Нет, будут они или нет - не важно.
А, кстати, вертикальный бегунок придется оставить.
А горизонтальный зафиксировать в левое положение или вообще удалить.

Автор: Grig 7.10.2005, 04:43

Я вот для чего это делаю:
У меня на страничке есть фрейм, и когда я загружаю в него какую-нибудь страничку, то ползунки центрируют этот фрейм, то есть не видно шапки, левого края страницы.
Мне бы этого не хотелось, вот и думаю как побороть

Автор: Aliance 7.10.2005, 08:45

Код


.class {
   /* горизонтальный бегунок */
   overflow-x: hidden;
   /* вертикальный */
   overflow-y: scroll;
}

Допустимые значения: scroll | hidden | auto

Автор: Grig 7.10.2005, 09:23

Код


<style type="text/css">
.class {
   /* горизонтальный бегунок */
   overflow-x: hidden;
   /* вертикальный */
   overflow-y: scroll;
}
</style>

не помогает.. увы..

Автор: Sardar 7.10.2005, 11:59

Цитата(Grig @ 7.10.2005, 08:23)

не помогает.. увы.

Такого не может быть. Стилями скрыт горизонтальный бегунок, в то время как вертикальный будет присутствовать при любом размере страницы. Следующие вопросы натолкнут на мысль smile

Знаком с CSS?
Поставил селектор у фрейм.document.documentElement?
Всё ещё не работает? Что за браузер?

Автор: Grig 8.10.2005, 06:32

Цитата(Grig @ 7.10.2005, 09:23)

Код


<style type="text/css">
.class {
   /* горизонтальный бегунок */
   overflow-x: hidden;
   /* вертикальный */
   overflow-y: scroll;
}
</style>

Это прописал в <head>.
К сожалению с css не знаком, но раз Вы говорите что это работает - разберусь - выходные длинные )))
Добавлено @ 06:33
Sardar, а как поставить селектор у фрейм.document.documentElement?

Автор: Aliance 8.10.2005, 10:26

Если тебе нужно только у элемента какого-то - то так пиши:

Код


<head>
<style type="text/css">
.class {
   /* горизонтальный бегунок */
   overflow-x: hidden;
   /* вертикальный */
   overflow-y: scroll;
}
</style>
</head>

Код


<elem class="class">text</elem>

Если у всей страницы - то так:

Код


BODY {
   /* горизонтальный бегунок */
   overflow-x: hidden;
   /* вертикальный */
   overflow-y: scroll;
}

Автор: Grig 10.10.2005, 03:39

Еще не легче..
Все абсолютно правильно то что Вы говорите, только мы наверное немного недопоняли друг друга. Вот что у меня получается: Горизонтальный бегунок действительно убирается, но сайт все равно центрируются на перегружаемом фрейме...
Хорошо, поставлю вопрос несколько по другому: Как постоянно держать в фокусе левую верхнюю часть странички?
Добавлено @ 03:49
Вот что мне надо:

Код


onclick="movescroll()"

movescroll() - это функция, которая перемещает вертикальный бегунок в самое верхнее положение, а горизонтальный в самое левое.

Можно так сделать?

Автор: Sardar 10.10.2005, 17:07

Вызывай window.scrollTo(0,0), естественно в ифрейме, на скролируемом слое пиши scroll(Left|Top)=0

Автор: Grig 11.10.2005, 01:57

Сканируемый слой (который перегружается в ифрейме) в скроллах вообще как-то не нуждается.. Дело не в нем. Я его и так подогнал по высоте - ширине - все нормально.

А теперь пишу вот такую строчку:

Код


<a href="#" onclick = "window.scrollTo(0,0); parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>' ;">

Не помогает!!

Автор: Grig 11.10.2005, 06:12

Понял в чем дело:
Перегружал-то я один фрейм из другого. И типа к основной странице это дело не имело..
Сейчас зато бегунки прыгают...
Т.е. сначала центрируют фрейм, а потом возвращаются в нулевую позицию..
А можно сделать так, чтобы перемещался на ноль только горизонтальный, а вертикальный бы оставался там, где ему вздумаетмся (т.е. центрировался на фрейме)?

Автор: Sardar 11.10.2005, 17:05

Цитата(Grig @ 11.10.2005, 05:12)

Сейчас зато бегунки прыгают...

Так и будет)
Не пойму почему у тебя странца центрируеться, это абнормальное поведение браузера, если ты только якоря не используешь. Попробуй разбораться в коде, может какой JS скрипт страницу скролит.

Как выход, создай якорь (<a name="imja">) в начале страницы, а при перезагрузки в URL указывай #imja, тогда браузер должен прыгать на якорь.

Автор: Grig 12.10.2005, 02:41

все бы хорошо, только я перегружаю один фрейм из другого, а якорь должен стоять на главной странице.
Вот якорь на главной странице:

Код


<TD vAlign=top height=130 width="90"><!--Шапка--->
    <a name="ltop">
      <img border="0" src="images/img001.jpg" width="90" height="130"> 
    </a>
</TD>

А вот одна из безуспешных моих попыток кинуть на него ссылочку из фрейма, и в то же время перегрузить другой фрейм:

Код


<a href="'top.document.href=#ltop'" onclick = "parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>' ;">
подробнее...        
</a>

Вобщем, что только не пытался делать..
Как это можно доделать, скажите пожалуйста..

Автор: Sardar 12.10.2005, 12:05

Цитата(Grig @ 12.10.2005, 01:41)

только я перегружаю один фрейм из другого, а якорь должен стоять на главной странице

А в чём проблема? У каждого фрейма свой URL, следовательно свой якорь. На главной странице URL лежит в адресной строке браузера, а во фреймах свои URL'ы с якорями на самый верх.

Выложи разметку, а то чую извращаешся...

Автор: Grig 13.10.2005, 03:52

Sardar, блин обломно что у нас часовые пояса разные, ну да ладно.
Интересно, как можно выложить разметку?
На пальцах ее объяснить? smile

Хорошо, как поставить такую ссылку url+якорь?

Автор: Sardar 13.10.2005, 13:32

Цитата(Grig @ 13.10.2005, 02:52)

Интересно, как можно выложить разметку?

Буквально берёшь рамзетку страницы с фреймами и выкладываешь в теги {code=html}

Цитата(Grig @ 13.10.2005, 02:52)

Хорошо, как поставить такую ссылку url+якорь?

Серьёзно?

Обычный URL это: .http://любой.домен/любой/путь/файл?параметр=значение#имя_якоря

Автор: Grig 14.10.2005, 02:08

Да елы-палы!!
Я не то имел ввиду!
Хорошо, я во фрейме поставлю такую ссылочку, и что? Он загрузит в себя копию Главной странички передавая ей такой-то параметр с таким-то значением и фокусирую ее на этом якоре!
Весело, да?
Попробую объяснить все-таки свою проблемку:
Вот главная страничка index.html (в ужатом, конечно виде.)

Код


<HTML><HEAD>
<TITLE>
Иркутскгипродорнии</TITLE>
</HEAD>
<BODY>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="1000" border=0>
  <TBODY>
  <TR>
    <TD vAlign=top height=130 width="90">
<!--Допустим, на эту картиночку поставим якорь--->
<a name="yakor">
      <img border="0" src="images/img001.jpg" width="90" height="130">
</a>
</TD>
<td rowspan="9" colspan="8">
<!--Вот это главный фрейм, в котором все будет перегружаться--->
<iframe src="main.htm" name="FR"> </iframe>
</td>

<td>
<!--А вот это фрейм, в котором отображается ASP-страница, которая берет из БД первые 5 новостей, но это не сильно важно--->
<iframe src="news.asp" name="FRnews"></iframe>
</td>
</tr>
</table>

Добавлено @ 02:15
Теперь страница news.asp (также сильно сокращена)

Код


<HTML><HEAD>
<TITLE>Новости</TITLE>
<META http-equiv=content-type content="text/html; charset=windows-1251">
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" background="images/fon.jpg" LINK="#190872" ALINK="#190872">




    <table border="0" width="127" id="table2">
<%
RS.MoveFirst
while not RS.eof
%>
<tr>
<td><font face="Arial" size="2"><font color="#110550">
<b>
<%=RS("d")%>
</b>
<%=RS("headd")%>
</font>
<a href="#" onclick = "parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>' ;">
        подробнее...
</a></font></td>
</tr>
<%
RS.MoveNext
Wend
%>
</table>

Вопрос такой: как ссылку

Код


<a href="#" onclick = "parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>' ;">
        подробнее...        
</a>

сделать так, чтоб бегунки браузера фокусировались на якоре ГЛАВНОЙ(index.html) страницы??

Код


<a href="что-то....."

А что именно?
Вот еще может что быть: может не на href повесить это событие, а на onclick??

Автор: Grig 14.10.2005, 02:26

При этом перегружатся должен будет только главный фрейм(FR) на странице index.html
А сама страничка index.html должна фокусироватся на указанном якоре(yakor)
Вдобавок с фреймом новостей (FRnews) ничего не должно происходить. Вот.
Объяснил как смог...

Автор: Sardar 14.10.2005, 12:47

Во, оказываеться уже два фрейма, главная страница не подвижна и только фрейм с контентом скролиться? Тогда на главной странице выбери любой элемент, хоть якорь, хоть таблица, и вызови scrollIntoView();. Это тупо проскролирует запрошенный элемент так что бы он был виден. При этом я понял что главная страница у тебя очень высокая, а фрейм с новостями внизу, при клике ты хочешь что бы всё прыгало наверх?

Автор: Grig 15.10.2005, 15:48

Не совсем так.
страничка у меня получилась немного шире, чем я задумывал, фрейм со списком новостей находится справа, а основной фрейм посередине.
и когда я из одного фрейма перегружаю другой, она центрирует себя на перегружаемом фрейме (повторяюсь, блин).
А можно примерчик как вызвать scrollIntoView(); например на этом вот рисунке:

Код


<img border="0" src="images/img001.jpg" width="90" height="130">

Цитата(Sardar @ 14.10.2005, 12:47)

При этом я понял что главная страница у тебя очень высокая, а фрейм с новостями внизу, при клике ты хочешь что бы всё прыгало наверх?

Совершенно верно!
На верх и в левый угол (там кстати и расположена эта картинка)

Автор: Sardar 15.10.2005, 20:11

Дай идентификатор картинке, далее document.getElementById(<идентификатор>).scrollIntoView().

Цитата(Grig @ 15.10.2005, 14:48)

Совершенно верно!

scrollIntoView как и window.scrollTo будут "прыгать" после загрузки страницы. Тебе это не нравиться (если хочешь, можно сделать плавно, Aliance код писал). В чём проблема не пойму, то у тебя страница сама прыгает в левое место, такое возможно только если у неё указан якорь левый; то вдруг нужно прыгать наверхм, что через window.scrollTo решаеться просто, глянь на "стрелку вверх" у каждого топа, жми, это то что тебе нужно?

Автор: Grig 17.10.2005, 03:09

Не помогает...
Делаю идентификатор на рисунке(pic1):

Код


<img border="0" src="images/img001.jpg" width="90" height="130" id="pic1">

Теперь в файле news.asp делаю следующие изменения:

Код


<a href="#" onclick = "parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>' ; document.getElementById('pic1').scrollIntoView();">

Попробую объяснить на языке условностей smile

На странице есть рисунок с буквой "А". И есть два фрейма.
Все это по размерам шире, чем экран пользователя.
И мне надо сделать так, чтобы не происходило в этих двух фреймах, всегда было видно эту букву "А"!
А происходить там может только следуещее:
Из одного фрейма перегружается другой

Код


<a href="#" onclick = "parent.FR.location.href = 'news_fr.asp?id=<%=RS("id")%>'">
        подробнее...        
</a>

Вот тут и надо что-то прописывать, а что - я не знаю.

Автор: Sardar 17.10.2005, 16:42

Вот эта строчка document.getElementById('pic1').scrollIntoView(); должна кидать исключение, т.к. картинка то у тебя в главном окне (тот что ифреймы содержит), а выбираешь ты обьект из текущего фрейма. Пишем parent.document.getElementById('pic1').scrollIntoView();, при этом в главном окне (родительском по отношению к фрейму, в котором находиться ссылка) должен быть обьект(в смысле любой отображаемый HTML элемент) с идентификатором pic1. А ещё лучше замени эту строчку на parent.scrollTo(0,0).

Чую шаг за шагом мы всё таки придём к решению smile

Было бы проще если бы ты линк выложил, где эти фреймы разгляеть можно.

Автор: Grig 18.10.2005, 02:13

Надо же в чем проблема-то оказалась!!

Код


<a href="#" >

Вот в этой вот решеточке!!!

Я пока делаю так:

Код


<a href="news.asp" >

Sardar, а как поставить туда пустую ссылку?
Дабы и фрейм со ссылками не перегружать и все красоты обозреть?
Добавлено @ 02:16
А вот кстати линк выложить я пока не могу.
Мы еще сайт не выложили, хотя он в принципе готов.
Но как выложим обязательно похвастаюсь smile

Автор: Grig 18.10.2005, 12:27

Раскопал!!

Код


void(0);

Sardar,
Aliance,
спасибо!