Кактус
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342
1

Знатокам JS и CSS, нужен небольшой код

06.02.2013, 23:08. Показов 1126. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Помогите написать скрипт, который бы фиксировал (position: fixed <div align="center" id="table_title"> </div> при достижении верхней границы экрана (как это событие проверить вообще) и снимал бы фиксацию когда <div> достигает изначальной своей координаты (запоминать позицию и тоже проверять).

CSS
1
2
3
4
5
#table_title
{
        width: 100%; <!-- без этого объект при фиксации не захочет быть по середине -->
        position: fixed; <!-- -->
}
В ява-скрипте не силен, такой код буду вечно собирать из кусочков. По алгоритму кажется очень простым, да и объектность языка должна позволять легко это делать, однако никто мне еще не ответил как это сделать...помогите, очень нужно. До этого был только опыт на С/C++, совсем чуть-чуть Html и по тихоньку изучаю CSS.

Я просто не пойму как делать проверку на положение элемента и его сближения с потолком.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.02.2013, 23:08
Ответы с готовыми решениями:

Небольшой вопрос к знатокам СPP
Форумчане хелп. Работал с билдером, ща приспичило с winapi поработать. Есть 2 функции, точнее...

Нужен CSS-код
Есть html-код: &lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;Default.aspx.cs&quot;...

Внимание! Знатокам css сложная простая задачка!
Есть сайт, playgrad.ru Там так интресно замудрено все сделано - вообщем, за стиль ссылок отвечают...

Нужен CSS-код - для оформления отображения страницы
Есть html-код: &lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;Default.aspx.cs&quot;...

5
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
07.02.2013, 13:13 2
Цитата Сообщение от eocron Посмотреть сообщение
Я просто не пойму как делать проверку на положение элемента и его сближения с потолком.
как вариант, так
CSS
1
#tabFix {margin:0 auto;}
Javascript
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
function nextLoad(){
//если нужен пользовательский онлоад
 };
 
 
(function(){
var Q={}, d;
d=document;
 
 
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому немного тормозим
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };
 
function initFix(){
Q.tabF=d.getElementById("tabFix");
Q.tabS=d.getElementById("tabFix").style;
Q.forg=d.getElementById("forgery").style;
tabH=Q.tabF.offsetHeight;
tabT=Q.tabF.offsetTop;
//иначе все браузеры при переключении изменяют ширину таблицы, сам удивлён
Q.tabS.width=Q.tabF.offsetWidth+'px';
//иначе при переключении прыгает влево
Q.tabS.left=Q.tabF.offsetLeft+'px';
//при fixed это будет работать, при static игнорироваться
Q.tabS.top=0;//точка фиксации таблицы, можно отступ сделать от верха окна
//сей блок заменяет таблицу при переключении в fixed, так как в этот момент таблицу вышибает из потока и всё что ниже таблицы прыгает вверх, не надо нам этого
Q.forg.height=tabH+'px';
Q.forg.display="none";
 };
 
onscroll=function(){
var s=d.documentElement.scrollTop||d.body.scrollTop;
d.getElementById("mnb1").innerHTML=s;//показуха
 
if(s>=tabT){//прокрутили таблицу до верха окна
Q.tabS.position="fixed";
Q.forg.display="block";}
else{//таблица ниже верха окна
Q.tabS.position="static";
Q.forg.display="none";};
 };
 
 })();
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Фиксация таблицы вверху окна</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="tab4.css">
<script type="text/javascript" src="tab4.js"></script>
</head>
 
<body>
 
<div>text<br><br>text</div>
<br><br><br><br>
 
<table border="1" width="30%" cellpadding="0" cellspacing="0" id="tabFix">
<tr><td>
text<br>text<br>text<br>text
<div id="mnb1">0</div>
</td></tr></table>
<div id="forgery"></div>
 
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
 
</body>
</html>
1
Кактус
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342
07.02.2013, 14:00  [ТС] 3
Спасибо огромное! Все понятно и подробно разложено, а то собирал с мира по нитке.
0
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
07.02.2013, 20:23 4
eocron, я понял проблему, подумаю, но только завтра днем
0
Кактус
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342
07.02.2013, 20:37  [ТС] 5
Цитата Сообщение от newJS Посмотреть сообщение
eocron, я понял проблему, подумаю, но только завтра днем
Надеюсь на ваш ответ!
0
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
08.02.2013, 08:56 6
в посте №2 я прощелкал
Javascript
1
2
tabH=Q.tabF.offsetHeight;
tabT=Q.tabF.offsetTop;
надо так, и найти остальные переменные, их тоже исправить
Javascript
1
2
Q.tabH=Q.tabF.offsetHeight;
Q.tabT=Q.tabF.offsetTop;
это новое
Javascript
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
function nextLoad(){
//если нужен пользовательский онлоад, иначе можно удалить функцию и её вызов
 };
 
function nextResize(){
//если не нужен, можно удалить функцию и её вызов
 };
 
 
 
 
(function(){
var Q={}, d;
Q.flag=false;
d=document;
 
 
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому пришлось его тормозить
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };
 
function initFix(){
Q.tabF=d.getElementById("tabFix");//ссылки на нужные элементы
Q.tabS=Q.tabF.style;
Q.forg=d.getElementById("forgery").style;
Q.tabT=Q.tabF.offsetTop;
//иначе все браузеры при переключении изменяют ширину таблицы, сам удивлён
Q.tabS.width=Q.tabF.offsetWidth+'px';
//иначе при переключении прыгает влево
Q.tabS.left=Q.tabF.offsetLeft+'px';
//при fixed это будет работать, при static игнорироваться
Q.tabS.top=0;//точка фиксации таблицы, можно отступ сделать от верха окна
//сей блок заменяет таблицу при переключении в fixed, так как в этот момент таблицу вышибает из потока и всё что ниже таблицы прыгает вверх, не надо нам этого
Q.forg.height=Q.tabF.offsetHeight+'px';
Q.forg.display="none";
Q.flag=true;
 };
 
onscroll=function(){
var s=d.documentElement.scrollTop||d.body.scrollTop;
d.getElementById("mnb1").innerHTML=s;//показуха
 
if(s>=Q.tabT){//прокрутили таблицу до верха окна
Q.tabS.position="fixed";
Q.forg.display="block";}
else{//таблица ниже верха окна
Q.tabS.position="static";
Q.forg.display="none";};
 };
 
onresize=function(){
var s, p;
if(Q.flag){//иначе ИЕ лезет сюда не дожидаясь онлоада, а дерева ещё нет
s=Q.forg.display;
p=Q.tabS.position;
Q.tabS.position="static";//не глядя перекидываем в статик
Q.forg.display="none";
Q.tabS.left=Q.tabF.offsetLeft+'px';//получаем новое значение
Q.tabS.position=p;//возвращаем что там было
Q.forg.display=s;
nextResize();};
 
 };
 
 })();
1
08.02.2013, 08:56
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.02.2013, 08:56
Помогаю со студенческими работами здесь

Нужен небольшой совет
Здравствуйте! Когда-то пробовал начать изучать ассемблер. На тот момент читал книжку Крупника....

Нужен небольшой пример с конвертерами
Форумчане кому не сложно можете показать не большой пример с конвертерами ни как мне что то они не...

Нужен небольшой совет по малваре
Здравствуйте! Просканировала комп Malwarebytes, лог прилагаю, нашло 13 объектов, пока лежат в...

Нужен небольшой совет по архитектуре
Необходимо было организовать работу с парой тысяч объектов в параллельном режиме. Все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru