This is an odd question, and I think it belongs on Stack Overflow since it has to do with HTML/Javascript - if it doesn't belong, let me know and I'll ask it elsewhere.
I am trying to implement a component in my web application, but I do not know what it is called, so I don't know how to search for help on it!
It is where you have a list of things in a combo box on the left side, some arrows in the middle to send list items between combo boxes, and a combo box on the right side that shows the items you have selected.
Here is a "picture" of what I mean:
+-------+ +-------+
| item1 | ---> | item2 |
| item3 | | |
| item4 | <--- | |
+-------+ +-------+
I'm sure there is a JQuery plugin for this too, so if anyone has any recommendations, I'd appreciate it. Thanks in advance!
There is no 'component' that will do this. This thread should help:
Moving items in Dual Listboxes
You have both a jQuery and native javascript example.
There isn't an HTML tag for this, it has to be implemented in JavaScript. It wouldn't be all that hard even without jQuery.
There is also a jQuery plugin here. The examples aren't very flashy, but they do the job.
Related
I'm building an Angular 4 app and I want to use anchor-ing in it. It's a one-page website, on which I have 4 containers, listed vertically. Just like so:
---------------
| |
| |
| |
---------------
---------------
| |
| |
| |
--------------- etc...
Say two of the boxes are 'about us' and 'location'. At the top of the app there is a navbar and I want on click at a <li>, Angular to scroll down with an transition and stop at the proper component (1 of these 4 containers). I'm new to Angular 4, I'm still studying it and I'm asking for an advice. Can I achieve this anchor effect with ng's Router, given that I'll need to attach a scroll-down animation to it, or I should stick to ? Which way is better to go with? And also, if I should do it with router are there any specific things which I have to know about this kind of redirection or it's going again like {path: 'about', AboutComponent }; ?
For the transition I am planning to do, shall I read about #angular/animations or it is going to be plain TypeScript?
Is there a semantically correct way of showing a tooltip in a table header cell that explains something about the column's data?
My table looks like this:
---------------------
| URL | Pageviews |
---------------------
| url/1 | 5 / 20 |
---------------------
| url/2 | 2 / 14 |
---------------------
I want the "Pageviews" text to have a tooltip that says "Week / Total" (explaining why the data looks like that).
Is abbr the right element for me to use? (it would look like this: <th><abbr title="Week / Total">Pageviews</abbr></th> I can't seem to find a better one. The definition says it's supposed to be used for abbreviations, which is not my case.
HTML5 allows you to use the "title" attribute on any element.
http://dev.w3.org/html5/alt-techniques/ is a good summary of such techniques.
<th title="Week"> Pageviews </th>
I'd highly recommend adding a <caption/> under the table with such data for usability and UX purposes !
Is it possible to have a layout in sublime text 2 with two rows at the top and one collumn at the bottom:
--------------------
| | |
| | |
| | |
--------------------
| |
| |
--------------------
thank you.
One way to do that is to install Origami via PackageControl.
Origami is a new way of thinking about panes in Sublime Text 2 and 3:
you tell Sublime Text where you want a new pane, and it makes one for
you. It works seamlessly alongside the built-in layout commands.
Ordinarily one uses the commands under View>Layout, or if one is quite
intrepid a custom keyboard shortcut can be made to give a specific
layout, but both of these solutions were unsatisfactory to me. Perhaps
they were to you too! That's what this plugin is for.
I am trying to figure out how to load data from a selected option.
For example, in the multiselect dropdown box I have 3 options:
Option 1: Apple
Option 2: Orange
Option 3: Pear
Let's say I have a data list for each option. For example when I choose Apple,
It will load a table in an inner div describing its price, weight and country on the first column.
When I choose the 2nd option, it will allow me to compare it with the 1st option. It should load on the 2nd column.
For example:
Option : Apple | Orange
Price : $3.95 | $2.50
Weight : 40g | 50g
Country : USA | Brazil
Would be great to know what the ideal language/method is for this?
JavaScript / jQuery ?
Edit : Sorry if there's any confusion, my main question was how to do what I just described?
I would highly recommend that you use jQuery for this. Among other things, jQuery has excellent documentation.
Background
I am presenting data using a HTML frameset. The left-side frame is a navigation tree-table constructed as an HTML table. Only minimal data is shown in this frame because I want to use the right-side "details" frame to give the user more details when he selects one of the navigation table rows.
+----------------------------+
| | |
| tree | "details" |
| table | pertaining to |
| nav. | selected |
| | row |
|=selected=| |
| | |
| | |
| | |
+----------------------------+
Think of this like a directory browser where you can see filesize, type, modification date, etc. on the right when you select an item in the left-hand tree.
Obtaining item details server-side is a sequential task, i.e. to get details on the nth item, the server has to work through all n-1 preceding items. For this reason, I think the most straightforward way to present the detailed data to the user is to have the server embed all detailed information within the navigation table rows and have a script generate the details page in a right-hand frame.
Question
How should I represent the detailed data within the navigation table HTML? Should I make up my own element tagnames? Should I use extra columns that are not displayed? Or something else? The data is typically name-value pairs - both name and value can be text. Each element may have a different set of data pairs. Is there a standard way to represent user data within an (X)HTML document?
NEVER, EVER EVER EVER EVER EVER EVER mix data and display. I also think you can easily get around the iterating over n elements to get the data you require. Here is how you do it.
Create a model (your data storage) in the javascript.
var data = [
{
title: "item 1",
foo: "bar",
baz: 10
},
{
title: "item 2",
foo: "bazbar",
baz: 20
}
];
Then, using Javascript, you could use the above data to create the following table on the left
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
</table>
So then you would have your show details function
function showDetails(index){
var currentData = data[index];
/* Do something with data */
}
I have created a working example here. There is an error in that code that says showDetails is not defined, but that is due to a jsfiddle issue, the code will work if put into a HTML page. ALSO, be sure to use the strict doctype at the top (to avoid cross browser quirsk).
Might I also suggest, that you look at YUI 2's layout manager instead of using a frameset. Framesets require multiple pages with javascript snaked throughout and can be a maintenance nightmare down the road.