www.webdeveloper.com
Results 1 to 11 of 11

Thread: array logical toggle teaser

  1. #1
    Join Date
    Aug 2008
    Posts
    15

    array logical toggle teaser

    I have a set of tiles and want to toggle their colour onclick
    My classes are simply .a .b etc.
    Code:
    var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
    var colorNew = ['j','i','h','g','f','e','d','c','b','a'];
    
    $.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });
    The obvious bug is start a>j then j>a at end. Ditto e>f>e
    I confess logic is not my strength and I can't see what's wrong but, from an aesthetic point of view the mix just looks yuk.
    If you want to play about here is my minified class sample:
    Code:
    <style>.a {background-color:#F00}.b {background-color:#F80}.c {background-color:#FF0}.d {background-color:#0F0}.e {background-color:#0F8}.f {background-color:#0FF}.g {background-color:#08F}.h {background-color:#00F}.i {background-color:#F0F}.j {background-color:#F08}TD {width:10%;height: 111px;text-align:center;font-family:sans-serif}</style><table width=70%><TR><TD class=a>A</TD><TD class=b>B</TD><TD class=c>C</TD><TD class=d>D</TD><TD class=e>E</TD><TD class=f>F</TD><TD class=g>G</TD><TD class=h>H</TD><TD class=i>I</TD><TD class=j>J</TD></TR></table>
    The basic code works I am just trying for a bit more colour pizzazz mix.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    If the elements of your arrays colorOld and colorNew represent CSS class names then everything should be working just fine.
    The "each" function is for DOM looping.
    YOu can simply using a "for" loop:

    var n=colorOld.length,
    m=colorNew.length;
    for(var i=0; i<n; i++){
    if(n<=m){
    $('.'+colorOld[i]).toggleClass(colorNew[i]);
    }
    }

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb Alternate (?) solution...

    From your initial description, I'm not sure what the purpose of the loop is.
    Typically toggle means to swap states back and forth.

    Based on that analysis, this is my solution to your problem without the use of classes.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    <style>
     #divWrapper div { width:7%; height:111px; text-align:center; font-family:sans-serif; float:left; }
    </style>
    
    </head>
    <body>
     <div id="divWrapper">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">E</div>
      <div id="f">F</div>
      <div id="g">G</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
     </div>
    
    <script type="text/javascript">
    // Modified from: http://www.webdeveloper.com/forum/showthread.php?283055-array-logical-toggle-teaser
    
    var colorOld = ['#F00','#F80','#FF0','#0F0','#0F8','#0FF','#08F','#00F','#F0F','#F08'];
    var colorIDSold = 'abcdefghij';
    var colorIDSnew = 'jihgfedcba';
    
    function toggleColor(oID) {
      var oIDptr = colorIDSold.indexOf(oID);      // get current ID pointer
      var nID = colorIDSnew[oIDptr];              // form new ID
    
    // swap colors
      var ccolor = document.getElementById(oID).style.backgroundColor;
      var ncolor = document.getElementById(nID).style.backgroundColor;
      document.getElementById(oID).style.backgroundColor = ncolor;
      document.getElementById(nID).style.backgroundColor = ccolor;
    }
    
    window.onload = function() {
      var sel = document.getElementById('divWrapper').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        sel[i].onclick = function() { toggleColor(this.id); } 
        sel[i].style.backgroundColor = colorOld[i];
      }
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Avoid cross-posting to other forums as you may get conflicting answers...
    See: http://www.codingforums.com/showthre...53#post1354153

  5. #5
    Join Date
    Aug 2008
    Posts
    15

    more fuller

    @JMRKER
    thanks for the long reply - especially considering my 'transgression' [grin]
    I should have been more clear. The aim is to change colour on all color-divs on clicking another div

    @holyhttp
    >> then everything should be working just fine.
    Yes, correct. I am sorry if I wasn't more clear. My last line above...
    "The basic code works I am just trying for a bit more colour pizzazz mix. "

    The question is one of logic - "I confess logic is not my strength..."

    How to click one dixX and have the colour change in ALL color-divs - likely 50 to 100

    Just to give you the scenario- using jquery Masonry Isotope. Building a language dictionary. The literal case here is toggling between English and x-language to give a colour change for all current word definition tiles.
    We have:
    Code:
    $("#toggleLang").click(function () {
    $.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });
    ... }
    Language... and me with this pain in all the diodes down my left side

    any logic help appreciated.
    Last edited by arfa; 08-27-2013 at 05:10 PM. Reason: typo

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question

    Quote Originally Posted by arfa View Post
    @JMRKER
    thanks for the long reply - especially considering my 'transgression' [grin]
    I should have been more clear. The aim is to change colour on all color-divs on clicking another div
    ...

    So how are ALL colors to change?
    Do the colors rotate in sequence? Forward or backward?
    Are the new colors to be randomly assigned?

    My guess was to swap the colors for the DIV selected with the opposite box in the delay sequence. What is/was your original intent?

  7. #7
    Join Date
    Aug 2008
    Posts
    15
    Thanks for persisting.

    Not so much how the colours change - sequence, random, etc. - but that they go from one colour to a different colour. The change is purely a user indication of mode-shift; English>LangX>English. Just a visual cue. It doesn't even have to be a consistent change back and forth. For sure I've a more design brain than code cortex.

    The 'problem' with my loop is that it just swaps, and makes no allowance for duplicates. The result is an unbalanced mix.

    as per my original post.
    Code:
    var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
    var colorNew = ['j','i','h','g','f','e','d','c','b','a'];
    a goes to j
    then, at end, (new) j goes back to a - plus original j goes to a
    Ditto e>f>e

    I have tried various array mixes but -clearly haven't found a happy balance. I imagine that there is some (simple?) way to be sure that each original color becomes an exclusively new color. As the word-tiles will be initially randomly assigned class (and then sorted, split by group, etc.) there is no way of totally insuring that two adjacent tiles aren't the same. C'est la vie.

    I hope this makes it more clear?

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question

    Quote Originally Posted by arfa View Post
    Thanks for persisting.
    ...
    I hope this makes it more clear?
    Not really, but I'll try once again...

    Based upon your assignments of:
    Code:
    var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
    var colorNew = ['j','i','h','g','f','e','d','c','b','a'];
    Each of the following are questions about your logic needs...
    1. When you click the first box color 'a' you want it to change to box color 'j'?
    2. When you click the first box AGAIN, you want it to change back to box color 'a'?
    3. What is to happen if you do #1 and then click the ('j'?) changed box? Does it change to 'a' or 'j'?

    Randomly assigning the initial display, colorOld, is not a problem,
    but it might effect the second array, colorNew,
    if it too is a random match to the assignment from the colorOld array.
    So are the arrays colorOld and colorNew linked when randomized or are they independent variables?

    I can guess you needs all night, but it would be much faster if you would specify your design requirement.
    Specifically set up a click sequence that would give you the changes you require so we can see what should happen
    when you perform a pre-determined sequence of DIV box clicks.
    What you have specified in your postings does not make sense to me, hence the repeated requests for clarification!

  9. #9
    Join Date
    Aug 2008
    Posts
    15
    Yes, an example could have saved 1000 words.
    colorToggle.html
    Click 'English' and the tiles change - using my current swap routine:
    Code:
    $.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });
    1st click = 2 pinks and a predominance of blues.
    2nd click gives little change.
    3rd click is back to original.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question

    OK, I assume the 1st, 2nd and 3rd click you are talking about is on the word 'English'.
    I see that effect on the color boxes.
    Works fine as is in the link.

    So now what do you want to change? What is supposed to happen after the above. Why is what you have not what you want?

  11. #11
    Join Date
    Aug 2008
    Posts
    15
    Yes, your assumption about my statement "Click 'English' and the tiles change.. " in my previous post is correct.

    My post: 08-26-2013, 07:39 PM and again Yesterday 07:50 PM ...
    a goes to j
    then, at end, (new) j goes back to a - plus original j goes to a
    Ditto e>f>e
    So, 1st click [on 'English'] = 2 pinks and a predominance of blues.
    There is duplication - non-variance.

    My post: Yesterday 07:50 PM...
    I imagine that there is some (simple?) way to be sure that each original color becomes an exclusively new color.
    getting there...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles