Steps to reproduce:
Open Visual Studio 2012 Express for Windows 8 (Metro App Development)
Left pane; select JavaScript as the language. Right pane; select Blank template
Click OK
Insert: <button name="printbutton" value="Print" /> into default.html
Debug (F5)
The problem:
When I start a brand new HTML5 + JavaScript Windows Store application, and add just 1 element, without making any further changes to the solution, the text value of the button element (value="Print"), does not appear.
Why is this, and have I done something wrong? See below for a screenshot:
I have tried setting the Button element's text color to White (since the background is Dark), by adding style="color:white" to the Button element, but this did not have any effect at all.
Try this
<button name="printbutton" value="Print" style="color:white;">Print</button>
Related
Background:
I am using the setSelection() method in an google marketplace add-on for google documents.
The text is selected as expected when clicking the relevant button on the add-on's sidebar. However, this selection is not active - i.e. the selected text is highlighted in light grey instead of light blue (see example below).
Now:
What I need:
This is because the last active portion of the browser tab is the sidebar (after clicking the button), not the actual document.
Question:
Is there a way to make the button click select the text and keep the document the active portion?
Goal:
The whole purpose of this selection is to copy the selected text by Ctrl + C on the keyboard, which is not possible when the selection is not active.
Right now the user needs to use the right-click on the mouse and select Copy from the menu...
On your client-side code use google.script.host.editor.focus() to make the selection on the editor an active selection.
function showSidebar(){
var ui = DocumentApp.getUi();
var html = '<div>Hello world!</div>'
html += '<div><button onclick="google.script.host.editor.focus()">Click me!</button></div>';
ui.showSidebar(HtmlService.createHtmlOutput(html));
}
From https://developers.google.com/apps-script/guides/html/communication#moving_browser_focus_in
Moving browser focus in Google Workspace
To switch focus in the user's browser from a dialog or sidebar back to the Google Docs, Sheets, or Forms editor, simply call the method google.script.host.editor.focus(). This method is particularly useful in combination with the Document service methods Document.setCursor(position) and Document.setSelection(range).
Solution
Since your goal is to copy the selected text I would like to propose an alternative solution:
The task now will include the copying feature directly without additional user input than the button click. And it will be developed this way:
Text Selection
Get your selected text with your Apps Script function triggered by a button click:
//... Your custom logic to get the text selection
var text-to-copy = doc.setSelection(x)
.getSelection()
.getRangeElements()
.map(re => re.getElement()
.asText()
.getText())
.join(" ");
return text-to-copy;
We cannot access the user clipboard from Apps Script but with a successHandler we can pass the text-to-copy variable to the Client-Side interface.
Handling the Server-Side return value
In the following way we can pass the text back to the HTML sidebar.
<!-- HTML Interface Index.html -->
<button onclick="google.script.run.withSuccessHandler(copyToClipboard).setSelection()">
Click Here
</button>
<script>
function copyToClipboard(text) {
const elem = document.createElement('textarea');
elem.value = text;
document.body.appendChild(elem);
elem.select();
document.execCommand('copy');
document.body.removeChild(elem);
}
</script>
We can now leverage the native client-side functionality to copy that text directly to the user clipboard without having her/him to Ctrl+C once your script finished.
A good practice in this case would be to provide a visual feedback to your user once the copy procedure has finished.
Reference
withSuccessHandler(function)
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.
I'm trying to make an application to change SSID and password more easily using webview with react native. But when i get to apply the changes one popup shows up . I don't know how to get the id from popup's button. I'am using getelementbyid for other elements.
Edit: i found this post in stack where he changes the script inside a button. But i don't know how to do this when the script is inside a tag :((((
Button:
<button id="btnApplySubmit" name="btnApplySubmit" type="button" class="ApplyButtoncss buttonwidth_100px" onclick="ApplySubmit();">
<script>
document.write(cfg_wlancfgother_language['amp_wlancfg_apply']);
</script>Apply
</button>
I am working on a web application.
In one of HTML page, I have following code snippet:
<div class="div2">
<button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button>
<div>
This code is working fine in browsers of PC. But when I try it in browsers in mobile device, a button is not clickable. There are also many buttons in the same page but they are working fine. I tried very hard finding a solution online but none worked.
Few observations :
- Not sure why have u added a div wrapper around the button. Try removing the div wrapper
- Your html mark up needs to be checked, since you are trying to view a html page on a mobile, if the elements are not structured properly, then there are high chances that one of the element be overlapping on the button. Hence the click event is not getting triggered for the button rather then it might be trying to trigger the click event of the overlapping element
The tag defines a clickable button.
Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.
Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.
A clickable button is marked up as follows:
<button type="button">Click Me!</button>
ELSE
<button name="favorite" type="button">
<svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
Add to favorites
</button>
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
This answer explains how to use the "touchstart" event which will work on a mobile.
https://stackoverflow.com/a/22015946/2619909
See here :)
Button not working on Mobile Devices but works on PC bootstrap
I am trying to make the buttons created in Spotfire to change color or fade when they are clicked. Basically we want the buttons to show they are marked when selected.
What is the best way to do this?
Thank you for your time.
If you're editing the HTML around a button, it looks like you can make it bold or change the size of the text, though you can't change the color (Or, oddly enough, underline or italicize the text in the button).
So copy the html code for the text area into a string, and on your script for the button click, add the following general setup.
Example Initial HTML:
<p><SpotfireControl id="724c2b260722473caecaef18a2b3b695" />
</p>
Example Code (vTextArea is a parameter of Type Visualization referencing the text area your button is in):
from Spotfire.Dxp.Application.Visuals import VisualContent
from System import Guid
page = Application.Document.ActivePageReference
fullhtml = '<p><font size="3"><b><SpotfireControl id="724c2b260722473caecaef18a2b3b695" /></b></font></p>'
ta=vTextArea.As[VisualContent]()
ta.HtmlContent=fullhtml
I know this doesn't do exactly what you were asking for, but it does succeed in showing the user which button they've clicked.