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>

Replacing HTML footer content with JavaScript

I'm trying to replace my footer's text with "Hello World" and I do not want to edit the HTML by adding a class or an id
HTML:
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
JavaScript:
document.getElementById(footer).innerHTML="Hello World";
The problem is that, when I do the code above, nothing is changing

footer is not the id of the element you are selecting, its the tag name.
You can use tag selector for selecting footer.
And to change the div content(i am assuming you want to change the text, keeping div as is), you can select div using the tag selector
and can change the text.
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
Above statement is broken down :
document.getElementsByTagName("footer") //select footer
document.getElementsByTagName("footer")[0] //1st matched element
document.getElementsByTagName("footer")[0].getElementsByTagName("div") // select div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0] // first div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World"; //change content
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>

It's because you are selecting id which doesn't exist, try this instead:
document.querySelector('footer').innerHTML = "Hello world";
#edit
document.querySelector('footer').innerHTML = "Hello world";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>

There are a couple of ways by which you can achieve the desired:
1) If you need to change the HTML, you should use the below code for targeting the footer:
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
2) If you wish to just modify the text, without changing the HTML, you can also make use of the following:
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
The difference between the two approaches is that the former keeps the text inside the div while the latter keeps inside footer tag itself.
If you look through inspection in the two, it will have an output like the below:
1)
<footer>
<div>
Hello World
</div>
</footer>
2)
<footer>
Hello World
</footer>

Find parent of unwrapped element and use it in .wrap() using jquery

I have dynamically added div elements with structure as follows.
<div class="blogPost">
<a href="link/to/full_artical">
<h1>Some Heading</h1>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
I want to remove a wrappers from h1 elements and add them to parent div elements. The result should be like:
<a href="link/to/full_artical">
<div class="blogPost">
<h1>Some Heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</a>
I wish there is a way in jquery maybe a combination of unwrap() and wrap() functions.
I do not have access to the source of this dynamically added content.
divs are being added dynamically.
Thanks in advance.
EDIT
tried
$('.blogPost').wrap('')
Not Working.

You can use .clone() to copying a element and store it in variable. Use .unwrap() to remove a parent of h1 and use .wrap() to wrapping copied element around .blogPost.
var clone = $("a").clone().children().remove().end();
$("h1").unwrap().parent().wrap(clone);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogPost">
<a href="link/to/full_artical">
<h1>Some Heading</h1>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>

Another way:
var href = $('.blogPost').children('a').attr('href');
$('.blogPost').wrap('');
$('h1').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogPost">
<a href="link/to/full_artical">
<h1>Some Heading</h1>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>

var link = $('a'),
heading = link.find('h1'),
blogPost = $('.blogPost');
blogPost.prepend(heading);
blogPost.wrap(link);
link.remove();
CODEPEN

How to show child element when other child element is overflowing with JQuery

I have recently been working on a comment feature. By default, the height of the paragraph element containing the text is 80px. Overflow is set to hidden.
I have another button (labelled "See More") that expands the paragraph by changing height to 'auto'. This button should only be visible if the paragraph content is overflowing the default 80px height. Otherwise the button must not be displayed.
I have tried to do this with a javascript for loop and some JQuery code, though it doesn't work as it should. It shows or hides the button for all comment sections.
Here is the html:
<div class="commentOwnerPost">
<div class="commentPostHeader">
<h4 class="commentOwnerName">NavyFoxKid</h4>
<h4 class="commentPostDate">3 days ago</h4>
</div>
<p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
</p>
<div class="commentPostFooter">
<a class="btnReply">Reply</a>
<a class="btnSeeMore">See More</a>
</div>
</div>
Here is the JavaScript:
$(document).ready(function(){
var element = $('.commentOwnerPost');
for(i=0; i < element.length; i++){
var commentText = $(element[i]).children('.commentText');
if ($(commentText).offsetHeight < $(commentText).scrollHeight) {
$parent = $(commentText).parent('.commentOwnerPost');
$parent.find('.btnSeeMore').hide();
console.log('Comment text not overflowing ');
} else {
$parent = $(commentText).parent('.commentOwnerPost');
$parent.find('.btnSeeMore').show();
console.log('Comment text overflowing ');
}
$('.btnSeeMore').click(function(){
});
}
});
Thanks for taking the time to read. Any help would be appreciated.

It works perfectly for me, I simplify your code:
$(document).ready(function(){
var elements = $('.commentOwnerPost');
elements.each(function() {
var el = $(this).find('.commentText').get(0);
if(el.offsetHeight < el.scrollHeight) {
$(this).find('.btnSeeMore').show();
} else {
$(this).find('.btnSeeMore').hide();
}
});
});
.commentText { max-height: 25px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="commentOwnerPost">
<div class="commentPostHeader">
<h4 class="commentOwnerName">NavyFoxKid</h4>
<h4 class="commentPostDate">3 days ago</h4>
</div>
<p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
</p>
<div class="commentPostFooter">
<a class="btnReply">Reply</a>
<a class="btnSeeMore">See More</a>
</div>
</div>
<div class="commentOwnerPost">
<div class="commentPostHeader">
<h4 class="commentOwnerName">NavyFoxKid</h4>
<h4 class="commentPostDate">3 days ago</h4>
</div>
<p class="commentText"> lorem ipsum dolor sit amet.
</p>
<div class="commentPostFooter">
<a class="btnReply">Reply</a>
<a class="btnSeeMore">See More</a>
</div>
</div>

Cycle2 - Can't initialize the slider

Hopefully someone can help me with this. I am not an expert on use of Cycle2 jQuery plugin and I would like to implement it. Supposedly Cycle2 is supposed to be able to slide composites and that is what I am trying to do.
I have html that looks like the sample below. The code is actually generated by djangocms and I don't have the ability to add attributes to the html structure unless I am adding them using JavaScript...
So I suppose I am left with one option and that is to initialize the slider using this:
$('.cycle-slideshow').cycle();
But that doesn't seem to do anything.
I also tried this:
// Cycle Slideshow
$('.cycle-slideshow').attr('data-cycle-fx', 'scrollHorz');
$('.cycle-slideshow').attr('data-cycle-timeout', '2000');
$('.cycle-slideshow').attr('data-cycle-slides', '> div');
My HTML structure...
<div class="cycle-slideshow">
<div class="slider">
<h2>Teaser Title 1</h2>
<img src="/media/cms_page_media/2014/8/20/Banner1.png" alt="Teaser Title 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 2</h2>
<img src="/media/cms_page_media/2014/8/20/Banner2.png" alt="Teaser Title 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 3</h2>
<img src="/media/cms_page_media/2014/8/20/Banner3.png" alt="Teaser Title 3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 4</h2>
<img src="/media/cms_page_media/2014/8/20/Banner4.png" alt="Teaser Title 4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

The reason why that might not work is because Cycle 2 Inits all slideshows right after it loads the plugin, so your jQuery won't affect your slideshows, because Cycle 2 has already been initialized.
What happens if you add the attributes and THEN init the slideshow:
$('.cycle-slideshow')
.data('cycle-fx', 'scrollHorz')
.data('cycle-timeout', '2000')
.data('cycle-slides', '> div')
.cycle();
You can also, try to pass your options as an object to your slideshow:
$('.cycle-slideshow')
.cycle({
'fx' : 'scrollHorz',
'timeout' : 2000,
'slides' : '> div'
});
Finally, you also try re-writing the cycle 2 defaults in order for all your slideshows to work accordingly. This should be avoided unless necessary, but it might work!
$.fn.cycle.defaults = $.extend($.fn.cycle.defaults, {
'fx' : 'scrollHorz',
'timeout' : 2000,
'slides' : '> div'
});
$('.cycle-slideshow').cycle();
UPDATE:
You might want to re-write the defaults before $(document).ready so that cycle uses your default options when initiating the plugin. It automatically calls itself on $(document).ready.
Source Code:
https://github.com/malsup/cycle2/blob/master/src/jquery.cycle2.core.js#L678-L681