I need to make a control that has three T's of varying size that are linked. By clicking on each T the article text will resize to either a small, medium, or large font appropriately.
Does anyone know how I can do this? Also, do you know of a site that uses this kind of text resize feature?
Thanks in advance.
UPDATE: Thanks for all of your responses. I went digging through Google a little further and found that this has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It's using JS to dynamically resize the font and this is exactly what I want to do. I'd much rather do this in CSS if possible still though - anyone?
You can do this with CSS - if all of your fonts are percentages, then you can set one font size for the document and all children will be a percentage of that.
The approach will not be able to be implemented using CSS only. You will need to use CSS in conjunction with JavaScript.
The best approach would be to set your page's default body size using either percentages or ems. You would create two extra classes for the larger and smaller font size for the page's container or <body> tag. These classes could use larger and smaller percentages / ems or you could use the keywords: xx-small, x-small, small, larger, x-large, xx-large. (NOTE: I left out smaller and larger since they seem not to work sometimes).
Then using JavaScript you could attach an onclick event to your three T's which would dynamically add the desired class to the page container (or <body> tag). If they clicked on the middle T then the applied large/small class would be removed returning the page to it's default font-size.
A few things to keep in mind:
A user can set a minimum font size for their browser so if you set your "small" size below that that setting, that user will never see your smallest font setting.
You will need to experiment with how your layout acts if a user has a larger default font-size setting.
Hope this helps and good luck!
You could attach different CSS files depending on which 't' the person has clicked (changing the paragraph text size). I'm sure there's a better way, but that'll get the job done!
Using jQuery you could do something like this:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
To clarify, this actually does use CSS to change the sizes. You would have three CSS classes named 'small', 'medium', and 'large':
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
The setTextToSmall() function is called when the user clicks on the small "T". It adds the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:
<div class="text-to-resize">Some sample text</div>
You would have this after the click:
<div class="text-to-resize small">Some sample text</div>
If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.
You can use
("fontSize",+=3px)
If you don't want to have limit.
Related
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
This seems like a very strange issue to me. I have a text input with no size CSS applied to it. When I change the font the text no longer fits:
<input type="text" value="270.50" size="4" maxlength="128">
input {
font-family: 'Lato',sans-serif;
}
http://jsfiddle.net/JZK4N/
I cannont change the HTML at all. How can I solve this without setting an explicit width to the input with CSS?
Is it require size for you?
Because right now size is affected.
Can you try to remove that, I tried and it will work fine.
Since your initial value for the control has 5 characters, not 4 (the period counts as a character), use size="5" instead of size="4".
There is no guarantee in general that this will result in adequate rendering, since the meaning of the size attribute has been vaguely defined (a number of characters does not generally determine a specific width) and inconsistently implemented. But for the Lato font, major browsers implement size="5" reasonably for data like 270.50 (the field is a bit too wide, but not much).
The best way to control the width of a text input box so that it is an exact number of characters is to use the size attribute together with a monospace font, i.e. a font where all characters have the same width.
This is a little complicated. AFAIK, you can't do this without explicitly defining a width. Even then, the width depends on the font you use. The solution I came up with required creating a span element with the text, measuring the width and then using that width on the input tag. This requires the use of javascript/jquery, if you would be willing to use that.
$(function(){
$("input[type='text']").each(function(){
var text = $(this).val();
var fontF = $(this).css("font-family");
$("body").append("<span id='temp'>" + text + "</span>");
$("#temp").css("font-family", fontF);
var mWidth = $("#temp").width();
$(this).css("width", mWidth);
$("#temp").remove();
});
});
Here's a FIDDLE
Update: If you are worried about the concerns raised by Jukka, see these two fiddles
FIDDLE 2
FIDDLE 3
We're using bootstrap and I've got a page where I'm getting conflicting results with small buttons.
I have a number of buttons that look like this:
<input type="button" class="btn btn-small" value="Save"... />
I have my main form and then some divs that are used for jQuery dialogs. On the main form, the buttons are showing up as small, but in the dialogs, the buttons are showing up regular size, even though in all cases, I'm using <input type="button" and class="btn btn-small". The only difference is the divs that contain them, so I'm guessing it has something to do with the styles applied somewhere above the buttons.
When I look at the "Computed" styles in Firebug, it shows .btn being applied, but .btn-small has a line through it for every property I've inspected that has both listed, implying it's not being used.
The small buttons have a line height of 15px, but the normal size have a line height of 20px. What's really odd is, even though the computed property for line height for the small buttons say 15px, when I expand it to see where it comes from, it shows .btn with a 20px value being applied (see image).
The bottom line is I'm really not sure what's causing it. I'm assuming it's some style in one of the many divs surrounding it. My main question is obviously how do I fix this, but on a more general level, what would cause the .btn-small style to not be used?
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them however if the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant. [paraphrased from mozilla common css questions]
You have two classes modifying the same attribute, and so the browser rightly only applies one.
I was able to track down the problem. I initially ruled out jQuery-UI interaction since I was unable to reproduce it in jsFiddle by using jQuery-UI. What I hadn't mentioned and turned out to be relevant, is that we are also using Infragistics Ignite toolset. Ignite is based on jQuery-UI. The dialog was getting the .ui-widget class (I was focused on the button's classes) and that was causing ignite to set the font size in the buttons which then broke the Bootstrap sizing.
To fix the issue, I removed the following line from infragistic's .css file:
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Segoe UI",Arial,sans-serif;font-size:1em}
Sorry for not providing all the relevant info. Just didn't think of infragistics as being a possible cause since I wasn't directly using any of their stuff on that page.
How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.