Develop Reference

Capture navigation text on click of item

I'm trying to capture using jQuery or Javascript the text value from parent classes in a site navigation
Example navigation:
Level 1 - bish
Level 2 - bash
if I click on Level 2 - 'bash' I'd like to capture level 1 text 'bish' into variable
An example of code I'm working with
`<li class="class1">
<a href="/bish" class="class2">
<div class="class3">
<p class="class4 level1">bish</p>
</div>
</a>
<ul class="class5">
<div class="class4">
<li class="class6">
<div class="class7">
bash
</div>
</li>
</ul>
</div>
</li>`
Id be grateful for any help.
I'm expecting that the value bish will output to a variable. The challenges I'm having is that because it's navigation the same class values are being used for other navigation.

For example:
$('.level2').click(function(e) {
e.preventDefault()
let level1 = $(this).closest('.class1').find('.level1').text();
console.log(level1);
});

Getting an image overlay/class to show onclick depending on the class of a parent element

I was just assigned my first project for work and am having some trouble with the last details.
Essentially, when a user clicks a list item in a class of "answerPick" is added to the li. When the user clicks another li item to change their answer the class of "answerPick" is removed from the first choice and added to the new choice. At the end of the form, the user submits and I take all values attached to li items with a class of "answerPick".
Here is an example of the structure of one of the form questions:
<!--Section B-->
<section id="section-b" class="grid">
<div class="content-wrap">
<div class="section-question">
<img src="/Images/modules/GiftThemeHeader_418x50.jpg">
</div>
<ul class="answer-options-grid">
<li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
<li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
<li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
<li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
</ul>
</div>
</section>
You'll notice I have an image called "Check1Mobile" right next to the selected image. This image is automatically hidden via .hide().
Basically what I'm trying to do is have the check image show using .show(), when the li item is clicked and is given the class "answerPick". I'm trying to only target specific instances of the class "topimg" during the click function because I use that image/class for each of the form questions.
Here is a snippet of code. I can include everything but I am a javascript scrub so it is messy, to be honest.
$jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
$jq('.topimg').show();
}
else {
$jq('.topimg').hide();
} });

Based on the piece of code you have written it should be:
$jq('.answer img').click(function () {
$jq('.topimg').hide()
if ($jq(this).parent().hasClass('answerPick')) {
$jq(this)('.topimg').show();
}
});
But I can also suggest :
$jq('.answer img').on('click', function () {
const el = $jq(this)
el.parent().find('.topimg')
el.find('.topimg').toggle(el.hasClass('answerPick'))
});
Here's a jsfiddle for live example.

Text slider - can't change/remove speed

Simple Text Slider from here
Can't change speed or remove automatic slide here
button "Więcej o prelegentach" opens full screen layer where slider is placed.
Trying to change speed in
var speed = 5000;
but didn't helped. Even tried to remove:
var run = setInterval(rotate, speed);
Any ideas?

Try loading the jquery before you load any other script (on your page it is loaded after few others, including the slider script).
I think that will solve it, right now your page gives back error:
ReferenceError: $ is not defined
Edit:
Here's the html structure for that plugin.
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
</p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
</p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></p>
</div>
<div class="authorContainer">
<p class="quote-author">
</p>
</div>
</li>
</ul>
</div>

Using JQuery hashtags to fade in & fade out content of a certain div

*EDIT: Here's a link to a staging version of the site: http://staging-site.site44.com/ *
I am extremely new to jquery so I apologize if this question is extremely simple. What I'm trying to do on my website is first when the page is loaded have the content in my #topContent div fade in.
But along with this I'd also like my main navigation to use jquery hashtags to switch up the page content displayed in the #topContent div. I've read up a bit on how to do this in jquery and from what I've read I think I need create page sections within my main html doc that are hidden until a certain nav link is selected - then hide the content that is currently showing and show the content associated with the nav link that was just selected, how close am I?
Here's my attempt so far at doing this...
HTML
<nav id="headerNav">
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
</nav>
</div>
</div>
<!-- topMain -->
<div id="topContentWrapper">
<div id="topContent">
<div id="#products">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#about">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#portfolio">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
</div>
JS
// Fade In Effect
$(document).ready(function() {
$("#topContent").css("display", "none");
$("#topContent").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#topContent").fadeOut(1000);
});
function redirectPage() {
window.location = linkLocation;
}
$("#view-about").click(function(event){
$("#products").fadeOut(1000);
$("#portfolio").fadeOut(1000);
$("#about").fadeIn(1000);
});
});

Ok, this code should work:
$(function(){
$last = null;
$(".navList li a").click(function(){
if ($last != null) $last.fadeOut(1000);
$last = $($(this).attr("href"));
$($(this).attr("href")).fadeIn(2000);
});
});
However, you will need to change your topContent to this:
<div id="topContent">
<div id="products" style="display: none;">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none;">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none;">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
Reasons:
Firstly, you need your ids to be like this: id="about" and not this: id="#about".
The id specified doesn't need a # in front of it. (Same as how class doesn't need a . when setting a tag with it)
The jQuery code I tested locally, so it should work.
Note:
You may want to automatically have some different content automatically displayed, because right now as it loads it is blank until you click one of the links.
Hope this helped!
Edit:
I suggest you change the code to this:
ids = [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];
$(function(){
$last = null;
$(".navList li a").click(function(){
New = "#" + ids[links.indexOf($(this).text())];
if ($last != null) $last.fadeOut(1000);
$last = $(New);
$(New).fadeIn(2000);
});
});
Because it will keep all the content constantly in the same place. For this to work, you'll need to change two more sections of your code:
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
And:
<div id="topContent">
<div id="products" style="display: none; position: absolute">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none; position: absolute">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none; position: absolute">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
That last part was just my suggestion, but do whatever you need to.

Instead of doing this in your a.transition handler:
$("#topContent").fadeOut(1000);
do:
$("#topContent").children().fadeOut(1000);
The issue is that you're actually fading out the higher level item thus the children are no longer visible even if you fade them in.

HTML5 2 Audio tags

I have two audio tags in these markup. my problem is that the second one won't play
<div class="container">
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
</div>
And here is the script that plays the track
$(".play-bt").click(function(){
var $artItem = $(this).parent(".art-item");
console.log($artItem);
$artItem.find('audio').play();
$artItem.find(".message").text("Music started");
});
My problem is that I can only play the first audio tag. what can I do to play the second tag or 3rd audio tag if there's more? the counter is the one that is selecting what audio tags to play. but as of now I have no idea how would I make the second audio tag or user selected audio tag if the are more audio post in this markup.

not 100% sure that's the only issue but you use id a lot. id's should be unique on a page. Replace them by classes
And your references are wrong.
$("#play-bt").click(function(){
// -> will allways try to play song indicated by counter (0)
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
I don't think you want that? Don't you want to play the audio in the "post-container" ?
you could do something like this:
$(document).ready(function(){
$(".play-bt").click(function(){
var $post= $(this).parents(".post-container");
$post.find('audio')[0].play();
$post.find(".message").text("Music started");
});
});
​
=> and changing the play-bt and message id's into classes

The reason why things don't work for you is because of your markup... in your code you try to obtain "parent" of the clicked "play-bt" class, yet "art-item" is NOT parent in your DOM structure. What probably makes you think it is, is your incorrect markup indentation...