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

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

Форум программистов > Вёрстка веб-сайтов > скроллинг адвансд

Автор: underoath 22.7.2005, 18:26

Добрый день! Плз подскажите. Я верстаю сайт. Но не знаю, как технически осуществить мою идею. Суть см. ниже.
Посмотрите примерную схематическую картинку моего сайта ЗДЕСЬ:
- >http://musicxchange.narod.ru/prokrutka_img.png
Content space-область, где располагается текстовый контент. Поскольку это пространство небольшое, нужно делать прокрутку. Я где-то видел прокрутку с помощью 2-х кнопок вверх и вниз (см рисунок). Хотелось бы что-то подобное.
И ещё. Тут есть важная деталь. Справа на картинке горизонтальной колбасой идет узор. Он расположен под текстовой областью и нужно, чтобы при прокрутке текста в content space с помощью кноп вверх/вниз, узор, находящийся под текстом и являющийся фоновым рисунком сайта не двигался вместе с текстом, а оставался фоном.
Заранее благодарен, Андрей.

Автор: Sardar 24.7.2005, 02:18

Контент ложи в слой с стилем overflow: auto;
Прокрутку програмно делать не нужно, это не удобно, скролбары привычней. В слюбом случае скролишь изменяя свойство scrollTop, scrollLeft у слоя с контентом.
Бекграунд фиксируешь через стиль background-position: fixed;

Вообще это в вёрстку smile

Автор: Dave 25.7.2005, 09:52

Цитата(Sardar @ 24.7.2005, 02:18)

Прокрутку програмно делать не нужно, это не удобно, скролбары привычней.

мне нужно сделать скролл именно программный, не подскажете как ?
вот пример http://www.shock.com.ru/images/1.jpg
+ перемещение в самое начало текста и в самый конец, но главное программный скролл.

Автор: Sardar 25.7.2005, 14:41

Используем scrollTop как я сказал выше. Вот простой пример. Врёстка тяп-ляп, смотри только на код smile

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
#platf {
  overflow-y: hidden;
  width: 400px;
  height: 300px;
  border: 1px solid navy;
}
#scroll {
  position: relative;
  float: right;
  border: 1px solid red;
  height: 300px;
  width: 25px;
}
#but_top {
  clear: both;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid blue;
}
#but_bot {
  clear: both;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border: 1px solid blue;
}
</style>
<script type="text/javascript">
<!--
function scroll_up() {
  document.getElementById("platf").scrollTop-=20;
}

function scroll_down() {
  document.getElementById("platf").scrollTop+=20;
}
//-->
</script>
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0">
<tr><td> 
<div id="platf">
Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст 
<br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  
</div></td>
<td><div id="scroll" onselectstart="return false;"><span id="but_top" onmousedown="scroll_up();">Up</span><span id="but_bot" onmousedown="scroll_down()">Dw</span></div></td>
</tr></table>
</body>
</html>

Автор: Dave 25.7.2005, 15:51

Спасибо большое !
а не подскажешь зачем
тут

Код


<div id="scroll" onselectstart="return false;">

вот это: onselectstart="return false;"
у меня и без этого работает, может это помогает избежать каких то глюков ? ...

Автор: Sardar 25.7.2005, 16:36

Это помогает отключить селекцию на кнопках под ИЕ, они ведь текстовые smile

Автор: Dave 26.7.2005, 16:02

Точно! Помогает Ж) Спасибо

Автор: Dave 4.8.2005, 11:53

На заметку (может кому то пригодится ):
1. для того чтобы нормально отображалось в Firefox и Opera кроме имеющегося

Код


  overflow-y: hidden;

нужно добавить еще

Код


  overflow: hidden;

Если не добавить то содержимое дива будет выезжать за его пределы
2.

Код


 <div id="scroll" onselectstart="return false;">

onselectstart в Firefox и Opera не помогает (как сделать чтобы помогло ?) в итоге у себя я юзал не

Код


<span onmousedown="scroll('platflog1','down');">Dw</span>

a сделал ссылкой:

Код


<a href="javascript:void(0);"  onmousedown="scroll('platflog1','down')">Dw</a>

в этом случае див с onselectstart просто не нужен.

Ну и вопрос:
В Опере скролл не работает, в Firefox и IE пашет, NN не пробовал.
Как сделать чтобы скролл заработал в Опере ?

Автор: underoath 16.8.2005, 00:00

тема такая. при использовании кода Сардара нужно будет клацать по кнопам
"вверх" и "вниз" для скроллинга. у меня пожелание было иное. мне надо, чтобы контент скроллился при НАВЕДЕНИИ
курсора на эти кнопы. я поменял в этом коде onmousedown на onmousemove.
вроде получилось, но одиночного наведения курсорана кнопы здесь мало, надо постоянно елозить крысой по кнопе.
сие не есть куль. какой-нить солюшен этого есть??