Modify dynamically created jQuery checkbox button's css - javascript

I'm creating a series of jQuery checkboxes in a loop like so:
var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id);
panel.append(checkbox);
panel.append($('<label>').attr({for: checkbox_id}).html(checkbox_name);
checkbox.button();
I have a css class called my-style that defines things like border-radius, padding, and line-height. I want my-style to override the attributes defined by jQuery's theme for only the checkboxes I've created.
I tried checkbox.addClass("my-style"); and panel.find(".ui-button-text").addClass("my-style"), but neither works correctly. Some css attributes do overwrite jQuery's default values, like border-radius, and others don't ever seem to be able to be overwritten like line-height and padding. I even tried to enforce css attributes directly by panel.find(".ui-button-text").css("line-height", 1.0);, but that doesn't work at all.
I understand that I could just modify the jQuery theme directly by changing the css code in there, but doing so would affect all buttons made, which is not what I'd like to do.
UPDATE:
One way I've managed to address this issue is by specifying the style tag directly. So the code above becomes:
var checkbox = $('<input>').attr({type: 'checkbox',
id: checkbox_id});
panel.append(checkbox);
var label = $('<label>').attr({for: checkbox_id,
style: "font-size: 0.6em; border-radius: 0px; margin-right: 0.3em;"}).text(checkbox_name);
panel.append(label);
checkbox.button();
label.children().attr("style", "padding: 0.2em 0.4em;");
While this solution works, it's unsavory, as I'm mixing JavaScript and CSS code together.
By writing in the style attribute, I can override jQuery UI's CSS. One thing that's been discussed here is using more specific CSS selectors that will be given more weight than jQuery UI's CSS classes. A more specific selector would be something that has the checkbox's ID. The problem with this approach is that checkboxes are dynamically generated, and thus so are checkbox IDs. It's therefore not feasible to have more specific CSS selectors from what I understand.

Is the problem that the class isn't getting applied to the element, or that the class isn't doing what you want it to do?
If the latter, can you paste the css code for your class?

It sounds like your CSS selector is not specific enough, you have two options here
Be nasty and declare your CSS properties with !important to override anything else selected
Write a more specific CSS selector
The latter is the better option, as you will have more control over your styling at a later stage. In case you don't know much about CSS selectors take a read of this (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html) which should help understand writing more specific selectors and the value of each selector type.

Related

Use JavaScript to rewrite CSS with class and tag at the same time

I am able to easily change the style or the tag of an element based on certain criteria using JavaScript:
document.getElementsByTagName("mainclass")[0].style.color:#ffffff;
However, is there a way to do this is the style contains multiple classes and a tag like so
.mainclass .secondaryclass div td {
color: #000000;
}
The following is not working for me so im sure there is a totally different way of doing it:
document.getElementsByTagName(".mainclass .secondaryclass div td")[0].style.color:#ffffff;
...
The other option if easier is to figure out how to use JS to embbed a external style sheet (and not at the end of head, just where the JS code is thats where the CSS should go)
Thanks!
getElementsByTagName does not accept CSS selector syntax. You're looking for querySelectorAll but you'll have to iterate over the returned list to assign the style, and it's not completely supported across browsers.
...which is why everyone uses jQuery.
Example, assuming you want to modify just the first matched element:
document.querySelectorAll(".mainclass .secondaryclass div td")[0].style.color = '#ffffff';
Note the change from : to =, and wrapping the color value in quotes. JavaScript has different syntax from CSS; I suggest that you take some time to learn it.

Removing effect of a CSS selector

My requirement is a bit tricky. I have a mark-up as below: (just an example, real mark-up is very complicated)
<div class="classA">
<div class="classB">
<p class="classC">
<span class="classD">
</span>
</p>
</div>
</div>
As you can see above, there are four CSS classes classA, classB, classC, classD associated with the markup.
Also I have used jQuery to bind events using these selectors.
My Requirement: I want the jQuery event binding to work and at the same time, the CSS should not get applied i.e. I want to negate the impact of CSS styles from a UI perspective, but from functional perspective jQuery event handlers should still work.
So, is it possible to override the CSS selectors such that their styles don't get applied to my mark-up elements ?
example below:
div.classA div.classB p.classC span.classD{
color:red;
}
I don't want the font color to be red, so I tried to override the selector as follows, but its not working:
div.classA div.classB p.classC span.classD{
color:red;
}
div.classA div.classB p.classC span.classD{
/*no styles here*/
}
Please help !!
Then just delete those classes from css. jQuery will still work though.
There is no requirement that only classes used in css have to be used in jquery.
For example:
<div class="someUnknownClass"></div>
Even though, there is no someUnknownClass defined in css, $('.someUnknownClass') will still work.
Use another class name for the selector. So you have classA for the css and classX for the selector.
If you don't want the styles applied. Then you could use $('selctor').css(); to over write the styles. Bit hacky!
OR.
Add a class that over-rides the css. Or remove the class that holds the css.
using: $('selctor').addClass('no_styles'); OR $('selctor').removeClass('current_styles');
I don't know any mechanism allowing to do that the way you want it.
the work around i would suggest would be binding your events on anoter css class and doing something like this :
$('.classD').addClass('eventClassD').removeClass('classD');
$('.eventClassD').on('myEvent', function(){...});
like this you will still have events binded to your elements and would get rid of all the css.
You want to do it without modifying the JS? There's no clean way to do that. But try this.
Presumably you will have something that distinguishes this special set of elements to distinguish it from other elements, of which styles' you want to retain. This is difference probably manifests itself in the form of a different parent container. Just copy the set of CSS rules that affect these classes, and prepend this parent CSS selector with the pre-class values.
"Basically, I do not want to touch the js code, and only if something can be done on the css front, then my requirement is achieved."
If that is all you need, then just remove all of the css definitions from the page.
$("link,style").remove()

Javascript vs. CSS for swapping elements

I have a rather lengthy (~100 fields) form that has certain elements which are toggled between a "quick" and a "full" quote. This toggles 75 of the fields from hidden to visible. Currently, I do this via some simple jQuery:
jQuery('.full_quote').show();
jQuery('.quick_quote').hide();
I realized that this could be accomplished in a different way using CSS to do the work for me:
## Javascript:
jQuery('#quote_form').toggleClass("full_quote quick_quote");
## CSS:
form.toggle-form.full_quote .quick_quote {display: none;}
form.toggle-form.quick_quote .full_quote {display: none;}
So the bulk of the question is: Which is better to use when performance is concerned?
My initial thought is that the overhead of iterating over the results in jQuery will take more time than the CSS. I do not have a way to test this, however, so I'm curious the community's experience.
Rather than defining new custom classes, or using jQuery's show and hide methods, I'd actually advise a third option.
Add a [hidden] attribute to whatever element needs to be hidden, and remove the attribute when it needs to be shown:
JS:
$('.foo').attr('hidden', true);
To make sure that this is supported cross browser, you'll need to add a bit of CSS:
CSS:
[hidden] {
display: none !important;
visibility: hidden !important;
}
This also gives you the ability to override how "hidden" elements are styled, which can be useful for debugging.
When you want to show the element, simply remove the [hidden] attribute:
JS:
$('.foo').attr('hidden', false);
It would be nice if jQuery implemented show and hide to utilize [hidden], instead developers need to take care when using show as it will override any stylesheet declarations for display when it adds a display style inline.
Both are essentially the same. JQuery does a very similar the same logic internally. (See How does jquery's show/hide function work?). And it is not like your CSS apprach does not use javascript at all (in that case, it would be the better option)
So,
jQuery('.full_quote').show();
jQuery('.quick_quote').hide();
makes sense (you are using JQuery anyway, why not use all of its functions) s a lot more readable, and

Javascript and CSS table header colors

I have a Javascript function when this returns a particular value I would like to change the colors of various table header using their id.
How can I change the colour of a table header in javascript I know how in CSS, or should I somehow conditionally call the CSS to do this?
Thanks,
Van
In your Javascript you'll want to change the class name of the table header in question.
This way you will keep your styles in you CSS and simply switch out the class name on the header, thus changing the style.
I suggest using the jQuery Javascript framework to make your life a lot easier and using its addClass() method.
Change the element class with another class defined in your CSS stylesheet.
document.getElementById('headerID').style.color = '#{color}';
See this Fiddle: http://jsfiddle.net/maniator/55Z8K/
You can easily manipulate CSS in Javascript. For example, this jQuery snippet changes the background colour of an element when condition 'x' is true:
if(x) $('#test').css('background-color', 'green');
… that's very simplistic of course: it would be far better to change the relevant element's class to something else, and define the various class styles in your CSS.
Based on the return of the function, you could add/remove a class from the element, causing its colors to change.
document.getElementById('FOO').className += 'new-class'
Alternatively, you can change the style of an element in JavaScript in the following way
document.getElementById('FOO').style = { color: '#FFF', backgroundColor: '#000' };
Refer to This reference on the JavaScript names of style options.

Get values from original css file using jQuery

I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class

Categories