I'm creating a form for a web page using HTML, CSS and Angular JS. I have managed to achieve what I want but I don't think its done in a very good way and was just wondering if there would be another way to achieve the same result? (perhaps there is not but thought I would ask anyway).
Basically im using AngularJS form to validate my form. If the form is valid, it applies the ng-valid class to the for). Within my form, I display a background image of a red X if the form is invalid and a green tick if the form is valid. As the ng-valid class is added as soon as the form is valid, I have the following CSS to change the image:
.ng-valid>div>div>div>div>a>div>div.regImg1{
background-image: url('../img/green-tick.png');
}
My standard CSS for this is:
.regImg1{
background-image: url('../img/grey-tick.png');
}
While this works, I am aware that a change to the HTML would break it. I wonder if there is a more elegent way to do this, which doesn't break when the HTML changes.
You can use the descendant selector, which is just a space separating the two selectors.
.ng-valid .regImg1 {
...
}
Yeah that is a concern with the html changing, seeing as the selector is so specific with child selectors.
a simple selector like this could do the job, without being specific to the markup structure
.ng-valid .regImg1{
background-image: url('../img/green-tick.png');
}
You may consider using a whitespace between your parent and child elements, this will tell you want any child matching the child description inside the parent no matter how deep it is.
This would give you the following:
.ng-valid .regImg1{
background-image: url('../img/green-tick.png');
}
Related
I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks
You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>
Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...
if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");
I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")
I have an HTML page containing XML. Using Javascript, the XML attributes can be changed when the user clicks a button. (So far, everything works)
However, the attribute that is changed is used in the linked CSS to determine the background color of the element. When the attribute value is changed, the style is not refreshed, so the color doesn't change.
I can alter the javascript to also change the color, but that would involve hardcoding the color, and partially defeat the point of using CSS.
So, it seems to me, I need to do one of two things, and I can't figure out how to do either:
read the color from the CSS, and then assign it using javascript
somehow use javascript to have the CSS re-applied to the document.
Which approach is better? I assume the 2nd is easier, unless there is a side-effect I haven't thought of. And, whichever approach is better, HOW TO DO IT?
My CSS contains:
*[cleared=true] {
background:lightgrey;
}
My XML looks like this:
<Transfer ID="31266" Date="2015-04-14" Cleared="false">
<AccountCharge Account="Unplus">-826.20</AccountCharge>
<AccountCharge Account="Amex">826.20</AccountCharge>
<TransactionID>1504140662984782</TransactionID>
</Transfer>
My Javascript is:
function Reconcile(Element_ID){
try {
var c=document.getElementById(Element_ID);
c.setAttribute('Cleared','True');
}
catch(e) {
alert(e.description);
}
}
I have tried changing the script from modifying 'Cleared' to 'Date', and I can see the date change. The 'Cleared' attribute is not displayed directly by the CSS, but is used to set the formatting of other elements and/or attributes.
Changing the value of 'Cleared' before the page is loaded has the effect I expect - the CSS causes the formatting I expect. However, after the page is loaded, when the javascript changes the value of 'Cleared', no visible change in formatting takes place.
Did you try to assign classes?
Either with pure Javascript:
document.getElementById('selector').className = 'active';
or with jQuery:
jQuery('#selector').addClass('active');
This way you can use CSS classes and not hardcode the colour in your Javascript code.
See implementation of addClass and removeClass in Javascript:
http://jaketrent.com/post/addremove-classes-raw-javascript/
There's some info about changing style of HTML element with jQuery: jQuery changing style of HTML element
There's some more if you change your mind: How to modify STYLE attribute of element with known ID using JQuery
You can either add some extra styles or just switch the target class/id.
I have set a global CSS to text type inputs. Eg:
input[type=text] {
padding:10px;
width:100px;
//and many more
}
Now, I am using a plugin colorpicker on a particular div. This plugin draws some input elements for color hex inputs, and sets its own CSS properties.
.colorpicker input {
width:25px;
}
But the already set CSS properties interfere with the newly set CSS. Is there a way that I can reset these inputs and not let them use any of the previous CSS properties? I don't know what all properties are being set from behind, like border, may be border-shadow, padding, etc. I want to reset all of them and create a fresh input type. I am willing to do that by Javascript/jQuery if needed. Please help me out. Thanks!
EDIT: Suppose if something like $('.colorpicker input').resetCSS(); exists, that removes all the CSS properties from the input, it would be great! Exactly what I need.
If you don't have too many text inputs on your page, just use a class name instead of a global definition. Neater in the long run, IMO. That way, your input fields stay yours, other plugin's input fields stay with their respective classes.
depends on your code, but you could use the css3 :not selector.
div:not(.colorpicker) input[type=text]
of course this assumes you have all your inputs wrapped in divs.
http://jsfiddle.net/kudoslabs/aDJeT/
You can use .not() selector. Try this fiddle. As it's jquery selector it should support older browsers also. But in this case also, you need to edit your bootstrap css and create a class that contain styles you want to apply to all other text fields.
On the twitter login page, the label for input fields arrive inside input fields that uses a common trick with javascript/jquery. However, I went through a twitter source to figure out how they are doing that. I found onChange: it adds a class 'hasome' to a parent div and has a default text as a span, which never gets a property like display:none;.
I have tried to go through their HTML/CSS/JS but could not find their methods. Can someone please tell how twitter is doing that?
Edit
Twitter code:
<div class="placeholding-input username hasome">
<input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
<span class="placeholder">Username or email</span>
</div>
Added twitter HTML in question. When we add some code, it only add one class 'hasome' in parent div. in firebug, I could not see any property assigned to class 'hassome'. My question is where is there code which is doing that or CSS if it is achieved by CSS.
While the hasome class is applied to the parent div, it's used in a selector that's setting CSS values on the child span. So in Firebug (or Chrome or IE's developer tools), you'll need to keep an eye on that child span, not the div, to see what's going on.
You should end up seeing the following rules applied, from the CSS file t1_core_logged_out.bundle.css:
.has-content .placeholder, .hasome .placeholder
{
font-size:0!important;
z-index:-1;
-moz-opacity:0;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
The part of the rule that ends up taking effect is the ".hasome .placeholder" part: when an element with style .placeholder has an ancestor with class .hasome, then various techniques are used to hide that child element. It's basically using a class on a parent to control styles of a child or descendant, which is a fairly common CSS technique.
It's just displaying an absolutely positioned span over the field, then hiding it as soon as anything is entered (and re-displaying it when the field becomes blank again). The immediate hiding is why it doesn't matter that the span obscures the field. Oddly, it doesn't look like they actually used labels, although I don't see a good reason not to have.
Even though this is not what they are doing, you can accomplish the same result by using the HTML5 attribute placeholder
Keep in mind that this is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you can definitely use this.
It's CSS.
http://a0.twimg.com/a/1347042098/t1/css/t1_core_logged_out.bundle.css has the following rule:
.hasome .placeholder{font-size:0!important;z-index:-1;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
Notice that for any .placeholder in a .hasome, its opacity is set to 0. Therefore, it doesn't show.
Not the way I would have done it, but that's how they're doing it at least.