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
Related
Is there any way to get the length of a piece of Svg text in Elm? I construct text with the text_ function, but need to know its size so I can position other elements.
The sort of function I am looking for would be something like
getLength : Svg.Svg msg -> Int
It's not possible to get a function as you wish because it could't be pure - it would need to return different values depending on the pixel density.
There's also not a version using Tasks as far as I know, and you can't readily get the size of html elements either. You probably need to use a port to get some javascript to do that for you
I recently made a game with game maker and I've tried converting it to html5, but it's got some big errors... here is the game in html format: http://ivatrix.com/Game/index.html
First off, text is meant to appear in the top left like how you can see in this screenshot: http://gyazo.com/baa386fe06cfac9439c83b6e5192efd8 the text only appears after you create a combo.
Secondly, when you click on an orb it's meant to scale down to half it's size then scale up to 1.5x it's size, but instead it's shrinking until it's 1px large then infinitely increasing in size. Draw code is here:
if sl=1
{
if (s=0.6 or s=1) then d=d*(-1)
s+=d
if(frozen=1)
{
draw_sprite_ext(sprite_index,global.skin,x,y,s,s,0,c_blue,1)
}
}
And then there's other small errors like some text won't display, particle effects don't seem to draw, the game always returns saying there is no match on the board. That's all I've found so far.
Does anyone have any idea what I can do to fix this?
Thanks.
Since no one has provided an answer and I've found one myself, I'll put it up here so others in the same boat can benefit as well. Practically, the source of all my problems with floating point numbers being irregular, for example instead of it being 1 it could be 1.000000003, which meant if you were to check if that variable was equal to one, it would return false. Further information here: http://help.yoyogames.com/entries/77891197-HTML5-Issues-And-Differences
So for an example in my case, I changed the line
if (s=0.6 or s=1) then d=d*(-1)
to
if (s<0.6 or s>1) then d=d*(-1)
And now the problem is fixed.
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.
I am developing an application where i have to display names of users in following structure :
In above structure, in the name field, it may exceed the right border of the outer <div> tag, i want to cut the name value just before it touches the right border and append the a string '...' in the end just like below
How can i make it work for UTF-8, unicode or Normal english letters in the name field?
P.S. I m using PHP for server side processing.
The easiest way is to set some CSS on that div...
<div style="white-space:nowrap; text-overflow:ellipsis;">Er. Christopher Allen (ChristAllenMoreTextMoreText)</div>
You have to set the white-space attribute as well, otherwise you won't ever get to this elipsis point. You should also probably set overflow:hidden.
Big caveat though! This does not work in all browsers. IE7 and beyond, Safari/Chrome, are all fine. I believe there are issues with it in Firefox though.
Edit: Here is a Firefox workaround. Not amazing though.
Since you can't know the exact width of the container on the client side (in the user's browser), you must use Javascript for this.
You can't just let it wrap?
Perfecting a server-side character limiter so it cuts off just before the line-end will be tough, if not impossible, unless using a monospace font. And you can't account for the user's browser settings, so the solution will always be flawed. If any character limiter is created, it will need to be client-side.
What about setting overflow: hidden on the name element?
I personally do mine on the back-end with PHP using the following custom function:
function trunc($string, $limit, $break=" ", $pad="...") {
// return with no change if string is shorter than $limit
if(strlen($string) <= $limit) return $string;
$string = substr($string, 0, $limit);
if(false !== ($breakpoint = strrpos($string, $break))) {
$string = substr($string, 0, $breakpoint);
}
return $string . $pad;
}
Sure, it's not terribly schnazzy, and it doesn't exactly auto adjust, but my project requirments demand that everything works 100% correctly in IE6 and this works without fail.
If you HAVE to do it on the front end, try 3 dots: http://tpgblog.com/threedots/
As Brad suggested: CSS is the way to go. Flexible presentation is better handled on the client side. However, most browsers do not implement this specific CSS3 feature (yet). In the meantime you could try one of these jQuery (javascript) plugins that makes the same functionality available to all browsers.
http://plugins.jquery.com/plugin-tags/ellipsis
http://plugins.jquery.com/project/shorten
http://plugins.jquery.com/project/ThreeDots
http://plugins.jquery.com/project/text-overflow
http://plugins.jquery.com/project/AutoEllipsis
Are you using a database? If so you can write a conditional statement to check if the name is over a certain length and if so append ...
You might want to define your width in Em and then count characters PHP side to approximate where you need to cut and append your ellipses.
In effect you need to work out the pixel length of the string and keep chopping chars until it falls below the threshold. I could explain that on the server side if you had .net at hand, but you dont, so maybe a this javascript might help on the client : Truncate a string nicely to fit within a given pixel width
In actionscript 3, my TextField has :
CSS styling
embedded fonts
textAlign : CENTER
autoSize : CENTER
... when italics are used the very right character gets slightly cut off (specially caps).
It basically seems that it fails detecting the right size.
I've had this problem before but just wondered is there a nice workaround (instead of checking textWidth or offsetting text etc.)?
Initialize your textField as you always do, using multiline, autosize, htmlText...
Then do this little trick :
// saving wanted width and height plus 1px to get some space for last char
var savedWidth = myTextField.width + 1;
var savedHeight = myTextField.height + 1;
// removing autoSize, wich is the origin of the problem i think
myTextField.autoSize = "none";
// now manually autoSizing the textField with saved values
myTextField.width = savedWidth;
myTextField.height = savedHeight;
Not that it is much comfort to you, but Flash sometimes has trouble with this seemingly simple task. CSS styling of html TextField was a nice addition but it has caused headaches for text-rendering. In fact I very rarely use CSS for styling text for that reason. I can only imagine that combining bold, italic and normal type faces within the HTML causes Flash to get some of the width calculations wrong which causes autoSize to set the mask a tiny bit short. I hope very much that the new text rendering engine in Flash Player 10 will finally fix these issues (it certainly looks better in theory).
So my solution is never to use HTML with the exception being when I require <a> links in my text ... and there are even some tricky text shifting issues there. In those cases I avoid mixing different font weights and font styles within the same text field. All other cases I use TextFormat directly on TextField.
I suppose if you can't get out of your current architecture (for some reason) you could try adding to the end of your html encoded strings. Or you could manually set the width of the field and not rely on autoSize (as you have mentioned). But if you keep on the CSS/HTML route you may find another new and painful limitation just when you don't want it.
I've had issues with TextField masks behaving differently in the Flash preview, and in the actual browser plugin. Usually, and this is strange to me, it would appear more correctly in the browser. Have you tried running the swf in a browser to see if the problem is actually an annoyance rather than a permanent problem?
I had said this:
My in-ideal approach to solving this is to attach a change event to the TextField which always adds a space after the last character of the field. And then to remember to trim this space off when using the value.
But that didn't take into account that this probably doesn't have a change event and that it's an HTML rendered text field. To add a trailing space in the HTML text field throw in an again, that's not really fixing the problem.