1 Тема от marlik

  • marlik
  • Member
  • Неактивен

    Тема: Как онлайн менять thin-wide-thin в thin-wide?

    Возникла идея, колонки на сайте разбиваются так:

    шапка
    thin-wide-thin
    подвал

    хочется что-бы некоторые записи(при нажатии ссылки) трансформировали сайт так:

    шапка
    thin-wide
    подвал

    Есть-ли хотя-бы теоретически такая возможность? Кто-нибудь это делал? Где почитать?

    Спасибо.

    

    2 Ответ от liketts

    • liketts
    • Member
    • Неактивен

      Re: Как онлайн менять thin-wide-thin в thin-wide?

      http://devheart.org/articles/jquery-col … ar-layout/
      http://www.dustindiaz.com/basement/toggle.html
      http://cdn.net.tutsplus.com/028_jQueryS … eview.html

      

      3 Ответ от saahov

      • saahov
      • Administrator
      • Неактивен

        Re: Как онлайн менять thin-wide-thin в thin-wide?

        Ну да, с помощью Javascript+CSS это можно сделать. Чтобы сделать подобное у некоторых записей, можно использовать Custom Fields, либо отдельную категорию, при попадании в которую выводилась бы нужная ссылка.

        

        4 Ответ от marlik

        • marlik
        • Member
        • Неактивен

          Re: Как онлайн менять thin-wide-thin в thin-wide?

          Я вот поковырялся, подумал что можно попробовать подключить библиотеку JQuery. Но при попытке подключить ее в HTML Head так:

          <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

          МТ ведет себя неадекватно, либо полностью удаляет весь HTML Head, либо часть. Но результат такой что МТ не дает свое запихнуть в HTML Head, защита?

          1. Как подключить JQuery?
          2. Как включить java-scripts вообще?

          P. s. Кажется начал разбираться, потихоньку, сделал пока так, подключил библиотеку прямо в страницу:

          <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<input type="button" value="Свернуть / Развернуть" onclick="$('div.container').slideToggle(500);">
<div class="container">
Ни теннис, ни горные лыжи, ни даже хоккей не сравнятся по популярности
с футболом. По данным ФИФА, на планете насчитывается порядка 300
миллионов любителей погонять мяч. В каких только соревнованиях они не
участвуют: помимо знакомых каждому Чемпионата Мира и Чемпионата Европы
проводятся Арабская лига чемпионов, Кубок наций Персидского залива,
Чемпионат мира по футболу среди бездомных и даже Золотой кубок КОНКАКАФ.
</div>

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

          Отредактировано marlik (05:09:2010 19:26:29)

          

          5 Ответ от saahov

          • saahov
          • Administrator
          • Неактивен

            Re: Как онлайн менять thin-wide-thin в thin-wide?

            А какая версия MT у вас? У меня такие «шутки» с вырезанием происходили на Movable Type 4 при активной подсветке синтаксиса.

            

            6 Ответ от marlik

            • marlik
            • Member
            • Неактивен

              Re: Как онлайн менять thin-wide-thin в thin-wide?

              Ага, четверка. Решилось включением в шаблон index.shtml прямо под:

              <$mt:Include module="Шапка сайта"$>
              

              7 Ответ от saahov

              • saahov
              • Administrator
              • Неактивен

                Re: Как онлайн менять thin-wide-thin в thin-wide?

                Вот ещё такой плагин появился: http://plugins.movabletype.org/anythingslider/

                

                8 Ответ от marlik

                • marlik
                • Member
                • Неактивен

                  Re: Как онлайн менять thin-wide-thin в thin-wide?

                  Что-то он какой-то сложный, с ходу так и не разобрался. Ява скрипты удалось в HTML Head вставить, странно как-то.

                  saahov пишет:

                  Ну да, с помощью Javascript+CSS это можно сделать. Чтобы сделать подобное у некоторых записей, можно использовать Custom Fields, либо отдельную категорию, при попадании в которую выводилась бы нужная ссылка.

                  А это как?

                  liketts пишет:

                  http://devheart.org/articles/jquery-col … ar-layout/
                  http://www.dustindiaz.com/basement/toggle.html
                  http://cdn.net.tutsplus.com/028_jQueryS … eview.html

                  Что-то сложно как-то это в МТ сделать, добился только того что правый сайдбар исчезает по display: none; и трындец, а середина то-бишь контент не расширяется, и не занимает его место. Может кто знает где подкрутить? Тема minimalist-red.

                  Даже пришлось отдельный вариант такой страницы делать, что-бы понять как это функционирует. :(

                  

                  9 Ответ от liketts

                  • liketts
                  • Member
                  • Неактивен

                    Re: Как онлайн менять thin-wide-thin в thin-wide?

                    marlik пишет:

                    Что-то сложно как-то это в МТ сделать, добился только того что правый сайдбар исчезает по display: none; и трындец, а середина то-бишь контент не расширяется, и не занимает его место. Может кто знает где подкрутить? Тема minimalist-red.

                    это естественно, чтобы середина тоже реагировала надо переработать весь шаблон "под себя", сорри, но расписывать как это сделать нет свободного времени

                    

                    10 Ответ от marlik

                    • marlik
                    • Member
                    • Неактивен

                      Re: Как онлайн менять thin-wide-thin в thin-wide?

                      Да вот готовый вариант уже есть!!! Всего два филе.

                      index.html

                      <html>
  <head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" type="text/css" href="my.css">
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>  
   
</head>
  <body>

<p>
<input type="button" value="Показать" onclick="$('#main2').addClass('use-sidebar');">
<input type="button" value="Скрыть" onclick="$('#main2').removeClass('use-sidebar');">
<input type="button" value="Туда-сюда" onclick="$('#main2').toggleClass('use-sidebar');">
 </p>

<div id="header">header</div>

<div id="container">
        <div id="container-inner">

<div class="use-sidebar sidebar-at-right" id="main2">
<div id="main2-inner">

    <div id="beta">Sidebar1</div>

    <div id="alpha">Content</div>
 
    <div id="gamma">Sidebar2</div>
 
 <!--   <div id="clear">&nbsp;</div> -->
 
</div>
        </div>

</div>
        </div>

<div id="footer">footer</div>

</body>
</html>

                      main.css

                      #alpha,#beta,#gamma {
    line-height: 100px;
    text-align: center;
    border: 1px solid;
    margin: 1px 1px 1px 1px;
}

#header,#footer {
background: green;
line-height: 100px;
    text-align: center;
    border: 1px solid;
}

#footer {
clear: both;
}
 
#beta {
    background-color: #DEF;
    border-color: #BCD;
    min-width: 25%; 
    display: block;
    float: left;
}

#gamma {
    background-color: #DEF;
    border-color: #BCD;
    display: none;
}

#alpha {
    background-color: #EFE;
    border-color: #CDC;
    display: block;
}

 
.use-sidebar #alpha {
width: 49%;
}

.use-sidebar #beta { 
    display: block; 
    width: 25%;
  /*  min-width: 25%; */
    float: left;
}

.use-sidebar #gamma {
    display: block;
    width: 25%;
}
 
.use-sidebar.sidebar-at-left #alpha,
.use-sidebar.sidebar-at-right #gamma {
float: right;
}

.use-sidebar.sidebar-at-right #alpha, 
.use-sidebar.sidebar-at-left #gamma {
float: left;
}

                      Все отлично работает, но в МТ есть где-то, что-то, что держит середину(контент) и не дает ей расширяться. Если-бы найти это значение где поменять и все заработало... Когда долго ковыряешься, ужо голова начинает болеть... :(

                      Тем более в МТ как-то сделано через зад. Вот нормальный как мне кажется вариант:

                      <div id="header"></div>

<div id="conteiner">
<div id="alpha">sidebar1</div>
<div id="beta">content</div>
<div id="gamma">sidebar2</div>
</div>

<div id="footer"></footer>

                      Тут можно как угодно менять, экспериментировать. А в МТ как-будто через зад:

                      alpha - на самом деле content, а sidebar1 и sidebar2 - это beta и gamma.

                      Отредактировано marlik (09:09:2010 18:43:32)