pusheen.
Попробую исправить, но не обещаю - адаптировать скрипты под русфф функции, которые работают непонятно как - гемморно
Слабо актуальные запросы по скриптам в топике скриптов [2]
Сообщений 281 страница 300 из 394
Поделиться281Ср, 11 Май 2016 13:28:53
Поделиться282Ср, 11 Май 2016 23:16:05
IKissa
Ну чо нидь типа так: http://funkyimg.com/i/2bGiS.jpg
<style> #WRP{ width:700px; margin:14px auto!important; border: 10px solid transparent;!important; -moz-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -webkit-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -o-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; } #MyTbl { background-color:#E9DEC2!important; border-collapse:collapse; } #MyTbl>tbody>tr.a1{ height:46px; } #MyTbl td{ border:rgba(121,41,23, 0.8) solid 2px; } #MyTbl td{ cursor:pointer; } #MyTbl>tbody>tr>td.no-pointer{ cursor:default; } td#a1 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } /*Фон активных кнопок или при наведении(не делал позиционирование)*/ td#a1:hover, td#a1.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2:hover, td#a2.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3:hover, td#a3.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4:hover, td#a4.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } .td-cnt .cnt{ display:none; } .td-cnt .cnt:first-child{ display:block; } #MyTbl-2 td{ text-align:center; position:relative; background: #E9DEC2; z-index:0; } #MyTbl-2 td>.cnt2{ position:absolute; z-index:10; border:#835508 2px solid; border-radius:4px; min-height:32px; max-height:129px; overflow-x:hidden; overflow-y:auto; left:-37px; width:230px; top:auto; bottom:116%; margin:auto!important; background: #FFDB46; box-shadow:rgba(0,0,0,.7) 0 0 2em, inset rgba(0,0,0,.7) 0 0 1em; display:none; } #MyTbl-2 td.active{ z-index:100; background:#BFF2B2; } #MyTbl-2 td.active .cnt2{ display:block; } </style> <div id=WRP> <table id="MyTbl" width=700> <tr width=25% class=a1> <td id="a1" class=active></td> <td id="a2"></td> <td id="a3"></td> <td id="a4"></td> </tr> <tr> <td width=25% height="500" class="no-pointer"> <table id="MyTbl-2" height="100%" width="100%" align=center> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки sdddddddddddddddddddddddd</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> </table> </td> <td colspan="3" class="no-pointer td-cnt" valign=top> <!-- Cекция контента кнопок верхнего ряда --> <div class=cnt><!-- Контент 1-ой кнопки --> 1</div> <div class=cnt><!-- Контент 2-ой кнопки --> 2</div> <div class=cnt><!-- Контент 3-ой кнопки --> 3</div> <div class=cnt><!-- Контент 4-ой кнопки --> 4</div> </td> </tr> </table></div> <script type="text/javascript"> $(function() { var $Kn = $('tr.a1>td'); var $cnt = $('.td-cnt>.cnt'); $Kn.click(function() { $Kn.removeClass('active'); $Kn2.not(this).removeClass('active'); $(this).addClass('active'); var I = $Kn.index(this); $cnt.hide().eq(I).show(); }); var $Kn2 = $('#MyTbl-2 td'); var $cnt2 = $('#MyTbl-2 td .cnt2'); $Kn2.click(function() { if($(this).hasClass('noClick')) return false; $Kn2.not(this).removeClass('active'); $(this).toggleClass('active'); }); $cnt2.click(function() { var $td = $(this).parent('td');$td.addClass('noClick'); setTimeout(function(){$td.removeClass('noClick')},21); }); }); </script>
Cпрайт для кнопок делайте вертикальным, иначе куски иных кнопок влезают
2. Лучше отступ между верхним обрезом каждой картинки кнопок в спрайте делать равным 50px (удобно будет позиционировать спрайт) Для активных кнопок можно сделать второй ряд по вертикали с отступом левого края кнопки от предыдущей в 200px (тоже будет удобно считать смещение)td
Поделиться283Чт, 12 Май 2016 07:48:55
Alex_63
спасибо за работу)) однако награды по прежнему барахлят, но я юзаю тот скриптец старой админки, так что все окей)
Поделиться284Чт, 12 Май 2016 08:37:37
Deff
Да, только что бы контент боковых кнопок был в окне, а не над кнопкой. Т.е, что бы он отображался, как и в верхних кнопках, внутри. А так, просто шик, особенно оформление рамкой под диз. Если так сделать нельзя, тогда меняем верхний контент на боковой. Т.е. то, что сбоку отображается в окне, а верхние мы убираем вовсе.
Поделиться285Чт, 12 Май 2016 08:41:47
Да, только что бы контент боковых кнопок был в окне, а не над кнопкой. Т.е, что бы он отображался, как и в верхних кнопках, внутри. А так, просто шик, особенно оформление рамкой под диз. Если так сделать нельзя, тогда меняем верхний контент на боковой. Т.е. то, что сбоку отображается в окне, а верхние мы убираем вовсе.
Ничо не понял , могу сделать чтобы контент кнопок слево в столбце отражался в том же окне и точно так же, как и верхних ?
Это самое простое и удобное
При отражении контента левых кнопок ниже кнопки - контент нижней кнопки - теряется (он не может вылезти за таблицу
==================
Можете попробовать просто заполнить таблицу, а далее, поиграемся в зависимости от контента сделать тот или иной вариант, выкладывать ничего не надо, нужна только ссылка на тестовик с заполненной таблицей
Поделиться286Чт, 12 Май 2016 08:52:13
Ничо не понял , могу сделать чтобы контент кнопок слево в столбце отражался в том же окне и точно так же, как и верхних ?
Так и нужно, что бы при нажатии кнопки слева, информация кнопки вылазила не сверху, а в окне. Т.е. как у верхних кнопок.
При отражении контента левых кнопок ниже кнопки - контент нижней кнопки - теряется (он не может вылезти за таблицу
Вот это я не поняла как)))
Поделиться287Чт, 12 Май 2016 08:57:54
Это из-за свойства бордеров картинкой:
Поделиться288Чт, 12 Май 2016 08:59:25
Deff
Поняла) но контент нужен не сноской, а так же как верхние, так что ничего теряться не будет. Ведь так?
Поделиться289Чт, 12 Май 2016 09:02:07
Поняла) но контент нужен не сноской, а так же как верхние, так что ничего теряться не будет. Ведь так?
Да, будет норма, главное чтобы контент за границы таблицы не вылазил, там обрезается из-за бордеров(Хотя нужно проверить, возможно не во всех браузерах, мож уже исправили в некоторых
Поделиться290Чт, 12 Май 2016 09:05:28
Deff
Информация будет вылазить если контент сильно уйдёт вниз или с боков? Просто если вниз, то я просила ещё прокруточку.
Поделиться291Чт, 12 Май 2016 11:04:31
pusheen.
Обновите страницу Админки несколько раз, почистите кеш и куки - наверно, скрипт закешировался в браузере
Поделиться292Чт, 12 Май 2016 21:26:43
IKissa
<style> #WRP{ width:700px; margin:14px auto!important; border: 10px solid transparent;!important; -moz-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -webkit-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -o-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; } #MyTbl { background-color:#E9DEC2!important; border-collapse:collapse; } #MyTbl>tbody>tr.a1{ height:46px; } #MyTbl td{ border:rgba(121,41,23, 0.8) solid 2px; } #MyTbl td{ cursor:pointer; } #MyTbl>tbody>tr>td.no-pointer{ cursor:default; } td#a1 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } /*Фон активных кнопок или при наведении(не делал позиционирование)*/ td#a1:hover, td#a1.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2:hover, td#a2.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3:hover, td#a3.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4:hover, td#a4.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } .td-cnt .cnt{ display:none; height:498px; padding:8px; overflow-x:hidden; overflow-y:auto } .td-cnt .cnt:first-child{ display:block; } #MyTbl-2 td{ background: #E9DEC2; } #MyTbl-2{ margin:0; } tr.wind, td.wind { text-align:center; position:relative; z-index:0; padding:0; margin:0; } div.wrp-12{ height:502px; padding:0; position:relative; z-index:0; margin:0!important; } #MyTbl-2 td>.cnt2{ padding:8px; position:absolute; border:#835508 2px solid; border-radius:4px; height:498px; width:504px; overflow-x:hidden; overflow-y:auto; left:173px; top:-8px; margin:auto!important; margin-top:0!important; background: #FFDB46; box-shadow:rgba(0,0,0,.7) 0 0 2em, inset rgba(0,0,0,.7) 0 0 1em; display:none; } #MyTbl-2 td.active{ z-index:100; background:#BFF2B2; } #MyTbl-2 td.active .cnt2{ display:block; } </style> <div id=WRP> <table id="MyTbl" width=700> <tr width=25% class=a1> <td id="a1" class=active></td> <td id="a2"></td> <td id="a3"></td> <td id="a4"></td> </tr> <tr class="wind"> <td width=25% height="500" class="no-pointer wind"> <div class="wrp-12"> <table id="MyTbl-2" height="100%" width="100%" align=center> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки sdddddddddddddddddddddddd</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> </table></div> </td> <td colspan="3" class="no-pointer td-cnt" valign=top> <!-- Cекция контента кнопок верхнего ряда --> <div class=cnt><!-- Контент 1-ой кнопки --> ывлаодлфыовадфывлаофдлваоылдвао</div> <div class=cnt><!-- Контент 2-ой кнопки --> 2</div> <div class=cnt><!-- Контент 3-ой кнопки --> 3</div> <div class=cnt><!-- Контент 4-ой кнопки --> 4</div> </td> </tr> </table></div> <script type="text/javascript"> $(function() { var $Kn = $('tr.a1>td'); var $cnt = $('.td-cnt>.cnt'); $Kn.click(function() { $Kn.removeClass('active'); $Kn2.not(this).removeClass('active'); $(this).addClass('active'); var I = $Kn.index(this); $cnt.hide().eq(I).show(); }); var $Kn2 = $('#MyTbl-2 td'); var $cnt2 = $('#MyTbl-2 td .cnt2'); $Kn2.click(function() { if($(this).hasClass('noClick')) return false; $Kn2.not(this).removeClass('active'); $(this).toggleClass('active'); }); $cnt2.click(function() { var $td = $(this).parent('td');$td.addClass('noClick'); setTimeout(function(){$td.removeClass('noClick')},21); }); }); </script>
Типо так: http://sa.sa.uploads.ru/BVCei.jpg
Размеры окна кнопок слева тут:
border-radius:4px;
height:200px;
width:330px;
overflow-x:hidden;
Прокрутку добавил к контенту всех кнопок
Поделиться293Пн, 16 Май 2016 16:51:01
Deff
Спасибо огромное!!!! Это то, что нужно!!!!!!!!
Поделиться294Вт, 17 Май 2016 02:14:59
Deff
Я тут заметила, что при нажатии на кнопки, что слева, таблица контента опускается вниз, вслед за кнопкой. А возможно, что бы контент левых кнопок, открывался так же, как и верхние, без сдвигов, фиксировано в окошке?
Получается вот так, не очень красиво:
Отредактировано IKissa (Вт, 17 Май 2016 02:33:48)
Поделиться295Вт, 17 Май 2016 02:30:38
IKissa
Блин Вы замените код на последний - полностью ! А не частично - кусками из Первого Варианта и со второго!
Вам во втором коде не нужно править ничего, кроме размеров
#MyTbl-2 td>.cnt2{
padding:8px;
position:absolute;
border:#835508 2px solid;
border-radius:4px;
height:200px;
width:330px;
Поделиться296Вт, 17 Май 2016 02:37:18
Deff
Из вашего поста Таблицы на заказ (16) , я поставила таблицу, но контент ушёл в шапку...
Он не в таблице... я сдвинула в таблицу, но с каждой кнопкой он опускается.
Отредактировано IKissa (Вт, 17 Май 2016 02:51:38)
Поделиться297Вт, 17 Май 2016 02:37:34
Поправил размеры, чоб ток фоны править Вам осталось:
<style> #WRP{ width:700px; margin:14px auto!important; border: 10px solid transparent;!important; -moz-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -webkit-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; -o-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; } #MyTbl { background-color:#E9DEC2!important; border-collapse:collapse; } #MyTbl>tbody>tr.a1{ height:46px; } #MyTbl td{ border:rgba(121,41,23, 0.8) solid 2px; } #MyTbl td{ cursor:pointer; } #MyTbl>tbody>tr>td.no-pointer{ cursor:default; } td#a1 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4 { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } /*Фон активных кнопок или при наведении(не делал позиционирование)*/ td#a1:hover, td#a1.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat; } td#a2:hover, td#a2.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat; } td#a3:hover, td#a3.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;; } td#a4:hover, td#a4.active { background: url(http://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat; } .td-cnt .cnt{ display:none; height:498px; padding:8px; overflow-x:hidden; overflow-y:auto } .td-cnt .cnt:first-child{ display:block; } #MyTbl-2 td{ background: #E9DEC2; } #MyTbl-2{ margin:0; } tr.wind, td.wind { text-align:center; position:relative; z-index:0; padding:0; margin:0; } div.wrp-12{ height:502px; padding:0; position:relative; z-index:0; margin:0!important; } #MyTbl-2 td>.cnt2{ padding:8px; position:absolute; border:#835508 2px solid; border-radius:4px; height:498px; width:504px; overflow-x:hidden; overflow-y:auto; left:173px; top:-8px; margin:auto!important; margin-top:0!important; background: #FFDB46; box-shadow:rgba(0,0,0,.7) 0 0 2em, inset rgba(0,0,0,.7) 0 0 1em; display:none; } #MyTbl-2 td.active{ z-index:100; background:#BFF2B2; } #MyTbl-2 td.active .cnt2{ display:block; } </style> <div id=WRP> <table id="MyTbl" width=700> <tr width=25% class=a1> <td id="a1" class=active></td> <td id="a2"></td> <td id="a3"></td> <td id="a4"></td> </tr> <tr class="wind"> <td width=25% height="500" class="no-pointer wind"> <div class="wrp-12"> <table id="MyTbl-2" height="100%" width="100%" align=center> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки sdddddddddddddddddddddddd</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> </tr> <tr> <td> Имя кнопки <div class="cnt2">Content кнопки</div> </td> </tr> </table></div> </td> <td colspan="3" class="no-pointer td-cnt" valign=top> <!-- Cекция контента кнопок верхнего ряда --> <div class=cnt><!-- Контент 1-ой кнопки --> ывлаодлфыовадфывлаофдлваоылдвао</div> <div class=cnt><!-- Контент 2-ой кнопки --> 2</div> <div class=cnt><!-- Контент 3-ой кнопки --> 3</div> <div class=cnt><!-- Контент 4-ой кнопки --> 4</div> </td> </tr> </table></div> <script type="text/javascript"> $(function() { var $Kn = $('tr.a1>td'); var $cnt = $('.td-cnt>.cnt'); $Kn.click(function() { $Kn.removeClass('active'); $Kn2.not(this).removeClass('active'); $(this).addClass('active'); var I = $Kn.index(this); $cnt.hide().eq(I).show(); }); var $Kn2 = $('#MyTbl-2 td'); var $cnt2 = $('#MyTbl-2 td .cnt2'); $Kn2.click(function() { if($(this).hasClass('noClick')) return false; $Kn2.not(this).removeClass('active'); $(this).toggleClass('active'); }); $cnt2.click(function() { var $td = $(this).parent('td');$td.addClass('noClick'); setTimeout(function(){$td.removeClass('noClick')},21); }); }); </script>
Поделиться299Вт, 17 Май 2016 02:43:35
П
Из вашего поста Таблицы на заказ (16) , я поставила таблицу, но контент ушёл в шапку...
Я смотрел код на Вашем форуме, он частично был из поста 127, (ток для cnt2) - весь остальной стиль был от старой версии
Поделиться300Вт, 17 Май 2016 02:45:13
IKissa
Какой браузер ?