как правильно вставить JAVASCRIPT в джумлу...

Discussion in 'Интерактивные возможности' started by DJ Scalpel, Oct 22, 2007.

  1. Offline

    DJ Scalpel Недавно здесь

    Joined:
    Oct 22, 2007
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Подскажите как правильно вставить JAVASCRIPT в джумлу...
    возникла потребность с возможностью вывода в статье скрытого текста, который бы показывался при нажатии на заголовок -
    например

    1) заголовок 1
    2) заголовок 2

    так при нажатии на "заголовок 1" пользователю бы отображался скрытый до этого текст - например

    1) заголовок 1
    текст заголовка 1 скрыт до тех пор, пока вы не нажмете на заголовок, при повторном нажатии этот текст должен быть спрятан​
    2) заголовок 2

    нашел в тырнете такой скрипт
    <a href="javascript://" onclick="myShow();return false;">[+]</a>
    <a href="javascript://" onclick="myHide();return false;">[-]</a>
    <div id="myBlock" style="border: 1px #000 solid; width: 100%;">
    Нажмите на «[+]» чтобы показать этот блок.
    Нажмите на «[-]» чтобы спрятать этот блок.
    </div>

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    // Метод неверен. Не будет работать в Mozilla и Netscape.
    function myHide() {
    myBlock.style.display = "none";
    }
    function myShow() {
    myBlock.style.display = "block";
    }
    //--><!]]></script>

    в мозилле - на странице сайта на джумле не работает - говорит что myBlock не определен. в ИЕ все работает,
    на кустомной странице не относящейся к джумле скрипт в мозилле работает
    скажите - как сделать чтобы в мозилле все тоже работало

    PS <script type="text/javascript"><!--//--><![CDATA[//><!-- итд вводил в страницу frontpage.php
    <a href="javascript://" onclick="myShow();return false;">[+]</a> вводил в содержимое страницы ( через редактор джумлы)
     
  2.  
  3. mavik
    Offline

    mavik Недавно здесь

    Joined:
    Jun 23, 2006
    Messages:
    12
    Likes Received:
    0
    Gender:
    Male
    Ответ: как правильно вставить JAVASCRIPT в джумлу...

    Правильный код выглядит так:

    <a onclick="myShow(); return false;" href="#">[+]</a>
    <a onclick="myHide(); return false;" href="#">[-]</a>
    <div id="myBlock" style="border: 1px solid rgb(0, 0, 0); width: 100%;">
    Нажмите на «[+]» чтобы показать этот блок.
    Нажмите на «[-]» чтобы спрятать этот блок.
    </div>

    <script type="text/javascript">
    function myHide() {
    document.getElementById('myBlock').style.display = "none";
    }
    function myShow() {
    document.getElementById('myBlock').style.display = "block";
    }
    </script>
     
  4. Offline

    DJ Scalpel Недавно здесь

    Joined:
    Oct 22, 2007
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    сворачивание и разворачивание скрытого текста

    спасибо, кстати нашел еще один вариант
    это в тексте страницы
    <ul> <li> <div id="1">Первый пункт</div>
    <ul> <li> <div id="0"><a href="javascript://" onclick="myHideMenu(2);return false;">Первый подпункт</a> </div>
    <ul> <div id="2" style="display: none">
    <li>Первый подпункт<br /><br /></li>
    <li>Второй подпункт<br /><br /></li>
    <li>Третий подпункт <br /><br /></li> </div></ul> </li> </ul> </li> </ul>

    это в странице индекс.пхп
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function myHideMenu(Myindex){
    var el = document.getElementById( Myindex );
    if (el.style.display == "none"){
    el.style.display = "block";
    }else{
    el.style.display = "none"; }
    }
    //--><!]]></script>

    ктати, кто может объяснить как работает данный код ( для безграмотных) прошу объяснить - так как считаю это более универсальным... взято тут http://www.xakep.ru/magazine/xa/101/128/1.asp
    Код (CODE):
    1. Многоуровневое меню
    2.  
    3.     * ЯЗЫК: HTML
    4.  
    5. <ul>
    6.  
    7. <li>
    8.  
    9. <div class="collapsible">Первый пункт</div>
    10.  
    11. <ul>
    12.  
    13. <li>
    14.  
    15. <div class="collapsible">Первый подпункт</div>
    16.  
    17. <ul>
    18.  
    19. <li>Первый подпункт</li>
    20.  
    21. <li>Второй подпункт</li>
    22.  
    23. <li>Третий подпункт</li>
    24.  
    25. </ul>
    26.  
    27. </li>
    28.  
    29. </ul>
    30.  
    31. </li>
    32.  
    33. </ul>
    34.  
    35. Как видишь, я использовал слои с классом collapsible, обозначающие «кнопки», при клике на которые меню свернется:
    36. Сворачивание меню
    37.  
    38.     * ЯЗЫК: JavaScript
    39.  
    40. $(".collapsible").click(function() {
    41.  
    42. $(this).parent().children().not(".collapsible").toggle();
    43.  
    44. });
    45.  
    46. Здесь используется классический прием jQuery – цепочка вызовов. Первой в ней
    47. идет конструкция $(this), обозначающая текущий элемент, на котором сработало
    48. событие – клик мышкой. Parent() выбирает прямого родителя (в нашем случае тэг li.
    49.  children()) и, как не сложно догадаться, служит для получения всех дочерних
    50. элементов. Из них нам надо убрать слой с классом collapsible, что делает метод not.
    51.  Теперь осталось вызвать toggle, который либо спрячет, либо покажет ветку меню,
    52. в зависимости от ее видимости.
     
  5. mavik
    Offline

    mavik Недавно здесь

    Joined:
    Jun 23, 2006
    Messages:
    12
    Likes Received:
    0
    Gender:
    Male
    Ответ: как правильно вставить JAVASCRIPT в джумлу...

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    // Функция скрытия/открытия элемента ID которого передано в Myindex
    function myHideMenu(Myindex){
    // Найти элемент на странице
    var el = document.getElementById( Myindex );
    // Если он скрыт
    if (el.style.display == "none"){
    // открыть
    el.style.display = "block";
    }else{
    // иначе скрыть
    el.style.display = "none"; }
    }
    //--><!]]></script>

    Тоесть функция переключает состояние указанного элемента.
     
  6. Offline

    DJ Scalpel Недавно здесь

    Joined:
    Oct 22, 2007
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Ответ: как правильно вставить JAVASCRIPT в джумлу...

    я имел ввиду это. - как это работает и как это вставить...
    "* ЯЗЫК: JavaScript $(".collapsible").click(function() { $(this).parent().children().not(".collapsible").toggle(); });"

    Добавлено через 2 часа 19 минут
    вопрос - попытался написать скрипт проверяющий состояние всех DIVов, так при "дохождении" скрипта до цикла окно как бы вешается - то есть выводится результат

    0 137 и на этом все - белый экран и крутящийся значок загрузки страницы. ПОЧЕМУ? по идее должен быть выведен список всех дивов...???

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function myHideMenu(Myindex){
    var el = document.getElementById( Myindex );
    var i,divs;
    divs = document.getElementsByTagName("div");
    if (el.style.display == "none")
    {
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }

    for (i=0; i <= divs.length; i=i+1)
    {
    document.write(i + " " + divs.length + " " + divs.style.display)
    }
    }
    //--><!]]></script>

    Добавлено через 5 часов 24 минуты
    выставляю на суд данный код НО !!! в данный момент IE никак не хочет понимать
    style="display: none"> кто знает подскажите
    Код (CODE):
    1. <SCRIPT LANGUAGE="JavaScript">
    2.     function myHideMenu(Myindex){
    3.         var el = document.getElementById( Myindex );
    4.         var i,divs;
    5.         divs = document.getElementsByTagName("div");
    6.  
    7.   for (i=0; i <= divs.length; i=i+1)
    8.   {
    9.     if (divs[i].id == Myindex){
    10.             if (el.style.display == "none"){
    11.                         el.style.display = "block";
    12.                 }else{
    13.                         el.style.display = "none";
    14.                 }
    15.        
    16.         }else{
    17.             if (el.id.indexOf(divs[i].id)==0){
    18.             }else{
    19.                 if (divs[i].style.display == "block")
    20.                 {
    21.                         divs[i].style.display = "none";
    22.                     }
    23.             }  
    24.         }
    25.   }
    26. }
    27. </script>


    код на странице примерно такой
    Код (CODE):
    1. li> <a href="javascript://" onclick="myHideMenu(10);return false;">Аллергические заболевания</a>
    2.             <ul>
    3.                 <div id="10" style="display: none">
    4.                         <li>
    5.                             <a href="javascript://" onclick="myHideMenu(101);return false;">Астма бронхиальная</a><br/>
    6.                                     <div id="101" style="display: none">
    7. Каждая строка
    8. </div>
    9. </li>....
     
    Last edited: Oct 24, 2007
  7. Offline

    serjik Недавно здесь

    Joined:
    Feb 2, 2009
    Messages:
    23
    Likes Received:
    0
    Gender:
    Male
    Помогите плиз!!!
    Вот мне тоже нужно сделать разворачивающийся текст , когда при нажатии на ссылку подробнее разворачивается скрытый текст (как на торрентс ру), но я вот так и не смог как то вставить данные скрипты что тут приводились чтобы он работал....делаю все как написано, один блок скрипта вставляю в index.php, другой в html код страницы, но никакого скрытого текста не появляется. видно только неактивную надпись "нажмите + чтобы показать скрытый текст". видимо данный скрипт не работает с версией 1.5.8 :(.
    вот роясь в сети нашел мамбот nabToggleDisplay ( http://www.nab-design.de/devcorner/toggledisplay.html ), который якобы решает эту проблему, установил, включил, но никакой кнопки в редакторе не появляется и вообще непаонятно как его использовать. После установеи кнопки редактор просто не загружается, а при ее отключении и попытке в html вводить код напрямую он тоже не ставится. Может кто с ним сталкивался? Или может есть какой другой плагин для решения дааной проблемы???
     
    Last edited: Feb 2, 2009
  8. Offline

    rustamh Недавно здесь

    Joined:
    Jul 3, 2009
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    <![CDATA[/ - вот это джумла сама приписывает к коду.
    пока я сам разбираюсь с таким же вопросом - но судя по всему, есть коды, которые джумла комментирует, чтобы они не работали.
    сталкивался с подобной проблемой когда Флеш хотел вставить в материал . надо найти какой-то фильтр и там отключить комментирование скрипта
     

Share This Page

Loading...