Spotfire button change color when clicked / selected - javascript

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.

Related

Vue: how to know what text is selected / highlighted by user and display multiple instances

I am trying to make component, Highlight, that can:
know what the user selected / highlighted (mousedown and drag over text)
show the highlighted text (color the aforementioned selected text in a color)
can handle multiple instances of this.
see images for idea of what I am aiming for:
From google, StackExchange, Medium posts, etc I have a component which can figure out the text the user highlighted:
codesandbox
This is mostly taken from this medium post by freecodecamp, which uses a slot based approach.
For the actually rendering of highlighted text, most examples I have found do so via regex and replacing the original text with a span or something (e.g. vue-text-highlight).
These two methods are naturally at odd. It might work for highlighting once, but if the original text is altered to now contain a span element, then subsequent or re-selection won't work.
So I was wondering if anyone had any ideas to surmount this.
In the above images, I show what I will be using this highlight component for (linking two different textual instances), but for the moment I think the images clarify what I mean by selecting and highlighting text.
Was pretty fun - and this isn't a great attempt, but a quick one to get you going.
https://codesandbox.io/s/zw2179y2yl
It supports the following:
Highlighting multiple bits of text independently with (relatively) random colours.
Support for selecting text in the right panel (then click on the corresponding already highlighted text in the left box) and it will inherit the same colour.
Pretty easy to extend to set some ids on the arrays, and then hold references between the right and left boxes.
How to use:
Action: Highlight some text on the left panel
Result: You will see the highlighted text under the panels
Action: Highlight some text on the right panel
Result: It will show up with a grey background in the right panel
Action: Click on one of the highlighted text rows under the panels
Result: The text you previously highlighted on the right will inherit the colour of the selected text you clicked.
Edit:
Just noticed a couple of bugs:
If you highlight a space, it totally screws up.
The highlighting is greedy, so if you highlight "it", it will highlight all instances of "it" whether they are in words or not with the same colour throughout the whole text.
I kinda did the same thing (about grabbing user's selection) in my single file component vue-selection-share when imitating medium's selection dropdown menu. This is what I did to grab the user's selection:
const selection = window.getSelection()
and then, I used startNode and endNode to grab the elements that the selection starts and ends in:
const startNode = selectionRange.startContainer.parentNode
const endNode = selectionRange.endContainer.parentNode
after I test whether the selection is valid, I transform it to a string
this.selectedText = selection.toString()
whereafter creating a handleAction method using this.selectedText.
the random color-generation part can be solved simply by this below:
data: {
myColour: '#'+(Math.random()*0xFFFFFF<<0).toString(16)
},
mounted() {
document.body.style.background = this.myColour;
},
methods: {
generator: function(){
// give the selected text an ID before doing this
let highlightedText = document.getElementById(highlightedText)
this.myColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
document.highlightedText.style.background = this.myColour;
}
}
you can, if I recall correctly, find more and getElementById and colour changing here on mozilla.
I did not have the time to check the other answer but do follow his when you think his solution is better as my answer is a quick one written on my phone. during lunch.

Information shows in a div while pressing button from another div without loading page by jQuery & PHP

At first I apologize for not having the code of my desire & I've no idea how I'll ask the exact question by focusing any specific keywords.
However, I want to show my product information in an area(div) whenever I click a button in another area(div). & The work should be done without refreshing pages.
Again I apologize for that I've not the code. But I can provide an
image and hope you'll understand my desire
Example: Whenever I click on angry burger, the price and quantity should be shown in the right(California Fried Chicken) area. And multiple selecting product should also work one by one. After that I should be able to submit product information bu pressing submit button where a PHP operation should be done.
I want to do the whole task by jQuery & PHP
Thanks
You can achieve this by setting up click listeners in your javascript/jquery code and assign them to the ids of your pictures or fields. For example you can assign an id to an tag like below;
<p id="div">Hello world</p>
And then set up a click event in your jquery code to execute a function whenever that tag is clicked
$( "#div" ).bind( "click", function() {
var tag = $(this).html(); //get the value of the tag
alert(tag);//this will display Hello world
});
You can do this for any tag and retrieve its value or contents or anything and carry out an activity like changing the display of another element as below
$("#change").append(tag) //this will change the display of the tag with id change
Please ask if you have any questions

ImageMapster JavaScript Button

I would like to make this example of an image map,
http://jsfiddle.net/sb9j7/
but I want once you click on the active areas of the map instead of just appear simple text, I want that in that area appear two buttons that will call a database in that same area.
Example
Click on the carrots map>instead of text in the upper part appear two buttons>that button once is click calls a database
The problem is that this area only let me put simple text, don't let me make a button on the var xref = {carrots:
I don't know what I'm doing wrong, thank you In advanced for your guidance.

jQuery small inline kind of popup

I have a tabular/grid data with 7-8 cols..
Now the col string values are displayed for each col and there is inline edit (div -> textbox -> div), except for one for which I display an edit icon..since this col has large text, so cannot display the value as part of that same grid..
Now I want the same functionality to be applied for this col...but on click of edit icon...i.e. on click of edit icon, a textarea is displayed with the value and may a Ok button on click of which I save the value...
I am not sure what is the best way to implement the same? Should I open a separate popup next to the Edit icon ?
I know there are a lot of plugins like X-editable and others, but I CANNOT use any custom plugin...
I want to write custom code...

Possible to trigger a Bootstrap Tooltip from a separate elment?

I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?
Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/

Categories

Resources