rdfhnbhf
-
Posts
3 -
Joined
-
Last visited
rdfhnbhf's Achievements
Explorer (1/14)
0
Reputation
-
Скрыть/показать все блоки div с таким же классом как в selection
rdfhnbhf posted a question in JavaScript
помогите с простым скриптом, можно только под IE, решение на Jquery приемлемо есть html такой структуры <DIV id=content> <DIV id=b1 class="myclass a01 20120720">текст</DIV> <DIV id=b2 class="myclass a02 20120720">текст1</DIV> <DIV id=b3 class="myclass a01 20120720">текст2</DIV> <DIV id=b4 class="myclass a02 20120720">текст3</DIV> </DIV> Что нужно от скрипта? Допустим выделили мышью на странице текст2. Класс у этого divа - а01. Нажимаем на клавиатуре Ins - показываются только записи <DIV id=b1 class="myclass a01 20120720">текст</DIV> <DIV id=b3 class="myclass a01 20120720">текст2</DIV> т.к. у обеих класс а01, остальные скрыты - (this).hide Нажали еще раз ins - показался весь контент страницы. Выделили текст1, класс у этого div а02, Нажимаем на клавиатуре Ins, показались только записи <DIV id=b2 class="myclass a02 20120720">текст1</DIV> <DIV id=b4 class="myclass a02 20120720">текст3</DIV> -
Помогите с решением/подскажите где подсмотреть готовое решение. Есть большая html страница, содержимое разделено на части, каждая часть предваряется <div id="a01">заголовок</div>, между ними <div id="a00">собственно текст</div> все страницы будут открываться локально на компьютере без интернета Требуется решение с минимум кода, вынесенного в script.js и mysite.css, можно + с привлечением jquery.js Вверху кнопка меню, при клике/наведении - выпадающее одноуровневое подменю текст элементов подменю - перечитывается всякий раз заново из тегов <div id="a01">заголовок</div> на странице при щелчке на элемент подменю - переход/скроллирование страницы к выбранному <div id="a01"> при необходимости могу поменять <div id="a01"> на <div name="ID заголовка"> для упрощения перехода по странице если меню теряет фокус - подменю скрывается P.s. в инете есть решения с созданием динамических меню с использованием <ul> и <li> Не подходит. Текст подменю должен читаться из содержимого страницы, которое может изменится - меню при этом также должно перестроится, эдакое "динамическое всплывающее оглавление для большой html книги"
-
Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи - простая, для меня огромная помощь. Спасибо! Задача: создать мгновенный поиск и подсветку найденного для больших веб-страниц, расположенных на локальном компьютере, замена CTRL+F: 1. Скрипты только JavaScript, текст скриптов вынести в отдельный файл js, работать скрипты должны в любом браузере (желательно включая браузеры на/для Android) 2. Страница должна иметь 2 блока: блок один, узкий с 2мя контролами (см. ниже), висящий все время вверху в топ страницы, поверх, не изменяющий позиции при скроллинге, блок два - с основным текстом страницы, где будет производится поиск 3. Дано: Основной текст страницы сверстан одинаковыми divами <div class="search_item">текст</div> 4. Блок 1 содержит 2 контрола: текстовое поле #q и checkbox #q1, используемый для переключения режимов поиска True = режим 1, False = режим 2 5. Текст введенный в блок 1 должен подсвечиваться на вебстранице, не чувствительно к регистру, не зависит вначале/в середине слова, все вхождения 6. Режим 1 - если текст найден - перейти (scroll страницы) к первому вхождению, если текст не найден/ничего не введено - перейти (скролл) в начало страницы 7. Режим 2 - если текст найден в элементе search_item - показать этот div-элемент, не найден - скрыть этот div-элемент, если ничего не введено - показать всю страницу 8. Скрипт(ы) мгновенного поиска запускаются вводом символов в текстовом поле 1 (н-р отслеживаем нажатия, keyup), а также снятием|установкой checkbox 1, т.е. последнее также должно подсвечивать/переходить/скрывать-показывать текущий текст в текстовое поле #q Все запчасти для будущей веб-страницы нашел в инете, помогите это подчистить, собрать в кучу <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="search_and_highlight.js" type="text/javascript"></script> <script type="text/javascript">$().ready(function(){$('#q').focus()})</script> <style type="text/css"> .highlight {background-color:yellow;} </style> </head> <body> <div id="top"> <form action="javascript:void(0);"> <h3> <input id="q" name="q" autocomplete="off" type="text"> </h3> <input name="q1" type="checkbox" /> </form><p> </div> <div class="search_item">текст</div> <div class="search_item">текст</div> <div class="search_item">текст</div> <div class="search_item">текст</div> </body> </html> Собственно скрипт //эта часть работает как надо, находится в search_and_highlight.js $().ready(function(){ $('#q').keyup(function(){ $('.search_item').each(function(){ var re = new RegExp($('#q').val(), 'i') if($(this).text().match(re)){ $(this).show(); }else{ $(this).hide(); }; }); }); }); //эта тоже работает, только надо корректно вынести из вебстраницы в search_and_highlight.js чтобы это тоже срабатывало на события keyup-keyup change в #q <script type="text/javascript"> $(function() { $('#q').bind('keyup change', function(ev) { var searchTerm = $(this).val(); $('body').removeHighlight(); if ( searchTerm ) { $('body').highlight( searchTerm ); } }); }); </script> //эта почему то не работает в браузерах на android function scrollToFirstFoundTerm() { var firstFoundTerm = $('.highlight:first'); if (firstFoundTerm.length > 0) $('html').scrollTop(firstFoundTerm.offset().top); } //ниже - части скрипта по подсветке текста, найдено в инете работает как надо jQuery.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().indexOf(pat); if (pos >= 0) { var spannode = document.createElement('span'); spannode.className = 'highlight'; var middlebit = node.splitText(pos); var endbit = middlebit.splitText(pat.length); var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); skip = 1; } } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); } } return skip; } return this.each(function() { innerHighlight(this, pat.toUpperCase()); }); }; jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end(); };