0 Пользователей и 1 Гость просматривают эту тему.
  • 12 Ответов
  • 5799 Просмотров
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Задача: для всех пользователей сделать так чтобы, к примеру, по нажатию на надпись "Все фото" снизу появлялась табличка с фотками или какой нибудь текст.
Перебрав кучу модулей, плагинов и т.п. для скрытия/показа контента, решил все сделать старым лобрым способом - ручками ^-^
Нашел в сети удачное решение - Java script. Вот как выглядит он:
Код
<script type="text/javascript">
function myHide() {
document.getElementById('myBlock').style.display = "none";
}
function myShow() {
document.getElementById('myBlock').style.display = "block";
}
</script>
Его я запихнул в шаблон между <head></head>
Далее код для страницы:
Код
<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>
После этого у меня на странице появилась надпись "Все фото + -". При нажатии на - информация "Тут размещаем таблицу с картинками или текст" скрывается, при нажатии на "Все фото +" - появляется.

Просьба: Подскажите как изменить код так чтоб была только надпись "Все фото" и открытие/скрытие происходило по нажатию на ней. (не очень удобно тыкать на + или -). И еще одно - почему-то информация по умолчанию развернута, хотелось бы чтоб была по умолчанию скрыта.

Всем огромное спасибо, заранее.
*

dimsa

  • Захожу иногда
  • 135
  • 32 / 0
А почему вместо такого решения не использовать эффект слайдера? плагины, которые это реализуют есть. вопрос оформления подгонишь стилями.... + к тому же слайдер всегда отображается в закрытом состоянии!
Верьте в будущее и оно наступит.
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Код
<script type='text/javascript'>
function showHide()
{
    if ( document.getElementById('myDiv').style.display == 'block' )
        document.getElementById('myDiv').style.display = 'none';
    else
        document.getElementById('myDiv').style.display = 'block';
}
function showHide2()
{
    if ( document.getElementById('myDiv2').style.display == 'block' )
        document.getElementById('myDiv2').style.display = 'none';
    else
        document.getElementById('myDiv2').style.display = 'block';
}
</script>
<div onclick="showHide()" style="cursor: pointer;">+ click to show/hide 1</div>
<div id="myDiv" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">
view hide text  view hide text view hide text view hide text view hide text view hide text
</div>
<br /><br />
<div onclick="showHide2()" style="cursor: pointer;">+ click to show/hide 2</div>
<div id="myDiv2" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">

view hide text2  view hide text2 view hide text2 view hide text2 view hide text2 view hide text2
</div>

и я недавно для 1.5 писал плагин спойлера http://joomlaforum.ru/index.php/topic,64949.0.html, при желании можете переписать под 1.0
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Код
<script type='text/javascript'>
function showHide()
{
    if ( document.getElementById('myDiv').style.display == 'block' )
        document.getElementById('myDiv').style.display = 'none';
    else
        document.getElementById('myDiv').style.display = 'block';
}
function showHide2()
{
    if ( document.getElementById('myDiv2').style.display == 'block' )
        document.getElementById('myDiv2').style.display = 'none';
    else
        document.getElementById('myDiv2').style.display = 'block';
}
</script>
<div onclick="showHide()" style="cursor: pointer;">+ click to show/hide 1</div>
<div id="myDiv" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">
view hide text  view hide text view hide text view hide text view hide text view hide text
</div>
<br /><br />
<div onclick="showHide2()" style="cursor: pointer;">+ click to show/hide 2</div>
<div id="myDiv2" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">

view hide text2  view hide text2 view hide text2 view hide text2 view hide text2 view hide text2
</div>
Извини я не очень в программировании - учусь только. Расскажи что у тебя такое showHide() и showHide2(). Я понимаю что это функции, но что происходит при их работе т.е. если я запихну этот код к себе что будет с инфой "view hide text" и "view hide text2"?
Спасибо за быстрый дельный ответ. 2beliyadm ты меня уже не раз выручал - спасибо и +1
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Извини я не очень в программировании - учусь только. Расскажи что у тебя такое showHide() и showHide2(). Я понимаю что это функции, но что происходит при их работе т.е. если я запихну этот код к себе что будет с инфой "view hide text" и "view hide text2"?
а ты возьми целиком этот код и посмотри на работу.
Это две функции, потому что в этом примере два раскрывающихся блока (myDiv и myDiv2)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Не получилось, может, что-то не так сделал. Я взял скрипт:
Код
<script type='text/javascript'>
function showHide()
{
    if ( document.getElementById('myDiv').style.display == 'block' )
        document.getElementById('myDiv').style.display = 'none';
    else
        document.getElementById('myDiv').style.display = 'block';
}
function showHide2()
{
    if ( document.getElementById('myDiv2').style.display == 'block' )
        document.getElementById('myDiv2').style.display = 'none';
    else
        document.getElementById('myDiv2').style.display = 'block';
}
</script>
В ставил между  Его я запихнул в шаблон между <head></head>
А остальной код:
Код
<div onclick="showHide()" style="cursor: pointer;">+ click to show/hide 1</div>
<div id="myDiv" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">
view hide text  view hide text view hide text view hide text view hide text view hide text
</div>
<br /><br />
<div onclick="showHide2()" style="cursor: pointer;">+ click to show/hide 2</div>
<div id="myDiv2" style="text-align: left; display:none; border: 1px solid #ccc; width: 200px; padding: 4px;">

view hide text2  view hide text2 view hide text2 view hide text2 view hide text2 view hide text2
</div>
залил на страницу.
На странице есть надписи + click to show/hide 1 и + click to show/hide 2 а не нажимаются и никакого эффекта.
*

MuraDweb

  • Захожу иногда
  • 267
  • 124 / 1
Я вот пользовал такую распространённую "конструкцию"
Код: javascript
<script language="javascript" type="text/javascript">
//<![CDATA[
 function SwitchMenu(obj) {
  if(document.getElementById) {
    var el = document.getElementById(obj);
      var ar = document.getElementById("menu_down_up").getElementsByTagName("DIV");
    if(el.style.display == "none") {
   for (var i=0; i<ar.length; i++) {
ar[i].style.display = "none";
}
el.style.display = "block";
} else {
el.style.display = "none";
}
  }
}
//]]>
</script>

<span class="link" id="menu_down_up" onclick="SwitchMenu('sub_0')" title="Показать Текст 1">Нажми на меня №1</span>
<div class="submenu" id="sub_0" style="display: none;">
Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
</div>

<br />

<span class="link" id="menu_down_up" onclick="SwitchMenu('sub_1')" title="Показать Текст 2">Нажми на меня №2</span>

<div class="submenu" id="sub_1" style="display: none;">
Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
</div>

Яндекс.Деньги: 41001423568435
Webmoney: R 377548789269 | Z 421465848009 | E 126339514076 | U 413960261029
-
А, Вы читали ? Правила форума | FAQ J! 1.5 | FAQ J! 1.0
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Я вот пользовал такую распространённую "конструкцию"

Блин, тоже не сработало.. Сделал тоже самое: скрипт в index.php в раздел <head> а код - на страницу. Показывает надпись "Нажми на меня №1" и все, никаких действий.
Ребята, что я делаю не так?
*

MuraDweb

  • Захожу иногда
  • 267
  • 124 / 1
Javascript`ы хоть разрешены в браузере?
Ибо всё должно работать.
Код на страницу, как вставляешь?
Если через редактор, попробуй его отключить (поставь простой html).

Короче вставь весь код напрямую в index, если не сработает значит у тебя проблемы какие-то с бравзером.
« Последнее редактирование: 20.05.2009, 16:08:45 от MuraDweb »
Яндекс.Деньги: 41001423568435
Webmoney: R 377548789269 | Z 421465848009 | E 126339514076 | U 413960261029
-
А, Вы читали ? Правила форума | FAQ J! 1.5 | FAQ J! 1.0
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Javascript`ы хоть разрешены в браузере?
Ибо всё должно работать.
Код на страницу, как вставляешь?
Если через редактор, попробуй его отключить (поставь простой html).
Java разрешена 100% (перепроверил, да и мой первый вариант работает...), вставляю код через кнопку html в редакторе и в открывшемся окошке ввожу код. Все, как обычно. Х.з. чего не работает. А очень надо сделать чтоб открывался/скрывался кликами по одной надписи.
*

MuraDweb

  • Захожу иногда
  • 267
  • 124 / 1
Если через редактор, попробуй его отключить (поставь простой html).
Так пробывал?
Яндекс.Деньги: 41001423568435
Webmoney: R 377548789269 | Z 421465848009 | E 126339514076 | U 413960261029
-
А, Вы читали ? Правила форума | FAQ J! 1.5 | FAQ J! 1.0
*

spot

  • Захожу иногда
  • 58
  • 0 / 0
  • Linux - долой форточки
Так пробывал?
Только что попробывал - РАБОТАЕТ!!!
Причем работает и вариант который предложил господин beliyadm!!!!!
Только не пойму теперь почему через редактор не работает?

Все, всем СПАСИБО! Тему можно закрыть. Всем новичкам, как я успехов.
« Последнее редактирование: 20.05.2009, 16:39:00 от spot »
*

MuraDweb

  • Захожу иногда
  • 267
  • 124 / 1
Только не пойму теперь почему через редактор не работает?
Ну это много раз обсуждалось на форуме. ;)
Удачи !!!
Яндекс.Деньги: 41001423568435
Webmoney: R 377548789269 | Z 421465848009 | E 126339514076 | U 413960261029
-
А, Вы читали ? Правила форума | FAQ J! 1.5 | FAQ J! 1.0
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Скрытие/замена реальных ссылок на файлы.

Автор DK-Scorp

Ответов: 0
Просмотров: 1412
Последний ответ 03.10.2012, 01:17:48
от DK-Scorp
Две колонки текста в материале статьи

Автор Trok

Ответов: 7
Просмотров: 8345
Последний ответ 25.03.2011, 13:37:44
от klubnichkaaa
как изменить количество колонок в материале?

Автор Van4o

Ответов: 1
Просмотров: 2778
Последний ответ 22.12.2010, 20:57:52
от vikingg
Как убрать дату, автора и дату последнего обновления контента

Автор Gvin

Ответов: 3
Просмотров: 2460
Последний ответ 03.11.2009, 16:57:48
от beliyadm
Можно автоматизировать добавление контента?

Автор Rojas

Ответов: 2
Просмотров: 2070
Последний ответ 29.10.2009, 01:31:01
от Rojas