We Keep Coding

Trigger css change based on video play/pause

I'm learning and not sure how to ask this but here goes. I have buttons that I made from imgs, and want to use them to play one single video and have it automatically pause at specific times and then the img's css change. Then click the next img to start playing again until the next pause. I have it almost working. How can I change the css of the imgs along with playing/pausing the videos? I want to change their display to none/block once the video plays/pauses depending on my needs. Can I integrate it in what I have here? Can I add something like this.style.display = none/block? Where would I add it?
<video class="vid" id="myvideo" src="assets/fullvideo.mp4" playsinline muted>
</video>
<div class="btnsDiv">
<img src="imgs/btns/start.png" data-start="00" data-end="02" id="start" />
<img src="imgs/btns/continue.png" data-start="02" data-end="08" id="cont1" />
<img src="imgs/btns/continue.png" data-start="08" data-end="18" id="cont2" />
<img src="imgs/btns/yes.png" data-start="18" data-end="22" id="yes1" />
<img src="imgs/btns/no.png" data-start="18" data-end="22" id="no1" />
<img src="imgs/btns/continue.png" data-start="22" data-end="66" id="cont3" />
<img src="imgs/btns/yes.png" data-start="66" data-end="71" id="yes2" />
<img src="imgs/btns/no.png" data-start="66" data-end="71" id="no2" />
<img src="imgs/btns/continue.png" data-start="71" data-end="99" id="cont4" />
<img src="imgs/btns/admin.png" data-start="99" data-end="103" id="admin" />
<img src="imgs/btns/judicial.png" data-start="99" data-end="103" id="judicial" />
<img src="imgs/btns/continue.png" data-start="103" data-end="137" id="cont5" />
<img src="imgs/btns/question.png" data-start="137" data-end="170" id="findout" />
</div>
JS
let end;
const btns = document.querySelector('.btnsDiv');
const vid = document.querySelector('.vid');
btns.addEventListener('click', frag);
vid.addEventListener('timeupdate', stop);
function frag(event) {
const clicked = event.target;
if (clicked.matches('img')) {
let start = Number(clicked.dataset.start);
end = Number(clicked.dataset.end);
vid.currentTime = start;
vid.play();
}
return false;
}
function stop(event) {
const vid = event.target;
if (vid.matches('video')) {
if (vid.currentTime >= end) {
vid.pause();
}
}
// End function
return false;
}

JS/Jquery Select all images, but those that repeat just once

i want to select all the images of a website
var images = $('img')
but in some websites, some images repeat, so basically what i'd like to know is
How can i select all the images in a website(repeating and non-repeating) only once.
For example, the website has
<img src="link 1">
<img src="link 2">
<img src="link 1">
<img src="link 3">
<img src="link 1">
and i wish to only select
<img src="link 1">
<img src="link 2">
<img src="link 3">

Loop through them, check if you've already stored it, if not: add.
let $images = $('img');
let uniqueSrc = [];
$images.each(function(){
if( !uniqueSrc.includes( this.src ) ){
uniqueSrc.push( this.src );
}
});

JavaScript (no jQuery)
let imgs = document.images,
imgCount = imgs.length,
src = null,
urls = [];
for (; imgCount--; ) {
src = imgs[imgCount].src;
if (urls.indexOf(src) === -1) {
urls.push(src);
}
}
https://developer.mozilla.org/en-US/docs/Web/API/Document/images

Clicking an image to change the url of a button

How could I make it that if someone clicks the image of the selected product to change the url of the button under the images
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
text/image for amusement only, they are not really the products
What I have tried
window.onload = function() {
var sel = document.getElementById('product');
sel.onchange = function() {
document.getElementById("buy").href = "https://amazon.com/" + this.value;
}
}
Here's a codepen http://codepen.io/anon/pen/bdyWGa

Jquery solution:
$(function(){
$("img").click(function(){
$("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
});
});
Javascript Version:
var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
img = images[i];
img.addEventListener("click", function() {
document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
});
}
Working fiddle: http://codepen.io/anon/pen/NqVjGY

<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
and:
$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});
here you describe clicking on which img will change url to what

In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.
window.onload = function() {
var sel = document.getElementById('product');
sel.onclick = function(e) {
console.log( e.target.attributes[0].value)
document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
}
}
CodeOpen

Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element
$(function(){
$('img').on('click', function(){
$('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>

Wrap existing link from HTML around other images?

How to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>

You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);

Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);

You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());

Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});

Javascript to loop / increment html code with values up to 55

I need to create a list of links in a static (.html) page automatically, is there a way of doing this using JavaScript. I tired a few scripts but couldn't work it out.
this is my html...
<img src="images/1.jpg" width="119" height="121" alt="" />
and this is what i want the script to generate 55 times...
<img src="images/1.jpg" width="119" height="121" alt="" />
<img src="images/2.jpg" width="119" height="121" alt="" />
<img src="images/3.jpg" width="119" height="121" alt="" />
... and so on, call me lazy but any help would be most appreciated :)

This should do the trick:
<div id="links">
</div>
<script>
var strLinks = '';
for (var i = 1; i <= 55; i++) {
strLinks += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';
}
document.getElementById("links").innerHTML = strLinks;
</script>
JS Fiddle example: http://jsfiddle.net/RWUdG/2/
EDIT: Oops, missed a quote. Fixed.

This could also work.
<div id="imgs">
</div>
<script>
var i = 55; while (i--) {document.getElementById("imgs").innerHTML += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';}
</script>
http://jsfiddle.net/T2c3G/

If your anchor tags are contained inside a div, you can do this:
$(document).ready(function(){
var linksHtml = "";
for(var i = 1; i <= 55; i++){
linksHtml += '<img src="images/'+(i)+'.jpg" width="119" height="121" alt="" />';
}
$("#linksDiv").html(linksHtml);
});