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>
Related
I need to create a new <a> element with the download property and target blank. This link must not be visible in html and will be clicked with JavaScript.
let a = document.createElement("a");
document.body.appendChild(a);
a.setAttribute("style", "display: none");
a.href = blobUrl;
a.target = "_blank";
a.download = "MyFileName.pdf";
a.click();
Result in HTML:
The problem is that the target blank seems to be ignored. It worked until recently and there have been no changes. What could be the problem?
Try this, and also please move the document.body.appendChild(a); to the end just like what I have done.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function createA(){
let a = document.createElement("a");
a.setAttribute("style", "display: none");
a.href = "#";
a.target = "_blank";
a.download = "MyFileName.pdf";
a.click();
a.innerHTML = "SomeText";
document.body.appendChild(a);
}
createA();
</script>
</body>
</html>
Please let me know if your problem has been solved by voting the answer :)
I currently have a single web page that contains two elements:
image (wrapped in anchor, loads URL in iframe)
iframe (loads themes.html by default)
The image, on-click, toggles/switches the iframe between themes.html and styles.html, as well as the image source. However, despite the numerous tutorials and forum posts I have read online, I cannot get it to work.
How would I go about having the image toggle when clicked, as well as toggling the source of the iframe between the two HTML files?
<!DOCTYPE HTML>
<html>
<head>
<title>Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="switch">
<a href="styles.html" target="switchframe" id="toggleURL" onclick="toggleURL();">
<img src="images/segment-theme.png" id="toggleImage" onclick="toggleImage();"/></a>
<iframe id="frame" name="switchframe" src="themes.html"></iframe>
</div>
<script>
function toggleImage() {
var img1 = "images/segment-theme.png";
var img2 = "images/segment-style.png";
var imgElement = document.getElementById('toggleImage');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
function toggleURL() {
var url1 = "themes.html"
var url2 = "styles.html"
var urlElement = document.getElementById('toggleURL');
urlElement.href = (urlElement.href === url1)? url2 : url1;
}
</script>
</body>
</html>
EDIT: I figure I could maybe have it just toggle the iframe's src property directly, but if I can't even get the image's src to toggle to begin with, I fear I won't be able to get that working either.
EDIT 2: I can get it to load styles.html in the iframe with the code below; however, I cannot get it to toggle back to themes.html:
function toggleURL() {
var url1 = "themes.html"
var url2 = "styles.html"
var urlElement = document.getElementById('frame');
urlElement.src = (urlElement.src === url1)? url2 : url1;
}
I believe you're having issues because you're using element.attribute instead of element.getAttribute('attribute-name').
Since image.src will return the absolute path www.domain.com/path/to/image.png where getAttribute returns the value specified in the element.
Also you need only one event handler for your case.
<html>
<head>
<title>Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="switch">
<a href="styles.html" id="toggleURL" onclick="toggle(event);">
<img src="images/segment-theme.png" id="toggleImage" />
</a>
<iframe id="frame" src="themes.html"></iframe>
</div>
<script>
function toggle(e) {
e.preventDefault();
var img1 = "images/segment-theme.png";
var img2 = "images/segment-style.png";
var imgElement = document.getElementById('toggleImage');
var src = imgElement.getAttribute('src');
imgElement.setAttribute('src', (src === img1) ? img2 : img1)
var url1 = "themes.html"
var url2 = "styles.html"
var urlElement = document.getElementById('toggleURL');
var href = urlElement.getAttribute('href');
document.getElementById('frame').setAttribute('src', href)
urlElement.setAttribute('href', (href === url1) ? url2 : url1)
}
</script>
</body>
</html>
I want to create text file (notepad type file) using javascript. My code is given below but it is not working plz. Suggest me any solution for creating text file.
var txt = new ActiveXObject("Scripting.FileSystemObject");
var s = txt.CreateTextFile("D:\\test.txt", true);// means file is store in my D drive.
s.WriteLine('Hello');
s.Close(); `
you can try this:
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
// If we are replacing a previously generated file we need to
// manually revoke the object URL to avoid memory leaks.
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.getElementById('downloadlink');
link.href = makeTextFile(textbox.value);
link.style.display = 'block';
}, false);
})();
<textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>
Also you can show this DEMO
The following code snippet demonstrate create a text files using the jQuery and HTML5 file API. For the sake of simplicity, in this example I am using Bootstrap CSS framework for building the page.
$('#btnSave').click(function() {
if ('Blob' in window) {
var fileName = prompt('Please enter file name to save', 'Untitled.txt');
if (fileName) {
var textToWrite = $('#exampleTextarea').val().replace(/n/g, 'rn');
var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
if ('msSaveOrOpenBlob' in navigator) {
navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
} else {
var downloadLink = document.createElement('a');
downloadLink.download = fileName;
downloadLink.innerHTML = 'Download File';
if ('webkitURL' in window) {
// Chrome allows the link to be clicked without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
// Firefox requires the link to be added to the DOM before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.click(function(){
document.body.removeChild(event.target);
});
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
}
} else {
alert('Your browser does not support the HTML5 Blob.');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your HTML, CSS, and JavaScript playground.">
<title>HTML, CSS, JS Playground</title>
<meta content="width=device-width, initialscale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script>
$(document ).ready(function() {
//Put your java script here
});
</script>
</head>
<body>
<div class="container">
<h1>Reading and Creating Text Files Using the HTML5 File API and jQuery</h1>
<div class="form-group">
<button type="button" class="btn btn-default" id="btnOpen">Open...</button>
<button type="button" class="btn btn-default" id="btnSave">Save</button>
</div>
<input type="file" id="exampleInputFile" accept=".txt,.csv,.xml" class="hidden">
<div class="form-group">
<textarea class="form-control" rows="15" id="exampleTextarea"></textarea>
</div>
</div>
</body>
source
When tested locally the example below works perfectly. It cycles through different jsmovermaps on mouse press, but when I test this on the server it doesn't update the jsmovermap relevant to cursor press. I have uploaded the maps correctly. Any help would be appreciated.
Many thanks!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ireland Map</title>
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="map" id="map">
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.qtip.js"></script>
<script src="jsmovermap1.js" id="s1"></script>
<script>
x=1;
//alert(x);
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
//alert('The "UP" key is being held down...?');
x=x+1;
//alert(x);
//script.src = "jsmovermap"+(x)+".js";
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "jsmovermap"+(x)+".js";;
s.innerHTML = null;
s.id = "map";
document.getElementById("map").innerHTML = "";
document.getElementById("map").appendChild(s);
//alert(s.src);
}
if (evt.keyCode === 40) {
//alert('The "DOWN" key is being held down...?');
x=x-1;
if(x<1){
x=1}
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "jsmovermap"+(x)+".js";;
s.innerHTML = null;
s.id = "map";
document.getElementById("map").innerHTML = "";
document.getElementById("map").appendChild(s);
//alert(x);
}
});
</script>
</body>
</html>
UPDATE!
This is what the console is spitting out after a number of cursor presses.
Resource interpreted as Script but transferred with MIME type text/html: "http://jeremiahambrose.com/maptest/Test/jsmovermap23.js".
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>