VPF::передача значений переменных из Javascript в PHP

TetraHC

Дата 8.6.2009, 17:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Всем добрый день! Пишу сайтик http://cabel.skrovla.ru

Одним из условия заказчика, было реализовать строку подсказки поиска - введите например букву "а" (русскую) в поле поиска кабеля, и вылезет подсказка.
Собсвенно элемент позиционирован как:

position:absolute

Так вот дело в том, что в зависимости от экрана браузера координаты поля ввода меняются. Из можно определить ТОЛЬКО через JAVASCRIPT, что я с успехом делаю. Но вот далее, надо вывести css файл с этими координатами (я делаю это на php), и вот тут вопрос - как передать значения left и top в php? Вариант через GET не прокатит, так как адреса у страницы php нет - это МОДУЛЬ JOOMLA.

Вопрос - как быть? Код:

Код


<?php

//ОПРЕДЕЛЕНИЕ ПОЛЬЗОВАТЕЛЯ

$user =&JFactory::getUser();
$usertype=$user->get('usertype');
if(($usertype=='Manager') or ($usertype=='Administrator') or ($usertype=='Super Administrator')){
$manager=1;
}
else{
$manager=0;
}
?>


//ОПРЕДЕЛЯЕМ РАЗМЕР ЭКРАНА
<script type="text/javascript">
function getElementPosition(elemId)
{
   var elem = document.getElementById(elemId);

   var w = elem.offsetWidth;
   var h = elem.offsetHeight;

   var l = 0;
   var t = 0;

   while (elem)
   {
       l += elem.offsetLeft;
       t += elem.offsetTop;
       elem = elem.offsetParent;
   }

   return {"left":l, "top":t, "width": w, "height":h};
}

<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>

    <div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                <input type=radio name="answer" value="1" checked>поиск везде  
                <input type=radio name="answer" value="2">поиск в новом  
                <input type=radio name="answer" value="3">поиск в госрезерве<br><br>
                <input type="text" name="mytext" size="40" id="txt4" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" style="width: 263px; height: 0px;"></div>
            </form>
        </div>
</body>
pos = getElementPosition("txt4");
var left = pos.left; 
var top = pos.top;
var width = pos.width;
var height = pos.height;
var x0=left;
var y0=top+height;
document.write(
"Угол левый x0-" + x0 + "[px] y0-" + y0 + "[px] ширина" + width + "[px]  Начальные данные top-" + top + " height-" + height + "."
);
<style type="text/css" media="screen">        
    }
    #txtHint {
        position: absolute;
        <?php
            if($manager!=1){
                echo "left: 719px;";
                echo "top: 316px;";
            }
            else{
                echo "left: 719px;";
                echo "top: 546px;";
            }
        ?>
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
    }
</style>

Примечание - строка "<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>" отношения к делу не имеет, это javascript для передачи данных технологией AJAX

Собсвтенно на JAVA мы определяем postion left и top, и надо их вставить вместо текущий фиксированных позиций ( 719px, 316px для обычного юзера и 719px и 546px для менеджера).

PS Есть вариант отказатся от php и сделать вывод только методом JAVSACSRIPT (documet.write), но я так и смог заставить document.write выводить html код в тело страницы (хотел делать вставки кода типа <input name="name" value="width" type=hidden>

Aliance

Дата 9.6.2009, 08:37 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Я думаю Вы копаете не в ту сторону. Зачем PHP что-то знать о координатах? Мухи отдельно, котлеты отдельно - помните?
Делайте при загрузке страницы автоформатирование на JS.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

TetraHC

Дата 9.6.2009, 11:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Цитата(Aliance @ 9.6.2009, 08:37)

А как мне тогда средствами JS вывести в тело html следующие строки:

Код


<style type="text/css" media="screen">        
    }
    #txtHint {
        position: absolute;
        echo "left: X";
        echo "top: Y";
     }
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
    }
</style>

, где X и Y - координаты элемента <input id="txt4" ...>

?

Это сообщение отредактировал(а) Aliance - 9.6.2009, 12:59

Aliance

Дата 9.6.2009, 13:02 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Код


window.onload = function()
{
    var elem = document.getElementById( 'txtHint' );
    elem.style.top = '30px';
    elem.style.left = '1000px';
}

Я показал как статично задать координаты. Тебе же нужно не статично, а динамически, прочитав их из соотв. координат нужного тебе элемента ( т.е. input с id='txt4' ). Как это сделать - ответит тебе поиск по форуму, просмотр прикрепленных тем и FAQа

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

TetraHC

Дата 9.6.2009, 13:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Цитата(Aliance @ 9.6.2009, 13:02)

Код


window.onload = function()
{
    var elem = document.getElementById( 'txtHint' );
    elem.style.top = '30px';
    elem.style.left = '1000px';
}

Погоди, но ведь элемент c id="txt4' появится уже после выполение JS? Как же я узнаю при загрузки страницы положение того элемента, которого нет?

Кстати, спасибо за ответы и попытку мне помочь. Ты первый (!) кто это сделал на 3 форумах!

Aliance

Дата 9.6.2009, 13:09 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

window.onload - событие, которое выполнится только после полной загрузки документа вместе со всем его содержимым (подробнее о событиях - по ссылке у меня в подписи). После этого мы будем уже знать о существовании элемента с id равным txt4.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

TetraHC

Дата 15.6.2009, 11:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Итак, я продолжаю ковырять свою задачу. Немного разобрался с кодом, понял что такое window.onload. Пока, для отладки скрипта, не вешаю его на window.onload - как получу 100% рабочий вариант, то повешу.

Итак имеем код:

Код


<div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                
                <input type="text" size="40" id="txt4" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" valign="top" style="width: 50px; height: 0px;" bgcolor="white"></div>
            </form>
</div>
<script language="JavaScript" type="text/javascript">

function getElementPosition(elemId) {
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
    l += elem.offsetLeft;
    t += elem.offsetTop;
    elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};}

var elem1 = document.getElementById('txtHint');
var p = getElementPosition('txt4');
var left=p["left"];
var top=p["top"];
var h=p["height"];
var w=p["width"]-2;

var x0=left-1;
var y0=top+h;
    elem1.style.left = x0 + 'px';
    elem1.style.top = y0 + 'px';
    //elem1.style.width = w + 'px';
document.write("x0 "+x0+"px y0 "+y0+"px.Слева "+left+"px Сверху "+top+"px Высота "+h+ "px Ширина "+w+"px");
</script>

Итак, что мы имеем с "Гуся"

1) Скрипт работает в FireFox, Opera. Но только не в IE - там он определяет координаты как 0
2) В IE не работает команда

Код


elem1.style.width = w + 'px';

Помогите одолеть эту Майкрософтовую гадину! Пример работы скрипта с определением координат тут - http://cabel.skrovla.ru

Aliance

Дата 15.6.2009, 15:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Возможно это именно от того что ты не сделал как я говорил - не повесил скрипт в window.onload и IE не видит еще этого элемента. Это лечится нулевым setTimeout.
Еще проблема может быть в том, что для того чтобы прочитать какое-то свойство из elem.style.*, нужно чтобы оно было явно объхявлено для элемента (через стили, например).

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

TetraHC

Дата 15.6.2009, 16:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Цитата(Aliance @ 15.6.2009, 15:30)

C windows.onload работа скрипта не связана никак - в теле html скрипт 100% выполняется после этого элемента. Фишка в том, что не срабатывает (именно в IE) функция getElementPosition - возращает нули на выходе. В других браузерах все ОК

Astraller

Дата 15.6.2009, 16:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 1
Всего: 5

Цитата(TetraHC @ 15.6.2009, 16:15

)

C windows.onload работа скрипта не связана никак - в теле html скрипт 100% выполняется после этого элемента. Фишка в том, что не срабатывает (именно в IE) функция getElementPosition - возращает нули на выходе. В других браузерах все ОК

Фишка в том что этой функцией пользуется пол интернета, включая меня лично, и она вполне адекватно работает во всех актуальных браузерах.
А теперь скажите какой версии у вас IE.

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

TetraHC

Дата 15.6.2009, 19:24 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

7.0.5730.13 точная версия

Значит, функция рабочая? Хм. Очень интересно....

Astraller

Дата 15.6.2009, 20:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 1
Всего: 5

В 7 версии работает точно, за 5 я бы не поручился, но начиная с 6....

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

TetraHC

Дата 15.6.2009, 22:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Цитата(Astraller @ 15.6.2009, 20:33)

В 7 версии работает точно, за 5 я бы не поручился, но начиная с 6....

Ну тогда говоря русским языком "мой косяк". Но глаз уже так замылен на сайте, что не понимаю где...Я вроде 3 функции разные там проверил ( GETBOUNDS, в инете тоже есть) - т.е. где то косяк вне :(

Astraller

Дата 15.6.2009, 23:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 1
Всего: 5

Цитата(TetraHC @ 15.6.2009, 22:09

)

Вы бы выложили в сеть примерчик какой-нить мы бы посмотрели и помогли если что smile

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

TetraHC

Дата 16.6.2009, 08:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 8.6.2009

Репутация: нет
Всего: нет

Листинг примера:

Код


<style type="text/css" media="screen">
    #txtHint {
        position: absolute;
        left: 800px;
        top: 300px;
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
        background: #fc0;
    }
</style>
<!-- -->

<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>

    <div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                <input type="text" size="40" id="txt4" name="mytext" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" valign="top" style="width: 50px; height: 0px;" bgcolor="white"></div>
            </form>
        </div>
<script language="JavaScript" type="text/javascript">

/*function getElementPosition(elemId) {
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
    l += elem.offsetLeft;
    t += elem.offsetTop;
    elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};}

var elem1 = document.getElementById('txtHint');
var p = getElementPosition('txt4');
var left=p["left"];
var top=p["top"];
var h=p["height"];
var w=p["width"]-2;*/

function getBounds(element)
{
  var left = element.offsetLeft;
  var top = element.offsetTop;
  for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
  {
    left += parent.offsetLeft - parent.scrollLeft;
    top += parent.offsetTop - parent.scrollTop
  }
  return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

var elem1 = document.getElementById('txtHint');
var element = document.getElementById('txt4');
var bounds = getBounds(element);

var left=bounds.left;
var top=bounds.top;
var h=bounds.height;
var w=bounds.width-2;
var x0=left-1;
var y0=top+h;
    elem1.style.left = x0 + 'px';
    elem1.style.top = y0 + 'px';
    //elem1.style.width = w + 'px';
document.write("x0 "+x0+"px y0 "+y0+"px.Слева "+left+"px Сверху "+top+"px Высота "+h+ "px Ширина "+w+"px");
//var br=this.getBoundingClientRect();
//document.write("Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom);
</script>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »