Не знаю как правильно сформулировать вопрос в 4 слова(

[CatInTheBread]

Всем джамбо. Есть страничка с кнопками...http://osobniak.com/дизайн-интерьеров

Кнопки стоят вертикально и контент открывается соответственно блоком под каждой кнопкой. Хотелось бы сделать все по симпатичнее. Например кнопки горизонтально, и при нажатии открывался блок с контентом на всю ширину страницы или кнопки вертикально с лева, а контент открывался с права...

Если есть идеи буду признателен! Вот код кнопок.

<!-- Lightbox Plus ColorBox v2.6/1.3.32 - 2013.01.24 - Message: 0--><script type="text/javascript">
function onclick(event) {
console.log("text1");
var txt = event.target.innerText;
if (txt == "Современные интерьеры")
{
jQuery("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Классические интерьеры")
{
jQuery("#ToggleBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для офиса")
{
jQuery("#ToggleElseBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для ресторана")
{
jQuery("#TogglePestapan").slideToggle("slow");
}
};
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({speed:0,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:false,initialHeight:false,maxWidth:false,maxHeight:false,scalePhotos:false,opacity:0,preloading:false,current:" {current} {total}",previous:"",next:"",close:"",overlayClose:false,loop:false,scrolling:false,escKey:false,arrowKey:false,top:false,right:false,bottom:false,left:false});
$("button").each(function(item) {
$(this).click(onclick);
});
});
</script>
<style>

.but_lavender {
margin: 10px 0px 0px 0px;
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, sans-serif;
padding: 5px 13px;
font-size: 13px;
border: solid 1px #aaa;
border-color: #99958c;
background: #c0c0c0;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.but_lavender:hover {
text-decoration: none;
background: #d0f0c0;
}
.but_lavender:active {
position: relative;
top: 1px;
}
</style>

Или может кто знает как это сделать вообще не прибегая к использованию кнопок?!?

Edited June 6, 2013 by CatInTheBread

[hypnocolor]

Вот уж на что, а на такой говнокод я бы в жизни ориентироваться не стал.

[CatInTheBread]

lol а что в нем такого говнокодового?))

[hypnocolor]

Да хотя бы привязка слоёв, которые надо раскрыть, к тексту на соответствующей кнопке:

...
if (txt == "Современные интерьеры")
{
jQuery("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Классические интерьеры")
...

А если кнопок будет 20? Писать 20 условий для 20 текстовых значений? А если 100?

Кроме того, из описания я вообще слабо понял, что именно вам нужно. Если не знаете, как объяснить — можно нарисовать, например.

[CatInTheBread]

http://itmages.ru/im...062799/58c77c60

либо так

http://itmages.ru/im...062798/24ed160d

Типа нажимаешь на кнопку в блоке открывается соответствующий контент, нажимаешь на другую открывается другой контент.

хотя мне кажется что без кнопок будет лучше..

Edited June 6, 2013 by CatInTheBread

[hypnocolor]

Сделать можно как угодно: хоть кнопками, хоть ссылками, хоть даже картинками. Вопрос «как будет лучше» уже относится к дизайнеру.

http://jsfiddle.net/hypnocolor/hhwue/

Edited June 6, 2013 by hypnocolor

[CatInTheBread]

Может у вас завалялся неплохой материальчик по Javascript? В смысле понятный и желательно с основ??

Странно, но у меня на страничке с вашим кодом вот такая хрень... http://osobniak.com/123-2

Не знаете почему так?

Edited June 6, 2013 by CatInTheBread

[hypnocolor]

http://learn.javascript.ru

Плюс вот здесь, например, есть небольшой список отличных книг, в том числе по JS.

[CatInTheBread]

Спасибо за книги, очень пригодятся...

Не знаете почему такая хрень со скриптом? не первый раз уже такое наблюдаю на сайте...(

[hypnocolor]

Странно, но у меня на страничке с вашим кодом вот такая хрень... http://osobniak.com/123-2

Не знаете почему так?

Код вашей страницы (где-то после 130-й строки):

...
<p>.buttons li{
...

Откуда в стилях взялись <p>?

[CatInTheBread]

да это все хром...пустые строки он заполняет <p>

...теперь переходы между блоками не делает =\

А сильно надо модифицировать скрипт чтобы кнопки заменить просто текстом (ссылками)??

Edited June 6, 2013 by CatInTheBread

[hypnocolor]

Ну меняйте кнопки на то, что вам нужно, и пропишите этот элемент вместо ".buttons button" в коде.

[CatInTheBread]

А нет идей почему дивы не меняются при клацанье по кнопкам?

[hypnocolor]

Без ссылки на проблемную страницу — нет.

[CatInTheBread]

Нет ничего проще)

http://osobniak.com/123-2

[hypnocolor]

Измените $(function(){ на jQuery(document).ready(function($){

Edited June 7, 2013 by hypnocolor

[CatInTheBread]

IT'S ALIVE!

Премного благодарен)

если хотите скиньте мне в сообщении номер электронного кошелька..будет время какую-нибудь копеечку закину

[CatInTheBread]

У меня появился еще 1 вопрос (в принципе абсолютно не обязательный)

Например я скидываю разные картинки в 2 разных div'a. Начинаю пролистывать их в одном диве, когда они кончаются автоматом начинают просматриваться картинки уже с другого дива...Дак вот можно как то сделать чтобы картинки открывались только те которые лежат в определенном диве?

[hypnocolor]

И тут я снова вас не понял

[CatInTheBread]

в общем) Например есть кнопки "Машины" и "Яхты" у каждой свой див в котором лежат определенные фотки...

Допустим в диве "Машины" лежит 5 картинок.. Дак вот открываю я эти картинки и после 5ой картинки идет не 1ая картинки с раздела "Машины", а картинки с раздела "Яхты" =)

[hypnocolor]

Если в «Машинах» лежит 5 картинок, то откуда там после пятой картинки возьмутся картинки из «Яхт», если открыты «Машины»? Мой мозг отказывается что-то понимать)

[CatInTheBread]

дак в том то и дело что он(неодушевленная программа) начинает просматривать все картинки на странице, и ей походу все ровно что открыто)

[CatInTheBread]

А может вы мне лучше подскажите как засунуть в кнопку еще кнопки с таким же функционалом?))

[hypnocolor]

Там же всё понятно. Одна кнопка — один слой. Первая кнопка — первый слой, вторая кнопка — второй. Добавляете, сколько нужно, кнопок и слоёв, и всё.

[CatInTheBread]

Я извиняюсь за свою назойливость, но не могли бы вы глянуть так должно выглядеть?(кнопка внутри кнопки)

<ul class="buttons">
    <li><button class='but_black'>first</button></li>
    <li><button class='but_black'>second</button></li>
    <li><button class='but_black'>third</button></li>
    <li><button class='but_black'>fourth</button></li>
    <li><button class='but_black'>fifth</button></li>
</ul>
<div class="layers">
    <div class="active">
<p>bla bla bla bla bla bla</p>
    </div>
   <div>
<ul class='buttons'>
      <li><button>123</button></li>
      <li><button>321</button></li>
      <li><button>231</button></li>
      <li><button>333</button></li>
</ul>
    <div class='layers'>
        <div class='active'>123</div> 
        <div>321</div>
        <div> 231</div>
        <div>333</div>   
    </div>     
  </div>
    <div>Three</div>
   <div>four</div>
  <div>five</div>
</div>

[hypnocolor]

Кнопка внутри кнопки? Што?