HTML5 Color Input Won't Open - javascript

I'm working on a web application that involves using canvases as a shared whiteboard between people. I have an HTML5 color input on a menu that becomes visible when hovering over the whiteboard so that the user can change the color of the drawing tool.
My issue is that during testing, the color picker won't open the majority of the time. I have two tabs open both with instances of the whiteboard to test. The color picker will only open on the first instance of the page I have open.
On the second page, when I click on the color picker it refuses to open. It shows the click animation on the button but the browser's color picker dialog doesn't open. Also, if I refresh the first instance of the page, the color picker stops working there as well. The only way I can get it to work again is if I completely close both tabs and reopen one.
I've tried and confirmed that this happens in both Chrome and Firefox which makes me think it's an issue with the HTML. This is a snippet of HTML that surrounds the color picker.
<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min" style="display:none;">
<div class="drawing-tool-menu" style="display:none;">
<input id="color-draw" type="color"/>
</div>
<span class="fa fa-pencil fa-2x"></span>
</a>
The anchor is a button in a hovering toolbar for selecting a marker and when the mouse hovers over that button, the color picker appears above it so you can select the color.
Here is a picture of the menu hovering over the whiteboard with the color selector visible.
I've tried to be detailed here and put down the relevant info. I'm not sure what information may be valuable to help solve the problem. I'm also not sure whether it's a problem with the browser or my code. I can add some of the javascript I use to display the menus, more HTML, or CSS if it would help.
Edit 1:
Javascript Code
I use this code to detect changes in the color
$("#color-draw").off();
$("#color-draw").change(function (e) {
drawingClass.currentColor = $(this).val();
});
In order to show/hide the menus I use this.
var menuCloseTimer = {};
$(".whiteboard-toolbar a").off();
$(".whiteboard-toolbar a").mouseenter(function (e) {
var item = $(this).attr("id")
var key = $(this).attr("data-toggle");
$(".video-toolbar[data-toggle='" + key + "']").show();
$(".whiteboard-toolbar[data-toggle='" + key + "']").show();
$(this).children(".drawing-tool-menu").show();
clearTimeout(menuCloseTimer[item])
});
$(".whiteboard-toolbar a").mouseleave(function (e) {
var menu = $(this)
var item = $(this).attr("id")
var key = $(this).attr("data-toggle");
$(".video-toolbar[data-toggle='" + key + "']").hide();
menuCloseTimer[item] = setTimeout(function () {
menu.children(".drawing-tool-menu").hide();
}, 500);
});
Edit 2:
I discovered something. On the first load when I click on the color picker it opens but on subsequent loads, it triggers the handler for anchor instead. I'm not sure why though.

I wrote the HTML intending to make the popup menu show up relative to the anchor button. But, the input element being inside of the anchor is causing the issue. After the first load, clicking the color input triggers the anchor instead of bringing up the color window.
I don't know why the color picker works on the first load but I'm fairly sure this is what is causing the issue. I did some research and found that you aren't supposed to put buttons inside of anchors and this is basically that.
I moved the color input out of the anchor and it worked perfectly.
It's frustrating that there isn't any documentation about this issue or errors thrown by the browser.
Edit 1
In order to fix the issue I changed my code to:
<div style="display:inline-block;position:relative">
<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min">
<span class="fa fa-pencil fa-2x"></span>
</a>
<div class="drawing-tool-menu" id="drawing-tool" data-toggle="remote-whiteboard" style="display:none;">
<input id="color-draw" type="color" />
</div>
</div>
That way the input is separated from the anchor but is still placed relative to it.

Related

How do I capture the Menu Clicks in GTM in a manner that indicates the hierarchy?

Please I really need help creating a custom javascript variable in GTM that will capture Menu click text in a hierarchical manner.
So for example, when I hover over the "About" tab in my Menu, other buttons show up under it titled "About CEO" and "History". When I click on "About CEO" I want the variable to capture "About: About CEO" and when I click on History I want the variable to capture "About: History". Finally when I click on only About I want the variable to capture "About".
I've been able to find the right CSS selector for the Menu div but I'm not great with javascript. Thank you in advance!
Sample dropdown menu HTML -
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
About CEO
History
</div>
</div>
Set up click trigger in GTM by class name -
GTM custom javascript code -
function() {
var elm = {{Click Element}};
var clickText = elm.textContent;
return elm.closest('div.dropdown').getElementsByClassName('dropbtn')[0].innerHTML +' : '+ clickText;
}
output in Google Analytics -

Javascript - sendkeys to proper dynamically created div

I'm a bit lost as to starting the code for my scenario.
I allow the user to create divs dynamically by clicking on an add new div button and remove div button. Therefore, the user could be focused inside any div on the page and I need to make the keypress event send to the correct div.
I have some buttons to insert Mathml on the left of the screen. I want to be able to click on the button and for the Mathml code to appear in the div the user is currently focused in.
From what I've read, I believe I have to attach an event listener to each div as it is created and remove it when the user removes the div (I maintain an index of the divs).
How do I send the keypress event from the button to the div the user is in without losing focus on the div and making sure the Mathml goes into the correct div?
I know in vb or C# .net it is a 2 second job but javascript seems like a real nightmare for this type of functionality.
Any help/pointers/tips etc.. would be most welcome.
Alright, so I created this fiddle for you the get a look at how a possible solution could look.
https://jsfiddle.net/1u0uw0df/
HTML
<div id="container">
</div>
<button type="button" id="AddBtn">
Add
</button>
<button type="button" id="RemoveBtn">
Remove
</button>
JQuery
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#container').on('click','div',function() {
focusedElement = this;
});
$('#AddBtn').on('click',function() {
$('#container').append('<div>Test'+No+'</div>');
No++
});
$('#RemoveBtn').on('click', function() {
focusedElement.remove();
});
});

On link click new image with text appears

I am trying to create a page where when a link is clicked the corresponding image appears with a clickable link below it that will say "Click to view Gallery"
So far I have the code written to change the image using an 'onclick' command, but I am unsure how to add the text below the image.
Here is my website with the current code now.
JS:
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
HTML:
1025 W 3rd
959 - 965 Schrock Rd
7099 Huntley Rd
So the text that reads Click to view Gallery of Property is what I need to be added beneath the image. That link needs to be a unique link that leads to the corresponding property based on the 'onclick' link that the user selects in the left column.
So for example, the user selects 1025 W 3rd in the left column and it's corrisponding image shows up with an option for the user to view a gallery of that property alone (which will be a separate web page)
I am not sure what my next steps should be. Is it better to change the links to and 'onclick change div' type of command?
Thank you so much for your help.
-Kas
EDIT
I added my current code so any reader can better understand what I currently have.
You need to add a link bellow your image and add it an id.
<div id="divright">
<img src="http://new.oxrealty.com/wp/wp-content/uploads/2015/08/CommercialPropertiesDef.png" alt="Images" id="imageReplace">
Click to view Gallery
</div>
Then change your function changeImage to accept an additional argument for a link, and it should also change the href attribute of the link.
function changeImage(image, link) {
document.getElementById('imageReplace').src = image;
document.getElementById('linkReplace').href = link;
}
Then you change the links to call the updated function with the link
onclick="changeImage('CUSTOM_IMAGE', 'CUSTOM_LINK');"
Example jsfiddle
You're fine with your code as you are. To change the value of a div with an id of "text" for example, you would just do in your JS:
document.getElementById('text').value = 'Type the new value here';
Hope this is what you're looking for!

Editable Div - Highlights Specific Letter On Click

Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.

dijit/MenuItem disabled but not grayed out automatically

I used dijit/MenuItem in a popup menu for the JS Canvas object. When user right click the Canvas, I want to show the menu and disable some items based on the location that user selected. Hence, I code in the onmousedonw event of the Canvas to disable the item.
Everything works fine except that when I right click and the menuitem change from enabled to disabled, the item in the menu is still showing as normal state until I move mouse over it and then it shows gray as disabled. Is there a way that I can somehow "refresh" the menuitem after changing the disabled state so that it will be shown as grayed out immediately when the menu show?
HTML for the menu
<ul dojoType="dijit/Menu" id="menu" style="display: none;border-radius:3px;">
<div dojoType="dijit/MenuItem" id="Popup_Cut"><span>Cut</span></div></ul>
JS for the disable
function handleMouseDown(event) {
if(...)
dijit.byId("Popup_Cut").disabled = true;
}
Instead of using the property disabled, use the set method instead:
dijit.byId('Popup_Cut').set("disabled",true);
Had the same problem, and this worked for me.
More info on set:
http://dojotoolkit.org/reference-guide/1.8/dijit/info.html#set-and-get

Categories

Resources