Can some one please explain to me what exactly is this jQuery call doing
$("header").removeClass("alternative full-width").addClass("full-width");
What exactly is it doing to the CSS file, Many Thanks
removeClass() function will remove the css selector applied to the element. In your case, if the header element has css attribute with value "alternative full-width", then those will be removed and it will add "full-width"
I also observe that, the above code has two values and you're trying to remove those two and add one of them.
Instead you could do this -
$("header").removeClass("alternative");
since you wish to add "full-width" which is already available!
NOTE I assume the .full-width css value is constant in that field. If it's not the case, we may have to use hasClass() to determine the existence!
For more info on removeClass - https://api.jquery.com/removeclass/
What exactly is it doing to the CSS file?
It has no effect on the CSS file
Can some one please explain to me what exactly is this jQuery call
doing
it remove the classes ( alternative and full-width )from the header with removeClass() and then it add the class ( full-width ) with addClass()
Header Element
$("header")
Select a header tag via JQuery
.removeClass("alternative full-width")
This method remove the "alternative full-width" class
.addClass("full-width")
This method add the "full-width" class.
As a matter of fact the JQuery it doesn't do anything in the CSS file.The only thing that is done with this example is to inherit the class properties that you have alredy define in the css file
Related
I am using jQuery to change the width of a sidebar, and within the working code on CSS it shows this:
#wrapper.MenuDisplay #my-sidebar-wrapper {
width: 200px;
}
But after looking through w3schools and mozilla etc, I have not found any selector which looks like #foo.bar.
The reason I am trying to figure this out is that I can't understand why this CSS isn't applied straight away, and how a jQuery toggleClass is able to get this width to be applied (which it successfully does) on a button click.
Does anyone know what is going on here? What the selector is and why it works after clicking on a jQuery button but not straight away on page load?
Many thanks
That means element with id foo and class bar, shortened to #foo.bar
[id][class]
#wrapper is id of an element, and .MenuDisplay is class. Element must have that id and class to get that CSS work.
#foo.bar
matches an element that has both id = "foo" and class = "bar".
It appears you are asking what a sequence of selectors means.
According to current W3C standard, it is...
...a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
Not everyone considers the second sentence of the definition true, because, for example, #this or .that appear not to begin with either a type selector (a, div, span, etc...) or a universal selector (*). However, one should bear in mind that...
...whenever a sequence of selectors does not begin with a type or universal selector, it "defaults" to starting with an omissible universal selector.
So, #this is a shorthand for *#this, .that is a shorthand for *.that. And #this.that is a shorthand for *#this.that.
In fact, if you read the entire universal selector paragraph, you'll notice a note at its end recommending it not to be omitted.
However, almost nobody respects this recommendation and, in practice, the only time you'll see a universal selector is when someone wants to give a CSS property to every single element in the page.
Like in * {box-sizing: border-box;}
As a side note, not omitting the universal selector in your CSS is supposed to make it faster. This is not difficult to test and appears to be true, but the differences are negligible.
Well As far as I can understand from your question,
jQuery Selectors allow you to select and manipulate HTML element(s) or select HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
In this case:
#foo.bar points to an element in the DOM that has an id="foo" and a class="bar".
jQuery Selector Tester to demonstrate the different selectors:
jQuery Selectors Test Page
Hope I could help!
#foo.bar refers to the element with together foo id and bar class.
$('#foo.bar').fadeOut('slow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo' class='bar'>box</div>
Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.
document.getElementById('someElementId').className = '';
Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");
Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes
If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );
I have a question about changing existing css attribute.
I use Jquery in my html codes.
I would like to know how to change a existng css class attribute and apply changed class to other element.
thanks for concerning my question.
★ css code example
.AccentColor{color:#fff;background:#000;}
★ javascript
<script>
$(document).ready(function(){
$('.AccentColor').css('background','yellow');
$('#target').addClass('AccentColor');
});
</script>
★ html
<p id="target"> still background color is #000, not yellow.</p>
You should remove the dot from the class name passed to the addClass function
$(selector).addClass("classname")
Make sure you're using the right classname. In your case AccentColor
The fix to your problem is to simply switch the order of your jquery functions:
<script>
$(document).ready(function(){
$('#target').addClass('AccentColor');
$('.AccentColor').css('background','yellow');
});
</script>
Explanation:
You have to add the class to your target first before you can manipulate the css on it. In fact, if you switch your jquery selector to #target instead of .AccentColor, the code will work as you're expecting. In this case, you could easily rewrite it using jquery chaining to keep it a little cleaner.
$('#target').addClass('AccentColor').css('background','yellow');
Hope this helps.
You are changing the css to all elements with the class "AccentColor", which do not exist. And then you are adding a class "Accent" to an element that does exist, however the class "Accent" is not defined in your css. Try this:
$('#target').addClass('AccentColor'); //notice no dot "." is needed here.
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()
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