What does this selector mean $("link#theme")? - javascript

I'm looking at a site template.
I find that when the user clicks on a link, it runs a JavaScript with this command to change the site theme:
$('link#theme').attr('href', 'theme2.css');
In jQuery what does this selector mean? What object this command change in my page?

This selects a link element, with the theme id, which is a link to a CSS style sheet.
The attr changes the href, so that it points to a differnt style sheet, forcing the browser to load a new style sheet.
Remember that to include an style sheet to a page you need to use this element:
<link rel="stylesheet" type="text/css" href="theme1.css">
You can add an id so that the selector finds it, and can manipulate it:
<link rel="stylesheet" type="text/css" href="theme1.css" id="theme">

Related

Can't set the href on a <link> element using any type of binding

I'm trying to dynamically add a style sheet to an Angular Element. I'm doing this by adding a to the template. This works fine if I do it through JavaScript. E.g.
newLinkElement.setAttribute('href', '//mystyles.css')
But if I try to do this with a binding:
<link rel="stylesheet" type="text/css" id="backgroundImageStyles" href="{{stylesUrl}}">
I get this error
ERROR in HostResourceResolver: could not resolve {{stylesUrl}}. If I just change the attribute I'm binding to then the error goes away. E.g. this works:
<link rel="stylesheet" type="text/css" id="backgroundImageStyles" lang="{{stylesUrl}}">
I've tried [attr.href] and [href] as well with no luck. Does Angular not allow binding to the href attribute of a link?

Remove or Disabled style sheet from a page linked though link tag

I am trying to disable two css links from my page which are linked using Link tag.
<div class="ExportedContent">
<link href="//thisismysite/common14/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="//thisismysite/common14/stylesheet_2014.css" type="text/css">
</div>
I have following code to remove this link which is not working
<script>
$(document).ready(function(){
$('link[href="https://grants.nih.gov/common14/css/bootstrap.min.css"]').remove();
$('link[href="https://grants.nih.gov/common14/stylesheet_2014.css"]').remove();
});
</script>
So far this is not working any ideas
link elements at html and selector at js appear to have different href attribute values ?
Try using attribute ends with selector , .removeAttr()
$("link[href$='bootstrap.min.css'], link[href$='stylesheet_2014.css']")
.removeAttr("href")
Your links starts with //domain
and your selector starts with https://domain
That is a non match
What you could do is using [name$=”value”] selector that match something that ends with a given string. This comparison is case sensitive.
Another thing you could work with instead of removing the link tag is document.styleSheets
And may i say that it looks odd that the link tags are inside a div tag...
document.styleSheets[0].disabled = true

JQuery button to disable CSS across entire website?

I want to make these buttons which enable/disable the css across an entire website I am making. I am trying to make it so when a user clicks the button to disable/enable the css, it does so across all the webpages of the site and not just for the page a user is on.
So far, my code to enable/disable the css is as follows
<script>
$("#text-only").click(function () { jQuery('#mainStyleSheet').remove();});
$("#renable-style").click(function () {$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
</script>
Any ideas?
{$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
instead of
{$('head').html('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
in my opinion you should add a css class to every object that you have made in the webpage.In that class make all the changes.

JQuery to Select and Swap Stylesheet href values

I wondering how I can select the two stylesheet links I have below in the resize function below. I need to modify the two links href value based on the orientation value, but I'm unsure how to select and populate those inside the conditional statement below, any ideas?
<head>
<link rel="stylesheet" href="css/style.css" type='text/css' media='all' />
<link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
<script type="text/javascript">
$ = jQuery
$(document).ready(function() {
$(window).resize(function() {
var orientation = window.orientation;
if(orientation == 90 || orientation == -90) {
//populate href of stylesheet link here
} else {
//populate href of stylesheet link here
}
});
});
</script>
</head>
Just give your stylesheet and id and change it like so:
$("#id").attr("href", "/somecss.css");
If you use CSS3 you can use css3 Media Queries to change your styles based on the Orientation of the users browser.
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
This will only include this stylesheet if the orientation of the users browser is landscape.
Remember this will only work on CSS3 compatible browsers.
Look at this link :
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
another SO question:
CSS3: Detecting device orientation for iPhone
Its better to put both the css in one file and not to change the css later on.
Css Gets loaded first . and only then your javascript gets executed. So first your default css will be loadeed. then you would change the href tag (using other answer) then next file would be loaded. making an extra call to server. The better idea it to have both(landscape & potrait) css defined in one file.
IMHO 80% of the css for both landscape & potrait would be the same the rest 20% can be configured using the naive css fomr the first link.

How can I set the location of a stylesheet with jQuery?

How can I set the location of a stylesheet with jQuery?
You can manipulate the <head> element in much the same way that you can elements inside the <body> tag:
$("head>link[href$=mystyle.css]").remove();
$('<link rel="stylesheet" href="/css/anotherstyle.css"/>').appendTo("head");
This removes the mystyle.css <link> tag and insert a new <link> tag with /css/anotherstyle.css at the end of the <head> element.
One approach is to give the <link> element an ID and use that as your selector, changing the href property on the matching element:
$("#myStyle")[0].href = "/path/to/new.css";
Another approach is to have multiple style sheets attached to your document and enable/disable them when necessary:
<link id="style1" href="style1.css" />
<link id="style2" href="style2.css" disabled="disabled" />
$("#style1").attr("disabled", true).next().attr("disabled", false);
This approach is best when regularly switching all the styles for your page.

Categories

Resources