I'm working to make a form more user-friendly. One of the easier ways I've seen is put the form field within the shape like so
Outside of using a table, I have not come up with decent way to layout/code this concept. The problem with tables is that they do not support the curvature of certain shapes and are not responsive without distorting the shape. The images are SVGs paths so I'm curious if it possible to add a form field to a path?
For now, the only thing I could come up with was labeling each side (such as A,B,C, etc) and then having form fields separate that correlate.
Related
Google's Material Design 3 uses a so-called state layer for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.
I am currently creating a web application with Vue.js and using tailwindcss as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.
I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.
The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the tailwind variables inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.
While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?
I need to draw a (possibly large) grid of squares. I wonder what sort of layout is the fastest to render.
each square positioned absolutely
div for each row, filled with floating squares
an actual table
some other?
Not sure there will be much difference in rendering time - they all use a similar amount of code.
The absolute positioning is likely to create the most css, so I'd personally avoid that one.
Is it for showing tabular data or just decoration? If the former, use a table.
If the latter, could you achieve it with a tiled graphic as the background of a single cell instead?
Also: A javascript loop to create them is likely to keep your code tidier than writing each square manually.
I want to know if it is possible to create an image with hyper-links inside, such as one would make for a HTML image-map but with the hyper-linked objects actively moving around within the boundaries of the 'image-map'?
For instance i may want a few click-able hyperlinked squares that fly around within a circle. I'm basically looking to create entertainment/amusing difficulty for someone trying to navigate to the other pages of my website from the homepage; a very dynamic menu you could say.
Would it be possible to plot co-ordinated routes for the objects [that don't clash] and then instead of defining individual static co-ordinates as the locations, input the co-ordinate route? Haven't a clue what language/script this would be done with [if it can be], preferably one that ain't too hard to learn and is supported by modern-browsers. Only know basic/intermediate HTML 4.01 and CSS/3 at the moment.
How can i fill text in the canvas with mutiple font.
I can be able to fill in canvas this:
This is an example of what I want to do
this is another example of what I want to do
I know that i can slpit the sting and do first fill the normal text, second the bold text, and third the rest of the text. but i want to be able to drag and drop the text, so i cant do in that way.
Sorry, you're out of luck. There's no easy way out here.
You have to call drawtext at least three times if you want text with a bolded word in the center.
There may be a time in the future where you are allowed to draw arbitrary html, the spec mentions this is a real possibility, but that won't be for some time. To quote the spec:
Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated way of doing multiline layout.
From the end of this section.
You can of course still drag and drop, you just have to have a list of elements and their locations that make up a "node". Much more complicated objects have been done in the canvas no doubt.
I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.