Develop Reference

Looping JavaScript

I have been searching Stackoverflow and Google, and tried everything I clould think of to figure out how to loop through an html file with javascript and find all of the video files, and their unique ID, but I cant seem to get it right. I have not been coding in several years, so I am very rusty and most of my experience is with back end code. I have very little experience with DOM and Javascipt, I am sure what ever I have tried, I have probably screwed up the syntax/semantics.
What the code does:
The Javascript makes videos pop up and play in a modal window, however since it is hard coded, I can only input one unique ID, and when you click on each of the videos on the web page, of course, they play the same video.
Hope someone can help, this is a personal project for my game collection and the only thing I have left to complete is this last piece of code. Thanks in advance for any assistance.
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("Some-ID-Variable");
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
<!--Here is the HTML I have, I am only showing 2 game titles in the example, but this code repeats for every game in my collection:-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-1-trailer.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 1</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>
<!--End .container-->
<div class="containers">
<!--Begin .container-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="MyVideo" width="600" controls>
<source src="videos/game-title-trailer-2.mp4" type="video/mp4">
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<div>
<img class="title-image" src="images/placeholder.jpg" alt="Some Title">
<br>
<span class="title-text">Game Title 2</span>
<br>
<ul>
<li>Comfort: Intense</li>
<li>Learning Curve: Intermediate</li>
</ul>
<br>
<p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
<br>
</div>
</div>

Like James said, document.querySelectorAll('video') will get every video tag on the page, but if I understand your question correctly, you want to find a specific ID and play it when it's chosen. Looping is probably an inefficient way to do that, especially if you have many videos.
Perhaps you can try putting a variable in your onclick, like onclick="lightbox_open('1')", then in that function you can do:
function lightbox_open(idNum) {
var lightBoxVideo = document.getElementById("Some-ID-Variable" + idNum);
//...
}
Then if you're building more possible videos from the backend, you can just increment that variable when you set each element's onclick attribute.

Any idea why this javascript preventDefault function is not being called in this scenario?

I have some HTML that should respond to user interaction. It is a page that I am trying to get to work offline. After I load the page while online I end up with fully rendered HTML. Some of the HTML contains show/hide functionality, and is meant to prevent deafult action of an element click. For instance, see this:
<div id="area49253971_6938" class="component interaction-component float-none clear-none interaction_booted">
<div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
<div>
<div class="data-field interaction-type">RevealContent</div>
<div class="interaction_title"></div>
<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
<div class="pointer">
<td>
<div id="area49253971_6940" class="component image-component float-left clear-none booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
<p class="body" id="area49253971_6941"><em><strong>Some question</strong></em></p>
</td>
</div>
<div style="display: block;">
<td>
<p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
</td>
</div>
</div>
<div class="interaction_data" style="display: none;">
<div id="area49253971_6939" class="component table-component float-none clear-none ">
<div class="component_caption"></div>
</div>
</div>
</div>
</div>
The app's code is not working offline (I think due to app's ajax calls and a bunch of other dependencies and app-specific stuff). (By the way, you can see the app code I am trying to rewrite into pure jQuery here: https://jsfiddle.net/0s6xdk9q/1/). So I decided to rewrite the app functionality like so:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = ($(this).find('.RevealContent')).children()[1];
var initialContent = ($(this).find('.RevealContent')).children()[0];
$(contentToReveal).slideToggle('slow');
var a = initialContent.find('a');
a[0].addEventListener("click", function(e){
e.preventDefault();
}, false);
});
});
Something is not quite right. Maybe because I have multiple click events. In any case, I confirmed by stepping through the code in Chrome that the variable a is indeed the element I expect. All element selectors are working fine. But nothing I do is resulting in this preventDefault from working. I have a feeling there is a simple answer, just not seeing it. Also, I am trying to do this in a way that doesn't require me to add anything to the HTML.
Thoughts?
thanks,
Brian

Show GIF until image loads completely

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();
});

Mouseover text then Change Image not Working in IE8-below

I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>

I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>​
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.

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...