A tale of two fiddles (please use the run button after the jsfiddle pages load for a clearer idea of what is happeneing).
The First Fiddle
Dead simple:
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
With this css:
.noScroll {
background-color: pink;
position: fixed;
width: 100%;
top: 200px;
}
We have a class. The class is added to body, changing the body's appearance/behavior. The class is removed from the body and the body reverts to default. Working as expected.
The Second Fiddle
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$(".noScroll").css({
"background-color" : "pink",
"position" : "fixed",
"width" : "100%",
"top" : "200px"
});
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
No accompanying CSS this time, as it's added by jQuery, but otherwise pretty similar to above. Working to a point. CSS is applied, but it isn't removed. Why is this happening?
Thanks!
For the second fiddle, when you call css() on the noScroll selector, it applies those styles inline to the element with class noScroll. However, those styles are not preserved in a named css style.
So the code is actually working. It is adding a class noScroll, but no styles are affiliated with that class in the css. Also, it is removing that class, but the styles from the css() call stay because they were applied inline.
To get a better idea, see this fiddle where the inline style is removed manually at the end.
Inline styles and CSS classes are two different concepts. Adding and removing one does not add or remove the other. Inline styles only override styles applied via classes.
The selector you used to find the element to apply the inline styles to does not get stored anywhere. So jQuery/the browser can't possibly know which inline properties to remove when you remove the class.
You've applied inline CSS in the second example. This is equivalent to doing this:
<body style="background-color:pink; position:fixed; width:100%; top:200px;">
...over this (your first example):
<body class="noScroll">
...which is obviously removed by the removeClass(...) function call.
Related
I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?
In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}
To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
I have a <ul> where each li reponds on :hover. Here is the css:
.profile_nav_item:hover {
border-color: #af0621;
}
But it want these borders to stay colored when I click them.
I have this jQuery function:
$('a[rel="tab"]').click(function(e){
var url = $(this).attr('href');
$('.profile_nav_item').css('border-color', 'transparent');
$('.profile_nav_item', this).css('border-color', '#af0621');
But after clicking, the :hover css property isn't called anymore. Does anyone know how I could fix this?
Here is the fiddle: http://jsfiddle.net/zRJK9/
You need to reset CSS properties to '' (empty string) for the style sheet to kick in again.
$('.profile_nav_item').css('border-color', '');
basically you are forcing the element style to #af0621 after which the stylesheet will do nothing to override it (element styles take priority).
Passing an empty string value to css() removes the inline style setting.
JSFiddle: http://jsfiddle.net/zRJK9/6/
Because inline css attribute has more priority then included one. So when you set it with jQuery it got like this: style="border-color: #af0621". Try to use !important in your css:
.profile_nav_item:hover {
border-color: #af0621 !important;
}
I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.
My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%
Is there anyway to remove or overwrite that code with jquery
It's basically adding an inline style to a div with a class called wysiwyg...
so:
<div class="wysiwyg" style="width:320px">
The editor I'm having the trouble with is called: jWYSIWYG
Here's a demo url: http://akzhan.github.com/jwysiwyg/help/examples/
If you want to override inline styles you have two options:
Pure CSS:
.wysiwyg {
width: 120px !important;
}
jQuery:
$(".wysiwyg").css({width:120});
If you want to use styles from somewhere else you can also do:
$(".wysiwyg").css({width:"inherit"});
Reset the width using jQuery:
$('.wysiwyg').css('width', '100%');
Alternatively, you could remove the style attribute altogether:
$('.wysiwyg').removeAttr('style');
Have you tried declaring your own CSS with:
!important
eg.
#textarea-id { width: 300px !important; }
You can either define a new css rule with !important, or use jquery:
$("rule target").width(value);
This should work for you:
$('.wysiwyg').removeAttr("style");
or alternatively you can set the width to 100%
$('.wysiwyg').css("width", "100%");
You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.
Or you can try to create your own slightly modified version of your WYSIWYG JS module.
I have an element I am changing with an animation as follows:
that$.animate({
opacity:'0.0'
},300,
function() {
$('#menuHolder').css({
left:'0px',
top:'0px',
height:'100%',
width:'100%',
},0);
This is meant to make menuHolder take up the whole screen. When clicking a separate button, I want menuHolder to revert to the original values i assigned in the style sheet. Here is the code for the return button:
$('.return').bind('click',
function() {
$(this).hide(300);
tMT$ = $(this).parent();
tMT$.animate({
opacity:'0.0'
},300,
function() {
$('#menuHolder').css({
left:$(this).style.left,
top:$(this).style.top,
height:$(this).style.height,
width:$(this).style.width
},0);
})
This doesnt work, because I have assigned the original css values with when that$.animate was executed. How should I assign the values of .return's click so that menuHolder reverts to its original css?
I don't want to manually reassign values. I would rather do it programmatically =D. Any help would be great.
Cheers.
That is why you should not change individual CSS properties from your jQuery/Javascript code. Other than not being elegant, readable and maintainable and not separating presentation from behaviour, it will lead to situations like yours.
Instead:
Create classes in your CSS file:
.full-screen { left: 0; top: 0; width: 100%; height: 100%; }
and only use jQuery/Javascript to add/remove them:
$('#menuHolder').addClass('full-screen');
...
$('#menuHolder').removeClass('full-screen');
jQuery Class Manipulation Methods
I agree with the other answers.. BUT...
Sometimes adding css in the script is required. For example, when animating or setting dynamic css properties.
Differences between .addClass() and .css()
.addClass() actually adds a class and the CSS for it.
.css() adds the CSS to the tag
Example
<!-- default -->
<div></div>
<!-- added class -->
<div class="added-class"></div>
<!-- added css -->
<div style="height:100px"></div>
the way to change it back is to just leave the property empty.
$(selector).css('height','');
It will remove the style-property completely and output:
<!-- removed css -->
<div></div>
Best way to accomplish this is by adding a class, which you can remove when you want the revert the original CSS. This makes it also easier to maintain, all the CSS stays in your stylesheets.
$('#menuHolder').addClass('animate')
and
$('#menuHolder').removeClass('animate')
in your stylesheet:
.animate {
left:0px;
top:0px;
height:100%;
width:100%;
}