Develop Reference

How to set up an Add To Favorites Button in JS with Materialize and Firebase

I have been using materialize CSS for buttons on some cards in my application and wanted to create a button that when clicked it adds the user's favorite item to another page that I have in HTML called Favorites.html. I have the index.html file which serves as the homepage, where the cards are placed. The user can pick a card and favorite it and have it stored to the Favorites.html page. I was wondering how to do that using Materialize and JS. We are also using Firebase to serve as the backend and relying on JS version- 9 in the FireStore.
Here is an example of the card setup for the on the index.html page with the button being called favorite-btn.
I have tried putting a link into the "a href" to the favorites.html page and it did take me to the favorites.html page but it did not add it to the favorites.html page that I had set up.
index.html
<div class = "recipe-img">
<img src = "coffee.jpg" alt = "a cup of coffee.">
<span class = "category-name">Mine</span>
</div>
<div class = "recipe-content">
<i class="material-icons">delete_outline</i>
<h2>Americano<a href="#" class="right favorite-btn btn-floating red pulse">
<i class="material-icons">favorite</i></a></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ip``sum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
orem, ipsum dolor sit amet consectetur adipisicing elit.orem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>

Combining functions to one button

I would like to have a single button that says, "Viewer One" and is tied to a section with the ID, "viewer_one". When the user clicks the button, I would like it to change to show, "Viewer Two" and also show the section with the ID "viewer_two" in place of where the other nav had been. Each time the button is clicked it will switch to the other.
I have two sets of script that perform each function individually, but I cannot figure out how to make them work at same time. At moment, I can either have a button that changes its value on click but does not impact the rest of the code or I can have the button impact the rest of the code but its own text does not change.
I have included my code below - I have included both sets of javascript so that you can see what I have but they only work when I include one or the other - I need help figuring out how to get them to work together.
Below is a condensed version of the code to the pertinent parts - the main code has several more list items for each viewer.
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
if (document.getElementById('viewer_one')) {
if (document.getElementById('viewer_one').style.display == 'none') {
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
}
else {
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
}
}
}
<!--This gets the button text to change-->
function myFunction() {
var x = document.getElementById("Button1");
if (x.innerHTML === "Viewer Two") {
x.innerHTML = "Viewer One";
} else {
x.innerHTML = "Viewer Two";
}
}
<section id="second_nav">
<input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/>
<button id="Button1" onclick="myFunction()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts2"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
No error messages, but I can only get one or the other to work, not in combination.
Thanks in advance for any help.

var currentViewer = 1
updatePage(currentViewer)
function switchViewer() {
if (currentViewer === 1) {
currentViewer = 2
} else if (currentViewer === 2) {
currentViewer = 1
}
updatePage(currentViewer)
}
function updatePage(viewer) {
switch(viewer) {
case 1:
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
document.getElementById('view_area_one').style.display = 'block';
document.getElementById('view_area_two').style.display = 'none';
document.getElementById('switchViewerButton').innerHTML = "Viewer 2"
break;
case 2:
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
document.getElementById('view_area_one').style.display = 'none';
document.getElementById('view_area_two').style.display = 'block';
document.getElementById('switchViewerButton').innerHTML = "Viewer 1"
break;
}
}
<section id="second_nav">
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info (view_area_one)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info (view_area_two)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p>
<span id="scripts2"></span>
<h4>Scripts From V2</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
Here's my version - I separated out the logic for controlling which viewer is currently visible from the code that changes the DOM, so you can more directly see how the current viewer changes the content of the page. I also didn't fully understand what you wanted to change on the button press, I've made it a content toggle as that seemed to be what you were going for? Your example only toggles the navbar. Let me know how this suits you.

So, If you want both to work together, write your javascript code as:
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
<!-- Your Code -->
}
<!--This gets the button text to change-->
function myFunction() {
<!-- Your Code -->
}
<!-- My Code -->
window.onload = function(){
const button = document.querySelector("#switchViewerButton");
if (button) {
button.onclick = function(event){
event.preventDefault();
switchVisible();
myFunction();
}
}
}
And Replace the HTML line
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
with the line
<button id="switchViewerButton">Viewer One</button>
I hope it should work. Please comment if you face any problem in implementing the solution.

JQuery Toggle With Plus and Minus Icon

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

Search iframe content with jquery and input element on parent page

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);
});

Highlight a word's parent using jQuery?

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.