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.
Related
Hello I've been trying to solve this problem for quite a while. Back when I was using vanilla html this code seems to work. (Changing from tile view to list view). Now that I have incorporated it in django and the hrefs contains static tags, I dont know how to refer to it in jquery and change its href. Pls help
HTML
<link rel="stylesheet" type="text/css" href="{% static "Stylesheets/tileVersion.css" %}">
I want to change it to this css href
<link rel="stylesheet" href="../Stylesheets/listVersion.css">
JQUERY
$('#listicon').click(function () {
$('link[href="static/Stylesheets/tileVersion.css"]').attr('href', 'static/Stylesheets/listVersion.css');
});
$('#tilesicon').click(function () {
$('link[href="static/Stylesheets/listVersion.css"]').attr('href', 'static/Stylesheets/tileVersion.css');
});
I want to be able to switch between them if possible. Any kind of help would be appreciated
You can do one of two things.
You can use static references to load one CSS file over another, by using a if tag in your code getting the css link value (the address/url) from a variable or from a data source. This compiles during server time. This also means that only one css is loaded at runtime. This is static for the client. For example:
Same as #1, but you can use an inline if to determine which one goes forward to the client.
Lastly, ensure both css files are held within the static process, and maintain your jquery:
$('#listicon').click(function () {
$('link[href="{% static /path/to/first/css/page %}"]').attr('href', '{% static /path/to/first/css/page %}');
});
$('#tilesicon').click(function () {
$('link[href="{% static /path/to/second/css/page %}"]').attr('href', {% static /path/to/second/css/page %});
});
I typed this out of memory, so please bear with me.
Hope this helps.
Just put an additional attribute id for the link tag. You can remove the current stylesheet from head and add another one.
<link rel="stylesheet" id="myid" href="../Stylesheets/listVersion.css">
$('#myid').remove();
$('head').append( $( '<link/>', {'rel' : 'stylesheet', 'id': 'myid', 'href':'newlink' } ));
All other questions I've found relating to this are about changing specific elements, or changing the CSS file with a button, but what I'm looking to find out is:
Is there a script that will swap an entire CSS file whenever the page is refreshed?
I.e. I've got my core style.css and supplementary {color}.css files which replace certain elements in style.css, and I'd like those supplementary CSS files to be loaded randomly on refresh.
Sorry, I don't even know where, to begin with this. Hopefully, someone can offer some pointers?
Thank you.
Fundamentally this is just a matter of picking something at random, e.g.:
<head>
<!-- ... -->
<script>
var sheets = ["sheet1.css", "sheet2.css", "sheet3.css"];
var sheet = sheets[Math.floor(Math.random() * sheets.length)];
document.write('<link rel="stylesheet" href="' + sheet + '">');
</script>
<noscript>
<link rel="stylesheet" href="sheet1.css">
</noscript>
<!-- ... -->
(One of the rare cases where document.write isn't actually a bad solution.) Note the noscript fallback will always use the same stylesheet on browsers with JavaScript disabled.
All you need to do to load a CSS-file with Javascript is to add a <link> element to the DOM/body and it will be loaded automatically.
So in your <head> section you could include a <script> tag that just randomly selects a color.css from an array and generate the link tag, preferably as early as possible in the file to prevent flickering.
<script>
var colors = ['red.css', 'blue.css', 'green.css'];
var colors_idx = Math.floor(Math.random()*colors.length);
document.write('<link href="'+colors[ colors_idx ]+'" rel="stylesheet" type="text/css" />');
</script>
(PS. There are cleaner ways to inject HTML, keeping it concise to focus on the solution. Use your favorite approach, document.write can be a bit fickle.)
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);
I want to block some CSS and js file loading in my Blogger, like
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
And
</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/4127629733-widgets.js"></script>`
, but I can't find these tags in Blogger template, it's added by Blogger.Is there a way to remove or comment these tags?
Use at your own risk. :)
How to remove Blogger CSS, Reset Stylesheet
This is actually a method to override the CSS provided by the Blogger template. There is no way to remove it, and transversely, there is no way to remove the JavaScript either.
Its Ok to remove Blogger CSS that you can add your own CSS. But if you want to remove Blogger JavaScript then it will stop function your Widgets but you can also do this if you want to use Blogger as simple HTML page.
Here I am sharing both is simple steps...
How To Remove/Hide Blogger Official CSS In Your Custom Template?
How To Remove/Hide Blogger Official Widgets JS In Your Custom
Template?
Make a backup of your template first.
TO BLOCK BLOGGER CSS:
Find this:
<b:skin><![CDATA[lots-of-css-code]]></b:skin>
and replace with this:
<style type="text/css"><!-- /*<b:skin>*/</b:skin>
Find this:
<b:template-skin>bunch of code</b:template-skin>
and replace with this:
<link href='https://www.somewhere.com/yourstylesheet.css' rel='stylesheet' type='text/css'/>
or replace with this:
<style>your-custom-css-here</style>
TO BLOCK REMOVE ALL BLOGGER JAVASCRIPT AND WIDGETS:
Find this:
<b:include data='blog' name='all-head-content'/>
and replace it with this:
<meta content='blogger' name='generator'/><link expr:href='data:blog.url' rel='icon' type='image/x-icon'/><link expr:href='data:blog.url' rel='canonical'/><data:blog.feedLinks/><b:if cond='data:blog.url == data:blog.homepageUrl'><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.url' rel='openid.delegate'/></b:if>
Find this:
</head>
and replace with this:
<!--</head>--></head>
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!