Load alternate CSS when Javascript/JQuery is disabled - javascript

I've been doing a lot of searching and haven't quite found the solution to my problem.
What I'm trying to do, is have two CSS style sheets for a website. One style sheet for when javascript or jQuery is enabled, and one for when it is disabled. How would I go about doing this?

Use something like this:
<noscript>
<link type="text/css" href="noscript.css" rel="stylesheet" />
</noscript>
Hope this helps!
EDIT
For when JS is enabled, just create the <link> tag using JS. (document.write(...);)

Your second stylesheet can just override whatever is in the first. Past (after) that, just include the second inside a <noscript> tag, like this:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>

Related

Missing 3 recources for the Slick carousel. How do I implement those?

In the console it says that I'm missing the slick.woff, ajax-loader.gif and slick.tff.
So I've found the CDN links for all these 3, but I have no idea how to implement them in my code (or in what kind of tag).
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
The resources you've mentioned that are failing to load are referenced as relative imports in Slick's stylesheets.
Make sure that you've included these stylesheets (the first code block below) correctly, as per the Slick documentation:
Example using jsDelivr
Just add a link to the css file in your <head>:
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
Then, before your closing tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>

Order of bootstrap and CSS library in header effect h3 Tag

When I change the order of bootstrap (online) and CSS library(offline-internal) that affect the h3 used in HTML document. let me explain more about the conflict.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
The sequence of the files and below is the result of the HTML document:
Now let's change the sequence of the main.css file, h3 tag and logo (have an h1 tag as well) will change its colour, font, size and layout.
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
now take look at the screenshot below:
Now my main concern is to just know that where the problem exists in bootstrap.js? bootsrap.css ? or browse have a bug.
Anyone help to understand the reason behind?
It seems that you have very little knowledge in how CSS works.
CSS is read by the browser from top to bottom and therefore the order matters. Default bootstrap file already cotains styles for the H3 tag. You also can define custom styles for H3 tag inside main.css. So if you put bootstrap css file after your main.css file ultimately browser will first apply your main.css style for H3 tag first and within a split second it will again apply the bootstrap css styles. As a result you will finally see the bootstrap styles on the H3 tag. This can happen vice versa. This is the intended behavior and how CSS works.
Also browsers don't do mistakes when it comes to css rendering. 😉
The order and weight of CSS attributes matter. When you change the order of your files, it is possible that style that was coming from an earlier file was overwritten once a later file was brought in.
This isn't a bug it's just the nature of CSS. In addition to order, things like whether you've selected a Class or Id, the !important attribute, and other things will effect the weight of a particular attribute. If there are competing attributes, the one with the higher weight is applied.
Hope this helps
Seems like you are using your custom css (main.css) to style your html page. The order of your CSS files DOES MATTER. When you place your custom css (main.css) file at the end, it will override rest of your css files. And if you place any other CSS file(bootstrap.min.css in this case) after your custom (main.css), it will override your custom CSS file, hence result may vary. Bootstrap.min.css has its own style that is different from your custom css and that is causing this issue.
My understanding is that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Should be at the top, before all other js.

How to change the media attribute of a css file with plain JS

To avoid blocking the rendering of the "above the fold content" of a site one options seems to be using a css file with a bogus media. Browsers will download it asynchronously anyway as the media "could" apply later...
<head>
<link rel="stylesheet" href="style.css" media="bogus">
</head>
Now, one way to get the CSS in place would be a link (with the proper media screen) at the very end of the body tag but i'd rather look at JS options.
Question: How do we change the media bogus using plain JS (no jQuery, no frameworks)
These are the steps you can follow:
Add an id to the <link /> tag.
<link rel="stylesheet" href="style.css" media="bogus" id="myLink" />
Use the following JavaScript (either one of the lines):
document.getElementById("myLink").setAttribute("media", "screen");
document.querySelector("#myLink").setAttribute("media", "screen");
document.querySelectorAll("link")[0].setAttribute("media", "screen");
My recommendation is to better add an id and then call using it.

Change the CSS Based On the Language

I am using a Google Translate in my website, to show the content in 2 different languages German, and Spanish other than the original content(English). Now as soon as select other language there are some miss-placements in the contents and text due to the change in length of the words and also i need to change few images and logo which is written in English.
my question is
How to change CSS based on the Language?
Some information about the site: It is a simple website developed using plain HTML, CSS, Javascript and jQuery.
If you are using simple html or any framework, use of automatic translators is not appreciated some time it does not translate correctly, Try making different css files for each langage and make ur site in different language. if you are using some cms etc you can achieve this easily. So when you click on spanish flag it should go to index-sp and it will load style-sp.css.
Hope it will help.
I came here looking for a solution to switch from 2 different css files based on rtl(ar) and ltr(en/pt) and there's a really easy and quick solution that worked for me:
<environment include="Development">
#if (System.Threading.Thread.CurrentThread.CurrentCulture.TextInfo.IsRightToLeft)
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.rtl.min.css" />
}
else
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.min.css" />
}
</environment>

How to adjust the width of a textbox depending on browsers using JavaScript

I have a textbox in a form. I have given style="width: 370px;” While browsing in Firefox its alignment is correct with all other fields in this form. But in IE It's need to increase little more. i.e. 380px.
SO how I will give the width to that text box depending on the browsers? I know it's possible. But I don't know how it is?
Does anyone know this?
Thanks in advance
If you're using JQuery, you can use jquery.browser to detect if the browser is IE (or any number of other well documented methods of browser detection. then if IE, set the side
$document.getElementByID(formelement).css(width).
Although I'd suggest looking further into why your form elements don't align in IE, and fix that instead of dynamically resizing your form elements based on the viewing browers.
Why not conditional CSS?
On js document.write(navigator.appCodeName);
On php echo array_shift(explode(' ', $_SERVER['HTTP_USER_AGENT']));
Using these you can switch css, but have you ever looked in to css framework like Blueprint css
It contains something like
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
You can use this conditional statements, also using this framework isn't that bad either.

Categories