webew
Войти » Регистрация
 
PHP

Всплывающий DIV с данными из БД

24 февраля 2010, 0:19
Автор: Mirage
Здравствуйте! Такая проблема. Постраничная навигация. В ней динамически создаются блоки, в блоках отображается информация из MySQL. Как сделать так, чтобы по клику по выбранному DIV, всплывал поверх другой DIV с точно такими же данными как у блока по которому кликали. Без jQuery. Спасибо за помощь.
<?
$num = 15;
$page = $_GET['page'];

$posts = mysql_result($result, 0, 0);
$total = intval(($posts - 1) / $num) + 1;
$page = intval($page);
if(empty($page) or $page < 0) $page = 1;
if($page > $total) $page = $total;
$start = $page * $num - $num;
$result = mysql_query("SELECT * FROM plitka LIMIT $start, $num");
while ( $postrow = @mysql_fetch_array($result))
{
echo "<div id='catalog'>";
echo "<img class='plitka' src=".$postrow['url_plitka']."><br>".$postrow['collection']."<br> ".$postrow['name_plitka']."<br>".$postrow['HxWxT']."<br>Цена ".$postrow['price']." руб.";
if ($postrow['orient']=="декор" or $postrow['orient']=="бордюр" or $postrow['orient']=="карандаш") echo "/шт."; else echo "/м кв.";
echo "</div>";
}
?>
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

bur

Mirage
всплывал поверх другой DIV с точно такими же данными как у блока по которому кликали

Поясните задачу, не совсем понимаю зачем такое нужно. "всплывать" див должен в той же позиции, что и исходный?
24.02.2010, 11:52
Ответить

Mirage

По центру экрана, при этом исхдный див исчезать не должен. А нужно это вот для чего. Есть каталог с товаром. Див отображает картинку и некоторые характеристики этого товара. Посетитель заинтересовавшись товаром щелкает по диву и всплывает новый див, но уже с полными характеристиками товара. Проблема в том, что я не знаю как передать всплывающему диву характеристики исходного. Исходный получает данные запросом в цикле while. Пробовал, но у меня ничего не получается. Это нужно каждому клику присвоить id, а потом по этому id "всплывать" новый блок... А как это реализовать?
24.02.2010, 16:33
Ответить

bur

Mirage
всплывал поверх другой DIV с точно такими же данными как у блока по которому кликали

Mirage
Див отображает картинку и некоторые характеристики этого товара. Посетитель заинтересовавшись товаром щелкает по диву и всплывает новый див, но уже с полными характеристиками товара.

Я так понимаю содержимое исходного и всплывающего блока всё же отличаются? Откуда берутся подробные характеристики?
24.02.2010, 16:52
Ответить

Mirage

Да, отличаются. Простово всплывающем диве информации больше. В всплывающем диве подробная информация. Она берется из этого запроса, просто добавляю к тому, который в while:
echo "<img class='plitka' src=".$postrow['url_plitka']."><br>".$postrow['collection']."<br> ".$postrow['name_plitka']."<br>".$postrow['HxWxT']."<br>Цена ".$postrow['price']." руб.<br>".$postrow['color']."<br> ".$postrow['room']."<br> ".$postrow['PEI']."<br> ";
24.02.2010, 17:18
Ответить

Mirage

Всё сделал работает в Mozilla и Opera корректно. Проблема с позиционированием всплывающего блока в IE. А так все получилось и работает.

while ( $postrow = @mysql_fetch_array($result))
{
$n=$postrow['id_plitka'];
?>
[syntax=css]<style>
.closeButton
{
    position: absolute;
    top: 0px;
    right: 0px;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 4px 2px 4px;
}
</style>

<script language="JavaScript" type="text/javascript">
var wObj; // переменная которая хранит div-который в данный момент проявляется
var sTimeout = 30; // через сколько вызывать следущую итерацию по уменьшению прозрачности (мс)
var op; // переменная отвечающая за текущую прозрачность
function AppearDivWnd() // ф-я которая проявляет объект (div-окно) хранящееся в переменно wObj
{
    if(op < 1)
    {
        op += 0.1;
        wObj.style.opacity = op;
        wObj.style.filter='alpha(opacity='+op*100+')';
        t = setTimeout('AppearDivWnd()', sTimeout);
    }
}
// ф-я получает на вход div-окно заносит его в переменную wObj и вызывает ф-ю AppearDivWnd() для того что бу его проявить
function AppearDivWndX(div)
{
    wObj = div; // присваеваем див-окно так как AppearDivWnd работает именно с wObj
    op   = 0; // начальная прозрачность 0
    wObj.style.opacity = 0; // начальная прозрачность 0
    wObj.style.display = 'block'; // окно стало видемым
    AppearDivWnd(); // начинаем его плавно проявлять...

}
function position()
{ var jam=div;
  div.style.top=div.offsetHeight + "px";
}
function ZDivWndClose(div)
{ div.style.display='none'; }

var flag=false;
var shift_x;
var shift_y;

function start_drag(itemToMove,e){
if(!e) e = window.event;
flag=true;
shift_x = e.clientX-parseInt(itemToMove.style.left);
shift_y = e.clientY-parseInt(itemToMove.style.top);

if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}

function end_drag(){ flag=false; }


function dragIt(itemToMove,e){
if(!flag) return;
if(!e) e = window.event;
itemToMove.style.left = (e.clientX-shift_x) + "px";
itemToMove.style.top = (e.clientY-shift_y) + "px";

if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
</script>

<div id="<? echo $n; ?>" class="catalog"><?
echo "<img class='plitka' src=".$postrow['url_plitka']."><br>Коллекция: ".$postrow['collection']."<br>Название: ".$postrow['name_plitka']."<br>ШхВхТ (мм): ".$postrow['WxHxT']."<br>";
?>
<br><input class="but" type="button" value="подробнее" onclick="AppearDivWndX(document.getElementById('<? echo $n;?>skrit'));" />
<?
echo "</div>";
?>
<div id="<? echo $n; ?>skrit" title="удерживайте нажатой левую клавишу, чтобы перетащить" style="min-width: 400px; width:auto !important; width:400px; left:100px; top: 2px; position:fixed; //position: absolute; top: expression(parseInt( document.documentElement.scrollTop, 10) + 'px'); float: left; min-height:400px; height:auto !important; height:400px; border: 1px solid gray; background: #2F2E2E; display: none; text-align: center; z-index:1; line-height:16pt;" onMouseDown="start_drag(this,event)" onMouseUp="end_drag()" onMouseMove="dragIt(this,event)">
<div class="closeButton" onclick="ZDivWndClose(document.getElementById('<? echo $n;?>skrit'));">закрыть</div><br>
<?
echo "<br><img src=".$postrow['url_plitka']."><br>";
if ($postrow['cover']=="0") echo "облицовочная"; else echo "напольная";
echo "<br>Коллекция: ".$postrow['collection']."<br>Название: ".$postrow['name_plitka']."<br>ШхВхТ (мм): ".$postrow['WxHxT']."<br><b>Цена: ".$postrow['price']." руб.</b>";
if ($postrow['orient']=="декор" or $postrow['orient']=="бордюр" or $postrow['orient']=="карандаш") echo "<b>/шт.</b>"; else echo "<b>/м кв.</b><br>";
echo "Поверхность: ".$postrow['type_cover']."<br>Производитель: ".$postrow['manufactured']."<br>Применение: ".$postrow['room']."<br>";
echo "</div>";
?>
<?
}[/syntax]
17.03.2010, 01:16
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100