I have a situation in my project , in css I have a class
which is empty for now
#version_mobile.hidden
{
}
and in js Im doing this
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(I supose my selector is bad ?)
how to add "right" atribute to this class with this dynamically created value ?
to class become
#version_mobile.hidden
{
right : -450px;
}
Btw I need to use this class because the animation is working with it :/
.css() function changes the inline css style but has no effect over the css classes at all.
As pointed out in the documentation:
When using .css() as a setter, jQuery modifies the element's style
property.
You can also change the classes by using the addClass(), removeClass() or even the toggleClass() functions of jQuery.
You cannot add to the class properties, but you can apply rules to the element style.
this.$("#version_mobile.hidden").css({"right", "- window.text_mobile_width"});
you can not add definations for class in jquery.
but you can add any style to your selecter.
What are you trying to achieve?
you cannot add a property to the css file using this.
what you should look at is you apply this id or class to your html elements
and access the elements in the javascript using the jquery selectors
$(#selector) and modify the property using .css.
So you will achieve the same result this way as any existing property style for that
element will be overridden with your latest style put through the jquery.
It's technically possible to modify style rules on the fly, but it's difficult.
In the document object you will find an (array) property called styleSheets, with one entry for each referenced stylesheet.
Each stylesheet object (of type CSSStyleSheet) has an insertRule method, which you can use to create new rules, or delete existing rules. What appears to be difficult is enumerating the existing set of rules so you can find which one to modify or delete.
That said, it's generally far preferred to simply change an element's classes than to try to dynamically change the styling of an existing class.
See also http://davidwalsh.name/add-rules-stylesheets
Related
I use span elements like button and I disable and enable it depending on bussnies condition using old JS code like this:
document.getElementById('lblChecks').disabled = false/true
in HTML
<span id="lblChecks" disabled="disabled" class="GridHeader" onclick="ChecksPoPuP();" style="display:inline-block;color:White;height:19px;width:132px;cursor: hand;">Cheques</span>
In CSS I use .GridHeader[disabled="disabled"] but it doesn't work on chrome, but it works fine on IE.
So how can I filter (.disabled) as dynamic property in CSS
Note: the problem can be solved easily using addClass and removeClass in JQuery but I have a lot of files and its hard to replace all of them
You can define a common class name for all the elements which is disabled/enabled back and forth, and use CSS to style it.
For example:
.att-disabled:disabled{ // style goes here }
Refer more:
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
I am using mouseenter and mouseleave events on some elements to change their appearance. I am able to do so using either of the following two strategies:
$(this).css('someProperty','someValue') to add and then $(this).removeAttr('style') to remove
$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove
What is the best way to do so?
Definitely option 2. Styles should be defined in the stylesheet.
There's also toggleClass, which removes the class if it's there, but adds it if it's missing.
Note: toggleClass also lets you pass in a Boolean as the second argument, telling it whether to add or remove it (regardless of whether it currently has that class applied), so:
$(this).toggleClass('active', true);
is exactly equivalent to:
$(this).addClass('active');
This is very handy when you have a Boolean in your code already. So instead of this:
if (isUserActive()) {
$(this).addClass('active');
} else {
$(this).addClass('active');
}
You could just do this:
$(this).toggleClass('active', isUserActive());
Option 2 if you must do it in JavaScript, but for modern browsers you may be able to achieve what you're after entirely in CSS using :hover pseudo-classes.
I'd strongly recommend addClass()/removeClass(), since you can add, remove and change a whole swathe of properties with minimal jQuery.
Whereas the css() method requires you, or rather the script, to keep track of what should be changed to reflect the aesthetic change(s) to convey programmatic interaction, coupling that with the attr() method and removing the style attribute will remove all styles, even those you want the element to retain, which requires you to reassign those properties.
So, basically, option 2 is efficient, and option 1 creates unnecessary work.
There is, of course, always toggleClass(), which can promote further efficiency.
Unless you need to dynamically generate any of the CSS property values you're better of separating the styles from the javascript. So use classes instead of direct css styles.
.addClass and .removeClass is the best way because you can style you changes with your CSS ...so after a while you can easily redesign your site.
Second one is best because normally style will is common for different elements, it will generic and adding removing is good compared with adding attribute one by one.
$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove
If you are calling this function in more than one element I suggest you to use the second one. If you needed to change the appearance again later, then you have to edit only within the css class, not in all elements
There is some content in html page and one of div style for that is like below:
.class1{
property1:value1;
property2:value2;
property3:value3;
property4:value4;
}
I want to avoid applying css property property1 into concerned content and rest property property2, property3, property4 are welcomed.
I want to avoid applying property1 and don't want to change the css file.
Also I don't want to use as below:
$('.class1').css('property1','some different value');
I just want to avoid property1 using code.
Please tell me how I done using jquery or js.
----------------------Edited------------------------
I don't want to generate any inline css on run time.
I am looking ui code some thing like as below:
$('.ui-resizable').css('position').disable()
There is not function avaialbe to do that , one way to achieve this is
$('.class1').css('property1','');
Just set an inline style on the element that negates the property or makes it what you want. No jQuery necessary. Inline styles will always override inherited styles.
<div class="class1" style="margin:whatever"></div>
Make another class "class2" with css and use
/* CSS */
.class2{
property1:value1;
}
//JQuery
$('div').removeClass('class1').addClass('class2');
Preserve the value of property1 as:
var p1 = $('.class1').css('property1');
Now apply changes to the class as necessary.
Finally, restore the value of property1 as:
$('.class1').css('property1',p1);
How do I set CSS properties of .anyclass:before or .anyclass:after via javascript?
Expanding on my comment:
:before and :after are not properties, they are CSS selectors. Therefore you cannot set them on some element, you can only add rules with such selectors to a stylesheet.
If you want to add DOM nodes before or after all elements that match a given selector with jQuery, you can use the before and after methods respectively.
If you want to add CSS rules to the current page, you can use the DOM level 2 CSSStyleSheet interface. A minimal example would look like this:
// Note: this is sample code. Do not use it blindly in your own page.
document.styleSheets[0].insertRule(".foo:before { /* something */ }", 0);
See the MDN documentation for insertRule for more example code.
Only by modifying the stylesheet itself. Since they aren't real elements you cannot modify their inline style (because they don't have any).
I am trying to use jQuery to set the margin-left property for a CSS class.
$('.first_note').css('margin-left',50);
Only one element on my page will ever have the class first_note.
I need to remove the first_note class from the element, and apply it to another element. The problem is when I do, the previous first_note still has the margin-left value of 50, and the new one doesn't.
It's because in that jQuery code I'm applying the css property to the element. What I actually need to do is change the property for the class itself. Is this possible with jQuery?
#Ben, I think in this case I'd do it this way;
Create a class called say Margin50.
I'd then set the classes in jQuery
accordingly.
So if you have your two elements, the first one uses removeClass for first_note and also the Margin50 and then apply first_note and Margin50 to the next element.