Форум

Гробовщик · #1 (**permalink**) 23.01.2014, 19:47

Может быть нестандартная реализация, но есть у меня таблица, при наведении на одну из ячеек которой отображается 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_ · #2 (**permalink**) 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>

Гробовщик · #3 (**permalink**) 23.01.2014, 20:12

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

рони · #4 (**permalink**) 23.01.2014, 20:12

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

<!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>

Гробовщик · #5 (**permalink**) 23.01.2014, 20:16

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

рони · #6 (**permalink**) 23.01.2014, 21:34

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

<!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>

Гробовщик · #7 (**permalink**) 24.01.2014, 08:39

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

danik.js · #8 (**permalink**) 24.01.2014, 09:06

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

Гробовщик · #9 (**permalink**) 27.01.2014, 17:11

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

danik.js · #10 (**permalink**) 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 ?

Форум

Справочник

Discord чат

Курсы javascript