Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

dizzywhip: Dec 23, 2005

ufarn posted:

Thanks.

In general, don't these graders stand a good chance of exposing the passwords to other people, if you don't do it right? I guess it would be fine if it were plug and play with all the intermediate security measures implemented, but putting it up for everyone to implement themselves seems hazardous.

There's no risk of exposing passwords because the password checker runs locally. Nobody can intercept the password because it's not being sent anywhere.

# ? Apr 18, 2012 20:45

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 12:13

darthbob88: Oct 13, 2011; YOSPOS

I need to programmatically add a script element to an existing HTML page, from a JS function, like

code:

function addScript() {
document.write("<script>doStuff();</script>");
}

Problem is, most of the methods I've seen insisted on executing doStuff() before writing the code to the page. Is this done to prevent folk from adding malicious code, because of Standards, what? I've found a way, I just want to know how terrible I'd be for using it.

Also, I need to write some settings from a database to a config file readable by JS, and I'm dithering on the format to use for this. JSON's easier for the JS to read, XML's easier for the database to write. Question is, is it more painful for the database to write JSON than for JS to parse XML? Don't know if it's a relational database or a document one, and the config file only needs to be written when the database updates, so JSON seems the better option to me, but I want second opinions from folk that know better than me.

# ? Apr 20, 2012 21:47

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

darthbob88 posted:

I need to programmatically add a script element to an existing HTML page

Why?

darthbob88 posted:

code:
function addScript() {
document.write("<script>doStuff();</script>");
}
Problem is, most of the methods I've seen insisted on executing doStuff() before writing the code to the page.

It's because document.write does not work properly after a page is finished loading.

# ? Apr 20, 2012 21:54

Polio Vax Scene: Apr 5, 2009

Is what I'm trying to do possible? I have a file hosted on a sharepoint server and want to read the contents remotely.

code:

		var url="http://server/file.doc"
		
		if (window.XMLHttpRequest) { 
			request = new window.XMLHttpRequest();
		} else {
			request = new ActiveXObject("MSXML2.XMLHTTP.3.0");
		}
		
		request.onreadystatechange=function() {
			if (request.readyState==4) {
				if (request.status==200) {
					//not working; request.responseBody is undefined
					alert(request.responseBody);
				} else {
					alert("The file could not be opened for reading.);
				}
			}
		}
		
		request.open("GET",url,true);
		request.send();

request.responseBody is undefined, but I'm getting the 200 response back ok.

# ? Apr 20, 2012 22:07

darthbob88: Oct 13, 2011; YOSPOS

Suspicious Dish posted:

Why?

Short answer: Work.

Long answer: At the moment, installing my employer's web service consists of two parts at minimum. Include our files in the header, all 6 of them*, and make one call to our service at the bottom of the page. See here. Anything wrapped in 4-Tell comments or referencing 4TellBoost is my doing.
My boss would like to reduce that to two lines, by including one file which imports all the other files and writes out the call to our service. Everything works in my test environment, I can do it just fine, I just want to know how far from best practices this sort of thing is and how likely I am to get tarred and feathered for my audacity. Now that I think of it, can possibly do something with $(document).ready(), will try that now.

* To be fair, 2 of those files are 3rd party libraries and 2 are CSS files that can probably be merged safely, but still, that's more files than I'd like to use for our service.

Edit: We're trying to make it easier to install this so our customers can install it themselves rather than having me do it. Same with the config file, if we can let the client modify their configuration using some dashboard service I don't have to do it and we can sign more clients more quickly.

darthbob88 fucked around with this message at 22:56 on Apr 20, 2012

# ? Apr 20, 2012 22:43

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

darthbob88 posted:

Short answer: Work.

Long answer: At the moment, installing my employer's web service consists of two parts at minimum. Include our files in the header, all 6 of them*, and make one call to our service at the bottom of the page. See here. Anything wrapped in 4-Tell comments or referencing 4TellBoost is my doing.
My boss would like to reduce that to two lines, by including one file which imports all the other files and writes out the call to our service. Everything works in my test environment, I can do it just fine, I just want to know how far from best practices this sort of thing is and how likely I am to get tarred and feathered for my audacity. Now that I think of it, can possibly do something with $(document).ready(), will try that now.

* To be fair, 2 of those files are 3rd party libraries and 2 are CSS files that can probably be merged safely, but still, that's more files than I'd like to use for our service.

Right. The reason I asked "Why?" wasn't to berate you for doing something silly, but so we can determine the best solution for everybody. If you did this because you wanted to load code at runtime, I'd suggest require.js instead. If you just want one copy/paste line, then create a file called loader-async.js with:

code:

(function(doc) {
  function scriptTag(src) {
    var script = document.createElement("script");
    var embedder = doc.body || doc.documentElement;
    script.src = src;
    script.async = true;
    embedder.appendChild(script);
  }

  function loadScripts() {
    scriptTag("file.js");
  }

  if (window.addEventListener) {
    window.addEventListener("load", loadScripts);
  } else if (window.attachEvent) {
    window.attachEvent("onload", loadScripts);
  }
})(window.document);

And then tell them to copy/paste:

code:

<script src="http://mysite.com/file-async.js" async>

Somewhere on their page.

# ? Apr 20, 2012 22:58

Gazpacho: Jun 18, 2004; by Fluffdaddy; Slippery Tilde

If your goal is to have doStuff() executed in the present document, the direct way is to execute it. If you want to execute it and catch syntax errors, the direct way is to evaluate it. Adding a script element involves a lot of stuff that is not directely related to executing your code, and the security of the code is an issue either way.

innerHTML should not be set to a string that might confuse an HTML parser. Create a text node for that.

# ? Apr 20, 2012 22:58

darthbob88: Oct 13, 2011; YOSPOS

Suspicious Dish posted:

Right. The reason I asked "Why?" wasn't to berate you for doing something silly, but so we can determine the best solution for everybody. If you did this because you wanted to load code at runtime, I'd suggest require.js instead. If you just want one copy/paste line, then create a file called loader-async.js with:
code:
<snip>
And then tell them to copy/paste:
code:
<script src="http://mysite.com/file-async.js" async>
Somewhere on their page.

That looks like about what I need. Actually, it looks like an elaborated version of my current method, so that should suit my needs just fine.
Edit: Actually, it may make a difference but we want two lines; one that's just <script src="http://myfile.js"> and one that's <script>myfile.setClient("Lolbutts")</script>, where the setClient function is the one that writes everything out and imports everything, because just what files we import depends on the client.

Gazpacho: I don't need to execute doStuff() now, I want to execute it later. Part of that function is a screen scraper, so we want to run doStuff as late as possible, possibly even when the document's finished loading.

darthbob88 fucked around with this message at 23:29 on Apr 20, 2012

# ? Apr 20, 2012 23:20

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

darthbob88 posted:

That looks like about what I need. Actually, it looks like an elaborated version of my current method, so that should suit my needs just fine.

Right. You could use jQuery and $(document).ready, but I was thinking that maybe all your customers didn't have (or didn't want) jQuery on their pages.

# ? Apr 20, 2012 23:26

darthbob88: Oct 13, 2011; YOSPOS

Suspicious Dish posted:

Right. You could use jQuery and $(document).ready, but I was thinking that maybe all your customers didn't have (or didn't want) jQuery on their pages.

Actually, considering that our service makes extensive use of jQuery, it's one of the first files that we include if the customer doesn't already have it. $(document).ready was actually my second thought on how to do this best. Following on from the edit I just made, setClient is ATM

code:

_4TellBoost.setClient = function (CLIENTAL) {
        //This is the good idea, but am currently testing it on the local systems.
        //document.write('<script src="//'+ _4TellBoost.Service.address + CLIENTAL + '/4TellBc.js"></script>');
        var PLATFILE = '/4TellBc.js'; //Platform specific file, varies depending on client.
        document.write('<script src="' + CLIENTAL + PLATFILE + '"></script>');
        document.write('<link rel="StyleSheet" href="' + CLIENTAL + '/4TellBoost.css" type="text/css" media="screen">');
        var GETRECS = document.createElement('script');
        GETRECS.setAttribute("type", "text/javascript");
        GETRECS.appendChild(document.createTextNode("_4TellBoost.getRecommendations('Auto', '');"));
        document.body.appendChild(GETRECS);
    };

and I suspect it'd be better to replace the whole GETRECS business with

code:

$(document).ready(function() { _4TellBoost.getRecommendations('Auto', ''); });

Everything else works fine, though I'll probably replace them with your method.

# ? Apr 20, 2012 23:45

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Repeat after me:

document.write

You can find countless sources on the internet explaining why. If you require jQuery, then you can simplify the code to:

code:

$(document).ready(function() {
  $(document.body).append($("<script>", {'src': src, 'async': 'async'}));
});

Don't use text nodes with script tags inserted dynamically. It will not work consistently cross-browser. It also makes no sense. If you require knowing when script loading is done, consider including head.js in your bundle.

# ? Apr 21, 2012 00:13

darthbob88: Oct 13, 2011; YOSPOS

Suspicious Dish posted:

Repeat after me:

I will not use document.write.
I will not use document.write.
I will not use document.write.

You can find countless sources on the internet explaining why. If you require jQuery, then you can simplify the code to:
code:
$(document).ready(function() {
  $(document.body).append($("<script>", {'src': src, 'async': 'async'}));
});
Don't use text nodes with script tags inserted dynamically. It will not work consistently cross-browser. It also makes no sense. If you require knowing when script loading is done, consider including head.js in your bundle.

That looks much better. Going to look into head.js and also require.js as long as I'm looking. Thanks for the help!

# ? Apr 21, 2012 00:28

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Does opening a new window fire an event?
Alternatively: do plugins open new windows through the browser's javascript interface?

What I want to do: I want to write an Opera user javascript that fires before any new window (or tab) is opened, examine the to-be-opened window's address and possibly modify it before the window is actually opened.

If it fires an event, I could probably use Opera's BeforeEvent listener. If plugins use window.open, I could probably use defineMagicFunction.

If neither of those happen, I guess I'm SOL.

# ? May 6, 2012 18:52

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

What do you mean by "plugin"? Flash? Flash doesn't have the native capability to open a new window. Most Flash sites implement pop-ups by going to a link with the "_blank" target (how this works inside Flash internally, I don't know), or by calling out to JavaScript using an FSCommand, ExternalInterface, or going to a javascript: url.

# ? May 6, 2012 18:58

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Suspicious Dish posted:

What do you mean by "plugin"? Flash? Flash doesn't have the native capability to open a new window. Most Flash sites implement pop-ups by going to a link with the "_blank" target (how this works inside Flash internally, I don't know), or by calling out to JavaScript using an FSCommand, ExternalInterface, or going to a java script: url.

That's exactly what I meant. I figured that plugins (including flash) can't actually just open new windows, they have to request the browser to open a new window somehow. I'm trying to intercept that "somehow".

java script: urls should not be a problem, since user javascript has BeforeJavascriptURL handlers.

I'll check out if the google knows anything about FSCommand or ExternalInterface.

# ? May 6, 2012 19:18

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

FSCommand and ExternalInterface are just two ways of calling JavaScript code (or another external service -- when you embed the ActiveX control, you can override these handlers yourself) from Flash. So if you can intercept JavaScript, you can do anything.

# ? May 6, 2012 19:42

hayden.: Sep 11, 2007; here's a goat on a pig or something

edit nvm

hayden. fucked around with this message at 22:36 on May 6, 2012

# ? May 6, 2012 22:26

205b: Mar 25, 2007

Yet another question - is there a recommended way of embedding JSON configuration data into a page? Right now I have a script tag with a src attribute as well as text content, where the content is the configuration data. The script pointed to by the src attribute parses the content and everything works, but I've read a couple blog posts suggesting that this is a bad idea/against the html5 spec/etc. I could always make another request to grab the configuration, but it seems like that should be avoidable.

# ? May 8, 2012 06:37

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

The strategy I usually see is something like:

code:

<script>
var config = {...};
</script>
<script src="main.js"></script>

Which will look for a window.config, and use it, and then delete it afterwards.

# ? May 8, 2012 06:40

Seedy Wizard: Feb 17, 2011; who wants a
body massage

Okay so I've showed this to a few people and mostly got really confused looks. This is for a uni assessment and I still get pretty :confused:

with a lot of basic stuff so I hope I'm not just missing something obvious.

We're to make a website that sells mobile phones. And that's a part of the order form page. It's supposed to calculate and give me a total. But all it seems to do is reset the page or something when you click calculate and I'm trying to get the prices to pop up in the text boxes depending on what you select.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>Test for WTF</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
        <script type="text/javascript">       
    function calculate()
{
    var add1 = parseFloat(document.getElementById("purchase_form").memory.value);
    var add2 = parseFloat(document.getElementById("purchase_form").phcase.value);
    var add3 = parseFloat(document.getElementById("purchase_form").charger.value);
    var add4 = parseFloat(document.getElementById("purchase_form").screen.value);
    var add5 = parseFloat(document.getElementById("purchase_form").deliver.value);
    var timesqty = parseFloat(document.getElementById("purchase_form").qty.value);

    var total = (parseFloat(add1)+parseFloat(add2)+parseFloat(add3)+parseFloat(add4)+parseFloat(add5))*parseFloat(timesqty);

    result=result.toFixed(2);
    alert(result);
    document.getElementById("purchase_form").total.value=result.toString();
}
</script>
</head>

<body>
<form id="purchase_form" action="" method="get" onsubmit="return calculate()">
	<div>
	<label>Memory: </label>
		<select name="memory">
			<option value="0.00">2GB</option>
			<option value="5.00">4GB</option>
			<option value="12.00">8GB</option>
			<option value="24.00">16GB</option>
		</select>
		<input type="text" name="mem_cost" /><br />
	<label>Case: </label>
		<select name="phcase">
			<option value="4.00">Leather Case</option>
			<option value="4.00">Silicone Case</option>
		</select>
		<input type="text" name="ca_cost" /><br />
	<label>Charger: </label>
		<select name="charger">
			<option value="6.00">Car Charger</option>
			<option value="5.00">Car Charger Holder</option>
		</select>
		<input type="text" name="ch_cost" /><br />
	<label>Screen Protector: </label>
		<select name="screen">
			<option value="0.99">1 off</option>
			<option value="1.79">2 off</option>
			<option value="2.39">3 off</option>
			<option value="3.40">4 off</option>
		</select>
		<input type="text" name="sc_cost" /><br />
	<label>Expected Delivery: </label>
		<select name="delivery">
			<option value="35.00">Deliver</option>
			<option value="0.00">Pick up</option>
		</select>
		<input type="text" name="de_cost" /><br />
	<label>Qty: </label>
		<input type="text" name="qty"/><br />
		<input type="submit" value="Calculate" /><br />
	<label>Total: AU$</label>
	<input type="text" name="total" />
	</div>
</form>

</body>
</html>

Sorry for posting the whole thing but I have no idea where it is that I'm mucking up. Thanks in advance.

# ? May 23, 2012 11:02

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Seedy Wizard posted:

Okay so I've showed this to a few people and mostly got really confused looks. This is for a uni assessment and I still get pretty with a lot of basic stuff so I hope I'm not just missing something obvious.

We're to make a website that sells mobile phones. And that's a part of the order form page. It's supposed to calculate and give me a total. But all it seems to do is reset the page or something when you click calculate and I'm trying to get the prices to pop up in the text boxes depending on what you select.

(code removed)

Sorry for posting the whole thing but I have no idea where it is that I'm mucking up. Thanks in advance.

Using a development tool* to debug, it was pretty trivial to find two errors that happen in calculate();

purchase_form has no member called deliver

this line: result=result.toFixed(2); result is undefined, so you cannot call result.toFixed()

To stop the page from refreshing, return false at the end of calculate();

You probably also want to check that the your conversions form fields are valid numbers before doing calculations (function isNaN()).

* Opera, Chrome, IE and Safari have built-in development tools, Firefox has Firebug extension.

# ? May 23, 2012 11:27

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

You also seem to be calling parseFloat twice on the values. Not sure if that matters or not but it's redundant.

And definitely learn to use the debugger. That should be the first thing you go to when something doesn't work.

# ? May 23, 2012 12:19

Golbez: Oct 9, 2002; 1 2 3!
If you want to take a shot at me get in line, line
1 2 3!
Baby, I've had all my shots and I'm fine

Coding Javascript without a debugger like Firebug is like trying to have sex without touching anything. It doesn't feel good, nothing gets accomplished, and it just makes you feel stupid for trying.

# ? May 23, 2012 14:39

muscat_gummy: Nov 30, 2008

Seedy Wizard posted:

Okay so I've showed this to a few people and mostly got really confused looks. This is for a uni assessment and I still get pretty with a lot of basic stuff so I hope I'm not just missing something obvious.

We're to make a website that sells mobile phones. And that's a part of the order form page. It's supposed to calculate and give me a total. But all it seems to do is reset the page or something when you click calculate and I'm trying to get the prices to pop up in the text boxes depending on what you select.

Sorry for posting the whole thing but I have no idea where it is that I'm mucking up. Thanks in advance.

It's refreshing because it's breaking. Also because you don't have return false at the end, but as it is it's not even making it to the end.

I would make add an array with the values and loop through to calculate the total, then multiply everything by the quantity. Make sure to set the default quantity to 1 or it'll be NaN if nothing is entered. parseFloat twice is redundant.

# ? May 26, 2012 18:35

Seedy Wizard: Feb 17, 2011; who wants a
body massage

Thanks for the help guys. I just finished it up and got everything working now. I do remember them mentioning Firebug about a month ago, and using it really helped me to work out the kinks.

# ? May 28, 2012 02:16

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Firebug is unfortunately dead. The debugger is buggy (oh ho ho) because the old JSD 1.0 API is unmaimtained, and JSD 2.0 isn't quite finished yet. Mozilla is building a new set of development tools in tandem with their work on their new JavaScript engine, and all that fancyness. It lost its lead maintainer, and the progress on "Firebug 2.0" is slow.

In the latest Nightly builds of Firefox, they already have a JavaScript console and a web inspector. They aren't too useful, as there's no debugger yet, or really any basic functionality provided by Firebug.

I highly recommend you check out the WebKit developer tools, available in Chrome/Safari/Midori/what have you.

# ? May 28, 2012 02:49

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

I you use jslint (you probably should) and Notepad++ (also pretty good), download the gently caress out of this plugin:
http://sourceforge.net/projects/jslintnpp/

Ctrl+Shift+F5 lints your current file and moves the cursor to the first error. Makes linting soooo much quicker, holy poo poo.

Polishing old and busted javascript became so much less of a chore.

# ? May 28, 2012 20:13

darthbob88: Oct 13, 2011; YOSPOS

I must say that Opera has the prettiest debug console I've ever seen. P'raps not the most useful, though I may not have given it a fair shake, but it's definitely the prettiest.

My question: Have run into issues with prototype.js and their interfering with proper JSON. Stack Overflow post on the subject, not mine For political reasons, we can't simply delete Array.prototype.toJSON, so I have to write a toJSON function for our system, and it's giving me trouble. What am I doing wrong, aside from writing my own toJSON function?

JavaScript code:

            toJSON: function () {
                return  '{ "UID": ' + this.UID.toJSON() +
                ', "RID": ' + this.RID.toJSON() +
                ', "Viewed": ' + Object.toJSON(this.Viewed) +
                ', "likes": ' + Object.toJSON(this.likes) +
                ', "dislikes": ' + Object.toJSON(this.dislikes) + '}';
            }

If it makes any difference, UID and RID are strings/numbers, and Viewed, likes, and dislikes are arrays, hence the issues.

Also, holy poo poo we have good code formatting now.

# ? May 28, 2012 20:28

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

I don't have any other advice other than "prototype.js dead, do not use it".

# ? May 28, 2012 21:52

darthbob88: Oct 13, 2011; YOSPOS

Suspicious Dish posted:

I don't have any other advice other than "prototype.js dead, do not use it".

I don't want to use it, but the client does, and breaking client code is frowned upon, no matter how bad it may be and how many standards it may violate. I'm powerfully tempted to put a false function in to keep my boss happy and put "delete Array.prototype.toJSON;" somewhere useful.

ETA: Considering that the other method I found to solve the prototype.js conflict has failed, I will do that.

darthbob88 fucked around with this message at 00:27 on May 29, 2012

# ? May 28, 2012 22:12

tinaun: Jun 9, 2011; tell me...

So I'm trying to get an element to change styles when it is moved over like so:

JavaScript code:


function display(x){
	x.style.BackgroundColor = "red";
}

var opt = someElement;
opt.addEventListener("mouseover", display(opt), false);

The problem is that the display function always activates on load, and the original style is never shown. This is my first time using javascript for a large project, so any help on events would be nice.

# ? May 30, 2012 04:08

smug forum asshole: Jan 15, 2005

tinaun posted:

So I'm trying to get an element to change styles when it is moved over like so:
JavaScript code:
function display(x){
	x.style.BackgroundColor = "red";
}

var opt = someElement;
opt.addEventListener("mouseover", display(opt), false);
The problem is that the display function always activates on load, and the original style is never shown. This is my first time using javascript for a large project, so any help on events would be nice.

Baaed on this code, I don't understand why the display function is getting called on page load. Is all of this wrapped in a load handler or something?

# ? May 30, 2012 04:14

OddObserver: Apr 3, 2009

tinaun posted:

So I'm trying to get an element to change styles when it is moved over like so:
JavaScript code:
function display(x){
	x.style.BackgroundColor = "red";
}

var opt = someElement;
opt.addEventListener("mouseover", display(opt), false);
The problem is that the display function always activates on load, and the original style is never shown. This is my first time using javascript for a large project, so any help on events would be nice.

When you say display(opt) you're literally asking to call display and pass in opt to it while evaluating the arguments to opt.addEventListener. Something like this might work better (if I remember what 'this' gets set to for event listeners correctly, which I might now):

JavaScript code:


function display(event){
	this.style.BackgroundColor = "red";
}

var opt = someElement;
opt.addEventListener("mouseover", display, false);

# ? May 30, 2012 04:18

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

code:

#someElement {
    background-color: white;
}

#someElement:hover {
    background-color: red;
}

# ? May 30, 2012 04:29

tinaun: Jun 9, 2011; tell me...

OddObserver posted:

JavaScript code:


function display(event){
	this.style.BackgroundColor = "red";
}

var opt = someElement;
opt.addEventListener("mouseover", display, false);

It wasn't working, but removing "event" from the function header made it work perfectly.

Suspicious Dish posted:

code:

#someElement {
    background-color: white;
}

#someElement:hover {
    background-color: red;
}

I would do that but I have no access to the source itself. :sigh:

# ? May 30, 2012 04:47

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

tinaun posted:

I would do that but I have no access to the source itself.

JavaScript code:

var cssText = "#someElement { background-color: white; } #someElement:hover { background-color: red; }";
var style = document.createElement('style');
style.appendChild(document.createTextNode(cssText));
document.head.appendChild(style);

# ? May 30, 2012 05:08

darthbob88: Oct 13, 2011; YOSPOS

Wheany posted:

JavaScript code:

var cssText = "#someElement { background-color: white; } #someElement:hover { background-color: red; }";
var style = document.createElement('style');
style.appendChild(document.createTextNode(cssText));
document.head.appendChild(style);

Wait. You mean you can dynamically create CSS style elements? :aaa:

I'm going to abuse that so hard.

# ? May 30, 2012 08:51

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

darthbob88 posted:

Wait. You mean you can dynamically create CSS style elements? I'm going to abuse that so hard.

Dude, you can dynamically create image files that you then base64-encode and set as a data url to an img-tag. I've done it and it is horribawesome. All the images on that page are created on-the-fly with javascript.

(I've done the same with pngs but don't have access to them right now)

e: here it is

Wheany fucked around with this message at 21:38 on May 30, 2012

# ? May 30, 2012 09:28

Mogomra: Nov 5, 2005; simply having a wonderful time

darthbob88 posted:

Wait. You mean you can dynamically create CSS style elements? I'm going to abuse that so hard.

You can actually mess with the styles themselves. From what I've messed with, it's pretty cross browser friendly too. There are some cases that need to be handled with IE, but it works.

I wrote a stupid little jQuery plugin that swaps out stylesheets this way.

You can also edit the styles themselves using javascript if you really want to.

Here's a good place to start if this stuff sounds interesting for some reason.

# ? May 30, 2012 15:16

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 12:13

darthbob88: Oct 13, 2011; YOSPOS

Mogomra posted:

You can actually mess with the styles themselves. From what I've messed with, it's pretty cross browser friendly too. There are some cases that need to be handled with IE, but it works.

I wrote a stupid little jQuery plugin that swaps out stylesheets this way.

You can also edit the styles themselves using javascript if you really want to.

Here's a good place to start if this stuff sounds interesting for some reason.

Wheany posted:

Dude, you can dynamically create image files that you then base64-encode and set as a data url to an img-tag. I've done it and it is horribawesome. All the images on that page are created on-the-fly with javascript.

(I've done the same with pngs but don't have access to them right now)

How have I gone so long without knowing any of this was possible, I could do so many terrible things with all this. Most of them I can do now, but I can use this to make them wonderfully terrible. I'm not sure whether to thank you or curse you for giving me this knowledge.

# ? May 30, 2012 17:05

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »