<p class="smallText">{{vehicleItem.registration}}, {{vehicleItem.colour}} {{vehicleItem.make}} {{vehicleItem.model}}</p>
I'd like to capitalize vehicle registration and model and make should be camel case
I will suggest wrapping registration and make with a span containing different classes e.g.
<p><span class="capitalize">{{vehicleItem.registration}}, {{vehicleItem.colour}} <span class="camel-case">{{vehicleItem.make}} </span> {{vehicleItem.model}}</p>
This way you are adding "two" css rules to one element. I also recommend you achieve the camelcase style using Javascript.
You can write as many classes into an HTML tag as you want, thereby applying as many CSS rules as you want. Example:
<p class="smallText myclass_1 myclass_2">
I'm not experienced with angular but you should be able to use different functions like
capitalizeFirstLetter(vehicleItem.registration)
and
camelize(vehicleItem.model)
Converting any string into camel case
How do I make the first letter of a string uppercase in JavaScript?
Related
I want to know if I am able to define a custom HTML attribute that can take 2 or more values just as the 'CLASS" attribute.
For instance, considering I define a "Data-Text" and in css I write:
[data-text=light]{color:white;}
[data-text=bold]{font-weight:bolder;}
Now, can I make a trick that if I write :
<p data-text = "light bold"> something </p>
both commands (font-weight and color) happen for the <p> tag?
it is possible when you use the css "~="
[data-text~=light]{color:white;} [data-text~=bold]{font-weight:bolder;}
this should work just fine.
Should I be using class names in HTML page that describe it completely, eg. navbar-static-8 to describe a fixed navbar containing 8 items?
Or should I be wrapping the metadata into separate attributes e.g. type="static" items="8".
I want such names to be parsed in javascript.
Cleaner would be to use data attributes like:
<div data-type="static" data-items="8"></div>
John Resig wrote a nice article about this http://ejohn.org/blog/html-5-data-attributes/
But if "static" refers to something you want to use for the design of the item, you should use classes since these are designed to be used in CSS. The data attributes are more used in Javascript as meta data about the object.
yes you can use navbar-static-8 type of name of class , and you can 'type="static" items="8"' your custom attribute but test on all browser (specially Intenet Explorer)
You should use descriptive class names for a intuitive css use, like "navbar navbar-static" and use the html5 data for js, like data-navitems="5"
Make use of cascading, use two css classes, navbar to describe general nabvars properties, and navbar-static to describe styles only for the static navbars.
Is it possible to define a style that assigns one set of formatting rules for non-parenthesized text and another for parenthesized? The reason for this is to avoid cluttering of format tags (like <b> or <span>). E.g if I have something like
<B>Item1</B> (expl), <B>Item2</B> (expl2), ..., <B>ItemN</B> (explN)
It would be cleaner to state it as
<span class="myClass">Item1 (expl), Item2 (expl2), ..., ItemN (explN)</span>
Where myClass is defined as formatting parenthesized text under a set of rules different from non-parenthesized (bolding non-parenthesized in this example).
I don't think this can't be done in HTML/CSS but can be achieved by using Javascript. Once the page is loaded (onLoad), you can scan for items (may be using a regex) and then surround the text with custom tags.
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.
Is it bad thing if I add more than one class for one object. Let's say:
text
Don't ask me why, I just need it.
Thanks.
You can use multiple class names (a perfectly normal thing to do), but are only allowed one class attribute on your HTML element.
Do this instead:
text
Following on from RedFilters' answer you could of course extend your class selectors by using the angular ng-class attribute as follows:
text
The resulting html would then be:
text
Might come in useful to get around a tslint "line too long" error :-)
There's no need for two class statements, simply:
text
Now, in order to handle this in CSS you need to do this:
.paren.default{
}
...Whithout spaces between the two class selectors.
Cheers!