Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: JS if...

  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts

    JS if...

    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]

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Sure it's possible. Here's some example code:
    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.
    Last edited by venegal; 06-02-2009 at 02:39 PM.

  • Users who have thanked venegal for this post:

    thoford75 (06-02-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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/pl...cker/index.php


    Ideas?

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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);
    }

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    thoford75 (06-02-2009)

  • #8
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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:

    Code:
    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.
    Last edited by venegal; 06-02-2009 at 02:48 PM.

  • Users who have thanked venegal for this post:

    thoford75 (06-02-2009)

  • #9
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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. :/

  • #10
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by venegal View Post
    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'

  • #11
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #12
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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!

  • #14
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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
    PHP Code:
    $imagesToBeShown = array('1.jpg''2.jpg''3.jpg'); 
    then
    PHP Code:
    $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
    Code:
    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)?

  • Users who have thanked venegal for this post:

    thoford75 (06-02-2009)

  • #15
    Regular Coder
    Join Date
    Jan 2007
    Posts
    154
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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;


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •