We Keep Coding

How to animate stroke to draw in JQuery from 0 to 100% when I hover over canvas

I am trying to animate the strokes that link my div's together but I would like to animate them from 0 to 100% when element is hovered over, would anyone have a solution?
So I am trying to animate the line so they draw from a point A to completion in point Z. I hope you can understand better with the code.
here is the website : https://willowy-rolypoly-66ca67.netlify.app/
<!-- language: lang-html -->
<div>
<div id="content">
<div id="div1" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_08.png" data-imgid="article08"
data-line="lineArticle08" data-scrollable="true" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div2" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_02.png" data-imgid="article02"
data-line="lineArticle02" data-scrollable="true" data-border="true">
</a>
</div>
<div id="div3" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_03.png" data-imgid="article03"
data-line="lineArticle03" data-scrollable="true" data-border="true">
<img src="./img/lotus.png" alt="">
</a>
</div>
<div id="div4" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_09.png" data-imgid="article09"
data-line="lineArticle09" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div5" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_10.png" data-imgid="article10"
data-line="lineArticle10" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div6" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_01.png" data-imgid="article01"
data-line="lineArticle01" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
</div>
<div class=" line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
<div class="line" id="line4"></div>
<div class="line" id="line5"></div>
<div class="line" id="line6"></div>
<div class="line" id="line7"></div>
</div>
<!-- language: lang-js -->
function loop() {
adjustLine($('#div1'), $('.canvas-box'), $('#line1'));
adjustLine($('#div2'), $('.canvas-box'), $('#line2'));
adjustLine($('#div3'), $('.canvas-box'), $('#line3'));
adjustLine($('#div4'), $('.canvas-box'), $('#line4'));
adjustLine($('#div5'), $('.canvas-box'), $('#line5'));
adjustLine($('#div6'), $('.canvas-box'), $('#line6'));
function adjustLine(from, to, line) {
if (from.length === 0 || to.length === 0 || line.length === 0) {
return;
}

Show Div's based on user input

I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});

I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.

Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>

Navigate to next div not working

I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?
HTML (There are many of this div item):
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Javascript
Mousetrap.bind("right", function() {
if($('.item-flip selected').length){
var current = $('.item-flip selected');
$('.selected').removeClass('selected');
var el = current.next();
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});

I tried how to figure out a solution, in the following my snippet the code.
The points of interest are:
To select an element with two classes you need to change from $('.item-flip selected') to $('.item-flip.selected')
To get next element you need to find the clossest div father and then search for the item-flip div. So from var el = current.next(); you need to change to: var el = current.closest('.item').next().find('.item-flip');
$(function () {
Mousetrap.bind("right", function(e) {
if($('.item-flip.selected').length){
var current = $('.item-flip.selected');
$('.selected').removeClass('selected');
var el = current.closest('.item').next().find('.item-flip');
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
});
.selected {
background-color: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>

How can I use jquery slidetoggle with many content boxes?

I have some content boxes in my page and I need to toggle some contents under these content boxes.
My content boxes look like this:
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
What I need is when user click on .readmore I want to toggle .more-info DIV. This is how I tried it. but its only toggling contents in first content box.
$(".readmore").click(function() {
$(".more_info").animate({ opacity: 1.0 },200).slideToggle(500, function() {
$(".readmore").html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Can anybody tell how to modify this code?
Fiddle

Check this out:
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle().promise().done(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Or simply
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Fiddle

$(".readmore").click(function() {
var txt = $(this).parent().next(".more-info").is(':visible') ? "Read More" : "hide";
console.log(txt);
$(this).text(txt).parent().siblings(".more-info").slideToggle()
});
.more-info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>

displaying a hidden div with a scroll down effect using jquery on hover

I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?

If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div