Форум

HoenDHime · #1 (**permalink**) 23.02.2013, 22:00

Делаю сайт на ASP .NET MVC + MSSQL вывожу на страничку записи из БД и они как полагаются распространяются сверху в низ, мне же нужно - если очередная запись из БД не помещяется на экран ( например, по высоте окна браузера) то перенос правее.
Скриптом могу определить размер экрана браузера пользователя и размер ячейки <td>. Картинки какой сечас вывод

Разметка:
<table class="wall" id="labelwall" >
<tr>
<td> @*line-height: 0px; font-size: 0px;*@
@{
if (string.IsNullOrWhiteSpace(Model.CoverImage))
{
<img src="@Url.Content("~/Content/CoverImage/0.jpg")" alt="CoverImage" id="img0" />
}
else
{
<img src="@Url.Content("~/Content/CoverImage/" + User.Identity.Name + "/CoverImage" + Model.CoverImage)" alt="CoverImage" id="img" />
}
}
</td>
<td>
 
@using(Html.BeginForm("PostLabel","LabelWall")){
@Html.TextArea("Label", new { style="width: 250px; height: 150px; position: relative; resize: none;" })
 
<input type="submit" value="Разместить" />
}

@foreach(var x in Model.PersonalLabel)
{
if(x.PersonalID==ViewBag.PersonalGuid)
{
 
<table class="InternalLabel"> @*если что взять за основу ( помешяется ли в экран) ид из этой талицы id="internalLabel"*@
<tr>
<td>@{ Html.RenderAction("MiniAvaImage", "Home"); }</td>
<td style="font-size: 12px;">
@ViewBag.FullName 
@x.LabelWall.Date.Value.ToLongDateString()
</td>
</tr>
<tr>
<td colspan="2" style="padding: 2px;">@x.LabelWall.Text</td>
</tr>
</table>
}
}
</td>
<td>
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaffffffffffffaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaffffffffffffffff aaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffffaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffffff ffaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaffffffffffaaaaa
@*</td><td>*@
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
</td>
<td>
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
</td>
<td>
 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa 
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
</td>
</tr>
</table>

<script type="text/javascript">
height = $(window).height();
img.style = "height: " + height + "px";
img0.style = "height: " + height + "px";
</script>
Как собственно реализовать скрипт для всей этой балды.

HoenDHime · #2 (**permalink**) 24.02.2013, 14:22

Вопрос был не о статике, я уже позно подумал, что лутше было её убрать вовсе из приведенного кода, а в динамике, те записи что я вывожу из БД распространяются как им и положено сверху - вниз, а мне нужно справа - налево. Последние мысли на этот счет были - нумеровать каждый элемент ( или перебор всех элементов внутрней таблицы) и проверять их местоположение, если не выходит на рамки экрана браузера (сечас считаю через JS JQuery), то норм, если выходит, то перенос этого эелемента, только вот как это реализовать - меня путает вложеность таблицы и с выводом из одной и в ставкой в другой td.

danik.js · #3 (**permalink**) 24.02.2013, 15:21

Если забить на IE, то можно вот так вот:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body, div{height: 100%;margin:0;padding:0;}
span{
    display: inline-block;
    width:200px;
    height: 200px;
    border: 1px solid red;
}
div{
    resize:both;
    outline: 1px solid red;
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    -o-column-width: 200px;
    column-width: 200px;
}
</style>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Это как вариант. А так да, нужно на javascript динамически просчитывать все и раскладывать блоки в div'ы у которых float:left. Ибо с таблицами все громоздко получается.

HoenDHime · #4 (**permalink**) 24.02.2013, 20:16

Эксперементирую с вашим предложеным вариантом. Пока заметил что оно обязательно мостится на экран и прокрутка не появляется, вместо того что бы распластатся =) по горизонтали, пытается так сказать заполнить все щели и лезит в низ.

HoenDHime · #5 (**permalink**) 24.02.2013, 20:34

1280x1024(601.38 kB)
Вот что получается, если отдалить камеру, то оно всетаки распространяется направо (resize: horizontal

, но всеравно прокрутку не создает. Меня интересует имено в горизонтальном распространении без вылеза за рамки экрана.

danik.js · #6 (**permalink**) 24.02.2013, 20:43

Можно прописать контейнеру overflow: auto - тогда появятся скроллбары. Но я не уверен этот вариант вообще приемлем.

HoenDHime · #7 (**permalink**) 24.02.2013, 21:47

overflow: auto пробывал, и на всякий случий перепробывал еще раз не помогает. Сечас разметка css пока не выношу, как будет норм так и сразу =)

<div style="resize: horizontal; /*outline: 1px solid red;*/ -webkit-column-width: 600px; -moz-column-width: 600px; -o-column-width: 600px; column-width: 200px; margin: 0; padding: 0;">
    <span >
         @{
             if (string.IsNullOrWhiteSpace(Model.CoverImage)) 
             { 
                 <img src="@Url.Content("~/Content/CoverImage/0.jpg")" alt="CoverImage" id="imga" />
             }
             else
             {
                 <img src="@Url.Content("~/Content/CoverImage/" + User.Identity.Name + "/CoverImage" + Model.CoverImage)" alt="CoverImage" id="img" />
             }
            }
    </span>
     <span style="display: inline-block;  max-width: 250px; max-height: 150px; column-width: 300px;">
        @using(Html.BeginForm("PostLabel","LabelWall")){
                @Html.TextArea("Label", new { style="width: 250px; height: 150px; position: relative; resize: none;" }) 
                <br /><br />
                <input type="submit" value="Разместить" />
            }
    </span>
               @foreach(var x in Model.PersonalLabel)
               {
                   if(x.PersonalID==ViewBag.PersonalGuid)
                   {
                       <br /><br />
                        <span style="display: inline-block;  max-width: 300px; max-height: 300px; column-width: 300px; ">
                            @{ Html.RenderAction("MiniAvaImage", "Home"); }
                               
                                    @ViewBag.FullName<br />
                                    @x.LabelWall.Date.Value.ToLongDateString()
                                <br />
                                @x.LabelWall.Text
                            
                        </span>
                   }
               } 
</div>

HoenDHime · #8 (**permalink**) 24.02.2013, 22:08

В голове вертится пока один возможный вариант ( на основе моей разметки). Назначаем внутреней table id + 1 за каждое появление или проходим по всем элементам ( записям ( n- количество таблиц)) и смотрим их расположение http://javascript.ru/ui/offset сравниваем с экраном пользовательского браузера

<script type="text/javascript">
    height = $(window).height();
    img.style = "height: " + height + "px";
    imga.style = "height: " + height + "px";  
</script>

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

danik.js · #9 (**permalink**) 24.02.2013, 22:12

А все блоки разных размеров?

HoenDHime · #10 (**permalink**) 24.02.2013, 22:34

Пока да и было бы красивее если все разных размеров( а то если написано пару слов и занимать большой контейнер - как то неочень). В БД я ставил размер 1000 символов для @x.LabelWall.Text ( основной текст), если учитывать это, то можно сказать точно какой размер будет.

Форум

Справочник

Discord чат

Курсы javascript