Прокрутка без скрола
Здраствуйте, у меня вопрос, как можно сделать прокрутку текста находящегоя в форме по кнопкам, тоесть чтоб скрола небыло видно.
нажимаю на стрелочку и текст прокручивается на строку в низ. тоесть как в яндексе картинки. Гуру, подскажите пожалуйста. |
задать свойство overflow:hidden; чтобы не появлялись полосы прокрутки, а затем повесить обработчики событий на клавиши которые будут управлять прокруткой и менять свойство top.
|
Zibba, спасибо огромное, только мне не на клавиши а на рисунок в виде стрелки надо.
может у когонибудь пример есть, как сделать можно. |
Ну если на ирсунок в виде стрелки, то тогда повесите обработчик onclick() на этот рисунок.
|
В общем будет как то так (проверки уже сами повставляете, просто идею показываю):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll</title>
</head>
<style type="text/css">
#content{
position:relative;
overflow:hidden;
margin:2px;
height:100px; width:240px;
border:solid 1px #000;
font-size:16px;
}
#down, #up{
margin:2px;
background:#eee;
border:solid 1px #000;
width:60px;
cursor:pointer;
}
#text{
position:absolute;
}
</style>
<script type="text/javascript">
var top = 0;
function up(){
var text = document.getElementById('text');
top = top - 20;
text.style.top = top+'px';
}
function down(){
var text = document.getElementById('text');
top = top + 20;
text.style.top = top+'px';
}
</script>
<body>
<div id="content">
<div id="text">
1:<br>
2:<br>
3:<br>
4:<br>
5:<br>
6:<br>
7:<br>
8:<br>
9:<br>
10:<br>
</div>
</div>
<div id="up" onclick="up();">Вверх</div>
<div id="down" onclick="down();">Вниз</div>
</body>
</html>
|
Zibba, огромное спасибо что сделали, то что надо ;)
ТЕМУ МОЖНО ЗАКРЫВАТЬ, ЕЩЕ РАЗ СПАСИБО Zibba ЗА ОКАЗАННУЮ ПОМОЩЬ |
А если можно еще как сделать чтобы в опере работало, а то у меня чета не хочет, только в ие.
как сделать чтобы если несколько таких форм на странице чтобы счетчик не перекидывал. пример: отмотал первую форуму, нажимаешь например в низ или верх на другой то автоматом перекидывает на ту строчку что смотрел в первой форме. onclick="down(значение ид для разных форм);
<script type="text/javascript">
var top = 0;
function up(zncenie){
var text = document.getElementById(zncenie);
top = top - 30;
text.style.top = top+'px';
}
function down(zncenie){
var text = document.getElementById(zncenie);
top = top + 30;
text.style.top = top+'px';
}
</script>
|
Цитата:
В опере не знаю почему не пашет, не могу проверить. В сафари и лисе работает O_o |
Zibba, спасибо, попробуем.
|
неполучается что то у меня, то крутится но работает попордку, сначала одна форма потом другая, то вобще ничего не работает.
так еще пробывал тож не хочет
<script type="text/javascript">
function up(index){
var top(index) = 0;
var text = document.getElementById(index);
top = top(index) - 30;
text.style.top = top+'px';
}
function down(index){
var top(index) = 0;
var text = document.getElementById(index);
top = top(index) + 30;
text.style.top = top+'px';
}
</script>
|
Ну так понятно, индекс то вы передаете, но вот только используете его чтобы подсчитать общий top. Попробуй что то типа:
<script type="text/javascript">
var top[];
top[0] = 0;
top[1] = 0;
/*если полей прокрутки больше 2, то заводишь еще щетчики, top[2], top[3] и т.д.*/
function up(index, textInd/*индекс(номер) текстового блока, опустим 0 или 1*/){
var text = document.getElementById(index);
top[textInd] = top[textInd] - 30;
text.style.top = top[textInd]+'px';
}
function down(index,textInd){
var text = document.getElementById(index);
top[textInd] = top[textInd] + 30;
text.style.top = top[textInd]+'px';
}
</script>
|
Zibba, не работает, пробовал заместо textInd подставлять 1 нифига
а передовать надо так onclick="down(121,0); onclick="down(122,1); хотя я с пробелом и без него пробовыл не выходит. так делал тож ничего
<script type="text/javascript">
var top[];
var top[0] = 0;
var top[1] = 0;
function up(index){
textInd=1;
if(index==121){textInd=0;}
var text = document.getElementById(index);
top[textInd] = top[textInd] - 30;
text.style.top = top[textInd]+'px';
}
function down(index){
textInd=1;
if(index==121){textInd=0;}
var text = document.getElementById(index);
top[textInd] = top[textInd] + 30;
text.style.top = top[textInd]+'px';
}
</script>
|
Выложите полный код своего примера, вместе с html разметкой. А то я уже запутался.
|
Эт новерно я ступил, не правильно обьяснил.
вот код, эт оригинал, ну рабочий, только когда в одной форме к примеру все прокрутишь другая при нажатии уходит вниз настолькоже сколько открутил 1.
<style type="text/css">
#content{
position:relative;
overflow:hidden;
margin:3px;
height:250px; width:405px;
font-size:16px;
color: #56696E
}
#down, #up{
cursor:pointer;
}
#121, #122{
position:absolute;
}
</style>
<script type="text/javascript">
var top = 0;
function up(index){
var text = document.getElementById(index);
top = top - 30;
text.style.top = top+'px';
}
function down(index){
var text = document.getElementById(index);
top = top + 30;
text.style.top = top+'px';
}
</script>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="100%" style="border-collapse: collapse" height="337">
<tr>
<td bgcolor="#A8ADB2" height="33"> </td>
</tr>
<tr>
<td background="h1.gif" height="21"> </td>
</tr>
<tr>
<td height="24" width="100%" align="center">
<table border="0" width="1020" style="border-collapse: collapse" cellpadding="0">
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="107" height="366">
<p align="center">
<br>
<br>
</td>
<td width="411" background="c2.gif" height="366">
<div id="down" onclick="down(121);">
<center>>><img border="0" src="s1.gif" width="11" height="6"><<</center></div>
<br>
<div id="up" onclick="up(121);">
<center> >> <img border="0" src="s2.gif" width="11" height="6"> << </center></div>
<div id="content">
<div id="121">
<b>17:49 По итогам торгов на ММВБ курс доллара к рублю снизился на 28 коп., курс евро вырос на 18 коп.
17:33 Т.Голикова: Финансирование из федерального бюджета нацпроекта "Здоровье" в 2009г. не будет сокращено.
17:19 Госдума 25 февраля рассмотрит законопроект о госрегистрации прав на воздушные суда.
17:05 "Росатом" рассчитывает начать добычу урана на Эльконском месторождении в Якутии в конце 2011г.
16:51 Правительство РФ распорядилось дополнительно направить 17 млрд руб. на поддержку агропредприятий.
16:38 ЦБ РФ: Объем заключенных сделок на втором аукционе прямого РЕПО сегодня превысил 13,6 млрд руб.
</div>
<br>
</td>
<td width="60" background="c2.gif" height="366">
<p align="center">
<br>
<br>
</td>
<td width="393" background="c2.gif" height="366">
<div id="down" onclick="down(122);">
<center>>><img border="0" src="s3.gif" width="11" height="6"><<</center></div>
<br>
<div id="up" onclick="up(122);">
<center>>><img border="0" src="s4.gif" width="11" height="6"><<</center></div>
<div id="content">
<div id="122">
<b>jhgsadkfhskjfsf.</b><br>
20:33 Молдавия выступает за открытие в РФ дополнительных таможенных пунктов для экспорта винодельческой продукции.
19:59 В.Путин поздравил актера О.Янковского с юбилеем.
19:52 В Москве прокуратура выявила нарушения требований пожарной безопасности в 165 детских учреждениях.
19:35 Фондовые торги в США открылись повышением основных индексов на фоне корпоративных новостей.
19:00 Торги на российском рынке акций закрылись разнонаправленным движением индексов.
18:46 В Тольятти задержан подозреваемый в убийстве двух малолетних девочек.
18:29 Президент РФ поздравил главу администрации НАО И.Федорова с вступлением его в должность.
18:24 Оппозиционные партии Грузии требуют от М.Саакашвили до 9 апреля 2009г. уйти в отставку.
18:03 В начале марта 2009г. четыре олимпийских объекта стоимостью 22 млрд руб. будут предложены инвесторам.
</div>
</div><br>
</td>
<td width="49" height="366" background="c3.gif"> </td>
</tr>
<tr>
<td colspan="5">
<p align="center">
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="f1.gif">
<img border="0" src="f1.gif" width="1" height="268"></td>
</tr>
</table>
|
Ваша ошибка была в непраивльном назначении атрибута id элементов, который не может начинаться с цифры, в итоге переименовав 121 в t121 и 122 в t122 все работает нормально. + Как и говорил выше с флагами, все праивльно, за исключением того, что я ошибся в строчке
var top[];нужно было var top = []; В общем у меня работает и в IE, и в FF и в Opera. Исправьте нужным образом стили 121 на t121 или подобные, id у элементов аналогичным образом. И делайте вызов функции следующим образом
onclick="down('t121',0);"
а не просто передавая число onclick="down(121);"ну и по аналогии с up
onclick="up('t121',0);
Проверял на следующем скрипте:
var top = []; top[0] = 0; top[1] = 0;
function up(index,indCol){
var text = document.getElementById(index);
top[indCol] = top[indCol] - 30;
text.style.top = top[indCol]+'px';
}
function down(index,indCol){
var text = document.getElementById(index);
top[indCol] = top[indCol] + 30;
text.style.top = top[indCol]+'px';
}
|
Zibba, огромное спс все работает, и в опере в том числе, но раньше не работало, скока я вам должен?
|
Ничего, быол приятно помочь. К тому же было видно, что Вы пытались разобарться, а не тупо предъявили как многие "Сделайте вот так", а потом еще "Че тут не так как я хотел работает!?" :)
|
Zibba, огромное вам человеческое спасибо, уважаю таких люей, потомучто сам такой ;)
|
нужна помощь.. нужно сделать прокрутку для содержимого одного из элементов div при нажатии на картинки. js не знаю, поэтому просто ищу подходящий код. Тот что был на первой странице вроде стал работать как надо, но не получаются 2 вещи. Текст у меня прокручивается бесконечно, т.е. текст заканчивается, дальше текст исчезает и прокручивается черный фон и вверх то же самое. Можно ли как-то останавливать прокрутку? И эта прокрутка работает прыжками, а как сделать плавную?
|
:-? можно.
|
Подскажите как сделать такой скролл: http://emfire.ru/
|
| Часовой пояс GMT +3, время: 14:43. |