I'm trying to get text in paragraph ".name" and put into all alt attribute in an image gallery. How can i get this text and put into attribute changing the current text. For example: in .box-product one the image of product 0001 should get alt text from this paragraph Box 0001 and another blocks the same respectly.
$(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
document.getElementsByClassName("name")[i].setAttribute(
"alt", document.getElementsByTagName("img")[i].src);
}
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
Perhaps you meant this?
I use jQuery for all the access - you had typos in your DOM access
$(function() {
$(".box-product").each(function() {
$(this).find("img").attr("alt",$(this).find("p.name").text());
});
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
With jQuery,
$('.box-product').each(function() {
$(this).children('img').attr('alt', $(this).children('.name').text());
});
Basically, $('.box-product') gets all of the boxes. Then you need to loop through each, getting the text from it's child .name and assigning it to the alt attribute of it's child img.
Without jQuery, you can use the querySelectorAll and querySelector functions to easily the same.
document.querySelectorAll('.box-product').forEach(function() {
this.querySelector('img').alt = this.querySelector('.name').innerText;
});
And without those functions (for older browsers):
var products = document.getElementsByClassName('box-product');
for(i in products) {
var product = products[i];
product.getElementsByTagName('img')[0].setAttribute('alt', product.getElementsByClassName('name')[0].innerText);
}
Related
So I have the following code in the head file:
<div class='topic-poster'>
<a href="/u/${username}" data-user-card="${username}">
<img alt="" width="50" height="50" src="${avatar}" class="avatar">
</a>
</div>
....
<div class="topic-statuses">
${title}
<div class="topic-post-tags">${tags}</div>
</div>
In the scss file:
.topic-statuses{
margin-right: 50px;
}
And the output is:
first and second are tags (${tag}).
How do I add an comma or '|' between first and second?
try to insert another div container between the 2 elements with the character , in it.
<div class='topic-poster'>
<a href="/u/${username}" data-user-card="${username}">
<img alt="" width="50" height="50" src="${avatar}" class="avatar">
</a>
</div>
<div> , </div>
<div class="topic-statuses">
${title}
<div class="topic-post-tags">${tags}</div>
</div>
I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)
You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>
There are four images I wish to be in one line. Three images have been uploaded to my website while the fourth is generated from JavaScript. Three of the images are aligned but the JavaScript image falls underneath to the next line. How can I fix this?
<h3 style="text-align: center;">
<img alt="" class="pull-center" height="168" src="images/wedding-wire-badge.jpg" width="168">
<img alt="" class="pull-center" height="168" src="images/WPIC-certification-logo11.png" width="151">
<img alt="" class="pull-center" height="125" src="images/wpic-canada.png" width="250">
<script src='//www.weddingwire.com/assets/vendor/widgets/ww-rated-2013-d545585beb7833eec3a4dc56cbb3224c.js' type='application/javascript'>
</script>
</h3>
<div id='ww-widget-wwrated-2013'>
<h3 style="text-align: center;">
<a class="ww-top" href="https://www.weddingwire.com" target="_blank" title="Weddings, Wedding, Wedding Venues"></a>
<a class="ww-bottom" href="https://www.weddingwire.com/reviews/the-wedding-planner-plus-ocho-rios-island-wide/ebeea94a4b2d94b0.html" target="_blank" title="The Wedding Planner Plus Reviews, Jamaica Wedding Planning">
</a>
<script>
WeddingWire.ensureInit(function() {
WeddingWire.createWWRated2013({
"vendorId": "ebeea94a4b2d94b0"
});
});
</script>
</h3>
</div>
<div id="ww-widget-wwrated-2013"></div>
Hope It works for you, Thanks :-)
<h3 style="text-align: center; display:inline">
<img alt="" class="pull-center" height="168" src="images/wedding-wire-badge.jpg" width="168">
<img alt="" class="pull-center" height="168" src="images/WPIC-certification-logo11.png" width="151">
<img alt="" class="pull-center" height="125" src="images/wpic-canada.png" width="250">
<script src='//www.weddingwire.com/assets/vendor/widgets/ww-rated-2013-d545585beb7833eec3a4dc56cbb3224c.js' type='application/javascript'>
</script>
</h3>
<div id='ww-widget-wwrated-2013' style="display:inline-block">
<h3 style="text-align: center;">
<a class="ww-top" href="https://www.weddingwire.com" target="_blank" title="Weddings, Wedding, Wedding Venues"></a>
<a class="ww-bottom" href="https://www.weddingwire.com/reviews/the-wedding-planner-plus-ocho-rios-island-wide/ebeea94a4b2d94b0.html" target="_blank" title="The Wedding Planner Plus Reviews, Jamaica Wedding Planning">
</a>
<script>
WeddingWire.ensureInit(function() {
WeddingWire.createWWRated2013({
"vendorId": "ebeea94a4b2d94b0"
});
});
</script>
</h3>
</div>
<div id="ww-widget-wwrated-2013"></div>
I'd like to be able to search and display these based on the class attributes, such as "kitchen". I can't find anything on searching by the class, only text and such. Or if anyone has a recommendation on a better way to search and display images. Any help would be greatly appreciated.
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div id="item" class="#1 Category-Home Home">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="item" class="#2 Category-Kitchen Kitchen">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="item">
<div class="#3 Category-Outdoors Outdoors">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
<div id="item" class="#4 Category-Sports Sports">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
$(document).ready(function() {
$("#filter").keyup(function() {
});
});
https://jsfiddle.net/sgrg4b06/
So first, thing, remove all the duplicate ID's all over the place. That will only cause headaches. ID's are unique identifiers. Second, see the below. Pretty well commented. It IS case sensitive.
// then, on entering text...
$("#filter").on("keyup", function() {
if ($(this).val().length > 0) {
// hide everything,
$(".item").hide();
// get the text in the input
var mySelector = $(this).val();
// show any class that contains the input
var myImgs = $("[class*='"+mySelector+"' i]");
myImgs.show();
} else {
$(".item").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div id="image-1" class="item #1 Category-Home Home">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="image-2" class="item #2 Category-Kitchen Kitchen">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="image-3" class="item #3 Category-Outdoors Outdoors">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
<div id="image-4" class="item #4 Category-Sports Sports">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
Your comment about case insensitivity made me curious. If you google jquery attribute selector case insensitivity, there is a lot of cool stuff to be found. The most simple solution was to change the selector, as above -- note that there is now a
$("[class*='"+mySelector+"' i]")
The i on the tail of the selector indicates case insensitivity.
FURTHER CHANGES -- now, when the input has no value, all image divs are shown. And, by default, they're all visible.
I removed all id, but added classes into divs attr.
Below is working solution (case insensitive).
Also I changed Your images a little bit, for You can see difference.
$(document).ready(function() {
var images = $(".item") //contain all unfiltered images
$("#filter").on("change paste keyup", function(){
$.each(images, function(i, l){
$(l).hide();
}); //hide all images
searchValue = $("#filter").val(); //get entered value of input field
searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
$.each(output, function(i, l){
$(l).show();
}); //show matched images
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div class="item #1 Category-Home Home">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x151" />
</a>
</div>
<div class="item #2 Category-Kitchen Kitchen">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x152" />
</a>
</div>
<div class="item #3 Category-Outdoors Outdoors">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x153" />
</a>
</div>
<div class="item #4 Category-Sports Sports">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x154" />
</a>
</div>
</div>
1) You have ids repeated, ids are unique, I have changed them to class
2) You have:
<img class="img_item"><img src="http://placehold.it/150x150" />
The first img tag doesn't contain and image, either change it to a div (dont forget to close it) or just remove it. (In below example i changed to div)
3) Rather than using a class it makes more sense to use the data attribute. I have added a data attribute to each .item.
4) Using jQuery, we can loop through each item and check if the data-category contains the value of the search field. If it doesn't we hide it.
5) If the search box is empty, we show everything.
Hope this helps.
$("#filter").keyup(function() {
filterString = $("#filter").val().toLowerCase();
if (filterString.length < 1) {
//alert("showing all");
$(".item").slideDown('slow');
} else {
$(".item").each(function() {
if ($(this).data("category").toLowerCase().indexOf(filterString) == -1) {
$(this).slideUp('slow');
} else {
$(this).slideDown('slow');
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div class="item" data-category="Home">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Kitchen">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Outdoors">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Sports">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
</div>
I have a HTML5 web page and I use 4 canvas controls to render images from my web cam.
By double-clicking and image/canvas I hide the 4 canvases and display a larger canvas control instead.
As soon as I done this one of my controls is highlighted.
This is the original web page BEFORE the double-click:
And this is the web page AFTER the double click:
This is the code that handles the double-click of the smaller canvas element:
$('#canvasLiveView1').on('dblclick', function () {
$('#divSingleView').css('display', '');
$('#divMultiView').css('display', 'none');
camDoubleClickCam = 1;
});
I have tried adding this to the double-click event:
$('#btnPlaysave').blur();
where 'btnPlaySave' is ID of the highlighted control.
Incidentally, this behavior/effect does not appear in IE.
Any suggestions?
ND.
this is the HTML for the canavs 'toggle'
<div style="height:362px;">
<div id="divSingleView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;display:none;">
<div style="float:left;width:95px;"> </div>
<div style="float:left;width:330px;margin-top:75px;"><canvas id="canvasLiveView" style="width:330px;height:220px;outline: yellow 1px solid;"></canvas></div>
<div style="float:left;width:95px;"></div>
</div>
<div id="divMultiView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;">
<div style="float:left;height:170px;margin-left:2px; margin-top:10px;"><canvas id="canvasLiveView1" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-top:10px;"><canvas id="canvasLiveView2" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-left:2px; margin-bottom:10px;"><canvas id="canvasLiveView3" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
<div style="float:left;height:170px;margin-bottom:10px;"><canvas id="canvasLiveView4" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
</div>
</div>
<div style="height:30px;">
<div id="divPaused" style="display:none; float:left;margin-left:5px;color:white;font-size:9pt; font-weight:800;">
Paused
</div>
<div style="width:290px;margin: 0 auto;">
<div style="float:left;width:24px;margin-left:5px;">
<img id="btnPlaySave" alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/save.png" class="imgPlaySave" title="Save Image" onclick="PlaySave();" />
</div>
<div style="float:left;width:24px;margin-left:5px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/button_minus_red.png" class="imgPlaySlower" title="Decrease Playback Speed" onclick="PlaySlower();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" cursor:pointer" src="/Content/Images/button_plus_green.png" class="imgPlayFaster" title="Decrease Playback Speed" onclick="PlayFaster();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_start.png" class="imgPlayStart" title="Go to First Frame" onclick="PlayStart();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_back.png" class="imgPlayStepBack" title="Step to Previous Frame" onclick="PlayStepBack();" />
</div>
<div id="Tempo" style="float: left; width: 40px; text-align: center; vertical-align: middle; font-weight: bold;color:white; font-size: x-small; font-family: Arial, Helvetica, sans-serif;">
100
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_pause.png" class="imgPlayPause" title="Pause" onclick="PlayPause();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_play.png" class=" imgPlayPlay" title="Play" onclick="PlayPlay();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_next.png" class="imgPlayStepNext" title="Step to Next Frame" onclick="PlayStepNext();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_end.png" class="imgPlayEnd" title="Go to Last Frame" onclick="PlayEnd();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/LiveFeed.png" class="imgLiveFeed" title="Back to Live Feed" onclick="LiveFeed();" />
</div>
</div>
</div>
So the canvas creates weird behaviour when double clicked. I found and answer that supposed that in order for it to work properly you can cancel out the events that are triggered by:
document.getElementById('canvas').onmousedown = function(){ return false; };
I grabbed this answer from: HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text
hope this helps people so they don't have to jump around a few questions.