Цитата:
|
ghostcom,
поиск по форуму - искать открывашка выбирать из 223 вариантов |
ладно буду искать. хотелось побыстренькому:)
|
И еще хотелось именно к выше указаному коду
|
ок,
toggle: function() {
var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
if(content.style.display == 'block') {
content.style.display = 'none';
this.innerHTML = 'Показать';
}
else {
content.style.display = 'block';
this.innerHTML = 'Скрыть';
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
а возможно ли вот здесь менять не стиль а класс или мож добавлять класс? |
Цитата:
|
Цитата:
|
Цитата:
.displayblock {
display: block;
}
.displaynone {
display: none;
}
и вместо этого:
if(content.style.display == 'block') {
content.style.display = 'none';
this.innerHTML = 'Показать';
}
написать:
if(content.classList.contains('displayblock')) {
content.classList.remove('displayblock');
content.classList.add('displaynone');
this.innerHTML = 'Показать';
}
|
не могу разобраться, что то не то(((
Суть вопроса изначально была чтоб блок появлялся сверху вниз, а при повторном нажатии плавно уезжал вверх. Вот мой шаблон: https://jsfiddle.net/ghostcom/xkqcn2dr/ Помогите пожалуйста!!! P.S. И еще желательно не менять HTML часть !! |
сделать плавно со свойством display невозможно. Можно писать своё за счёт изменения положения элемента, но проще подключить JQuery и использовать slow/hide:
http://jquery.page2page.ru/index.php...ементов или slideDown()/slideUp() : http://jquery.page2page.ru/index.php...ементов |
Спасибо, буду пробовать)
|
Помогите,прошу вас, я уже перевернул данную тему, но не могу решить свою проблему. Как сделать чтобы спрятать содержание под картинку/банер (статичную png,gif или flash), при клике на которую будет осуществлён переход по указанной ссылке,и сам блок будет открыт, или же произойдёт открытие ссылки в новой вкладке, при этом блок будет открыт сразу
|
в этой теме был код:
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] </a><div id='content'), но и для других классов на этой же странице (<a class='toggler2' href='#' >$row[15] </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,
поиск по слову открывашка |
а как добавить к данному коду функцию чтоб при навидении менялась картинка?
|
Андрей111111,
css :hover |
в 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 в скрипте включать? |
Андрей111111,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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);
}
|
Андрей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>
|
| Часовой пояс GMT +3, время: 23:37. |