I have a dynamically generated form that needs to gather several numerical values from a user that totals 100 (%). I thought about writing a script/algorithm that adjusts the remaining values of several text fields - so that when the user changes one value, the remaining values dynamically change (so that the values always total 100).
However, instead of text fields, I would really prefer something more user-friendly like sliders that move when one slider is adjusted or some other user-friendly widget (like an adjustable pie chart(?) that always totals 100%).
The script needs to work in late version of Firefox, Chrome and IE. I read somewhere that HTML5 sliders don't work in Firefox.
I am open to different solutions.
Am not getting your question clearly, assuming that you need a value slider which a person will slide and automatically the bar will increment every time by 1, so try using jQuery and Ajax, will suit your requirements, you can check out few over here.
Sliders work fine in FireFox - try http://www.colorpicker.com/
You can use the jQuery UI slider, if you like. You can register a custom function on change event which easily adjusts the other sliders.
So in the end you got something like this (some pseudo-code in it):
$( "#slider1" ).slider({
change: function(event, ui) {
var i = 100 - value_of_slider1 / number_of_sliders_remaining;
$("#slider2).setValue(i);
$("#slider3).setValue(i);
}
});
Of course this can be implemented a lot more sophisticated. Just to give you the basic idea. Depends on your markup.
I have not had problems with sliders in FireFox.
You can have the various sliders/input devices calculate on each other to get the output by division or whatever, then have the last/smallest number be subtracted rather than divided from the total. This way your other calculations will be accurate to the accuracy and the least significant value can make up the rest.
Related
I need to be able to replicate these function on a large scale:
=INDEX(List1!A1:G21, MATCH(F2, List1!A1:A21), MATCH(E2, List1!B1:F1)+1)
but I need these aspects to stay the same:
A1:G21
A1:A21
B1:F1
and this to change according to their position in the sheet:
F2:E2
I also need this function:
=INDEX(List1!A1:G21, MATCH(F2, List1!A1:A21), 7)
and need to change this value according to is position:
F2
but need this to stay the same:
A1:G21
A1:A21
7
I had tried using Google's autocomplete, but it obviously scales all the value in accordance to its position and since I am very new to sheets, I haven't a clue on what I could do. I tried writing a js function, but my experience in js is little and I couldn't keep up.
You can't put an $ before the aspect you want fixated:
$A$1 would never move
$A1 would be always in Column 1 and change its number
A$1 would only move the column but not the row
I am playing around with designing my own grid system. I decided to go with something that splits columns on percentage i.e. 10% 20% 30% etc. So I have Col-10 for a column that is 10%.
However, instead of doing a lot of coding, I want instead to use some sort of additive method. Think of it like money.
You have 100 note, a 50 note, a 20 note, a 10 note a 5 note and a bunch of small coins usually of the same denomination 100p coin, 50p coin, 20p coin, 10p coin, 5p coin and of course the all important 2p and 1p.
There is no 77 note. That would be made of 50, 20, and 5 notes, and 2 x 100p coins.
I want to do likewise with CSS. Instead of defining and using a specific width, lets say I want a column of width 77%. I would like to be able to do a class like this:
<div class="Col-50 Col-20 Col-5 Col-2">Content</div>
and in my CSS I would have these classes defined according to their respective percentages.
My problem is. The last class here, would be all that is applied. giving me a 2% column instead of the 77% column I intended.
Is there any magic CSS trick that will allow me to do some sort of additive % like what I am thinking or is this a JavaScript the only option.
I could do this in JavaScript but I want to avoid using JavaScript / jQuery or other code apart from HTML5/CSS3 at all costs because I want to remove external dependencies. While rare, it is still possible to disable JavaScript in browsers and I want my system to work without it if possible.
I also know I could us SCSS / LESS etc but ultimately the end result would be a very large CSS file filled with almost every % between 0 and 100. This is not my goal.
I don't believe this is possible with CSS alone. CSS is a styling language, so (with the exception of calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc) it doesn't have math calculations. It really isn't designed to compound values in that matter. Even a preprocessor like SASS/Less, I don't believe, would be able to accomplish that since the preprocessing is on the CSS side, not the HTML side. Perhaps an HTML preprocessor?
Either way, I'm not sure I follow the benefit of the class; adding 4 classes just to specify a width seems superfluous.
Maybe if they come out with "Compounding Style Sheets"? :)
no it isn't possible, At some point you would have to have 100 classes for the width. If you are set on staying css only. I would write a CSS generator that basically loops through and creates the redundant code and saves it to a file for you. Then you could go in and add to the file as needed.
I am sure you guys must have seen that font resizing option on some website where they display alphabet "A" in small, medium and large sizes clicking on which changes the font size of website. I have two questions:
What is that thing called actually? Like if there is a term to describe it?
What arguments can I give against using this on website? One of the client has asked to incorporate it in website and I don't see any real benefit in using it so what arguments can I give to client against using it?
It is called "font size change options", or "font resizer".
Here is a simple and minimal 5 lines of code jQuery tutorial: http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html
A bit of the code that enlarges the font size:
newFontSize= parseInt($('#content').css('font-size')) + 2;
$('#content').css('font-size', newFontSize);
The user could just use CTRL+ in browser. The problem is that the final user doesn't know this trick.
This is a fast and simple implementation, no need to convince the client against it. I find myself getting hard to see clear small text after 10 hours of programming. Maybe the client has sight problems and needs to address others like him.
"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."
Reference
So to do that you can use a function callback which will return the actual value, then you return the new value.
Like the following.
$("#fontPlusBtn").click(function (){
$("#textDiv > *").css("font-size", function(i, value) {
return parseInt(value) * 1.1;
});
});
Working Demo for Increasing Font Size on Button Click:
I hope this helps you as you described font size change on Button Click.
What is the target group of your client? Adding such feature is generally considered good practice of web accessibility. It doesn't really take up too much space on the screen and doesn't mess with the design but gives users the options to enlarge the text in case they are having troubles reading the text.
I wouldn't try to argue against it but instead find a neat way to implement the functionality.
BBC's accessibility policy is a good read: http://www.bbc.co.uk/accessibility/best_practice/policy.shtml
I want to make phone based textbox in my html-page. someone have idea how I can do this.
Thanks
This is the plugin I always use for that. works great:
http://digitalbush.com/projects/masked-input-plugin/
for your example:
jQuery(function($){
$(".phone").mask("(999) 999-9999",{placeholder:" "});
});
Depending on how complicated you want to get, you could use a simple background for the input box with the () and - inserted (albeit much smaller in order to fit).
A more complicated approach would be to have 3 textboxes, for each part of the number. Then put the () and - between the boxes. This may frustrate users though, as they will have to tab or click between the boxes.
You could modify the above method to include some javascript, which automatically changes focus from one textbox to another after the user finishes typing. This may work better, but will cause problems if the user ever tries to go back and edit their number.
Another way you could do this is to insert the () and - automatically with javascript after the number is changed. This may work better than the above method, but will still cause some issues with editing. It may also look strange before the numbers are added in.
It is worth noting that there is no real international standard for phone numbers. You might get into trouble if someone tries to use a country code or something on your site. If I were you I would just stick to the classic text box, ugly as it may be.
You can try something like this
<input type="text" id="phoneNumber" placeholder="(123)123-1234" />
CSS
#phoneNumber{
margin:1em;
border:2px solid #ffc600;
font-size:2em;
border-radius:10px;
padding:.25em;
}
Example: http://jsfiddle.net/RgTTt/
NB: Placeholder will, in all modern browsers, render whatever you like in the input box and then disappear once the user starts to type in the box. If you want the parentheses - () - to be colored, then you will need to use some spans and a custom piece of javascript.
Background info:
I was handed a "Tool", which was made using MS-Access 2007, and asked to add some things... The tool is basically a collection of options for querying a database. On a form titled CreatedReport there is a listbox that is bound to a table called analyzed which has all of resulting data from the query/queries that ran. The original creator of this tool set the column widths to specific values but with the new collection of possible results, those widths are very far off.
Desired Outcome:
The final result I want to achieve is, of course, to have the columns be the correct widths for the info that is in the columns. As long as that is achieved, I really don't care which route I have to take to get there.
Question:
How can I get the columns in a listbox in MS-Access 2007 to be sized appropriately for each use? Is there an auto-size feature I haven't stumbled across yet or do I need to hard code the set of column widths for each group? This wouldn't be too hard to do since there would only be about 4 or 5 different groups but I would prefer for the process to be automatic if at all possible.
Another approach would be to have the results returned in a sub form datasheet view, then the user can adjust the column widths also to set the widths automatically use code like this:
Example
This example takes effect in Datasheet view of the open Customers form. It sets the column to fit the size of the visible text.
Forms![Customers]![Address].ColumnWidth = -2
You could put this code into the Current Event of the sub form.
I don't think that Robert Harvey's answer is actually responsive to your question.
What you need to do is:
calculate the maximum length of the values in each column,
AND
figure out, based on the font in use, how wide the column should be.
Note that you may not actually want to set it to the maximum width if the value exceeds a certain threshold.
I don't know to do the second taks, but I suspect Stephen Lebans has already done the work on it. You might want to search his website for it.
Last time I checked, you still had to write code for this.
Your best bet is to use a resizer someone has already written. Here is a good one. It's old, but it shoul still work:
http://www.jamiessoftware.tk/resizeform/rf_jump.html
This is a quick solution that should help when you want to set up listview columns of different widths, and you know in advance the widths you want (eg, you know that column X will always be a 2-character State abbreviation, and column Y will always be a city name).
Just supply all the widths as a single semi colon-delimited string. Code each width as a number and a unit, such as 'in' or 'cm'. This worked well for me: Me.lsvPayHist.ColumnWidths = "1.0 in;0.8 in;1.0 in;1.0 in;2.0 in"