How to import internal css conditionally with javascript vuejs? - javascript

Currently, I have to import css file conditionally depend on which kind of browser users are using. To not making css file global, I have the following code:
created() {
this.checkIsMobile()
},
methods: {
checkIsMobile(){
var isMobile = new MobileDetect(window.navigator.userAgent);
if (isMobile.mobile()){
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-pc.css">');
}else {
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-m.css">'); //must be load external css
}
},
It does not work because it's internal css.
I can not import in style tag because there are some link to other images in my css. Importing in style will lead to relative modules were not found
How should I do with without uploading css file to somewhere?
Edit: This question is theoretically the same as what I just did (without jQuery)

Vuejs compiles in a different way, so import or adding internal css file to head does not work. Simply use require:
if (isMobile.mobile()){
require('#/assets/css/mobile.css');
}else {
require('#/assets/css/pc.css');
}

Can you try the following method?
<style scoped>
#import './../file.css';
</style>
Source URL: https://forum.vuejs.org/t/how-to-import-css-files-into-single-file-component/41337

You shouldn't use JQuery. It is slow, big size and everything that you using jquery you can do in Vue.
Second, you shouldn't detect screen size in JS, but in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Related

How to remove reference of specific CSS files files from View

I have many JavaScript Files and CSS Files referenced in the Layout file. Now I have a couple of views which are referencing some custom libraries which are interfering with the existing CSS files. So my question is can I somehow remove those references from these two views only or not allow them to load at all in the said views.
What you can do is, create a custom css file which overrides the existing styles from your regular (ex : bootstrap) css file. You can include this css files conditionally after your regular css styles in the views you want.
You may also use the !important attribute to explicitly override the values as needed.
So in your layout, add a new Section called CustomStyles
<head>
<!-- Existing css include goes heree -->
#RenderSection("CustomStyles", required: false)
</head>
And in your specific view, you can simply include the custom css file
#section CustomStyles
{
<link href="~/MyCustomCss.css" rel="stylesheet">
}
EDIT : As per the comment.
If you are ok to completely ignore the specific css files in some views, you can update your Layout to conditionally include/exclude those.
So in your layout
<head>
#if (ViewBag.IncludeBootStrap == null|| (bool) ViewBag.IncludeBootStrap !=false)
{
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
}
</head>
And in the view's in which you do not want to load this css file, Set the ViewBag.IncludeBootStrap value to false.
#{
ViewBag.IncludeBootStrap = false;
}
<h1>This view will not use bootstrap styles</h1>
Give an id to the tag.
<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />
And use this code:
You can use whatever event you want or just use the code without an event it's your choice
$("#A").click(function(){
$("#style1").attr("disabled", "disabled");
});
Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.
The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:
If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;
Set the disabled property of the DOM object via scripting.

Javascript function that overrides html line

There is a website that references to a .js file and a .css file to format and add dynamic elements to its pages. The website gives the option to reference my own versions of those .js and .css files that I have hosted in a google code repository, and then will use those instead.
I'm trying to add another css file for mobile browsing. Currently I'm using #media arguments within the current css, but I'd like to have two separate css files.
Is there some code I could add to my .js file that would override the html, such that:
<html>
<head>
<link href="desktop.css" ...
Turns into:
<html>
<head>
<link href="mobile.css" ...
When the JS detects a mobile browswer. Keep in mind the js file is referenced further on in the HTML.
Thanks!
You can use media queries on #import rules:
<link href="master.css" …
#import url(desktop.css) (min-width:800px);
#import url(mobile.css) (max-width:700px);
Pls try this
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
document.write('<link rel="stylesheet" type="text/css" href="mobile.css">');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="desktop.css">');
}
And yes, it's a good practice to use CSS #media queries
Is there some code I could add to my .js file that would override the html?
Sure, you could override the html, but what's the point? It'll be too late, the browser will already have loaded and applied desktop.css.
If you want to maintain two separate css files, what you need to do is remove your static link tag, and apply the correct stylesheet dynamically based on browser detection:
var stylesheet=document.createElement("link");
stylesheet.type="text/css";
stylesheet.rel="stylesheet";
if (// detect mobile browser) {
stylesheet.href=mobile.css;
}
else {
stylesheet.href=desktop.css;
}
document.head.appendChild(stylesheet);

ASP.NET MVC Inserting CSS file in header via JavaScript depending on screen size

Im working on a MVC3 application, with a masterpage which renders the views in the body.
Now I have 2 css files (different layouts), and I want to select the CSS depending on the screen size of the client.
Everything works with the code below, however, only for the index page, whenever I go to a second page, whatever it is, no CSS is rendered at all.
The code below is placed in the HEAD section of the masterpage.
<script type="text/javascript">
var css = './Content/SiteWide.css'
if ($(window).width() < 1140) {
css = './Content/SiteNarrow.css';
}
var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
var cssLink = tempcss.replace("TEMPCSS", css);
document.write(cssLink);
</script>
So somehow the css doesnt load again when you go to a second page (all using the same masterpage), do you guys have any ideas?
thanks
Use CSS media queries instead of Javascript.
<!-- dropped rel attribute -->
<link media="only screen and (max-width:1139px)" href="SiteNarrow.css" />
<link media="only screen and (min-width:1140px)" href="SiteWide.css" />
Ideally you create one CSS file for one state, and have another override that when conditions are met.
<!-- dropped rel attribute -->
<link href="base.css" />
<link media="only screen and (min-width:1140px)" href="override.css" />
I believe you need to use Url.Content(). I.e.
#Url.Content("~/Content/SiteWide.css");
The pathing may be incorrect when you navigate from your Index page if you use
./Content/SiteWide.css
I've usually found Url.Content() to be the right thing to do when pathing to files in the project
Pro-tip: Don't use static file locations. Make use of Url.Content.
Your code would look like:
var css = '#Url.Content("~/Content/SiteWide.css")';
Try this out and see if it works. From experience I've had static locations sometimes not work as expect, whereas Url.Content did the trick for me.
I recommend implementing Responsive Web Design
http://www.sitepoint.com/responsive-web-design/#fbid=UhFHwQrRwnn
You can use what are called "Media Queries" to dynamically apply different css files or properties as the screen size changes, in real time. Very cool!

lesscss print style

I want using lesscss for print,
but it seems, the browser don't recongize the #media print,
since I don't want embbed
<link rel="stylesheet/css" type="text/css" href="themes/css/print.css" media="print">
into page.
can anyone help on this issue? lesscss sourse code address is here
https://github.com
thanks
<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">
The important part is the media="all", otherwise it will not correctly parse your #media print {.no-print {display:none;}} inside your linked less file.
If your question is how to embed less-styles for media print: the media attribute within the link tag worked for me.
<link rel="stylesheet/less" type="text/css" href="print.less" media="print">
The media="print" is essential as less by default inserts compiled styles as media="screen".
While I was using .less, the web developer tool option for displaying print styles wasn't rendering for me.
My solution, although may not render 100% correctly depending on the browser, is to switch the #media print and #media screen properties in the style sheet so that on page load, the print styles are rendered.
I don't suggest this solution if:
You need to trace both screen and print styles
You need precise measurements
I do suggest this solution if:
You don't want to continually go back to print preview after every
adjustment
You are willing to sacrifice the above in order to test content arrangement and styling structure
If you are using lesscss, use #media property into "less" file.
Like this:
#media: mobile;
.mixin (#a) when (#media = mobile) { ... }
.mixin (#a) when (#media = desktop) { ... }
And import file normaly:
<link rel="stylesheet/css" type="text/css" href="themes/css/print.less">
http://lesscss.org/#-pattern-matching-and-guard-expressions

Group of CSS and JS files import at HTML?

I have a group of CSS imports as like:
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
PS: I don't want to write any code belongs to web server specific.
Javascript imports: no.
CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
Go with LazyLoad! https://github.com/rgrove/lazyload/
It's a very small js (less than 1kb) that takes care of resource loading for you.
Download the package and save on your js folder. Then you would probably want to do this:
<script src="js/lazyload-min.js"></script>
Then for javascript files:
<script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {
alert('all js files have been loaded');
});
</script>
Css:
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
You can Import CSS like this:
Create a new CSS cssImports.css and add there lines
#import url('/css/reset.css');
#import url('/css/visualize.css');
#import url('/css/datatables.css');
and relate it in your homepage as:
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.
for css:
<style>
#import url('/css/styles.css');
</style>
for js you could try something like
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
Yes just copy all the code and place in into a new file in the order than you would like it to run.
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
I'm not recommend do that because performance issue, but if you want the way, you can do that:
For CSS yes its possible, in cssImports.css you can put:
#import url(/css/reset.css);
#import url(/css/visualize.css);
#import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
for (i = 0; i < jsLinks.length; i++)
{
var jsE = document.createElement('script');
var url = jsLinks[i];
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
}
I didn't test my code, But I hope my idea is explained well.
Best
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
This is now possible as follows with HTML Imports which are in W3C draft
<link rel="import" href="import.html">
import.html
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers

Categories