I'm using http://stickyjs.com/ to fix a social share bar at the top of my website.
I got it to work as intended embedding this :
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js"></script>
<div id="sticker">Sticky</div>
But now I need to change the share bar color when said bar is "sticky": when element is not sticky, it should be #333, and when it's fixed, it should be #FFF.
I tried changing the css for #sticker(which is the ID for element to be sticky), and it obviously changed the color for both sticky and non-sticky.
Then I saw on this on the github page for the script:
className: (default: 'is-sticky') CSS class added to the element's wrapper when "sticked".
Looks like what I need here, but I can't manage to use it.
Any help please ?
Like it add the class is-sticky to your existing class you have to use the css keyword !important to overide the background you already define :
.is-sticky {
background-color:#FFF !important;
}
Related
I have a website that uses Bootstrap Modals quite a bit. They worked in their normal fashion with a black faded background that would blur out the content that was on the page.
I then needed a modal that opened when a page was loaded so I used:
<div class="modal-backdrop fade in" id="purchaseModal" tabindex="-1" role="dialog">
Originally this was really transparent, so I found an answer on here that said I had to overwrite the styles using:
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It worked pretty well and stopped the modal from being transparent and instead made the background white. This is fine.
However when I go back to any of the other modals on my site they no longer have the black fade that they used to, and it is now completely transparent. I'm not sure if maybe I overwrote the wrong thing, or do I need to perhaps write another class for the second modal that I need.
Try to override class with its ID or ClassName.
#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It will only work/override with purchaseModal id, and other will remain same with their default styles.
Hope this helps you.
Are you using a external style sheet for the CSS? If so this would apply across the whole site.
It sounds as though you are looking for all modals to have the black background except the one page your looking for a different white background, is this correct?
if so you have a couple options,
You could create .modal-backdrop.fade.in.black & .modal-backdrop.fade.in.white
and change the colour accordingly in the external CSS
Or you could have your standard .modal-backdrop.fade.in overwritten to black in external CSS & in the pages where you would like the background white, simply overwrite the same style in the individual page with a style tag.
Here are examples if you require: http://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website
You are applying that style to all bootstrap modals. What you should be doing is giving that modal an additional class to style is accordingly.
For example, you could name your modal with no faded background modal-with-no-background. This means you can get rid of the bad practice of overriding style declarations with !important.
.modal.no-fade + .modal-backdrop {
opacity: 0;
}
I have a reference to a server side JS file that dynamically creates divs on my page. I am trying to override the css that is inline for the divs that are created but I have not been able to do so.
I have tried !important and the style that is created by the JS still trumps everything I do.
When i look at the style in the developer console of chrome it shows element.style as being the style that "won" over my style
I do not have access to edit the JS file on the server.
I place this in my page and it dynamically creates the divs and styles them.
<head>
<style>
#id
{
background-color: blue; !important;
display:block; !important;
}
.class
{
background-color: blue; !important;
}
</style>
</head>
<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>
You can create your own javascript to restyle the divs created by the server javascript.
The CSS !important tag does sound like your answer here but sometimes you need to ensure your CSS declaration is specific enough to the element, i.e.:
<div>
<a style="color:#F00;">A Link</a>
</div>
If I apply the below CSS the inline style or #F00 will still win:
div {color:#fff !important;}
But if I am specific with my CSS declaration i.e:
div a {color:#000 !important;} <--Notice the 'a' tag
Then my link will be #000. This does not matter if the link was loaded in with JavaScript or not.
See my JSFiddle Example: http://jsfiddle.net/zqpy0r6c/
More technical info can be found at
When does CSS's !important declaration not work?
The CSS given in the style attribute on an element always wins over the stylesheets. The best option to override this CSS is to edit the style attribute using some JS:
<script>
function clearInlineStyling(element){
element.style= null;
}
</script>
Next you have to watch the html for your script to add new elements, find them and remove their styling. I would suggest JQuery for this.
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 have a div:
<div class="badger-left"></div>
This CSS:
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?
Thanks
Edit: The color would change dynamically from jQuery, it won't always be red.
So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/
How about just changing the class of .badger-left? So do something like this:
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}
what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.
In .badger-change you need to set a background-color and hide it width a gradient over it.
DEMO (hover the div to see it in action)
DEMO 2 only change background-color without switching classes.
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.
Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-left for example.
When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
JSFiddle Example
I would like to do something similar to what was posted here...
Make Twitter Bootstrap navbar link active
Except instead of an item on the navbar becoming bolded, I would like it to use another image when active. From this...
to this...
In the example link you posted, all they're doing is adding a CSS .active class to the active link. If you do the same and have the active class being added to the correct element, you can do something in the css like,
.active{
background: url('path/to/image.jpg') no-repeat;
}