Javascript-форум - Разместить div под ячейкой таблицы

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Разместить div под ячейкой таблицы (https://javascript.ru/forum/xhtml-html-css/44541-razmestit-div-pod-yachejjkojj-tablicy.html)

Гробовщик

23.01.2014 19:47

Разместить div под ячейкой таблицы

Может быть нестандартная реализация, но есть у меня таблица, при наведении на одну из ячеек которой отображается div, он расположен в ячейке, поэтому открывается по середине её... Как мне перенести этот div под ячейку? Подойдёт реализация а css, js, или хотя бы сказать в какую сторону думать... Вот код:

<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
 height: 50px;
}
</style>
</head>
<body> 
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet">
<a href="#" >Эта ячейка </a> 
<div id="reg">Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td> 
</tr>
</table>
<script type='text/javascript'>
var he=$('#kabinet').width();
$('#reg').width(he);
$(function() {
   $("#kabinet").hover(function(){ 
   $('#reg').show();
  },function(){
    $('#reg').hide();
  });
});
</script>

jsru_

23.01.2014 19:50

<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
 height: 50px;
}
</style>
</head>
<body> 
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet" style='position: relative'>
<a href="#" >Эта ячейка </a> 
<div id="reg" style='postion: relative'>Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td> 
</tr>
</table>
<script type='text/javascript'>
var he=$('#kabinet').width();
var h=$('#kabinet').height();
$('#reg').width(he);
$('#reg').css("top",h);
$(function() {
   $("#kabinet").hover(function(){ 
   $('#reg').show();
  },function(){
    $('#reg').hide();
  });
});
</script>

Гробовщик

23.01.2014 20:12

jsru_,
Этот код не работает =( Но судя по реализации, блок див начнёт сдвигаться относительно верха документа, и стало быть в зависимости от отступа таблицы сверху будет заступать на ячейку(

рони	23.01.2014 20:12

Гробовщик,
тоже самое что у jsru_, но чуть точнее и ресайзить можно ... :write:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
 height: 50px;
}
</style>
<script type='text/javascript'>
$(function () {
    $kabinet = $('#kabinet');
    $kabinet.hover(function () {
        var w = $kabinet.outerWidth(true),
            h = $kabinet.outerHeight(true);
        $('#reg').css({
            "width" : w,
            "top": h,
            "left": '-4px'
        });
        $('#reg').show();
    }, function () {
        $('#reg').hide();
    });
});
</script>
</head>

<body>
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet" style='position: relative'>
<a href="#" >Эта ячейка </a>
<div id="reg" style='postion: relative'>Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td>
</tr>
</table>
</body>
</html>

Гробовщик

23.01.2014 20:16

рони,
А у вас какой браузер? У меня лисица отображает весьма косо, и отступ от документа div берёт(((

рони	23.01.2014 21:34

Гробовщик,
div в таблице браузеры по разному обрабатывают ... если его поместить в любое другое место ... то будет всё одинаково ... :write:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:  absolute;
z-index:999;
background: #FFF;
}
#kabinet{
 height: 50px;
}
</style>
<script type='text/javascript'>
$(window).load(function () {
    $kabinet = $('#kabinet');

    $kabinet.hover(function () {
        var w = $kabinet.outerWidth(true),
            h = $kabinet.outerHeight(true),
            p = $kabinet.offset();
        $("#reg").css({width:w,top:p.top+h+2, left:p.left-2}).show();
    }, function () {
        $('#reg').hide();
    });
});
</script>
</head>

<body>
<div id="reg" >Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
<table  align="center" width="80%" border="1" style="margin:0 auto; border: #FF0000 1px double">
<tr>
<td align="center" id="kabinet" style='position: relative; background:  #FF8C00'>
<a href="#" >Эта ячейка </a>
</td>
</tr>
</table>
</body>
</html>

Гробовщик

24.01.2014 08:39

рони,
Ну место дива в коде не принципиально, лишь бы стоял на месте при выводе в браузер
Всё же с jquery я ещё очень хер*во работаю, но стараюсь)))
Спасибо большое.

danik.js

24.01.2014 09:06

Гробовщик, что-то твоя таблица не похоже на таблицу. Какие в ней данные? Или вся таблица затеяна ради центровки и бордера?

Гробовщик

27.01.2014 17:11

danik.js,
Именно ради него) Там больше полей

danik.js

27.01.2014 17:26

Ну ты маньяк!

<!DOCTYPE html>
<html>
 
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        #reg {
            display: none;
            border-style: solid;
            position: absolute;
            z-index: 999;
            top: 100%;
            left: 0;
            right: 0;
            background: #FFF;
            text-align: left;
        }
        #cabinet{
            height: 50px;
            position: relative;
            background:  #FF8C00;
            margin:0 auto;
            border: #FF0000 1px double;
            width: 80%;
            text-align: center;
        }
        #cabinet:hover #reg{
            display: block;
        }
    </style>
</head>
 
<body>

    <div id="cabinet">
        <a href="#" >Эта ячейка </a>
        <div id="reg">Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
    </div>
</body>
</html>

рони, почему $(window).load , а не $(document).ready ?

рони	27.01.2014 18:14

Цитата:

Сообщение от danik.js

рони, почему $(window).load , а не $(document).ready ?

в расчёте на оптимизацию -
если контент неизменяется и ресайз ненужен можно строки 26, 27, 28 измерения высоты ширины и координат вынести и вычислить 1 раз по $(window).load да и пока картинки не прогрузились лучше наверно без эффектов -- но в данном случае можно и $(document).ready или $(function () {})

danik.js

28.01.2014 02:32

Цитата:

Сообщение от рони

и ресайз ненужен

Как это ненужен? Его невозможно запретить. А следовательно - нужно всегда учитывать возможность ресайза.

Гробовщик

30.01.2014 11:06

danik.js,
Я побаиваюсь оформлять страничку div ибо каждый браузер по разному реагирует... Со временем думаю привыкну)

danik.js

30.01.2014 15:17

Цитата:

Сообщение от Гробовщик

Я побаиваюсь оформлять страничку div ибо каждый браузер по разному реагирует

А можно по-подроблее? Чот уже который год верстаю, а вот это впервые слышу...

Гробовщик

03.02.2014 08:34

danik.js,
Ну я больше люблю функциональную часть нежели оформление, оформление скачет, правда в основном в explorer старых версий.

ruslan_mart

25.02.2014 15:17

Цитата:

Сообщение от Гробовщик

формление скачет, правда в основном в explorer

Пфф... неужели ещё кто-то сидит с IE5-7.

Часовой пояс GMT +3, время: 10:04.