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

Тема в разделе "Интерактивные возможности", создана пользователем DJ Scalpel, 22.10.2007.

  1. Offline

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

    Регистрация:
    22.10.2007
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Подскажите как правильно вставить 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 Недавно здесь

    Регистрация:
    23.06.2006
    Сообщения:
    12
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: как правильно вставить 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 Недавно здесь

    Регистрация:
    22.10.2007
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    сворачивание и разворачивание скрытого текста

    спасибо, кстати нашел еще один вариант
    это в тексте страницы
    <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 Недавно здесь

    Регистрация:
    23.06.2006
    Сообщения:
    12
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: как правильно вставить 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 Недавно здесь

    Регистрация:
    22.10.2007
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: как правильно вставить 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>....
     
    Последнее редактирование: 24.10.2007
  7. Offline

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

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

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

    Регистрация:
    03.07.2009
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    <![CDATA[/ - вот это джумла сама приписывает к коду.
    пока я сам разбираюсь с таким же вопросом - но судя по всему, есть коды, которые джумла комментирует, чтобы они не работали.
    сталкивался с подобной проблемой когда Флеш хотел вставить в материал . надо найти какой-то фильтр и там отключить комментирование скрипта
     

Поделиться этой страницей

Загрузка...