...

View Full Version : JS if...



thoford75
06-02-2009, 12:35 PM
Hi all. Just need a bit of help with my js code. I want my script to display an image/s when a certain text is shown. For example in the following code, when the:

d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;

= (for example) Hex: #AD8D7E

I would like an specific image to be displayed next to "Hex: #AD8D7E"

Also, at times I may need more than one image to be displayed (up to a maximum of 6) Would this be possible?

Here is the rest of the js code atm.

[CODE]function mo(ref) {
a = document.getElementById('disp');
c = document.getElementById('disptx');
a.style.backgroundColor = ref.style.backgroundColor;
c.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}

function cl(ref) {
b = document.getElementById('selc');
d = document.getElementById('selctx');
b.style.backgroundColor = ref.style.backgroundColor;
d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
} [CODE]

venegal
06-02-2009, 01:56 PM
Sure it's possible. Here's some example code:

var imagesToBeShown;
var d = document.getElementById('selctx');

if (d.innerHTML == "Hex: #AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];

for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = imagesToBeShown[i];
img.alt = imagesToBeShown[i];
d.parentNode.insertBefore(img, d.nextSibling);
}

You will want to keep track of the currently showing images in an array, or put them all in a container, so you can remove them easily.

thoford75
06-02-2009, 02:04 PM
You may be able to get a better idea of what i'm after if you take a look at the page in action:

http://tradeflooring-direct.co.uk/play/colourpicker/index.php


Ideas?

venegal
06-02-2009, 02:15 PM
I have a pretty good idea of what you are trying to do. You want to dynamically show a dynamic amount of images, depending on the contents of a DOM element.

What don't you like about the code I gave you?

thoford75
06-02-2009, 02:21 PM
Hey venegal. Yeah the code you game me is great. Just testing it out now. Where will i need to host the image files (i.e '1.jpg', '2.jpg', '3.jpg') would it be possible to display the images in small seperate window?

thoford75
06-02-2009, 02:35 PM
Is my code right?


var imagesToBeShown;
var d = document.getElementById('selctx');

function mo(ref) {
a = document.getElementById('disp');
c = document.getElementById('disptx');
a.style.backgroundColor = ref.style.backgroundColor;
c.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}

function cl(ref) {
b = document.getElementById('selc');
d = document.getElementById('selctx');
b.style.backgroundColor = ref.style.backgroundColor;
d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;



}



if (d.innerHTML == "Hex: #AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];

for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = pics[i];
img.alt = pics[i];
d.parentNode.insertBefore(img, d.nextSibling);
}

venegal
06-02-2009, 02:35 PM
The way the code is right now, those images will be looked for in the same folder in which your html resides. Of couse you can put them in a subfolder and use img.src = "subfolderName/" + pics[i];
.

The code I gave you shows the images by manipulating the DOM. If you want the images to show in a seperate window, it's a much better idea to use a server side language, i.e. send a request containing the hex code to, say, PHP, and let it knit together a new page containing the appropriate images.

venegal
06-02-2009, 02:45 PM
It's only example code, mind you. You will have to initialize imagesToBeShown to some standard value to account for the fact that d.innerHTML might not match any of your conditions. And I forgot to change a variable when renaming them to more descriptive ones.

This should give you a working example:


var imagesToBeShown = [];
var d = document.getElementById('selctx');

function mo(ref) {
a = document.getElementById('disp');
c = document.getElementById('disptx');
a.style.backgroundColor = ref.style.backgroundColor;
c.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}

function cl(ref) {
b = document.getElementById('selc');
d = document.getElementById('selctx');
b.style.backgroundColor = ref.style.backgroundColor;
d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}

if (d.innerHTML == "Hex: #AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];

for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = imagesToBeShown[i];
img.alt = imagesToBeShown[i];
d.parentNode.insertBefore(img, d.nextSibling);
}

If you decide to do it with DOM manipulation, you will of course have to style those new image via CSS. And if you want to make the whole thing dynamic (no new page requests), you will have to add some code for removing those images before adding the new ones.

thoford75
06-02-2009, 02:49 PM
Im using php to script my code. The idea in the long run when i figure out how to get the image showing next to "Hex: #AD8D7E" (eg) is to use mysql database which contains 1000s of ranges of carpets. i have added a "hexcode" field in the database and will hope to do a lookup of the database to find the required fielddata and then in turn the image. :/

thoford75
06-02-2009, 02:54 PM
It's only example code, mind you. You will have to initialize imagesToBeShown to some standard value to account for the fact that d.innerHTML might not match any of your conditions.

How do I initialise the 'imagesToBeShown'

venegal
06-02-2009, 03:09 PM
I see. If you don't want to reload the page after the user selects a color, you will have to use ajax, let PHP return the appropriate images (preferably using JSON) and use the DOM manipulation stuff above in order to show them.

If page reloading is not a problem for you, you can just let PHP echo out those images in the appropriate place.

Do you already have an idea how to populate that hexcode database field? It's probably not a trivial task to calculate the average/dominating/[looks similar to the human eye] color of each carpet, and the right color offset tolerance.

venegal
06-02-2009, 03:11 PM
If the standard image to be shown if no matches occurred is named 'noImagesFound.jpg', you just put var imagesToBeShown = ['noImagesFound.jpg']; up there, which will be overwritten later on in the conditions, should there have been a color match.

thoford75
06-02-2009, 03:16 PM
Can you explain JSON to me please? Haven't used that before.

Basically i'm going to update the hexcode database manually (guessing will have to use an array somehow to store numerous codes?) not to sure about the colour offset as of yet... thats the last task to work on i hope! :)

venegal
06-02-2009, 03:50 PM
Sure. JSON is just Javascript object literals put in strings. That makes it very easy to work with, because all you have to do is eval it in order get back the underlying object.

For example, if you got the following PHP array

$imagesToBeShown = array('1.jpg', '2.jpg', '3.jpg');
then

$jsonString = json_encode($imagesToBeShown);
will give you a string containing ["1.jpg","2.jpg","3.jpg"].

In Javascript, after using some ajaxy stuff in order to get that string into var jsonString, you just use

var imagesToBeShown = eval('(' + jsonString + ')');
and, voilą, you converted your PHP array into a Javascript one.
(Of course you should only use the eval notation when the source is trusted, which is the case here.)

As for the manually updating the hexcode database, how exactly are you planning on converting a carpet into a single hexcode (or several, for that matter)?

thoford75
06-02-2009, 04:02 PM
Super, ill try to get my head around that and impliment it into the code somehow :)

Regarding the hexcode database, im planning on manually entering the hexcode returned from palatte generator into the hexcode field for each individual carpet. I then want the js to lookup the database and try to find the 3 closest matches to the d.innerHTML = "Hex: " + ref.innerHTML;

thoford75
06-02-2009, 04:28 PM
Sure. JSON is just Javascript object literals put in strings. That makes it very easy to work with, because all you have to do is eval it in order get back the underlying object.

For example, if you got the following PHP array

$imagesToBeShown = array('1.jpg', '2.jpg', '3.jpg');
then

$jsonString = json_encode($imagesToBeShown);
will give you a string containing ["1.jpg","2.jpg","3.jpg"].

In Javascript, after using some ajaxy stuff in order to get that string into var jsonString, you just use

var imagesToBeShown = eval('(' + jsonString + ')');
and, voilą, you converted your PHP array into a Javascript one.
(Of course you should only use the eval notation when the source is trusted, which is the case here.)


How would I format this into the current code I have?

venegal
06-02-2009, 04:36 PM
Well I'm sure there are either PHP palette generators, or palette generators that provide an api, or palette generators you can automate to give you a list which you can then parse. Even using an online palette generator via curl and then screenscraping the results would be better than manually entering thousands of values.

As for the finding the 3 closest matches part: I would use a seperate table to store all the colors the palette generator generates from your images, and a join table to associate them with your carpets. Given a hexcode, that will make it very easy to retrieve the appropriate carpets.

Although mysql supports hex values, I'd store the rgb values seperately in the color table, because otherwise you will probably have to do the offset calculations in a mysql query instead of PHP.

venegal
06-02-2009, 04:39 PM
How would I format this into the current code I have?

Well I know nothing about your server side code.

The Javascript line you can put in as is, but before you have to get that jsonString via ajax. You will probably want to use some sort of framework for that, because doing those requests in vanilla Javascript can be quite tedious.

So, there's really not much I can tell you at this point.

thoford75
06-02-2009, 04:40 PM
Well I'm sure there are either PHP palette generators, or palette generators that provide an api, or palette generators you can automate to give you a list which you can then parse. Even using an online palette generator via curl and then screenscraping the results would be better than manually entering thousands of values.

As for the finding the 3 closest matches part: I would use a seperate table to store all the colors the palette generator generates from your images, and a join table to associate them with your carpets. Given a hexcode, that will make it very easy retrieve the appropriate carpets.

Although mysql supports hex values, I'd store the rgb values seperately in the color table, because otherwise you will probably have to do the offset calculations in a mysql query instead of PHP.


Ouch, my head hurts :o

Going back to the PHP and the JS code, I still cant get the script to work :( i've updated the page. Can you see what i'm missing?

thoford75
06-02-2009, 04:57 PM
Attached a zip file containing php and js code.

venegal
06-02-2009, 05:20 PM
Oh, I'm sorry, I didn't realize the site you linked to before was yours, I thought that was just an example. If I had realized before, I would have helped you out in greater detail.

There are several problems with your implementation:
First of all, remove that code within the <script> tags. Putting it inside the funcs.js suffices.
Evaluating the innerHTML of the element with the id 'selctx' won't do, because there's a <span> nested inside.
Just putting the code somewhere in there doesn't suffice, it will be called only once, but you want it to be called every time a color is selected. So, put it in a function, which you call from the cl function.

All in all, putting the following code inside func.js will work:

function getPics(){
var imagesToBeShown = [];
var d = document.getElementById('selctx').childNodes[1];
if (d.innerHTML == "#AD8D7E") imagesToBeShown = ['1.jpg', '2.jpg', '3.jpg'];
for (var i = 0; i < imagesToBeShown.length; i++) {
var img = document.createElement('img');
img.src = imagesToBeShown[i];
img.alt = imagesToBeShown[i];
d.parentNode.insertBefore(img, d.nextSibling);
}
}

function mo(ref) {
a = document.getElementById('disp');
c = document.getElementById('disptx');
a.style.backgroundColor = ref.style.backgroundColor;
c.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
}

function cl(ref) {
b = document.getElementById('selc');
d = document.getElementById('selctx');
b.style.backgroundColor = ref.style.backgroundColor;
d.innerHTML = "Hex: " + ref.innerHTML; // + " " + ref.style.backgroundColor;
getPics();
}

Just make sure the color you're clicking does indeed match the one hardcoded inside that snippet.

thoford75
06-02-2009, 05:27 PM
Brilliant,Brilliant,Brilliant!

Now ive got to move on to finding a way to show other carpets :)

Then finally the database can be attempted :/

thoford75
06-03-2009, 10:04 AM
Morning people!

Moving on to part two now! [Reference: http://tradeflooring-direct.co.uk/play/colourpicker/index.php ]

Any ideas on how link this in with a sql database? ... I have database with a column "hexcode" that contains the most predominant hex colour in. I want the colour picker to search the database for the selected "hexcode" and display 3 different result images. If the colour picker can not find 3 exact matches i would need the app to find the nearest match (say within 10% tollerence i.e. a hex code of #816655 == #816650 - #816660) What are your thoughts on this??

venegal
06-03-2009, 11:51 AM
First of all, please remove the javascript between the script tags. It has a src, so those lines won't even be executed. And the code is wrong and just does not belong there.

As for the database, please give the design I described in post #17 another thought. Your problem is the following: color hex codes don't work the way you think they do. A symmectrical interval around 55 is not 50-60 but 50-5A. And more importantly, those color codes are not one big number, they are three: the first two digits are the red value, second two green, third two blue (the interval you are giving in your example is only on the blue scale).

So the calculation of the interval and ordering results by color similarity is obviously more complex than your example, and my point here is the following: you can't do that stuff in PHP, you have to do it in a MySQL query, and with the simplistic database design you propose, those queries are going to be very convoluted.

Storing those three color values seperately makes translating the similarity logic to sql much easier, and you can also store other attributes with each color that are easier to calculate in PHP than in SQL, e.g. brightness and saturation, which might come in handy when trying to match. And the relational design with a join table makes it much more flexible, should you ever decide to store more than one color per entry (which I'm pretty sure you will, since the one dominant color won't always suffice to find a good match).

thoford75
06-03-2009, 12:08 PM
Right. begining to understand the rgb thing now. I'm guessing the best way will be to create 3 fields in the database? red/blue/green code. I can do that no problem. The part im struggling on is linking the mysql database to the app to perform a lookup. If i use the three fields which i have called "redcode" "bluecode" and "greencode" how do i perform a lookup?

venegal
06-03-2009, 04:55 PM
Well I don't think that's the best way. It's a good start, but I don't believe it will suffice. You don't seem to like the idea of storing the colors in a different table, and that's ok if you are absolutely sure you won't ever have carpets with two or more dominating colors. I don't think rgb values alone will suffice though.

Suppose the user inputs a certain hex value, like #ff0000, which is a very bright red. Just summing up the difference for each color, something like #ff0060, which is a very bright pink, will be a better match than #800000, which is a darker red. So ideally you would save the rgb values in a brightness-normalized form, and the brightness itself in an extra field. And I'm sure there are other values important for perceived color similarity, that you might want to store in seperate fields in order to be able to achieve good matches.

Now, to your database troubles: Have you already tried something? What didn't work? Maybe show some code -- that makes helping you easier.

And if you don't mind me asking: Are you the owner of that carpet store and try to save a buck on web development by doing it yourself? It seems you don't have all that much experience and that you are in a bit over your head.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum