PDA

View Full Version : invoking "file selection box"



ItsMeOnly
09-15-2006, 06:32 PM
Hi again,

I now have this dilemma: I want to implement user-selectable background on my site, however I'm not willing to have the background files being uploaded, rather I want local filenames to be used (like file:///c:/blah/mynicepic.jpg), plain easy to implement "site-wise" (cookie magic), but there's a catch:
I'd like to use UAs "file selection box" (like with uploading) to appear. Do you know any way to invoke that?

ItsMeOnly
09-15-2006, 09:12 PM
well, the temporary- and probably permanent solution is checking if the <input type="file"> element has value, and grab it.

Twey
09-16-2006, 12:34 PM
That's really not going to work. Most browsers won't allow you to do this for security reasons.

ItsMeOnly
09-16-2006, 01:24 PM
Yup, just tested, grabbing values works, but FF disallows using anything with file://

Anyway:
here's a test of the "control panel", http://rambo.id.uw.edu.pl/test.html
I have now a different task bothering me, populating the selection box with names and values of options taken from the array on top:


backgrounds = new Array();
backgrounds['Solid'] = new Array("solid", bgvalue);
backgrounds['Scatter'] = new Array("image", "/pictures/back.png");
[...]

The name is backgrounds[x], values are just position in main backgrounds[] array;
The question is the code which would fill in the options in selection box. Of course I can do it manually, but that would be pain if I would want to add or remove stuff...

Twey
09-16-2006, 01:39 PM
You haven't declared "backgrounds." Also, the ["solid", bgvalue] syntax is marginally better than new Array() for some obscure reason I can't currently remember.

window.onload = function() {
var select = document.getElementById("backgroundSelect");
for(var i in backgrounds)
select.options.add(new Option(backgrounds[i][0], backgrounds[i][1]), select.options.length);
};

ItsMeOnly
09-16-2006, 02:06 PM
Implemented, now the another thing: need to split "HTML color" into rgb:

I know that I can do parseInt(value, 16), but haven't done any splitting yet, so is


function fromHEXtoRGB(value) {
r = parseInt(value.substr(1, 3), 16);
g = parseInt(value.substr(3, 5), 16);
b = parseInt(value.substr(5), 16);
return r, g, b;
}

is ok?

How with oposite, ho to convert decimal to hex?

Twey
09-16-2006, 03:40 PM
return r, g, b;You can only return one value. Use an object. In fact, the whole thing can be made into an object:
String.prototype.splitEvery = function(n) {
var s = this,
p = [];

while(s.length < 0) {
p.push(s.substr(0, n));
s = s.substr(n);
}

return p;
};

String.prototype.padFront = function(n, c) {
var d = c || "0",
s = this;

while(s.length < n)
s = d + s;

return s;
};

function Colour(r, g, b) {
this.red = r;
this.green = g;
this.blue = b;
}

Colour.fromThreeDigitHex = function(str) {
var rgb = str.substr(1).splitEvery(1);

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i] + rgb[i], 16);

return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toThreeDigitHex = function() {
return "#" + this.red.toString(16).padFront(2).charAt(0)
+ this.green.toString(16).padFront(2).charAt(0)
+ this.blue.toString(16).padFront(2).charAt(0);
};

Colour.fromSixDigitHex = function(str) {
var rgb = str.substr(1).splitEvery(2);

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i], 16);

return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toSixDigitHex = function() {
return "#" + this.red.toString(16).padFront(2)
+ this.green.toString(16).padFront(2)
+ this.blue.toString(16).padFront(2);
};

Colour.fromCSSRGB = function(str) {
var rgb = str.substr(4).substr(0, rgb.length - 1).replace(/ /g, "").split(",");

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i], 10);

return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toCSSRGB = function() {
return "rgb(" + [this.red, this.green, this.blue].join(", ") + ")";
};

Colour.fromString = function(str) {
if(str.charAt(0) === "#" && str.length === 4)
return Colour.fromThreeDigitHex(str);
else if(str.charAt(0) === "#" && str.length === 7)
return Colour.fromSixDigitHex(str);
else if(str.indexOf("rgb(") === 0)
return Colour.fromCSSRGB(str);
else throw new Error("Bad colour passed to Colour.fromString()");
};

ItsMeOnly
09-16-2006, 04:07 PM
*plunk* that was my jaw dropping...

while I'll deliberate more if I need to implement that (well, maybe later, when I implement color schemes), here's another obstacle I encountered:
document.body.style.backgroundColor is... null?

Found it: document.body.bgColor ... pheeeewww....

Twey
09-16-2006, 04:12 PM
It's empty, not null. It probably hasn't been set.

ItsMeOnly
09-16-2006, 04:27 PM
anyway, check out the result
now just client- and server-side cookie handling, and I'm set

Twey
09-16-2006, 04:34 PM
Found it: document.body.bgColor ... pheeeewww....Outdated property, analogous to <body bgcolor="color">. CSS should be used instead.

ItsMeOnly
09-16-2006, 04:48 PM
Outdated property, analogous to <body bgcolor="color">. CSS should be used instead.
it should, but DOM inspector tells me that Mozilla clears the .style.backgroundColor, and moves it to .bgColor, I'll use these two as conditional statement

ItsMeOnly
09-16-2006, 08:30 PM
Well, testing's over, FF works perfectly well- can anyone help me debug the page for IE now?