| |
|
|
| | Задача: передать на сервер параметр, связанный с вертикальным скроллингом.
Для макетирования созданы две страницы.
Первая страница имеет код
</head>
<body onscroll="func()" >
<script>
function func()
{
var scry=document.body.scrollTop*1;
document.write('<img style="display:none;" src="scroll.php?top='+scry+'">');
}
</script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
</body>
|
А вторая страница с именем scroll.php имеет такой код:
$top = $_GET['top'];
$adr = "scroll/" . $top . ".txt" ;
$file = fopen ($adr, "w") ;
fputs ($file, $top) ;
fclose ($file) ;
|
По идее, при перемещении ползунка вертикальной прокрутки первой страницы должен запускаться файл scroll.php, код которого создаст в папке scroll некий текстовый файл, имя которого отразит перемещение ползунка.
Но на практике схема работает лишь частично: при трогании ползунка прокрутки первой страницы исчезает вся выводимая этой страницей информация (цифры 0-9), а также сам "градусник". При этом всякий раз формируется текстовый файл с именем 4.txt
Как бы заставить работать эту конструкцию? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(20.04.2008 в 20:08)
| | | Похоже, что причина в скрипте.
Для простоты я закомментировал вообще весь код в файле scroll.php, но при трогании ползунка все равно весь выводимый текст исчезает и остается только чистая страница даже без "градусника"! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(20.04.2008 в 20:56)
| | | Здравствуйте, Владимир55!
Проблема в том, что метод document.write() после завершения документа переписывает его заново. Воспользуйтесь свойством .innerHTML, а лучше воспользуйтесь любой готовой javascript библиотекой для реализации этого с помощью ajax. | |
| |
|
|
| |
|
|
| |
для: Апельсин
(20.04.2008 в 21:11)
| | | Это для меня чрезвычайно сложно...
Более доступными средствами это нельзя осуществить? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(20.04.2008 в 23:07)
| | | можно заранее создать картинку и просто изменять ей атрибут src.
document.getElementById('img_id').src = 'scroll.php?top=' + scry;
|
| |
| |
|
|
| |
|
|
| |
для: Drago
(21.04.2008 в 02:36)
| | | Полностью код должен выглядеть так?
<body onscroll="func()" >
<script>
function func()
{
var scry=document.body.scrollTop*1;
document.getElementById('img_id').src = 'scroll.php?top=' + scry;
}
</script>
|
В этом случае функционирование html файла при перемещении ползунка прокрутки не нарушается.
Но... не вызывается файл scroll.php ! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 10:38)
| | | Не забудьте
| |
| |
|
|
| |
|
|
| |
для: Апельсин
(21.04.2008 в 10:41)
| | | То есть, полностью код должен выглядеть так?
</head>
<body onscroll="func()" >
<img id = "img_id" >
<script>
function func()
{
var scry=document.body.scrollTop*1;
document.getElementById('img_id').src = 'scroll.php?top=' + scry;
}
</script>
|
В этом случае система функционирует. Но:
1. вверху страницы выводится квадратик, отражающий отсутствующую картинку. Может, его можно чем-то заменить? Реальной картиночкой крошечного размера? Как это вписать?
2. прокрутка двигается как-то рывками. Вероятно, это связано с быстродействием сервера, и тут уже едва ли можно что то улучшить.
3. рождается множество файлов с именами от 0 до 1192. (разрешение экрана 800х600). А что должно быть исходя из природы скроллинга? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 10:38)
| | | - | |
| |
|
|
| |
|
|
| |
для: Drago
(21.04.2008 в 12:40)
| | | Что? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(20.04.2008 в 23:07)
| | | попробуйте так
<div id="scroll_param"></div>
<script>
function func()
{
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
document.getElementById('scroll_param').innerHTML = '<img style="display:none;" src="scroll.php?top='+scrollY +'">';
}
</script>
|
токо при XHTML-ом доктайпе это (в смысле определение прокрутки) не работает в ИЕ :-/ | |
| |
|
|
| |
|
|
| |
для: Lelik
(21.04.2008 в 09:11)
| | | Я использую обычный html файл (точнее, файл с расширением htm). И приведенный Вами, Lelik, код не нарушает его работу при движении ползунка. Но не вызывается файл scroll.php!
Причем проблема именно в том, что файл не вызывается, а не в отсутсвии GET параметра; для контроля этого обстоятельства я принудительно установил в файле scroll.php $top = 5 что бы он создал текстовой файл в любом случае, когда его откроют.
Как бы это исправить? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 10:44)
| | | попробуйте так, ибо приведенный выше код вставляет HTML как текст
<div id="scroll_param"></div>
<script>
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var oContainer = document.getElementById('scroll_param');
var oImg = document.createElement("IMG");
oImg.setAttribute('src', 'scroll.php?top='+scrollY);
oContainer.appendChild(oImg);
}
</script>
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(21.04.2008 в 11:00)
| | | Нет, почему то и так файл scroll.php не вызывается... | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 11:15)
| | | тогда вам может с помощью аякса передавать ему значения? в аттаче библиотека jQuery, чтоб по сети не искать.
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var sUrl = 'scroll.php';
$.get(
sUrl,
{
top: scrollY //сюда можно передавать любое количество параметорв :)
},
OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она
)
}
function OnAddParam(sData){
alert(sData);
}
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(21.04.2008 в 12:11)
| | | Приложение после скачивания имеет имя 52490-20080421121152.js Вероятно, это искажения, внесенные Форумом.
Вы не могли бы продублировать его в архивном виде? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 12:32)
| | | надо просто вставить джаваскриптовый файл
<script type="text/javascript" src="jquery.js"></script>
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(21.04.2008 в 17:51)
| | | Файл jquery.js положил в корень сайта, где и находится тестовая страница, а полный код на
той странице имеет вид:
<body>
<script type="text/javascript" src="jquery.js"></script>
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var sUrl = 'scroll.php';
$.get(
sUrl,
{
top: scrollY //сюда можно передавать любое количество параметорв :)
},
OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она
)
}
function OnAddParam(sData){
alert(sData);
}
|
При запуске страницы она выводит вот это:
function func() { var oBody = (document.body) ? document.body : document.documentElement; var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset; var sUrl = 'scroll.php'; $.get( sUrl, { top: scrollY //сюда можно передавать любое количество параметорв :) }, OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она ) } function OnAddParam(sData){ alert(sData); }
Файл scroll.php не запускается.
Очень хотелось бы увидеть весь предлагаемый Вами код вцелом, поскольку самостоятельно собрать его из кусочков я вряд ли смогу. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 18:27)
| | | забыл сказать про файл, которому jQuery аяксом передает данные:
header('Content-type: text/html; charset=utf-8');
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
print_r($_GET);
}
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(21.04.2008 в 19:47)
| | | Что-то я совсем уже запутался...
1. Вы говорите о каком-то еще новом файле? Или о коде файла scroll.php?
2. Каким бы ни был код принимающего файла, как я уже написал выше, этот файл не вызывается, и при запуске html файла выводится вот такое сообщение:
function func() { var oBody = (document.body) ? document.body : document.documentElement; var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset; var sUrl = 'scroll.php'; $.get( sUrl, { top: scrollY //сюда можно передавать любое количество параметорв :) }, OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она ) } function OnAddParam(sData){ alert(sData); } | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 20:25)
| | | 1. о scroll.php
2. давайте код посмотреть, как там оно у вас | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.04.2008 в 20:25)
| | | <script type="text/javascript" src="jquery.js"></script>
<script >
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var sUrl = 'scroll.php';
$.get(
sUrl,
{
top: scrollY //сюда можно передавать любое количество параметорв :)
},
OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она
)
}
function OnAddParam(sData){
alert(sData);
}
</script > | |
| |
|
|
| |
|
|
| |
для: AlexSol
(21.04.2008 в 21:42)
| | | Поскольку несмотря на все усилия, по прежнему ничего не работает, а приведу полностью коды обоих файлов.
Файл html содержит:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проба</title>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script >
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var sUrl = 'scroll.php';
$.get(
sUrl,
{
top: scrollY //сюда можно передавать любое количество параметорв :)
},
OnAddParam // если необходимо, чтоб по ответу серверного скрипта сработала функция, то это будет она
)
}
function OnAddParam(sData){
alert(sData);
}
</script >
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
</body>
</html>
|
Файл рнр содержит:
<?php
// СКРИПТ КОНТРОЛЯ ПЕРЕМЕЩЕНИЯ ДВИЖКА СКРОЛЛИНГА
header('Content-type: text/html; charset=utf-8');
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
$top = 5; // Для настройки
$adr = "scroll/" . $top . ".txt" ;
$file = fopen ($adr, "w") ;
fputs ($file, $top) ;
fclose ($file) ;
}
?>
|
При этом html файл воспроизводить колонку цифр и при перемещении движка не "залипает", т.е. записанный в нем скрипт не мешает обычному воспроизведению текста. Но файл scroll.php не запускается и ничего не записывает.
Что же здесь не так? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(23.04.2008 в 15:50)
| | | ну канешно! а что же вы хотели :) ?! чтоб начал исполняться файл scroll.php вам надо при каком-то событии вызывать функцию func()
пример
| |
| |
|
|
| |
|
|
| |
для: Lelik
(23.04.2008 в 19:26)
| | | Какая то нерешаемая задача!
Поверите ли, в июле того года неделю сочиняли этот скрипт (на другом форуме), но дело так и кончилось ничем... Как-то все расплывается на множество уточняющих деталей, а конкретный работоспособный код создать так и не удается! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(24.04.2008 в 00:02)
| | | я сделал так, у меня запись в файл пошла
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проба</title>
<script type="text/javascript" src="jquery.js"></script>
<script >
function func() {
var oBody = (document.body) ? document.body : document.documentElement;
var scrollY = (oBody.scrollTop) ? oBody.scrollTop: window.pageYOffset;
var sUrl = 'scroll.php';
$.get(
sUrl,
{
top: scrollY //сюда можно передавать любое количество параметорв :)
}
)
}
</script >
</head>
<body onload="func()">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
</body>
</html>
|
и scroll.php
<?php
// СКРИПТ КОНТРОЛЯ ПЕРЕМЕЩЕНИЯ ДВИЖКА СКРОЛЛИНГА
header('Content-type: text/html; charset=utf-8');
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
$top = 7; // Для настройки
$adr = $top . ".txt" ;
$file = fopen ($adr, "w") ;
fputs ($file, $top) ;
fclose ($file) ;
}
?>
|
| |
| |
|
|
