Develop Reference

How to get a value of inner element when clicked on li using JQuery

This is my li element. I want to get only the value of class 'preview' when clicking on the li element using jquery.
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
Output should be: john#gmail.com
I tried below code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $('.preview').val($(this).text());
})
Am getting the entire li items click event list as output.
Please help on this. Thanks.

You'd want to attach the click event handler to each list node, then a few ways could find the child nodes text value, one approach would be using the event.target to get access to the clicked list node, or my approach would be iterating over the list node collection as the following example illustrates.
const theLinkContains = email => document.querySelector('h2 span').textContent = email;
(() =>
{
document.querySelectorAll('li.contact')
.forEach(link =>
{
link.addEventListener('click', () =>
{
theLinkContains(link.querySelector('.preview').textContent);
});
});
})();
ul {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
li {
position: relative;
display: block;
padding-left: 5px;
margin-bottom: -1px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .125);
}
.preview {
display: none;
}
<h2>Result: <span></span></h2>
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">Bob</p>
<p class="preview">Bob#gmail.com</p>
</div>
</div>
</li>
</ul>

The issue in your code is using .val() which is wrong to have it here, what you need is to select the <li> tag and then perform .find() to get the child .preview and then get its text using .text()
This is what you should have in your code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $(this).find('.preview').text();
console.log(data);
})
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

scroll to next div by js

I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});

Swipe.js strange result with Media Queries

Im having an issue while using media queries with "Swipe".
If i open my website in "tablet" mode, the swipe works in Mobile and Tablet forms, Desktop wont.
BUT, if i save my files again in the text editor and open them in Desktop mode, they work, but not in Mobile and Tablet.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
-ms-touch-action: none;/*pan-y on desktop*/
touch-action: none; /*pan-y on desktop*/
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-dois">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 2:</h2>
<img src="img/passodoisilu.svg" class="passoumilu">
<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-tres">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 3:</h2>
<img src="img/passotresilu.svg" class="passoumilu">
<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-quatro">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 4:</h2>
<img src="img/passoquatroilu.svg" class="passoumilu">
<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.mySwipe = Swipe(document.getElementById('slidepassos'));
</script>

Hide a div that is currently opened and show the div thats clicked,and vice versa

I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve

All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>

As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});

jQuery left and right button scroll

I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.

Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).