I want to insert a css stylesheet with bookmarklet
javascript:(function(){var%20s=document.createElement('link');s.setAttribute('href','http://localhost/~simha/new.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);alert('Stylesheet%20injected!');})();
when deminified
javascript: (function () {
var s = document.createElement('link');
s.setAttribute('href', 'http://localhost/~simha/new.css');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
})();
I made this bookmarklet and ran, it added the link element in the head of the html, with the css href also. BUt the css rules in the new.css didnt apply. There are not changes made to the web page.
Nowadays the CSP rules are common on websites, it is better to just write the style in the bookmarklet itself. See a live example here
(function () {
var s = document.createElement('style')
s.innerText = "body { background-color: red }"
document.head.appendChild(s)
})();
Related
and if a link is underlined, i want it to get rid of the underline on hover. If a link has no underline, i want it to get one on hover.
Is there a smart way to do this with SASS rather than hard coding it for every link?
As others have stated, to do this within CSS or SASS this is something that requires a default style for links and a class or data attribute that must be applied to alternative links.
The type of auto-smart styling is possible with javascript though if that's an acceptable alternative. I made a quick jQuery Fiddle that would work by checking all links for the text-decoration style. This has performance drawbacks due to scanning the DOM for all links every page load. It also breaks the law of keeping styling with the CSS realm so it's up to you if it's worth it.
var links = $('a');
links.each(function (i) {
var $this = $(this);
// if this has underline
if ($this.css('text-decoration') == 'underline') {
$this.hover(
function() {
$this.css('text-decoration', 'none');
}, function() {
$this.css('text-decoration', 'underline');
});
} else {
$this.hover(
function() {
$this.css('text-decoration', 'underline');
}, function() {
$this.css('text-decoration', 'none');
});
};
});
https://jsfiddle.net/ym8s6Lwh/
I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible.
EX:
<template id="templateContent">
<head>
<link rel="stylesheet" href="css/generalStyle1.css">
</head>
<body>
<div class="affectedByGeneralStyle1"></div>
</body>
</template>
script to include template:
<div id="host"></div>
<script>
var importedData = (html_import_element).import.getElementById("templateContent");
var shadow = document.querySelector('#host').createShadowRoot();
var clone = document.importNode(importedData.content, true);
shadow.appendChild(clone);
</script>
I came across the same problem recently. What I ended up doing was using:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Additional info: This worked just fine except that now I'm having some cache issues as Chrome does not seem to reload those resources after a hard reload.
Let add to the answer . Now direct tag is supported in shadow dom.
You can directly use
<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">
Check they has been update by whatwg and W3C
Useful link for using css in shadow dom.
https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c
https://github.com/w3c/webcomponents/issues/628
Direct css link can be use in shadow dom
Thanks.
I added the stylesheet's link element directly to the shadow root this way:
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'whatever.css');
this.shadowRoot.appendChild(link);
It seems to work fine. (I called this from the constructor of the component.)
actually polymer has an internal utility to load css links, i have implemented a javascript function that is using polymer internal css processor,so if you want to add css links at runtime you can use it:
Polymer('my-element', {
ready: function () {
this.importCss("path/myfile.css");
},
importCss: function (path) {
var $shadow = $(this.shadowRoot);
var $head = $("<div></div>");
var $link = $("<link rel='stylesheet' type='text/css'>");
$link.attr("href", path);
$head.append($link);
var head = $head[0];
this.copySheetAttributes = Polymer.api.declaration.styles.copySheetAttributes;
Polymer.api.declaration.styles.convertSheetsToStyles.call(this, head);
var styles = Polymer.api.declaration.styles.findLoadableStyles(head);
if (styles.length) {
var templateUrl = this.baseURI;
Polymer.styleResolver.loadStyles(styles, templateUrl, function () {
var $style = $shadow.find("style");
if ($style.length > 0){
$shadow.find("style").append($head.find("style").html());
}else{
$shadow.append($head.html());
}
});
}
}
});
Note: this code needs jquery to run
I have a strange problem related to inline javascript and css. On my localhost (WAMP server 2.2) everything works as it should (inline styles and scripts are used and working properly), but on a production server (shared hostgator server) inline scripts are completely overlooked by browsers. If I simplify and give you an example of what I mean:
<html>
<head>
<!--normal head includes, jquery, styles and other stuff -->
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("test");
});
</script>
<style type="text/css">
a { color:red; }
</style>
Some link
</body>
</html>
On localhost "Some link" will be colored red and an alert will popup. But on the production server none of that happens.
What kind of settings (I assume this is security related) on the server are making this possible and how can I change it so that inline scripts and styles will be used?
Do it programmatically like this:
$(document).ready(function(){
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
css = 'a { color: red }';
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
}
else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
});
I hope it helps.
PS: good practice: load scripts before body closing tag. Only load css in head tag.
I have some font problem in IE ,so I am trying to apply font-family through js,Its work but js is applied in all browser.How to apply js to only IE.This my code
drupal_add_js('sites/all/themes/blogbuzz/js/cufon-yui.js');
drupal_add_js('sites/all/themes/blogbuzz/js/Helvetica_CE_35_Thin_100.font.js');
drupal_add_js('(function ($){
$(document).ready(function()
{
Cufon.replace("#content-header");
Cufon.replace("#client_tle");
Cufon.replace("#block-block-16");
});
})(jQuery)', "inline");
You can use $.browser.msie variable of jQuery.
Remember to use that with jQuery Migrate if you are using jQuery 1.9+.
$(document).ready(function()
{
if($.browser.msie){
Cufon.replace("#content-header");
Cufon.replace("#client_tle");
Cufon.replace("#block-block-16");
}
});
Regards.
I've just joined a project where we are using sap netweaver to generate the website.
Until now people have been working on their DCP individually and therefore I now have 20 DCP to link together and style.
At the root, each DCP is an IView/IFrame.
We currently have 20 css files that makes it hard to maintain and quickly change so I'm looking to use scss to generate 1 css file to make everything work.
That part works fine, however I hit a problem, since each IFrame renders itself, each one loads a css file so I get 20 calls to the my new css file.
Is there a way to share the css file between the parent view and the IFrame, or at least set it so that the css file is downloaded once and the other 19 just use the cached version?
Cheers
Jason
<script type="text/javascript">
$(document).ready(function() {
//pulling all <style></style> css of parent document
if (parent) {
var oHead = document.getElementsByTagName("head")[0];
var arrStyleSheets = parent.document.getElementsByTagName("style");
for (var i = 0; i < arrStyleSheets.length; i++)
oHead.appendChild(arrStyleSheets[i].cloneNode(true));
}
//pulling all external style css(<link href="css.css">) of parent document
$("link[rel=stylesheet]",parent.document).each(function(){
var cssLink = document.createElement("link")
cssLink.href = "http://"+parent.document.domain+$(this).attr("href");
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
document.body.appendChild(cssLink);
});
});
</script>
It will able to inherit the css which is defined in the external style sheet as well as css defined in the tag of parent document.