I am trying to do a proof of concept and wrote a function that replaces values and styles in my current webpage with JavaScript
example;
const headerColor = document.getElementById("topheader");
headerColor.style.backgroundColor = 'white';
headerColor.style.background = 'none';
I am wondering if I can save all these in a cookie or so in order to create a demo with those styles throughout a checkout process.
For example, I am temporarily replacing the header of a page with JavaScript and would like to preserve that in a cookie for the remainder of the session.
Is this possible?
Related
I am trying to set different icons for when my browser is online(Normal logo) and offline(Greyed out logo). I am using Vue JS and I am able to detect online and offline set, I am also able to set different favicon for the different state but the offline icon won't show because my browser does not have internet to fetch the icon.
What is the best approach to achieve this? The code I am using is below, btw I am using 'v-offline' to detect online or offline states
handleConnectivityChange (status) {
status ? $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png') : $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png')
}
There are two elements to this, preloading the favicons, and setting them dynamically.
The first part can be achieved in various ways. I would opt for the Vue created method as you could show a spinner on the page until the component is mounted. This would probably be better suited as a mixin, instead of directly on the component.
data() {
return {
favicons: {} // we need to store the images to prevent the browser releasing them
}
},
created () {
// This can be improved but the logic is here
// Create the JS images
this.favicons = {
'online': new Image(),
'offline': new Image()
};
// Set the source properties
this.favicons.online.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png';
this.favicons.offline.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png';
}
Then, to update the favicon, you can do something along the lines of the following:
handleConnectivityChange (status) {
// Get or create the favicon
let link = document.querySelector("link[rel*='icon']") || document.createElement('link');
// Set the attributes of the favicon
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = status ? this.favicons.online.src : this.favicons.offline.src;
// Append the favicon to the `head`
document.getElementsByTagName('head')[0].appendChild(link);
}
Credit to: Changing website favicon dynamically
As a side note, and this is just my opinion, I would advise dropping jQuery if you are using Vue. There is very little need for it and it just adds to the overhead. In the scenario here, you can very easily use vanilla JS to achieve what you need as the example demonstrates...
I have written a script that is placed on different websites. It puts some html/css there. I have also written a website that enables to configure this html/css for each website.
That's why the script has to load html/css from the database. And that's why I have to keep javascript inside the database, and then use some eval to fire it from the script.
My question is - how can I keep something like this minified in the database, and then display it nicely formatted in some wysiwyg editor?
Sample text:
var el = document.createElement('body');
el.innerHTML = 'foobar';
document.getElementsByTagName('body')[0].appendChild(el);
This is what I want to get in my wysiwyg editor, but in DB I want this:
var el = document.createElement('body');el.innerHTML = 'foobar';document.getElementsByTagName('body')[0].appendChild(el);
So I have to somehow convert between those two.
I think you can use a regular expressions to do that (if you just want to place all code at the single line into the DB):
To store from the editor to the database do
var codeToDB = WYSIWYG_value.replace(/\r\n|\r|\n/g,"");
To restore from the database
var codeToWYSIWYG = codeFromDB.replace(/;/g,";\n")
I am going to implement a dynamic legend using JavaScript in Adobe Acrobat.
The document contains a lot of layers. Every layer has an own legend. The origin idea is to implement the legend so, that it contains the images in a dialog box for the visible layers.
I can only hide/show the layers by setting state to false or true (this.getOCGs()[i].state = false;) on document-level.
Question 1: Can I extract data from layer somehow for legend establishing? I think no, as we only have these function on layers: getIntent(), setIntent() and setAction(). Right? Therefore I decided to arrange it so, that all needed icons for every layer are saved in a folder with corresponding names. JavaScript should import the icons and I build the a dialog window with icons of visible Layers and place a text(description for this icon).
I tried all possibilities of image import described here: http://pubhelper.blogspot.com.au/2012/07/astuces-toolbar-icons-et-javascript.html. I got only one way (Convert the icons as hexadecimal strings). This way isn't good, as it is too much work to create with an other tool a hexadecimal string from a images and place it into a javascript code.
Unfortunately, I cannot import image using other methods:(. Since the security settings in Adobe are changed after version 7 or so, it is not possible to use functions like app.newDoc, app.openDoc, even app.getPath On document-level. I decided to implement the import on a folder level using trusted functions like this:
Variant 1:
var importImg = app.trustedFunction(function() {
app.beginPriv();
var myDoc = app.newDoc({
nWidth: 20,
nHeight: 20
});
var img = myDoc.importIcon("icon", "/icon.png", 0);
app.endPriv();
return img; });
var oIcon = importImg();
The settings in Preferences->JavaScript-> JavaScript Security are disabled (Enable menu item JS execution privileges, enable global object security policy)
NotAllowedError: Security settings prevent access to this property or method.
App.newDoc:109:Folder-Level:User:acrobat.js
Variant 2:
var importImg = app.trustedFunction(function() {
var appPath = var phPath = app.getPath({
cCategory: "user",
cFolder: "javascript"
});
try {
app.beginPriv();
var doc = app.openDoc({
cPath: phPath + "/icon.png",
bHidden: true
});
app.endPriv();
} catch (e) {
console.println("Could not open icon file: " + e);
return;
}
var oIcon = util.iconStreamFromIcon(doc.getIcon("icon"));
return oIcon;});
var oIcon = importImg();
Could not open icon file: NotAllowedError: Security settings prevent access to this property or method.
At least it allows the execution of all these functions like app.newDoc, but in the second variant it says, wrong range of content or so. Maybe is here the pdf from an image created false? I just took the image and printed it into a pdf.
I tried all these possibilities with .jpg, .png, .pdf. with different sizes(big images and 20x20), It doesn't work.
Could somebody help me, as I spent a lot of time with trying different possibilities. It would be actually better to implement the main goal described above on document level, is it possible?
Thank you and kind regards,
Alex
Do you have the Console fully activated in Acrobat? If not, do so and look for error messages you get.
The first variant does not work, because myDoc is not defined (unless you have done that before you call the importImg function).
If you want to import the image into the newly created file, you will have to make a reference to the Document Object you create with newDoc(). Actually, that would make the link to myDoc, as in
var myDoc = app.newDoc(1,1)
(are you sure you want to create a document measuring 1x1 pt?)
The next issue with the first variant is a bug in Acrobat, which discards "floating" Icon Objects when saving the document; you'd have to attach the Icon Object to a field to keep it; this field can be hidden, or even on a hidden Template page in the document.
I have a comic website www.twistedshotgun.com and it has a random button with some javascript someone made for me. I now need something that is easier to update.
I need the random button to choose a random html page, but I dont want to manually add each webpage to each html page, because as I make more pages it means changing every single individual page that has a random button to add the new content.
So is there a way to have an external file that lists all the random pages in one file so I can just update that?
I do not know javascript but this is my current code, but this is on every page:
<script type="text/javascript">
//INDEX VERSION ONLY
//pages (use full url if in a different domain);
var page1 = "comics/101/longbear.html";
var page2 = "comics/102/do_bees_pump.html";
var page3 = "comics/103/how_I_feel_on_a_daily_basis.html";
var page4 = "comics/104/windows_8 _space oddity.html";
//array (add all the pages inside [])
var pages = [page1,page2,page3,page4];
function showRandomPage()
{
var num = Math.round(Math.random() * (pages.length-1));
window.location.href=pages[num];
console.log(num);
};
To keep the information about the random pages between sessions, store the list of the random pages in a database and access the database whenever you want to get to the random URL.
Another possibility is to store the list in Javascript, in an external file (depending on how long it is).
Since the pages are all in different directories, there is no need or benefit to them having different names, and as you'll see there's a lot of benefit in them being the same, so I recommend renaming your page files to the same name, which might as well be simply index.html.
If your pages have the same name, your random selection script becomes very simple:
<script type="text/javascript">
function showRandomPage() {
var num = 100 + Math.round(Math.random() * 4);
window.location.href = "comics/" + num + "/index.html";
console.log(num);
};
</script>
If you number your directories sequentially from 100 on up (not skipping any numbers), all you need to do to maintain your code is increase the 4 in the code to whatever is quantity of pages you have.
put your random generating page java script in a file with extension .js , say pagedatabase.js
now in your html page where you want to call the function
place this code above it.
<script src="pagedatabase.js"></script>
it should work. id did for me. i too had the same problem with big database of header scripts.
keep in mind that the script call and the function call should be in the same region. do not place one in the head and other in the body. your html editor will give an error.
I am new to JavaScript and I need one simple solution.
How to save two text box from first html page, and show it in another html page.
Use localStorage: http://jsfiddle.net/usNwP/. localStorage is an object of which the values persist among pages on the same domain (so also after reloading, navigating or even rebooting the computer).
document.getElementById('save').onclick = function() {
// save values into localStorage
localStorage['input1'] = document.getElementById('input1').value;
localStorage['input2'] = document.getElementById('input2').value;
};
// load textboxes from localStorage (can be on another page)
document.getElementById('input1').value = localStorage['input1'] || "";
document.getElementById('input2').value = localStorage['input2'] || "";
All you need to know about using cookies with JavaScript:
http://www.quirksmode.org/js/cookies.html
A few practical functions to interact with cookies easier (for example set a cookie in one page, get a cookie in another):
http://www.w3schools.com/js/js_cookies.asp