I have a requirement where depending on a condition I need to render a stylesheet.
<script type="text/javascript">
var isWelcomePage = window.location.pathname.match(/^\welcome/);
if(isWelcomePage){
<link rel="stylesheet" type="text/css" href="welcome.css"/>
}
</script>
Is this possible? or is there any better way?
Yes, try this
HTML
<link rel="stylesheet" type="text/css" href="" id="updatable-css" />
JAVASCRIPT
var isWelcomePage = window.location.pathname.match(/^\welcome/);
if(isWelcomePage){
document.getElementById('updatable-css').href = "welcome.css";
}
You can create link tag dynamically, try this:
<script type="text/javascript">
var isWelcomePage = window.location.pathname.match(/^\welcome/);
if(isWelcomePage) {
var link = document.createElement('link');
link.href = 'welcome.css';
link.rel = 'stylesheet';
link.type = 'text/css';
document.head.appendChild(link);
}
</script>
Related
I want to build an extension that edits all the links in a file in the editor. If should be something like this
BEFORE:
<img src="assets/images/avatars/avatar-1.jpg" alt="">
<link rel="stylesheet" href="assets/css/icons.css">
<link rel="stylesheet" href="assets/css/uikit.css">
<link rel="stylesheet" href="assets/css/style.css">
AFTER:
<img src="{% static 'assets/images/avatars/avatar-1.jpg' %}" alt="">
<link rel="stylesheet" href="{% static 'assets/css/icons.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/uikit.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
This is the code of my extension.js file so far
const vscode = require('vscode');
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
let disposable = vscode.commands.registerCommand('auto-django.autoDjango', function () {
const editor = vscode.window.activeTextEditor
const selection = editor.selection
const text = editor.document.getText(selection)
var regexp = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/g;
var match = regexp.exec(text);
var src = match[1];
const newText = `{% static '${src}' %}`
editor.edit(builder => builder.replace(selection, newText))
});
context.subscriptions.push(disposable);
}
And all this code does is that it takes the first image src link and changes it to the edited link, that is good, but it also replaces it with the whole text in the editor.
But what i want to do is that it should just replace with each of the links in the editor.
Any help will be appreciated.
Thanks
First thing I see:
editor.document.getText(some Range) takes a Range not a Selection - that is why it is returning all the document text - it does that when the argument is invalid.
editor.document.getText(new vscode.Range(selection.start, selection.end))
should get you the text of the selection.
Could somebody suggest me a way for loading css or javascript file conditionally i.e only if url is accessible?
for example on my page I have the following files:
<html>
...
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<script type="text/javascript" src="https://services.test/js/a.js"></script>
...
</html>
Is there any way to check if https://service.test/css/a.css is accessible then if yes load this resource (same for https://services.test/js/a.js)?
You could try something like this. but it will only work for the stylesheets that are in head section.
<html>
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<body>
</body>
<script>
// you will have to manuall define the pairs (keys are stylesheets and values are scripts you want to load)
const pairs = {
"https://service.test/css/a.css": "https://services.test/js/a.js"
}
let styles = document.querySelectorAll("link[rel='stylesheet'][type='text/css'][href]");
styles.forEach(s => {
if(pairs[s.href]){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = pairs[s.href];
document.getElementsByTagName('head')[0].appendChild(script);
}
});
</script>
</html>
I want change at runtime the favicon. My code works when the page is opened in a tab, but doesn't works when the page is opened in a popup
demo online
I have tested on latest Chrome, Firefox and Edge and doesn'works, but works on Internet Explorer 11.
this is the code used for change the favicon:
function changeFavicon(src) {
// delete the current favicon from the DOM
var oldLink = document.getElementById('appFavicon');
if (oldLink) {
document.head.removeChild(oldLink);
}
// add the new favicon
var link = document.createElement('link');
link.id = 'appFavicon';
link.rel = 'shortcut icon';
link.href = src;
document.head.appendChild(link);
}
this is the full favicon.html made for the gif:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" id="appFavicon" href="favicon.ico">
</head>
<body>
<script>
function popUp(url,windowName) {
newwindow=window.open(url,windowName,'height=200,width=350');
if (window.focus) {newwindow.focus()}
return false;
}
function changeFavicon(src) {
var oldLink = document.getElementById('appFavicon');
if (oldLink) {
document.head.removeChild(oldLink);
}
var link = document.createElement('link');
link.id = 'appFavicon';
link.rel = 'shortcut icon';
link.href = src;
document.head.appendChild(link);
}
</script>
<p><button onclick="changeFavicon('https://c5-excel-15.cdn.office.net/x/_layouts/resources/FavIcon_Excel.ico')">Excel</button></p>
<p><button onclick="changeFavicon('https://c5-powerpoint-15.cdn.office.net/p/resources/1033/FavIcon_Ppt.ico')">Power Point</button></p>
<p><button onclick="changeFavicon('https://c5-word-view-15.cdn.office.net/wv/resources/1033/FavIcon_Word.ico')">Word</button>
<br /><br />
<button onclick="popUp('favicon.html')">Open this page in a PopUp</button></p>
</body>
</html>
I use this function to make print
function printContent(el,tble,img) {
var printcontent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var w = window.open();
$(w.document.body).html(printcontent);
w.print();
}
this works fine for me but the problem is it didn't contain the same page design and the print page has no design
please help
You should use a link in the head of your page:
<link rel="stylesheet" type="text/css" media="print" href="style.css">
Note the media attribute.
Edit:
var bodyContent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var windowHTML = '<html><head><title>Print page</title><link rel="stylesheet" type="text/css" media="print" href="style.css"></head><body>' + bodyContent + '</body>';
var w = window.open();
w.document.write(windowHTML);
w.print();
I have a string containing HTML for stylesheets (created via the Rails asset pipeline), and I need to append this to the head and have the stylesheets actually load, in all major browsers. The string looks like this:
<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />
I need to do this without using jQuery. Is this possible?
I wish I had the URLs in an array, but I don't. As a last resort, I could consider using a regex to parse out the URLs, but I'd like to avoid this.
var pHead = document.getElementsByTagName('head')[0];
pHead.innerHTML = pHead.innerHTML + assetsString;
If CSSTags is a string containing the HTML for all your link tags then you can use:
document.getElementsByTagName('head')[0].innerHTML += CSSTags;
function addLink(linkURL,rel,type,media){
var link = document.createElement('link');
link.href = linkURL;
link.rel = rel? rel: 'stylesheet';
link.media = media ? media: 'screen';
link.type = type ? type: 'text/css';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(link, s)
}
addLink('https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css')
There are few things which might be not obvious here, like inserting after the script tag instead of body or head. Refer here for more information
You could try this:
document.head.innerHTML +=
'<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />'
;
For old browsers, first use
if(!document.head) document.head = document.getElementsByTagName('head')[0];
Edit: #Sriharsha warned that the code above could download again all the resources. That doesn't happen on Firefox 27, but if you want to avoid this for sure, you could use:
var tmpHead = document.implementation.createHTMLDocument().head;
tmpHead.innerHTML = myString;
for (var i=0, tmpLink; tmpLink = tmpHead.childNodes[i]; ++i) {
document.head.appendChild( tmpLink.cloneNode(false) );
}
Note that document.implementation.createHTMLDocument only works on new browsers.