VPF::Зарепить слой во окне фрейма - Форум программистов

kaa

Дата 22.6.2006, 23:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 817
Регистрация: 5.11.2005

Репутация: 1
Всего: 2

Есть панель menu реализованная в отдельном слое ав данном фрейме:

Код


<html>
<head>
</head>

<script language="javascript">
    setInterval("fUpdate()",5000);
    function fUpdate()
    {
        var parent_window = window.parent;
        var message_node = parent_window.frame5.document.getElementById("GlobalMessage");
        
        if(message_node.firstChild.hasChildNodes())
        {
            if(message_node.firstChild.firstChild.nodeValue=="y")
            {
                var message_child = parent_window.frame5.document.getElementById("MessageNode");
                for(var i=0; i<=message_child.childNodes.length-1; i++)
                {
                    if(message_child.childNodes[i].hasChildNodes())
                    {
                        var time_text = message_child.childNodes[i].childNodes[0].firstChild.nodeValue + " ";
                        var name_text = "<" + message_child.childNodes[i].childNodes[1].firstChild.nodeValue + ">" + " ";
                        message_text = message_child.childNodes[i].childNodes[2].firstChild.nodeValue
                        
                        var txt_time = document.createTextNode(time_text);
                        var txt_name = document.createTextNode(name_text);
                        var txt_message = document.createTextNode(message_text);
                        
                        var tag = document.createElement("div");
                        
                        var sub_tag1 = document.createElement("span");
                        var sub_tag2 = document.createElement("span");
                        var sub_tag3 = document.createElement("span");
                        
                        sub_tag2.style.fontSize = "17";
                        sub_tag2.style.fontWeight = "600";
                        sub_tag2.onclick = NameEvent;
                        sub_tag2.onmouseover = RotateCursor;
                        
                        sub_tag1.appendChild(txt_time);
                        sub_tag2.appendChild(txt_name);
                        sub_tag3.appendChild(txt_message);
                        
                        tag.appendChild(sub_tag1);
                        tag.appendChild(sub_tag2);
                        tag.appendChild(sub_tag3);
                        
                        var message_area = document.getElementById("message_area");
                        message_area.appendChild(tag);
                        scrollTo(0,10000);
                    }
                }                        
            }
        }
    }
    
    
    function DefaultSetup()
    {
                                        document.body.onscroll = MenuFixed;
        var el = document.getElementById("menu");
        for(var i=0; i<=el.childNodes.length-1; i++ )
        {
            for(var c=1; c<=el.childNodes[i].childNodes.length-1; c++)
            {
                if(el.childNodes[i].childNodes[c].hasChildNodes())
                {
                    el.childNodes[i].childNodes[c].style.display = "none";
                }
            }
        }
            
    }
    
    function S_H_Panel(id)
    {
        var panel = document.getElementById(id);
        if(panel.style.display=="none")
        {
            panel.style.display = "block";    
        }
        else
        {
            panel.style.display = "none"
        }
    }
    
        function RotateCursor()
    {
        //event.srcElement.style.cursor="pointer";
    }
    
        function MenuFixed() 
    {
          
    }
    
    
    function NameEvent()
    {
        alert("ÕÀÉËÜ!");
    }
    
</script>

<body onload="DefaultSetup()" style="padding:0; margin:0;" bgcolor="#63DCAE">
    <div style="position:relative; width:100%; height:5%; top:0; left:0; padding:0; margin:0; background-color:#AA0000;z-index:1" id="menu">
        <div style="position:absolute; left:15%; width:20%; height:100%; background-color:#AAF6F2; margin:0; padding:0; text-align:center;">
            <span style="width:100%" onClick="S_H_Panel('service_panel')"  onmouseover="this.style.cursor='pointer';">
            Ñåðâèñ
            </span>
            
            <table width="100%" id="service_panel" onmouseover="this.style.cursor='pointer';">
            <tbody>
                <tr>
                    <td valign="top">
                        <table width="100%">
                        <tbody>
                            <tr>
                                <td align="center" valign="middle" width="100%" onmouseover="this.style.backgroundColor='#E1FEFB';" onmouseout="this.style.backgroundColor='transparent';" onclick="alert(1111);" >
                                  Ñîçäàòü ïðèâàò
                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="middle" onmouseover="this.style.backgroundColor='#E1FEFB';" onmouseout="this.style.backgroundColor='transparent';" onclick="alert(1111);" >
                                  
                                </td>
                            </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
            </table>
        </div>
        
        <div style="position:absolute; left:65%; width:20%; height:100%; background-color:#AAF6F2; margin:0; padding:0; text-align:center; vertical-align:middle">
            <span style="width:100%" onClick="S_H_Panel('property')" onmouseover="this.style.cursor='pointer';">
                Íàñòðîéêè
            </span>
            
            <table width="100%" id="property" onmouseover="this.style.cursor='pointer';">
            <tbody>
                <tr>
                    <td valign="top">
                        <table width="100%">
                        <tbody>
                            <tr>
                                <td align="center" valign="middle" onmouseover="this.style.backgroundColor='#E1FEFB';" onmouseout="this.style.backgroundColor='transparent';" onclick="alert(1111);" >
                                  1
                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="middle" onmouseover="this.style.backgroundColor='#E1FEFB';" onmouseout="this.style.backgroundColor='transparent';" onclick="alert(1111);" >
                                  
                                </td>
                            </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
            </table>
        </div>
                
    </div>
    
    <div style="position:relative; width:100%; top:5%" id="message_area">
        hgjhgjghjkjhgkjhgkjhgkjhgjhgjhgjhgkjhgkjhgjhg
    </div>
    
</body>
</html>

И как её закрепить так, чтобы при прокрутке содержимого фрейма аона всегда была вот в начальном своём положении - наверхе окна фрейма, а не уезжала вместе с содержимым вверх? smile

Присоединённый файл ( Кол-во скачиваний: 6 )

__________.jpg 53,74 Kb

Alex13

Дата 23.6.2006, 07:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 280
Регистрация: 30.12.2005
Где: Новосибирск

Репутация: нет
Всего: 1

kaa, поброди по интернету, скоро наткнешься на баннер, который так умеет делать и покопайся в коде страничек.

ЗЫ. Я как-то пытался такое сделать, но ничего не вышло и я забил.

--------------------

Самая страшная ошибка - это ошибка, не имеющая явных причин и конкретных последствий.
Антисоциальный блог.

vasac

Дата 23.6.2006, 09:31 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: нет
Всего: 36

kaa, не делай так!

--------------------

Блог ГО | Таблица символов юникода

dstorm81

Дата 23.6.2006, 11:20 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39

Код


<html >
<head>
<style>
body{margin:0;overflow-y: hidden}
#fixDiv{position: absolute;top:10px;left:0px;width:200px;background-color:gray;border: solid 1px black;font-siza:14px}
#contentBody{height: 100%;overflow: auto}
</style>

</head>
<body>


<div id=contentBody>
qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>

qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>

qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>

qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>qeqewq<br>

</div>
<div id=fixDiv>фиксированное поле</div>
</body>
</html>

кросс браузерно

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

kaa

Дата 23.6.2006, 17:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 817
Регистрация: 5.11.2005

Репутация: 1
Всего: 2

dstorm81, Таак, ща бум разбираться!

kaa

Дата 23.6.2006, 17:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 817
Регистрация: 5.11.2005

Репутация: 1
Всего: 2

dstorm81, Попробовал ваш код - работает, тока для большего понимания разрешите пару вопросов:

1.) Почему когда я выношу фиксированный слой на z-index равный 1 всё перестаёт работать?

2.) Почиму при свойстве position равным relative хотябы у одного блока тоже неработает

3.) Зачем нужно свойство overflow-y: hidden у элемента body

И главное перестала срабатывать функция scrollTo() smile

Sardar

Дата 24.6.2006, 01:01 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 6
Всего: 317

1) подробнее? слой на абсолютной, его либо скрывает, либо он накрывает чего нибудь...
2) подробнее? постставить что нибудь внутрь слоёв на релативной ну не как не может повредить
3) что бы страница не прокручивалась, весь контент у тебя в первом слое, как в ифрейме.

Есессно, окошко не скролиться, теперь весь контент в первом скролируемом слое, с ним и работай smile

По теме, так лучше не делать... В CSS2 есть position: fixed, который не поддерживаеться ИЕ. Фиксирует элемент на экране, при распечатке копируеться на каждой странице. Для ИЕ пара приёмов, один из них dstorm81 уже показал.

M
Sardar

Teме место в вёрстке, переношу

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

kaa

Дата 24.6.2006, 23:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 817
Регистрация: 5.11.2005

Репутация: 1
Всего: 2

Sardar, Извините за задержуку с ответом... Спасибо - бум разбираться! smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »