jquery: replace the link to style.css to game.css? - javascript

Trying to replace the conents of a whole page ( works ) + also replace the link to a style.css to game.css, with query
$.get('/games/14', function(data){ var $page = $(data);
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
//$('#layout').empty().append($page);
$('body').empty().append($page);
})
I seem to be unable to change the "style.css" to "game.css" no matter what I try, wich Jquery Guru knows how to accomplish this? thx !
UPDATE:
tried the suggestions below still have issues, this is what I'm using now ( no replacement of the .css file )
$.get('/games/14', function(data){
$("link[href='style.css']").attr({href: 'game.css'});
var $page = $(data);
$('body').empty().append($page);
})

Here ya go, just tested this out and it worked.
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
<link href="/assets/frontend.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
$("link[href='/assets/frontend.css']").attr('href', '/assets/game.css');
</script>
</body>
</html>
To anwer your comment below, I tested it using Firebug.
Using the Console tab, I can see that it first attempted to load up assets/frontend.css, ran the JS, then attempted to load up assets/game.css.
I then checked the DOM in the HTML tab of firebug, and saw that the link elements href attribute was updated.

Target the link element with href attribute 'style.css' and replace the href attribute of that element with 'game.css':
$("link[href='style.css']").attr({href: 'game.css'});

You can use jQuery's attr() function to change the href.
$("link[href=style.css]").attr('href', 'game.css');
There's probably a more rock-solid selector you'll want to use, but that'll do it.

href attribute substitution as suggested in other answers is inconsistently handled by different browsers (i.e. may not trigger re-flow/re-render). Instead, the original style element has to be removed and a new element with the desired href has to be inserted in its place. An intuitive way to do so with jQuery:
$('link[href$="style.css"]').replaceWith('<link href="game.css" ... ></link>');

Related

External CSS isn't applied or overwritten

I'm trying to design a webpage somewhat similar in appearance to Microsoft's. (https://www.microsoft.com)
This includes building a image slideshow, which is why I looked up W3 Schools and found this: https://www.w3schools.com/howto/howto_js_slideshow.asp This is a great example and when writing all of my code in one html document it works, however, as I try to link to an external stylesheet it doesn't work anymore. I could alternatively founder on the js link but I don't think so, as switching to the next picture works. I searched stackoverflow for it already and people suggested adding ?v3 (or sth. like that) to the link, clearing my cache and so on. - so far nothing worked for my. I tried this in Chrome and Firefox.
Here's how I link to my CSS: (it's in the head)
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Here's the js link: (at the end of the body)
<script type="text/javascript" src="js/new script.js?v=3"></script>
Any ideas why this could be? Maybe some other tutorials for this?
I'll include pictures of the working html which's got everything stuffed in it and one of the html with external js and CSS.
Thank you very much!
external - not working
internal - working like a charm
THANKS EVERYONE! - Simple spelling mistake! Sorry to bother you!
This is invalid :
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Between <style> and </style>, there must be CSS code. However link is not CSS code, that's an HTML tag. The correct syntax is just :
<link rel="stylesheet" type="text/css" href="new theme.css">
Then, "new theme.css" has a space in its name, so it will likely be encoded to "new%20theme.css" and you'll get a 404. Don't use spaces within file names.
Finally, open your console to see any errors, especially to check if the CSS file is being fetched successfully.
Don't use any spaces in the names of the files, try using new_theme.css and new_script.js
Reference your CSS like this at the top of your HTML - inbetween the <head> tags.
<link rel="stylesheet" href="new_theme.css">
Also always try either Camel Case - "newTheme.css" or use an underscore "new_theme.css" when naming your files!
That should fix your problem! :)
You should not include the inside the style tag.
It should be inside the tag.
Ex.
<head>
<link rel="stylesheet" type="text/css" href="new%20theme.css">
<head>
Also when you have file names with spaces in between, you need to encode the name.
Example
href="new theme.css"
becomes
href="new%20theme.css"
<link rel="stylesheet" type="text/css" href="newtheme.css">
or
<style type="text/css">
css code here
</style>
open your console to see if it could find your css file

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

Expand HTML tag

Is it possible to expand existing html tag?
For example i want add type of <link> tag and make some action on this type
<link rel="stylesheet" type="new-type" href="theme.css">
and when we have link with new type make some action automatically?
Yes, you can. The best to do this is to use the data- attributes. Those are skipped by any validator so safe to use for your own purpose:
<link id="someId" rel="stylesheet" type="new-type" href="theme.css" data-special="true">
If you use jQuery, you can even get it out easy:
var x = $("#someId").data("special");
You can use insertAdjacentHTML. In the example below the new element will be inserted after the element defined by `getElementById("link"):
var element = document.getElementById("link");
var newElement = '<link rel="stylesheet" type="new-type" href="theme.css">'
element.insertAdjacentHTML( 'afterend', newElement )
See this link for the full documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
yes you can. you have to do a simple modification to your code like below-
<link rel="stylesheet" data-type="new-type" href="theme.css">

How to add url link from java with css element?

Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span> Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
For getting .maincaptionsmall this DOM using jQuery use below code,
$('.maincaptionsmall')
and for wrapping innerText you can use wrapInner
$('.maincaptionsmall').wrapInner('');
Live Demo
Edit
You need to wrap code inside document.ready and also your document is not properly structured.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() // you are missing this
{
$('.maincaptionsmall').wrapInner('');
});
</script>
</head>
<body>
<span class='maincaptionsmall'>Test</span>
</body>
</html>

Changing css folder from javascript

I have a html + css + javascript application.
I want to be able to enable theming.
All my css are replicated in two folders: /theme1/... and /theme2/...
So my html looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme1/file1.css"/>
<link rel="stylesheet" href="theme1/file2.css"/>
....
....
</head>
<body>
.....
</body>
</html>
I want to be able to change using javascript the home folder of the css (theme1 to theme2).
Any ideas?
Here is what you will need to solve the problem:
Get the relevant tags. In this case, any link tag with rel="stylesheet" will probably do, but you can even go so far as to specify "starting with theme1" if you want. This can all be done with document.querySelectorAll("link[rel=stylesheet][href^=theme1]")
Loop through them. A simple for loop will do nicely.
getAttribute("href") gets the string you need.
replace() will allow you to replace the part of the string you want.
setAttribute("href",newattr) will put the attribute back into the tag.
<link id="foo" rel="stylesheet" href="theme1/file1.css"/>
When you want to change the theme:
document.getElementById('foo').href = 'theme1/file2.css';

Categories

Resources