ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / закрепление части экрана
15 сообщений из 15, страница 1 из 1
закрепление части экрана
    #38108981
gdengam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gdengam
Участник
Доброго времени суток. Подскажите, пожалуйста, есть ли возможность закрепить часть страницы...
Задача: есть мастерпэйдж, в ней авторизация там и ссылки разные, есть встроенная страница с элементами управления наверху и затем длинная таблица гридвью. Можно ли сделать так, чтобы заголовок мастерпэйдж, элементы управления страницы и заголовок гридвью всегда были видны, а данные гридвью скролились? размер закрепляемой области явно определен в пикселях. нужен код яваскрипта, который бы при прокрутке оставлял эту область на месте.
Заранее спасибо
Прошу учесть, что я еще чайник в этой теме...всю жизнь писал толстые клиенты на .net и базы данных, поэтому вэбу только учусь не судите строго)))
...
Рейтинг: 0 / 0
14.01.2013, 12:08
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109047
Фотография Местный король Делфей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Местный король Делфей
Участник
загуглите sticky div
...
Рейтинг: 0 / 0
14.01.2013, 12:43
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109075
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
position:fixed; Пример можно глянуть вконтакте в разделе "Сообщения".
...
Рейтинг: 0 / 0
14.01.2013, 12:57
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109098
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
st_stposition:fixedЗачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.
...
Рейтинг: 0 / 0
14.01.2013, 13:08
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109132
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
skyANAst_stposition:fixedЗачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.

И полоса прокрутки будет на блоке. Вконтакте красивенько - полоса прокрутки стандартная браузерная, а элементы (хедер/меню) закреплены вверху/по бокам.
...
Рейтинг: 0 / 0
14.01.2013, 13:28
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109135
Парамон
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Парамон
Участник
Не люблю такой дизайн, реально убивает место на странице, с мобильных еще хуже.
...
Рейтинг: 0 / 0
14.01.2013, 13:29
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109144
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
st_stskyANAпропущено...
Зачем? ТСу нужно, чтобы данные скролились. Ну так и засунуть из в контейнер с overflow: scroll.

И полоса прокрутки будет на блоке. Вконтакте красивенько - полоса прокрутки стандартная браузерная, а элементы (хедер/меню) закреплены вверху/по бокам.Ага, на блоке. Может ТС закрепить мастерпэйдж нужно только для этой страницы, кто его знает.
Вообщем решать ему.
...
Рейтинг: 0 / 0
14.01.2013, 13:33
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38109268
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
gdengam,

Ответ уже на этом форуме был. Типа, готовый компонент. Поищите.
...
Рейтинг: 0 / 0
14.01.2013, 14:35
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110273
gdengam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gdengam
Участник
skyANA, st_st
Нужно, чтобы на всех страницах с мастерпейдж ее элементы были наверху...только не пойму теперь где этот fixed поставить...если создать div на дочерней странице и поместить туда все элементы шапки страницы, то мастерпейдж все равно скролится... Мне вариант вконтакте очень подходит и нравится, но что обернуть в fixed я никак не пойму... content в мастерпэйдж?
у меня есть синий заголов в мастерпелдж и элементы логин и пару ссылок, а затем белый фон с контентом, в этот контент вставляется страница с элементами управления данными (кнопочки и списки) и гридвью. Надо чтобы синяя шапка с элементами логин и элементы управления данными оставались на месте.а гридвью скролилась как сообщения вконтакте, про заголовок гридвью можно забыть...но где поставить fixed я не соображу пока(((
...
Рейтинг: 0 / 0
15.01.2013, 09:38
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110275
gdengam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gdengam
Участник
ShSerge,

а что поискать? я находил сложные скрипты для одновременно горизонтальной и вертикальной прокрутки гридвью, но для меня это сложновато, не хотелось бы пользоваться кодом, который не понимаешь...
...
Рейтинг: 0 / 0
15.01.2013, 09:40
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110288
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
gdengam, контейнер (<div>) шапки страницы должен быть в мастерпейдже. Для него и нужно применить CSS свойство position со значением fixed. Плюс выставить z-index больше нуля.
...
Рейтинг: 0 / 0
15.01.2013, 09:53
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110294
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
gdengam, а вообще приведите пример свой разметки, тогда можно на ней будет показать, к чему применить стили
...
Рейтинг: 0 / 0
15.01.2013, 09:56
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110300
gdengam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gdengam
Участник
skyANA,

мастер:
Код: html
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.
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="RQ_master.master.vb" Inherits="RQ_cryker.RQ_master" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Управление заявками
                </h1>
            </div>
            <div class="loginDisplay">
                 <asp:LoginView ID="LoginView1" runat="server">
                    <LoggedInTemplate>
                        <asp:LoginName ID="LoginName1" runat="server" />
                                   &nbsp;&nbsp;&nbsp;
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/RQ/RQ_Tools.aspx">Настройка</asp:HyperLink>
                    </LoggedInTemplate>
                </asp:LoginView>
                &nbsp;&nbsp;&nbsp;
               <asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="Вход" 
                    LogoutText="Выход" />
            </div>
            <div class="clear hideSkiplink">
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>


страница:
Код: html
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.
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="RQ.aspx.vb" Inherits="RQ_cryker.RQ" MasterPageFile="~/RQ_master.Master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <div id="headerDIV" style="position: fixed;">
        Заявки c &nbsp;&nbsp;<asp:TextBox 
            ID="date1" runat="server" MaxLength="10" Width="79px"></asp:TextBox>
         <asp:ImageButton ID="ImageButton1" runat="server" Height="16px" 
                      ImageUrl="~/images/Calendar_scheduleHS.png" />
&nbsp;&nbsp; по
        <asp:TextBox 
            ID="date2" runat="server" MaxLength="10" Width="79px"></asp:TextBox>
                <asp:ImageButton ID="ImageButton2" runat="server" Height="16px" 
                      ImageUrl="~/images/Calendar_scheduleHS.png" />
        &nbsp;&nbsp;<asp:ImageButton ID="date_refresh" runat="server" Height="16px" 
                      ImageUrl="~/images/adb_refresh.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_create" runat="server" Height="16px" 
                      ImageUrl="~/images/button_plus_blue_5234.png" 
            BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_open" runat="server" Height="16px" 
                      ImageUrl="~/images/view_text_1100.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_copy" runat="server" Height="16px" 
                      ImageUrl="~/images/copy_1291.png" BorderStyle="Double" />
        &nbsp;&nbsp;<asp:ImageButton ID="RQ_del" runat="server" Height="16px" 
                      ImageUrl="~/images/remove_1816.png" BorderStyle="Double" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:DropDownList ID="filter_1" 
            runat="server">
       </asp:DropDownList>
      &nbsp;&nbsp;   <asp:DropDownList ID="filter_2" runat="server">
            <asp:ListItem>=</asp:ListItem>
            <asp:ListItem>&gt;</asp:ListItem>
            <asp:ListItem>&lt;</asp:ListItem>
            <asp:ListItem>&lt;&gt;</asp:ListItem>
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>NOT LIKE</asp:ListItem>
        </asp:DropDownList>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="filter_3" runat="server"></asp:TextBox>
        &nbsp;&nbsp;<asp:ImageButton ID="filter_refresh" runat="server" Height="16px" 
                      ImageUrl="~/images/adb_refresh.png" BorderStyle="Double" />
            Департамент создаваемых заявок
        <asp:DropDownList ID="Department" runat="server">
        </asp:DropDownList>
        &nbsp;&nbsp;
        <asp:Button ID="Delete_4ern" runat="server" Text="Удалить черновики" 
            Visible="False" />
        <asp:GridView ID="grdv_allreq_head" runat="server" AutoGenerateColumns="False" Width="100%" 
            ForeColor="Black" Height="100%" PageSize="20" AllowSorting="True" 
            ShowHeaderWhenEmpty="True">
            <AlternatingRowStyle BackColor="#FFFF99" ForeColor="Black" />
            <Columns>
                бла-бла-бла
            </Columns>
            <HeaderStyle BackColor="#6699FF" ForeColor="Black" />
            <PagerSettings Position="TopAndBottom" />
            <SelectedRowStyle BackColor="#FF5050" />
        </asp:GridView>
           </div>
       <div style="margin: 100px 0px 0px 0px">
        <asp:GridView ID="grdv_allreq" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="IDДокумента" Width="100%" 
            ForeColor="Black" Height="100%" PageSize="20" ShowHeader="False">
            <AlternatingRowStyle BackColor="#FFFF99" ForeColor="Black" />
            <Columns>
бла-бла-бла
            </Columns>
            <HeaderStyle BackColor="#6699FF" ForeColor="Black" />
            <PagerSettings Position="TopAndBottom" />
            <SelectedRowStyle BackColor="#FF5050" />
        </asp:GridView>
        </div>
</asp:Content>
...
Рейтинг: 0 / 0
15.01.2013, 10:02
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110327
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Код: html
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.
<!DOCTYPE HTML>
<html>  
<head>
  <style>
    body, .header {
      width: 500px;
    }

    .header {
      background-color: #fff;
      height: 100px;
      position: fixed;
      top: 0px;
      z-index: 100;
    }
    
    .main {
      padding-top: 100px;
    }
  </style>
</head>
<body>
  <form id="form">
    <div class="page">
      <div class="header">
        <div class="title"><h1>Управление заявками</h1></div>
        <div class="loginDisplay"><a href="#">Настройка</a></div>
        <div class="clear hideSkiplink"></div>
      </div>
      <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus imperdiet tortor vel viverra. Vivamus elementum interdum
 est, a ultricies mauris imperdiet ac. Donec placerat ligula eu libero lobortis fermentum. Pellentesque dui mauris, ultrices quis sodales eget,
 dignissim ut dui. Aliquam magna nisi, mollis at mattis vitae, pulvinar ac libero. Sed condimentum porttitor dictum. Sed consectetur, nunc 
sit amet iaculis egestas, mi massa congue libero, vitae molestie orci quam sed lorem. Nunc diam erat, viverra nec tristique vitae, tristique
 eget justo. In eget lectus vitae ipsum ullamcorper tempor. Mauris viverra eros ac quam rutrum sit amet mollis nisi sollicitudin. Cras ac 
mattis eros. Etiam consectetur, turpis et fermentum ultrices, erat lorem accumsan justo, non aliquet justo nisi vitae dolor. Curabitur 
molestie ligula in arcu pretium aliquet.</p>
        <p>Ut vitae arcu id diam gravida faucibus. Cras tristique venenatis quam, sit amet interdum orci sodales et. Sed est nisl, semper sit 
amet vehicula id, viverra in justo. Suspendisse imperdiet sodales lectus, eget hendrerit risus rhoncus non. Fusce eu neque in nisl ornare 
aliquam ut ut magna. Integer odio justo, auctor nec consectetur eget, laoreet nec lorem. Maecenas egestas volutpat leo, eu gravida 
metus rhoncus id. Vestibulum bibendum mauris eu magna suscipit sed imperdiet risus mattis. Quisque vel dui dui. Etiam pellentesque mi sed 
arcu ultrices pretium.</p>
        <p>Mauris sodales molestie cursus. Ut dignissim nisl eget lorem auctor in fringilla enim semper. Donec porttitor porttitor suscipit. Cras
 congue velit blandit nisl auctor aliquet ornare mi suscipit. Sed porta, ante quis consectetur iaculis, erat nisl sollicitudin dolor, et laoreet 
ipsum arcu et nibh. Vivamus ac quam sem, sit amet dapibus tortor. Phasellus tincidunt, urna eget posuere feugiat, nunc nulla suscipit velit, 
eget elementum ipsum erat at lorem. Nunc suscipit fermentum mi non ultrices. In gravida dignissim interdum. Cras nunc leo, facilisis 
pellentesque facilisis vel, commodo adipiscing turpis. Nulla aliquet porttitor molestie.</p>
        <p>Donec eros nulla, sagittis id congue eu, fringilla et dolor. Nulla egestas sem sit amet lacus faucibus sodales. Phasellus rhoncus 
facilisis blandit. Curabitur cursus interdum mauris vitae ullamcorper. Integer ullamcorper egestas augue, eget blandit felis mollis in. Nulla 
facilisi. Sed blandit posuere turpis, eu congue nisi fermentum ut. Sed commodo iaculis pharetra. Integer vel felis in dui molestie commodo id 
semper elit. Morbi volutpat tincidunt eros, quis laoreet diam laoreet quis. Aliquam a nibh et nulla sagittis imperdiet vel quis dolor. 
Suspendisse a commodo purus. Aliquam iaculis, justo accumsan porttitor scelerisque, magna neque iaculis eros, interdum convallis dui nunc 
id dolor. Suspendisse pretium ante ac magna fermentum gravida. Duis id est quam, et cursus lacus.</p>
        <p>Nunc accumsan tempor mi, et tempus tellus aliquam vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus odio nulla, 
blandit a mollis ac, iaculis vitae leo. Aenean venenatis iaculis placerat. Quisque eget eros odio, nec vulputate nisi. Fusce vulputate libero 
quis dui elementum id suscipit neque tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Integer lacinia vestibulum justo non auctor. Suspendisse facilisis aliquam erat ut commodo.</p>
      </div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </form>
</body>
</html>
...
Рейтинг: 0 / 0
15.01.2013, 10:29
| Ответить | Цитировать | Написать  
закрепление части экрана
    #38110409
gdengam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gdengam
Участник
skyANA,
Спасибо большое, разобрался...
...
Рейтинг: 0 / 0
15.01.2013, 11:32
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / закрепление части экрана
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]