I was wondering how I can have a text input element on the parent page which searches the content of an Iframe within the parent page.
The goal is to have the input text processed and to highlight the matches within the iframe.
Any suggested approaches or references would be appreciated.
Thanks...
EDIT: I understand the limitations on the same origin policy, The parent page rendering the iframe and javascript to search, as well as the iframe on the parent page would be of the same domain origin.
HTML:
<input type="text" id="searchfor"/>
<iframe src="http://www.page.com" id="search">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</iframe>
JAVASCRIPT:
$('#searchfor').keyup(function(){
var page = $('iframe[id="search"]').contents().find("html").html();
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
console.log(searchedText);
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});
Related
So I have a website right now and I want to change the aria-expanded value of an exapandable paragraph in another page when I press an anchor element in the main page. What will I need to change in my main.html so i can somehow change the aria-expanded value on the help.html file?
main.html
<a href="help">
<h2>Returns Policy</h2>
</a>
help.html
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span
class="accordion-title">Returns Policy</span><span
class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et
leo duis ut. Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
//and this is the script used to expand the paragraph
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
your button id is "accordion-button-3" so in querySeletorAll you need "#accordion-button-3"
const items = document.querySelectorAll("#accordion-button-3");
I have two sections namely
1. section one
2. section two
I'm performing JQuery slide up and slide down between two div sections with plus and minus sign change..currently it works superbly i want to make one small change in my code when i click on section one contents of section two is hidden and vice versa i need both should be opened simultaneously can somebody help me out in achieving it Thanks!
http://jsfiddle.net/v9Evw/348/
HTML
<ul id="toggle-view">
<li >
<h3 style='background:#4c97d0;color:#fff;'>Section one</h3>
<span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
<br>
<li>
<h3 style='background:#4c97d0;color:#fff;'>section two</h3>
<span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
</ul>
JQUERY
var parent = $('#toggle-view'), // storing main ul for use below
delay = 200; // storing delay for easier configuration
// bind the click to all headers
$('li h3, li span', parent).click(function() {
// get the li that this header belongs to
var li = $(this).closest('li');
// check to see if this li is not already being displayed
if (!$('p', li).is(':visible'))
{
// loop on all the li elements
$('li', parent).each(function() {
// slide up the element and set it's marker to '+'
$('p', $(this)).slideUp(delay);
});
// display the current li with a '-' marker
$('p', li).slideDown(delay);
}
else {
$('p', li).slideUp(delay);
}
$('span',li).toggleClass('glyphicon-plus glyphicon-minus');
});
Remove the loop which changes the state on all the content areas. You only want to apply it to the selected content.
So now you are saying; if this is open, close it, otherwise open it.
if (!$('p', li).is(':visible')) {
$('p', li).slideDown(delay);
} else {
$('p', li).slideUp(delay);
}
http://jsfiddle.net/v9Evw/350/
Please find the updated fiddle
http://jsfiddle.net/v9Evw/349/
//$('li', parent).each(function() {
// slide up the element and set it's marker to '+'
$('p', $(this)).slideUp(delay);
// });
Only selected section will slide instead of section 1 and 2. Please see if this meets ur requirement
The following function will replace certain part of the text
function q(text) {
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>")
text = text.replace(/\[\/quote\]/gi,"</span></div>");
return text;
}
I'm looking for avoid the replacement of the [quote=(.*)] and [/quote] if those will be inside a certain class div (class=haha AVOID)
Example :
<div class="full">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod
[quote=ok]I should be replace[/quote] Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod
<div class="haha"> [quote=no]I shall not be replace[/quote]
bblablablablablabla
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
blablabla (other [quote] inside or not inside a div=haha may follow...)
...
</div>
I tried to put a mask for the content of your class="haha" div. After the masking the real quote replacement happens. At the end I have unmasked it again.
Lets check my version of it. I have put the entire HTML in a Javascript variable. I also have modified your function a bit to make it work.
var text = '<div class="full">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod[quote=ok]I should be replace[/quote] Lorem ipsumdolor sit amet, consectetur adipiscing elit, sed do eiusmod<div class="hahaa"> [quote=no]I shall not be replace[/quote]bblablablablablabla</div>Lorem ipsum dolor<div class="haha"> [quote=no]I shall not be replace[/quote]bbla</div>it amet, consectetur adipiscing elit, sed do eiusmodblablabla (other [quote] inside or not inside a div=haha may follow...)...</div>';
var resultText = q(text);
console.log(resultText);
function q(text) {
var matches = text.match(/<div class="haha">([^<]*)<\/div>/gi);
text = text.replace(/<div class="haha">([^<]*)<\/div>/gi, "#######");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[\/quote\]/gi,"</span></div>");
for(i in matches){
text = text.replace(/#######/i, matches[i]);
}
return text;
}
I want to remove Phase Content (1st header - See fiddle) and want only these in my code:
Expand - all steps
Steps 1
Steps 2
Steps 3
The above should appear without Phase Content in the code. But i dont know how to change the javascript so as to remove the Phase Content and work only with Steps Content
JSFIDDLE
or below is the code:
jQuery(".phaseContent").hide();
jQuery(".stepsContent").hide();
//toggle the componenet with phase level
jQuery(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".phaseContent").slideToggle(500);
return false;
});
jQuery(".stepsHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".stepsContent").slideToggle(500);
return false;
});
//Expand and collapse toggle
$(".accordion-expand-all").click(function () {
var expandLink = $(this);
var contentAreas = $(expandLink).closest(".phaseContent").find(".stepsContent");
// Toggle the content area visibility
$(contentAreas).toggle();
// If the content area is now visible
if ($(contentAreas).is(':visible')) {
// Change it to the collapse text
$(expandLink).text('Collapse - all steps');
} else {
// Change it to the expand text
$(expandLink).text('Expand - all steps');
}
$(expandLink).closest(".phaseContent").find(".stepsHeading .heading1").toggleClass("active");
return false;
});
HTML
<!-- Start Phase -->
<!-- Start phase heading -->
<div class="phaseHeading"><span class="heading1">Phase 1</span>
</div>
<!-- Start phase content -->
<div class="phaseContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
<!--Expand steps button-->
<p class="accordion-expand-holder">
<a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
</p>
<!-- Start steps heading -->
<div class="stepsHeading"><span class="heading1">Steps 1</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 2</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 3</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
</div>
</div>
I update your Fiddle. Please check this jsFiddle
I remove phaseHeading from your HTML and put one Div above accordion-expand-holder name <div class="stepsParent">
<div class="stepsParent">
<p class="accordion-expand-holder"> <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
</p>
<!-- Start steps heading -->
<div class="stepsHeading"><span class="heading1">Steps 1</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 2</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 3</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div>
</div>
Also change JS like Below
$(document).ready(function () {
$(".accordion-expand-all").parent().parent().find(".stepsContent").hide("slide");
jQuery(".stepsHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".stepsContent").slideToggle(500);
return false;
});
var collapsed = 1;
$(".accordion-expand-all").click(function () {
var expandLink = $(this);
var contentAreas = $(expandLink).parent().parent().find(".stepsContent");
if (collapsed == 0){
$(contentAreas).hide("slide");
collapsed =1;
$(expandLink).text('Expand - all steps');
} else {
$(contentAreas).show("slide");
collapsed = 0;
$(expandLink).text('Collapse - all steps');
}
$(expandLink).closest(".stepsHeading .heading1").toggleClass("active");
return false;
});
});
i have updated your jsFiddle, hope you get your solution.
changed javascript part
jQuery(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".phaseContent").slideToggle(500);
jQuery(".phaseContent1").hide();
jQuery(".phaseHeading").hide();
return false;
});
changed html part
<div class="phaseContent1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
</div>
or you can also remove this changed div from html and jQuery(".phaseContent1").hide(); from changed js
You can use this
$(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
$(th).next(".phaseContent").slideToggle(500);
$(".phaseContent1").hide();
$(".phaseHeading").hide();
return false;
});
Also do some changes in Div Class
<div class="Content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>
Let's say for example that I have a webpage.
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
I want to find all instances of the word 'Lorem' and manipulate them in two ways:
Wrap it with <mark> HTML5 element
Run .addClass('look-at-me'); on its parent element.
So the resulting HTML would be
<ul>
<li class="look-at-me"><mark>Lorem</mark> ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
I've read all the comments on Highlight a word with jQuery and I've been playing around with the JS code from highlight: JavaScript text higlighting jQuery plugin but both of these deal with ONLY highlighting the word in context. I manipulated the code to wrap the word using <mark> but I'm not skilled enough with JS to achieve my #2 goal of highlighting the parent container. I'm eager to see your helpful suggestions. Thanks!
EDIT: SOLVED! http://jsfiddle.net/GB8zP/1/
$('li').each(function () {
$(this).html($(this).html().replace(/Lorem/ig, "<mark>$&</mark>"));
if ($(this).text().toLowerCase().indexOf('lorem') >= 0) $(this).addClass('look-at-me');
});
jsFiddle example
try this
$("ul li:contains('Lorem')").each(function() {
$(this).html($(this).html().replace("Lorem","<mark>Lorem</mark>"));
$(this).parent().addClass("look-at-me");
})
Here's what I came up with: http://jsfiddle.net/c24w/cZegf/
HTML
<ul id="test">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam lorem tincidunt mauris eu Lorem risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
JS
$('li', '#test').each(function highlightElement(i, e) {
e = $(e);
e.html(e.html().replace(/lorem/gi, function handleMatch(match) {
if (!e.hasClass('look-at-me')) e.addClass('look-at-me');
return '<match>' + match + '</match>';
}));
});
CSS
.look-at-me {
background: #f00;
}
match {
background: #ff0;
}
Info
Regular expression:
/lorem/gi
↑↑
||_ case-insensitive
|_ matches multiple (global)
Match function:
handleMatch(match) - each successful regular expression match is passed to this function, where the matched text is surrounded with <match></match>. This implementation makes it easier to change the exact pattern you want to highlight, because only the regular expression requires updating. Also, the parent element of the match is highlighted accordingly, if required.