If a user visits my website from a desktop computer, in my HTML I call a CSS style like this:
<link rel="stylesheet" type="text/css" href="desktop.css" media="all and (min-device-width:768px)" />
Using plain javascript (no framework) how can I change the media attribute from "all and (min-device-width:768px)" to "all and (min-width:768px)" ?
Thank you!
Give it an id and change the attribute value:
<link id="foo" rel="stylesheet" type="text/css" href="desktop.css" media="all and (min-device-width:768px)" />
And the jQuery part:
$("#foo").attr("media", "all and (min-width:768px)");
JSBIN
No jQuery version
document.querySelector("#foo").setAttribute("media", "all and (min-width:768px)");
// or
document.getElementById("foo").setAttribute("media", "all and (min-width:768px)");
if you don't have access to source code and can't set id for link, first you have to do is to filter links by media attribute. Then just set new attribute value to filtered:
var links = document.getElementsByTagName('link');
for(var i = 0; i < links.length; i++){
var link = links[i];
if(link.getAttribute('media') === 'all and (min-device-width:768px)')
link.setAttribute('media', 'all and (min-width:768px)');
}
fiddle
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.
I have the following in the header of my site
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">
I want to retrieve the full <link> content as shown above with jquery.
I tried
var a = jQuery('#swp-google-font-headline-css').get(0);
console.log(a, typeof a)
But the console output displayed the actual content, but it seem to be an object rather than a string and i specifically want it to be a string.
See demo https://jsfiddle.net/collizo4sky/qh6dnmg9/
Please help
Use outerHTML property of the Element
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants.
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a,typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
Maybe this is what you want:
var a = jQuery('#swp-google-font-headline-css').clone();
console.log(a[0]);
You can use innerHTML property on your a variable.
$(document).ready(function() {
var a = $('#swp-google-font-headline-css').get(0);
console.log(a.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">
There are two means by which this can be achieved, the first – as already shown – is to use the Node.outerHTML property, which in your posted code can by achieved like so:
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a, typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
And the other approach is more of a shim, and achieved by appending the found-element, here the <a>, to another element and accessing the innerHTML of that parent element:
function getElementHTML(node) {
var wrapper = document.createElement('div');
wrapper.appendChild(node);
return wrapper.innerHTML;
}
console.log($('#swp-google-font-headline-css').get(0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
You can use outerHTML.
var b = a.outerHTML;
Demo: https://jsfiddle.net/qh6dnmg9/2/
I want to put a tag system. I choose http://aehlke.github.io/tag-it/.
I have the code:
var availableTags = [
{
value: 1, label: 'tag1'
},
{
value: 2, label: 'tag2'
},
{
value: 3, label: 'tag3'
}];
$(document).ready(function() {
var version = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
alert(version);
$("#myTags").tagit({
tagSource: availableTags,
autocomplete: {
delay: 0,
minLength: 2,
source : availableTags
}
});
});
In jsfiddle it work (http://jsfiddle.net/jg9qw/) but in my website it doesn't. The version var is set with "1.8.12".
I have no error in my website console log.
I can put/delete tag but the autocomplete doesn't work.
Css (from header)
<link href="/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery.tagit.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
Js (from header)
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/js/tag-it.js"></script>
This is not much information you gave, but one thing I can think of with this much information is that probably the order of the scripts are reverse. If you could show us a code from your website's header it would help in solving your problem. (just the scripts you links)
Yes, probably that's the case. Check their website for the correct order: https://github.com/aehlke/tag-it/blob/master/README.markdown
And I don't think that everything is necessary.
And in your jquery ui make sure that the followings are contained: Core, Widget, Position, and Autocomplete
Try it with just the full jquery ui (just link the original one so you don't have to download) and the tag-it, nothing else. In case it doesn't work that way than something else is the source of the problem.
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.
I'm using a swf widget to create a image gallery on a website, the problem is, that i cant get to have the color to be changed.
You can find the widget here, in a zip, when putted on a web server ( i use wamp ), works great, simple etc.
If you look at the bottom of the project page, you'll find a devlopper's note that say:
I have included a few flash vars, if they are not provided there are defaults in the code. Here are the flash vars:flashvars.xmlPath = “xml/data.xml”; flashvars.backgroundColor = “0×000000″; flashvars.labelColor = “0xFFFFFF”“xmlPath” is the path to the XML file. “backgroundColor” is the color of the background. “labelColor” is the color of the text label in the middle of the coverflow.
The problem is, that when i try to change this var to another value in their index.html example source, it dont work.
Even if i delete some chars in the var "xmlPath", it still use the content of xml/data.xml. its seems that the developpers made a mistake in their implementation.
As i'm not familliar with js neither with flash, i ask your help to change the background color of this app from black to #0C021D ..
I tried a flash swf decompiler, with no success, does anyone have a tips ?
Thanks in advance.
here's the index.html source code;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CosDesign</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/main.css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.xmlPath = "xml/data.xml";
flashvars.backgroundColor = "0x00FF00";
flashvars.labelColor = "0x006368"
var params = {};
params.loop = "false";
params.menu = "false";
params.quality = "best";
params.scale = "noscale";
params.salign = "tl";
var attributes = {};
swfobject.embedSWF("swf/main.swf", "myAlternativeContent", "590", "300", "10.0.0", "swf/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>