Новый Вариант сайдбара,встроенного в pun-main

Поделиться1Сб, 26 Фев 2011 18:07:21

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

Открывай завтра новую тему - Новый Вариант сайдбара,встроенного в pun-main
(для идентичного отражения: подстраиваемого под ширину страницы форума и сайдбара при разных разрешениях монитора) Бум тестить новый срипт

Готов приступить к тестированию.
Уже всю голову сломал, то не так то это не то.....

0

Поделиться2Вс, 27 Фев 2011 01:18:48

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Invisible Man Ыы Пока ты долго собиралсо, - мну все идеи подрастерял, - поскольку был занят совсем другим - завтра подумаю

Отредактировано Deff (Вс, 27 Фев 2011 01:19:12)

0

Поделиться3Вс, 27 Фев 2011 13:25:23

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

завтра подумаю

Хоккей..подождемс :yep:

0

Поделиться4Вс, 27 Фев 2011 21:06:36

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

В Объявление ставим вот такое

<style>
/*#pun-announcement {
display:none;
}
.punbb {
margin:0 26px 0 -26px;
}*/
#tbl-pun-main,#main-center {
width:100%;
padding:0;
border-collapse:collapse;
border:none transparent 0;
}
#main-td-left,#main-td-right {
position:relative;
z-index:100;
margin-top:-10px;
padding:12px;
height:1000px;
background:#ABC9E1 url(http://savepic.net/605682.png) top center repeat-x;
border-style:solid;
border-width:1px;
}
#main-td-left{
float:left;
width:110px;
margin-right:10px;
}
#main-td-right{
float:right;
width:110px;
margin-left:10px;
}
#tbl-pun-main,td#main-center,td#left,td#right {
border:none transparent 0;
}
#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
width:65%;
margin-left:auto;
margin-right:auto;
}
</style>
<div id="MySideBarContent" style="display:none;">

<div id="main-td-left">

Контент левого Сайдбара
</div>



<div id="main-td-right">
Контент правого Сайдбара
</div>

</div>

Пояснения:
Красным Ваши основные регулировки

1. -10 -Наезд сайд бара на пользовательское меню(или с плюсом - ниже меню -(* при 0 его край на верхней границе меню навигации
2. height:1000px; - первоначальная высота сайд бара (можно поставить auto;
3. background:#ABC9E1 url(http://savepic.net/605682.png) top center repeat-x; - цвет и картинка бекграундом
4. width:110px; ширина левого и правого сайд бара (соответственно
5. width:65%; -Поскольку секции ниже pun-main не входят в табличку - подгонять ширину под ширину центрального модуля таблицы приходится вручную -в общем случае в процентах(для резиновых по ширине форумов, (при фиксированной ширине форума, можно и в пикселах

В НTML низ -сам скрипт:

Код:

<script type="text/javascript"><!-- Установка Сайд-Бар контентов -->
var str='<table id="tbl-pun-main" cellspacing="0" cellpadding="0"><tbody><tr valign="top"><td id="main-center"></td></tr></tbody></table>';
$("#tieser-bottom").parent(".section").attr("id","tieser-b-section")
$("#pun-main").before(str)
  $("#pun-main").prependTo("#main-center")

divArray = new Array (
   "pun-status",
   "pun-break1",
   "pun-crumbs1",
   "pun-break2",
   "#pun-main",

"End"
);
 var N=divArray.length-2;
  for(var i=1; i<=N; i++ ){
  // var j=i; alert((N-i)+">>"+divArray[N-i]);
   $("#"+divArray[N-i]).prependTo("#main-center")
  }
if($("#main-td-left").html()!==null) {
  var str='<td id="td_left"> </td>'
   $("#main-center").before(str)
 $("#main-td-left").prependTo("#td_left")
}
if($("#main-td-right").html()!==null) {
  var str='<td id="td_right"> </td>'
   $("#main-center").after(str)
 $("#main-td-right").prependTo("#td_right")
}
$(document).ready(function() {});
</script>
<!-- 
var str='<td id="td_left"> </td>'
$("#main-center").before(str)
var str='<td id="td_right"> </td>'
$("#main-center").after(str) 
//Конец сайдбаров -->

Если Вы хотите убрать один из сайдбаров, - просто убираем ту или иную запись, соответствующего модуля (в первой части скрипта в Объявлении)

<div id="main-td-left">[/color]

Контент левого Сайдбара
</div>

Или

<div id="main-td-right">
Контент правого Сайдбара
</div>

- Соответствующий сайдбар(левый или правый) просто не поставицо скриптом

(*Примеры тут >

http://hostjs-mybb2011.narod.ru/Side-BAR.htm

http://hostjs-mybb2011.narod.ru/LeftSideBar.htm

http://hostjs-mybb2011.narod.ru/RightSideBar.htm

> Тестируем

Отредактировано Deff (Пт, 11 Мар 2011 09:23:41)

+2

Поделиться5Вс, 27 Фев 2011 21:09:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

(*Место для дополнений -исправлений

1.Зы - Замечено, что для корректной работы в топике при произвольном контенте, необходимо корректировать максимальную ширину(max-width) --> сode-box, quote-box, img.postimg

В стиль первой части кода, в объявлении, добавляем такие строки >

#main-center .blockquote,#main-center .code-box, #main-center .quote-box,#main-center img {
max-width:210px!important;
white-space:pre-wrap;
}

(*-значение красным - регулируем

2. При Одинарных сайд барах регулируем смещение нижних div, следующих в HTML коде страницы после #pun-main (*регулируем в первой части кода

Пример для левого сайд бара:

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
width:78%;
margin-left:200px;
margin-right:auto;
}

Для правого сайд бара:

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
width:78%;
margin-left:auto;
margin-right:200px;
}

(*Значения красным -регулируем

Отредактировано Deff (Пн, 28 Фев 2011 10:14:21)

+1

Поделиться6Вт, 1 Мар 2011 22:59:38

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff
Чуть позже займусь тестированием, извини пока времени мало..

0

Поделиться7Ср, 2 Мар 2011 00:13:07

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Deff, поставил, протестировал пока при двух сайдбарах..
1. Съезжают пользовательские ссылки и ссылки главного меню. Это не есть гуд. Если Гостю это не так видно и пользователю тоже, то наличие слова Администрирование просто сдвигает все и ссылки наезжают на элементы оформления шапки.
Может можно как-то сделать, чтоб это явление не появлялось?
2. Если форум закрыт для просмотра гостями совсем, то все это вместе съезжает влево и теряется заданная ширина. Основное окно с форумами становится еще уже. Что тоже. выглядит не очень.
3. В случае, если длина сайдбаров не залазит на блок статистики внизу и статистика шире основной таблицы с форумами, то при просмотре самих форумов, если список тем короче, чем длина сайдбаров, то последние прямо садятся на блок нижней рекламы. Чтоб отделить, в стиле в объявлении я добавил дополнительно:

#main-td-left{
float:left;
width:110px;
margin-right:20px;
margin-bottom:20px;
}
#main-td-right{
float:right;
width:110px;
margin-left:20px;
margin-bottom:20px;
}

тогда и на главной странице форума все будет нормально.
Все это тестил на одном форуме, так что, все. как говорится, ИМХО.)))
ЗЫ. Поглядеть все описанное можно тут

0

Поделиться8Ср, 2 Мар 2011 00:57:20

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Кофеман написал(а):

1. Съезжают пользовательские ссылки и ссылки главного меню. Это не есть гуд. Если Гостю это не

Ну дык дабы не съезжали нужно:

a) или уменьшать размер букв в пользовательских ссылках;
б) или брать достаточно узкий исходный форум и увеличивать ширину #pun перед установкой сайд баров(собственно эт не проблемы сайд бара - а проблемы сужения форума (настраивайте (в стиле или настройках) исходный форум по будущей ширине вместе с сайдбарам), затем увеличиваете ширину #pun до исходной и встраиваете сайдбар;
в) или берите исходный форум и перед установкой и расширяйте #pun на величину ширины сайд баров
г) Или просто убрать из скрипта строки включения этих модулей в сайд-бар таблицу >

divArray = new Array (
"pun-navlinks",
"pun-ulinks",
"pun-announcement",
"pun-status",
"pun-break1",
"pun-crumbs1",
"pun-break2",
"#pun-main",

"End"

Отредактировано Deff (Ср, 2 Мар 2011 11:18:03)

0

Поделиться9Ср, 2 Мар 2011 01:03:43

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Кофеман написал(а):

3. В случае, если длина сайдбаров не залазит на блок статистики внизу и статистика шире основной таблицы с форумами, то при просмотре самих форумов, если список тем короче, чем длина сайдбаров, то последние прямо садятся на блок нижней рекламы. Чтоб отделить, в стиле в объявлении я добавил дополнительно:

По тексту,(* хотя ночь - простительно - уменьшайте цифру красным (Вы ж её раздули до 87%;

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
width:65%;
margin-left:auto;
margin-right:auto;
}

Отредактировано Deff (Ср, 2 Мар 2011 11:15:04)

0

Поделиться10Ср, 2 Мар 2011 20:44:14

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Deff написал(а):

По тексту,(* хотя ночь - простительно - уменьшайте цифру красным (Вы ж её раздули до 87%;

Deff, так потому и раздул, чтоб в принципе нижний блок оставить шириной в #pun.
Мало ли у кого в футере может чат стоять или еще что-то, что при уменьшении потеряет вид. Просто попробовал и увидел, что бар прямиком садиться на нижний блок. Добавление нижнего отступа как раз решает вопрос.. Хотя, опять же, все ИМХО.
Остальные ваши советы попробую. Спасибо.

0

Поделиться11Ср, 2 Мар 2011 21:23:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Кофеман Нижний блок - в стандартном сайд баре занимает такое же пространство, что и остальное блоки выше
Просьба у Автора топика была избавится от глюков старого сайдбара, плывущего при разных разрешениях экрана ( Вы тестируя, выставляете новые требования, которых в исходной заявке не было

Отредактировано Deff (Ср, 2 Мар 2011 23:09:44)

0

Поделиться12Ср, 2 Мар 2011 21:49:29

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Deff, ну возможно с навигацией я погорячился.)) Если тестировать - так тестировать. Пытаюсь просто предугадать вопросы тех, кто начнет ставить этот сайдбар.. Хотя, возможно и правда нет в этом нужды.

ЗЫ. Сорри за флуд.

0

Поделиться13Чт, 3 Мар 2011 10:26:30

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Кофеман написал(а):

Deff, ну возможно с навигацией я погорячился.))

Хм ... с Навигацией то как раз - (см пост 8 пункт г)) - проблем - нет - вынул пару строк из скрипта - и всё как Вы и хотите
С наездом на футер: - уменьшайте высоту сайд бара или делайте auto- какие проблемы ?

Отредактировано Deff (Чт, 3 Мар 2011 18:05:42)

0

Поделиться14Пт, 4 Мар 2011 15:38:04

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

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

0

Поделиться15Пт, 4 Мар 2011 16:17:19

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Invisible Man Бегунок появляецо если общая ширина форума вместе с сайдбарами больше экрана(кстать ты тести - для тебя 120% это разрешение 1024 (дальше вродь не имеет смысла крутить, для меньших разрешений)- делай форум резиновым и ограничивай максимальную ширину

#pun{width:100%;
max-width:1200px;
}

(#pun это в Первом Окне Стиля
max-width: - подстраивай

"pun-navlinks",
"pun-ulinks",

Вынь из скрипта

Отредактировано Deff (Пт, 4 Мар 2011 16:23:18)

0

Поделиться16Пт, 4 Мар 2011 16:38:45

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

Вынь из скрипта

Вынул, и вот первые проблемы которые замечены умножение скриптов происходит

0

Поделиться17Пт, 4 Мар 2011 16:42:50

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Invisible Man Поставь скрипт в самый низ HTML низ - тож самое ?

0

Поделиться18Пт, 4 Мар 2011 16:44:54

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

Поставь скрипт в самый низ HTML низ - тож самое ?

Яж сделал тебя там админом :crazy:
Он и так стоит в самом самом низу

0

Поделиться19Пт, 4 Мар 2011 16:47:34

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

По бару еще.

Бар

background:#808080 url(http://onserial-letay-16.ru/uploads/000 … 24-3-f.png) top center repeat-x;
border-style:solid;
border-width:2px;
}
#main-td-left{
float:left;
width:20%;
margin-right:20px;
}
#main-td-right{
float:right;
width:20%;
margin-left:20px;
}

Форум

/* A5.1 */
#pun {
margin: 0 0 0 0;
width: 80%; /* Ширина форума */
padding: 0px 0px 0px 5px;
}

Итог 100%

или опять туплю?

0

Поделиться20Пт, 4 Мар 2011 16:53:58

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11885
Последний визит:
Сегодня 11:59:35

Invisible Man Поменяй скрипт создания таблиц на такой >

Код:

	<!--Дополнительные кнопки в BB-панель-->
<script type="text/javascript">
if ($("#MytableTabl").html()==null){
var name2="'[/add]')\" /></fieldset></td><td style=\"border: 0;\"><fieldset style=\"padding: 3px;\"><legend>Таблица</legend><input type=\"button\" value=\" Таблица \" title=\"Создать скелет таблицы\" name=\"TABLE\" onclick=\"bbcode('[table]','[/table]')\" /><input type=\"button\" value=\" Строка \" name=\"TR\" title=\"Добавить строку в вашу таблицу\"  onclick=\"bbcode('[tr]','[/tr]')\" /><input type=\"button\" value=\"Ячейка\" name=\"TD\" onclick=\"bbcode('[td]','[/td]')\" title=\"Добавит ячейку в строку\"  /></fieldset></td></table></div>"
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].className=="fs-box hashelp"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div class=\"inform\" id=\"q1Span\" ><table id=\"MytableTabl\" style=\"border: 0;\"><tr><td style=\"border: 0;\"><fieldset style=\"padding: 3px;\"><legend>Текст</legend><input type=\"button\" value=\"Желтый фон\" name=\"H\" title=\"Добавит желтый фон к вашему тексту\" onclick=\"bbcode('[h]','[/h]')\" /><input type=\"button\" value=\" PRE \" name=\"PRE\" title=\"Предварительно отформатированый текст\" onclick=\"bbcode('[pre]','[/pre]')\" /><input type=\"button\" value=\"Линия\" name=\"H\" title=\"Добавит горизонтальную линию к вашему тексту\" onclick=\"bbcode('[hr]',' ')\" /><input type=\"button\" value=\"Добавлено\" name=\"add\" title=\"Если вы хотите добавить комментарий к вашему же сообщению, отредактируйте свое сообщение и внесите свой текст. После этого выделите и нажмите на эту кнопку.\" onclick=\"bbcode('[add]',"+name2+""+name+""
}
i++
}
}
</script>

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Новый Вариант сайдбара,встроенного в pun-main

Сообщений 1 страница 20 из 147

Поделиться1Сб, 26 Фев 2011 18:07:21

Поделиться2Вс, 27 Фев 2011 01:18:48

Поделиться3Вс, 27 Фев 2011 13:25:23

Поделиться4Вс, 27 Фев 2011 21:06:36

Поделиться5Вс, 27 Фев 2011 21:09:37

Поделиться6Вт, 1 Мар 2011 22:59:38

Поделиться7Ср, 2 Мар 2011 00:13:07

Поделиться8Ср, 2 Мар 2011 00:57:20

Поделиться9Ср, 2 Мар 2011 01:03:43

Поделиться10Ср, 2 Мар 2011 20:44:14

Поделиться11Ср, 2 Мар 2011 21:23:37

Поделиться12Ср, 2 Мар 2011 21:49:29

Поделиться13Чт, 3 Мар 2011 10:26:30

Поделиться14Пт, 4 Мар 2011 15:38:04

Поделиться15Пт, 4 Мар 2011 16:17:19

Поделиться16Пт, 4 Мар 2011 16:38:45

Поделиться17Пт, 4 Мар 2011 16:42:50

Поделиться18Пт, 4 Мар 2011 16:44:54

Поделиться19Пт, 4 Мар 2011 16:47:34

Поделиться20Пт, 4 Мар 2011 16:53:58