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.
Related
I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.
you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}
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;}
The essence of the problem is as follows:
There is a page, I need to modify the contents of the browser extensions, you can use jQuery.
Tried $(document).ready(), but then the contents are still displayed for a short period (FOUC). I can not make changes to the page styles on the server.
I'm using the kango framework to build the extension.
Using only ECMAscript, you can't reliably avoid it. You have like no shot if you wait for DOMContentLoaded event, because at that point the DOM is pretty much rendered and displayed (which is what you see for a short period).
Your best shot would be to modify the CSS as soon as possible. If the stylesheet definition gets loaded before the DOM gets rendered and you would have set like
body {
display: none;
}
you would not see anything. You could try like
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>
if that is any viable / useable solution for you.
I suggest you to use a combination of CSS and JavaScript. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the content unavailable to those without JavaScript.
So, here is what I did:
CSS:
.flash #wrapper {
display: none;
}
This sets <div id="wrapper"> to hidden only if it is a decedent of the flash class. So, to keep it from being hidden from those without JavaScript I add the flash class to <html> element. So, it can only be physically hidden if an end-user has JavaScript enabled, otherwise they'll at least have access via the unstyled content.
JavaScript:
$('html').addClass('flash');
$(document).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content styled */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it won't be a flash of unstyled content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal height, but it would flash the different heights first. This fixed it while still giving accessibility to non-JavaScript browsers.
I often find myself showing/hiding elements with jQuery, for example a simple tabbed content area where the first tab is visible and the others are not until they are displayed with the javascript. I know it's not good practice to hide the initially hidden ones using CSS (display: none) and then showing the correct ones with JS as non-JS users will never see a thing. So by default I show all and then hide the relevant ones with JS.
In doing this though, the hidden elements will load and then only hide when document is ready. How can I stop this happening? Is there a way of doing this in a way that will degrade gracefully but also not have elements appearing whilst loading, and then promptly disappearing as this looks a bit shoddy.
Unfortunately, the way that Javascript works, this doesn't seem to be possible. There will always be a fraction of a second between the first rendered frame and by the time the JavaScript to hide the element gets executed I was wrong about that, jQuery seems to be able to do that. So, CSS is the best means for this. Luckily, you can add an alternate CSS stylesheet within an infamous <noscript> tag:
<style type="text/css">
#jquery-thing {
display: none;
}
</style>
<noscript>
<style type="text/css">
#jquery-thing {
display: block !important;
}
</style>
</noscript>
Here's the JSFiddle link:
http://jsfiddle.net/kylewlacy/dbWuc/
a few thoughts...
If you don't mind jQuery being littered all over the page as opposed to being all in a separate file, you can call $('#divToHide').hide(); immediately after the element appears. Not very good practice though. Although it depends on the use case, if you are largely a designer/themer creating a 5 page brochure site, you should choose what is right for you!
Or if you're a bit more of a techie, you might like to mess around with .live()/.livequery() and catch the element's insertion with JS and hide is straight away. See this post Is there a jquery event that fires when a new node is inserted into the dom?
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.