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.
Related
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.
I need help regarding Pixel Art Maker.
where I added two extra features toggle () and remove () .
The problem is, when I insert numbers to draw grid, and click submit button, in first attempt , it draw the grid. But after clicking the toggle button or remove button , in my second attempt to draw grid, the submit button doesn't work and I can't able to draw grid.
Here is the link.
https://codepen.io/sofianayak55/pen/dKEaPw
Please go through this link, avoid the styling part, I will do it later Kindly go through the JavaScript and jQuery section.
Thank you.
Update your remove function.
$(".clearGrid" ).click(function() {
$("#pixelCanvas").html("");
});
You have used $("#pixelCanvas").remove() which is actually removing #pixelCanvas table. So next time it is not getting bind. You just need to clear only its html part.
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.
I've built an Ammap that displays data in an infowindow based on which continent gets clicked, and I'm really close to where I want to get, with the exception of 2 things:
Upon map load, the first click displays the correct data, but that data remains in the infowindow - clicking other regions takes no effect. The objective is to clear the infowindow and display data from the region clicked last.
After onclick, the region's color changes accordingly. But if you hover above it again, the color disappears. How do I make the onclick color 'stick'?
I believe I made the error when I commented these few lines out - the original code had enabled multiple-area select, and the map I had in mind should only allow single area select.
//event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
//map.returnInitialColor(event.mapObject);
Please see the working pen here and let me know if you can help: http://codepen.io/anon/pen/jPeXor
Thanks in advance for any help!
I am new to javascript and I need to make a black jack style game. I need to create a table of replicated buttons in a 6x6 row(36 buttons total). They will display an x unless pressed and then they will generate a random number 1 to 9 and add it to a total score in a global variable. If the buttons clicked put you over 21 then you lose but if you get a score of exactly 21 you will win the game and a pop up message will prompt the user of their win.
I not sure how to make a table and then replicate the buttons. I also would like to know how to change the value of the button from x to a random number.
The game will look something like this.
I am not asking for the full game to be done for me I just want to know how to replicate buttons in a table, point them all to the same function, and change the value displayed on the button when one is clicked. If you can show me an example of anyone of those concepts I would greatly appreciate it.
how to make a table and then replicate the buttons
Use loops to repeat the same code several times. You can put the code that sets up a button in a loop to make many buttons.
how to change the value of the button
If you're using an input element for the button, the value property lets you change its label.
to a random number
Math.random gives you a random number. You can build some logic around this to get what you want.
how to ... point them all to the same function
You can use event listeners to run code when the user clicks an element.