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...
Related
I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});
I found many solutions related to my problem but no seems to solve my problem.
Let me first clear my question properly.I have many items on a page;product items that can be shown in this page.
So for every item on the page , i have an image source which is obtained from the other page.
<img itemprop="image" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" >
This is just one image tag,the whole code that displays a product looks like this
$imgID=0;
while ($obj = $results->fetch_object()) {
$productPrice=($obj->price);
$weight=$obj->amount;
$weight=str_replace('kg',"",$weight);
$products_item .= <<<EOT
<li class="product">
<form itemscope itemtype="https://schema.org/Product" class="get_method_product_forms" action="/landing_cake/" method="get">
<div style="position: relative" class="product-thumb">
<div class="box">
<img src="/cart/images/loader.gif" id="{$imgID}">
<img itemprop="image" class="loaderGIF" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" ><img id="overlay" src="/cart/images/soldOut.png"><div class="overbox">
<div class="title overtext"></div>
<div class="tagline overtext"><p style="font-size:20px;">
<span id="fon"></span><button id="{$obj->product_code}" class="wishlist" >♥</button>
</div>
</div>
</div></div>
<div class="product-content"><h3 itemprop="name" style="margin-top:10px">{$obj->product_name}</h3>
<div class="product-info">
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer" >
<i itemprop="priceCurrency" content="INR" class="fa fa-inr"><span itemprop="price">{$productPrice}</span></i>
<span itemprop="weight">{$weight}</span>
<input itemprop="availability" itemtype="https://schema.org/OutOfStock" content="Out Of Stock" type="hidden" name="product_qty" value="Sold Out"/>
</span>
<fieldset>
<label content="{$obj->product_company}" itemprop="manufacturer">
{$obj->product_company}
</label>
</fieldset>
<input itemprop="productID" content="{$obj->product_code}" type="hidden" name="product_code" value="{$obj->product_code}" />
<div align="center"><button id="{$obj->product_code}" style="background:#666666" value="{$obj->product_code}" type="submit" class="SoldOut" >Add to Cart</div>
</div>
</div>
</form>
</li>
EOT;
$imgID++;
}
echo $products_item;
Now based on the solutions, i added an image tag just before the actual image tag.I tried doing something like this
1. $('.loaderGIF').on('load',function(e){//something})
//This didn't even run
2. $('img').on('load',function(e){//something})
//I can't seem to limit this to the main image.
How do i achieve my solution, i have been trying it out for a couple of hours.
Please, let me know if you need somthing more.I will update my question.Thanks!
I couldn't find my own fix, but I found this one right here on stackoverflow and it seems good to me.
If the src is already set, then the event is firing in the cached
case, before you even get the event handler bound. To fix this, you
can loop through checking and triggering the event based off
.complete, like this:
Copy from the source in case it changes:
// ".one()" makes it work only once. Change to "on" if you need it to happen more.
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
I'm working with soundcloud custom player, and trying to get it to play the next song, even if it is in a different div. I'm not incredibly familiar with js, but I believe i've located the code, I just don't know what exactly to do with it!
JS
onSkip = function(player) {
var $player = $(player);
// continue playing through all players
log('track finished get the next one');
$nextItem = $('.sc-trackslist li.active', $player).next('li');
// try to find the next track in other player
if(!$nextItem.length){
$nextItem = $player.nextAll('div.sc-player:first').find('.sc-trackslist li.active');
}
$nextItem.click();
},
HTML
<div class="post">
Track 1
Track 2
</div>
<div class="post">
Track 3
</div>
JAVASCRIPT GENERATED HTML
<div class="sc-player special">
<ol class="sc-artwork-list">
<li class="active">
<img src="https://i1.sndcdn.com/artworks-000000103093-941e7e-t300x300.jpg">
</li>
</ol>
<div class="sc-info">
<h3>Hobnotropic</h3>
<h4>bymatas</h4>
<p>Kinda of an experiment in search for my own sound. I've produced this track from 2 loops I've made using Hobnox Audiotool ( http://www.hobnox.com/audiotool.1046.en.html ). Imported into Ableton LIve! and tweaked some FX afterwards.</p>
<a class="sc-info-close" href="#">X</a>
</div>
<div class="sc-controls">
<a class="sc-play" href="#play">Play</a>
<a class="sc-pause hidden" href="#pause">Pause</a>
</div>
<ol class="sc-trackslist">
<li class="active">
Hobnotropic
<span class="sc-track-duration">8.09</span>
</li>
</ol>
</div>
Track 1 automatically goes into track 2, but i'd like it to go to track 3. HELP! ;)
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>
There is a bootstrap carousel that is changing automatically:
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
Only one div is set to active at a time, and it cycles through like that.
How can I bind all of carousel's children to another element so that it can set it's specific child to be active as well.
For example:
<div id="copy-cat">
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</div>
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
How can I bind copy-cat to have the same child active as carousel? Keep in mind, I don't want to copy all of the class attributes- just detect that one is active, and set that same numbered child to active also.
I'd use Bootstrap's slid event callback:
http://jsfiddle.net/isherwood/6xF7k/
$('#carousel').on('slid.bs.carousel', function () {
// get the index of the currently active panel
var myIndex = $(this).find('div.active').index();
// set the element with that index active, deactivating the others
$('#copy-cat').find('li').removeClass('active').eq(myIndex)
.addClass('active');
})
Notice that I changed #copy-cat to ul to make it valid HTML.
http://getbootstrap.com/javascript/#carousel-usage
Given an element x, you can get the index of x in its parent's .children() by calling x.index(). In your example, $("div.active").index() would return 0, the div following would return 1, etc. So you should be able to do something like the following:
$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");
(nth-child is 1-index-based, so you need to add 1. You could also call eq(), which is 0-based.)
See this jsFiddle for a rough example.
But this is only a general answer. If there are Bootstrap methods for this purpose, by all means use them.
The Bootstrap carousel has some events that you can tap into.
Information about the events can be found in the "Events" section under the Carousel documentation.
I would recommend doing something like:
<div id="copy-cat">
<div id="copy-1" class="active"></div>
<div id="copy-2" class=""></div>
<div id="copy-3" class=""></div>
<div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-transition-to="#copy-1">
<p>something1</p>
</div>
<div class="item" data-transition-to="#copy-2">
<p>something2</p>
</div>
<div class="item" data-transition-to="#copy-3">
<p>something3</p>
</div>
<div class="item" data-transition-to="#copy-4">
<p>something4</p>
</div>
</div>
</div>
Add a listener as described in the event section, and inspect the relatedTarget.
Use the data-transition-to to figure out the class to add the active class to.
Javascript to support this approach:
$('#carousel').carousel({
interval:false //or whatever options you want
});
$('#carousel').on('slide.bs.carousel',function (event) {
$('#copy-cat .active').removeClass('active');
$(event.relatedTarget.dataset.transitionTo).addClass('active');
});
$('#carousel').carousel('next');
This is is the fiddle ...I disabled transitioning & you will have to inspect the DOM to see that the copy-cat div is being changed.