Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #51 (permalink)  
Старый 08.08.2015, 20:01
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

Спасибо, буду пробовать)
Ответить с цитированием
  #52 (permalink)  
Старый 04.09.2015, 13:22
Новичок на форуме
Отправить личное сообщение для 2009bes Посмотреть профиль Найти все сообщения от 2009bes
 
Регистрация: 04.09.2015
Сообщений: 1

Помогите,прошу вас, я уже перевернул данную тему, но не могу решить свою проблему. Как сделать чтобы спрятать содержание под картинку/банер (статичную png,gif или flash), при клике на которую будет осуществлён переход по указанной ссылке,и сам блок будет открыт, или же произойдёт открытие ссылки в новой вкладке, при этом блок будет открыт сразу
Ответить с цитированием
  #53 (permalink)  
Старый 19.11.2015, 11:15
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

в этой теме был код:
var base = {
    // Поиск элементов по классу
    findClass: function(str, node) {
         if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
         else {
              var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
              for(i = 0; i < length; i++) {
                    key = true;
                    for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
                    if(key) array.push(list[i]);
              }
              return array;
         }
    },
    // Добавление обработчиков событий
    bind: function(node, type, listener) {
        if(node.addEventListener) node.addEventListener(type, listener, false);
        //@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
    },
    // Реализация DOMContentLoaded
    init: [],
    ready: function() {
        if(!arguments.callee.done) {
            arguments.callee.done = true;
            if(this.timer) clearInterval(this.timer);
            var i, length = this.init.length;
            for(i = 0; i < length; i++) this.init[i]();
            this.init = [];
        }
    },
    check: function() {
        var _this = this, listener = function() {
            _this.ready();
        };
        if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
        if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
            if(/loaded|complete/.test(document.readyState)) base.ready();
        }, 10);
        
        this.bind(window, 'load', listener);
    }
};
 
// Функции для работы с панельками
var toggler = {
    current : null,
    process: function() {
        var i, list = base.findClass('toggler'), length = list.length;
        for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
        list = base.findClass('content');
        length = list.length;
        for(i = 0; i < length; i++) list[i].style.display = 'none';
    },
    toggle: function() {
        var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
        if(toggler.current && toggler.current != content) 
		{toggler.current.style.display = 'none';

	     };
        toggler.current = content;
        if(content.style.display == 'block') {
            content.style.display = 'none';
        }
        else {
            content.style.display = 'block';
        }
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
};
 
// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
    toggler.process();
});
// Запускаем проверку готовности DOM
base.check();


подскажите как изменить эти функции, что бы вызывать не только для классов "'content" и "toggler"
(<a class='toggler' href='#' >$row[15]&nbsp;</a><div id='content'), но и для других классов на этой же странице
(<a class='toggler2' href='#' >$row[15]&nbsp;</a><div id='content2' - например)
, что бы не плодить этих функций (и если не сложно напишите как после этого их вызывать в HTML)
(извините за глупую просьбу, с JS пока не дружу, только учусь)

// Функции для работы с панельками
var toggler = {
    current : null,
    process: function() {
        var i, list = base.findClass('toggler'), length = list.length;
        for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
        list = base.findClass('content');
        length = list.length;
        for(i = 0; i < length; i++) list[i].style.display = 'none';
    },
    toggle: function() {
        var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
        if(toggler.current && toggler.current != content) 
		{toggler.current.style.display = 'none';

	     };
        toggler.current = content;
        if(content.style.display == 'block') {
            content.style.display = 'none';
        }
        else {
            content.style.display = 'block';
        }
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
};

Последний раз редактировалось pitbullalex, 19.11.2015 в 11:30.
Ответить с цитированием
  #54 (permalink)  
Старый 19.11.2015, 18:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

pitbullalex,
поиск по слову открывашка
Ответить с цитированием
  #55 (permalink)  
Старый 26.05.2017, 08:18
Интересующийся
Отправить личное сообщение для Андрей111111 Посмотреть профиль Найти все сообщения от Андрей111111
 
Регистрация: 25.05.2017
Сообщений: 8

а как добавить к данному коду функцию чтоб при навидении менялась картинка?
Ответить с цитированием
  #56 (permalink)  
Старый 26.05.2017, 09:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей111111,
css :hover
Ответить с цитированием
  #57 (permalink)  
Старый 28.05.2017, 14:28
Интересующийся
Отправить личное сообщение для Андрей111111 Посмотреть профиль Найти все сообщения от Андрей111111
 
Регистрация: 25.05.2017
Сообщений: 8

в js ноль, есть скрипт
<script>
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
toggler.innerHTML = '<img src="/wp-content/uploads/2017/04/menu.jpg" >';

}
else {
div.style.display = 'block';
toggler.innerHTML = '<img src="/wp-content/uploads/2017/04/menu1.jpg" >';

}


var links = document.getElementById(id);

}

</script>

а куда css в скрипте включать?
Ответить с цитированием
  #58 (permalink)  
Старый 28.05.2017, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей111111,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #59 (permalink)  
Старый 28.05.2017, 17:27
Интересующийся
Отправить личное сообщение для Андрей111111 Посмотреть профиль Найти все сообщения от Андрей111111
 
Регистрация: 25.05.2017
Сообщений: 8

window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = '<img src="/wp-content/uploads/2017/04/menu.jpg">';	
		 
	 }
	else {
		div.style.display = 'block';
		toggler.innerHTML = '<img src="/wp-content/uploads/2017/04/menu1.jpg" >';	
		
	}
	
	
	var links = document.getElementById(id);

}
Ответить с цитированием
  #60 (permalink)  
Старый 28.05.2017, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей111111,
учебник вверху, сообщения можно редактировать, а не новые писать с тем же содержанием.
медитируйте ...
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перекатывания</title>
  <style>
   a.rollover {
    background: url(http://htmlbook.ru/example/images/mark.png); /* Путь к файлу с исходным  рисунком */
    display:  inline-block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   a.rollover:hover, a.rollover.active,  #menu:hover a.rollover.active:hover  {
    background-position: 0 -40px; /* Смещение фона */
   }

   #menu:hover a.rollover.active {
    background-position: 0 0;
   }

  </style>
 </head>
  <body>
  <nav id="menu"><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a></nav>
<script>
     window.addEventListener('DOMContentLoaded', function() {
       var menu = document.querySelector('#menu'),
       a = menu.querySelectorAll('.rollover');
       menu.addEventListener('click', function(event) {
          var el = event.target, cls = el.classList;
          if(cls && cls.contains('rollover')) {
            event.preventDefault();
            [].forEach.call( a, function(lnk) {
                   lnk == el ? lnk.classList.toggle('active'):  //или  lnk.classList.add('active')
                   lnk.classList.remove('active');
            });
          }
       });
         });
</script>
 </body>
</html>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск