I have a featured slider on my homepage that I had rigged to be completely hidden if javascript is disabled. I had a script that would then display the featured slider if javascript was enabled.
document.write('<style type="text/css">#JQuerySlider1Container{ display: block !important;}</style>');
Apparently that code is not valid according to W3C. (Though it worked so this is a total bummer).
I found an alternative piece of code that I like but I must have !important in order for the slider to be displayed.
document.getElementById('JQuerySlider1Container').style.display='block !important';
But it doesn't work with !important.
Does anybody have a simple solution for this problem?
Its not good practice to add CSS using JS. You should keep HTML, JS and CSS all completely separated.
The way to show/hide things using JS is by default hide the objects you want to hide using CSS, e.g:
#JQuerySlider1Container {display:none;}
The in your JS, add a class to the body, using something like:
$(function() {
$('body').addClass('has-js');
});
Then you can write specific CSS rules knowing that you have JS enabled, e.g:
.has-js #JQuerySlider1Container {display:block;}
Related
I am trying to figure out how I seem to be losing my CSS precedence on an AJAX loaded page. I am loading my custom CSS last on the main page, so that should allow my CSS to override any bootstrap CSS. After loading new content via AJAX, bootstrap is overwriting my custom CSS. I can see via browser debug that bootstrap has overwritten the property.
Custom CSS Styling:
.mytableclass td {
font-size: small;
text-align: center;
vertical-align: middle;}
As bootstrap isn't setting the font-size or text-align, it applies fine, but my vertical-align is overridden. I am not loading the CSS files again in the AJAX loaded page. There has to be some sort of reason, but after several hours I can't figure it out.
As you didn't post the Bootstrap CSS class definition, I'm going to guess it is a CSS selector priority issue.
Is the Bootstrap CSS selector more specific than yours? Then it gets priority over any CSS loaded later. Either make your selector as specific or more specific, or apply the !important directive, but that is not recommended (also see ITCSS).
Loading a specific bit of CSS after everything else does not give it any precedence. What you'll want to do is make sure it has a more specific selector. (You could also use !important, but that a hack and I don't recommend it unless you can't get anything else to work.
If .mytableclass td is the selector bootstrap uses, consider adding something to the front of it. ie body .mytableclass td. Or you can go into the HTML itself and add an id that you only use as a selector in the AJAX CSS.
I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)
http://jsfiddle.net/pbPyU/
HTML:
<a class='store-locator-button'>replace me</a>
JAVASCRIPT:
$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
$(el).text('BUSCAR UNA TIENDA');
});
});
CSS:
.tempstorebutton{padding:5px; color:#fa5dae;}
It works fine in JSfiddle, but not on my site. Any suggestions?
The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.
I would recommend having your own css file being rendered after the one you want to override.
Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.
!important declarations should not be used unless they are absolutely necessary.
Every browser has default css settings. You must override css.
one approach is to reset css: reset css example
another approach is to override only the parts you need css with !important
keep in mind that in css the more specific is on a higher priority to render
you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.
you can also try to give the class a different name.
hope it helps feel free to correct and edit anyone
I am re-building a website with a navigation menu that uses javascript, but when javascript is disabled the sub menu's list stack below. Is there anyway I make then disappear or change their colour to white so to blend in with the body background colour when the javascript is disabled?
I have this problem with a carousel, a content slider also and jquery tabs. When I used to use Easy Slider I gave the list's individual id's and then in the css markup put the display to none and this worked, but it doesn't with any of these.
Navigation menu I am using is http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
The content slider -
http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
I've read an article about graceful degrading, but i don't really understand. Any help would be appreciated. thanks
You could use a noscript tag to add style rules to the page that will hide those elements (e.g., given them display: none), like so:
<noscript>
<style>
relevantSelector {
display: none;
}
</style>
</noscript>
The content in a noscript tag is only included if the browser doesn't have JavaScript or JavaScript is turned off. You could also use this technique to reveal non-JavaScript navigational elements.
Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!
As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css