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 28
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts

    one last button toggling question

    Hi,

    I have two excellent pieces of code (thanks Old Pedant and jmrker) that I am trying to get to talk to each other. Basically I want to achieve the same button effect as here

    but with a group of buttons that get produced from xml via innerhtml.

    here's the code I'm using to create the buttons:
    Code:
    sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="label">' + label + '</div><div id="bus"><button onclick="startCar(this,' + poly_num + ')" style="height:24px; width:30px"> <img id=this,"pauseBtn" src="play2.png" ></button></div><br>';
    and here's the code that attempts to toggle them between the play and pause symbol:

    Code:
    function startCar(btn,pnum,poly_num){
    if (this.wasRun)
     { 
    btnAction();
    } else {
    if( !this.wasRun )
    
    toggleRun(btn, pnum);
    btnAction();
    this.wasRun = true;
    }
    }
    	  
    function toggleRun(btn, pnum){
       var inps = document.getElementsByTagName("input"); 
    for ( var i = 0; i < inps.length; ++i ) {
            var inp = inps[i];
            if ( inp.value = "play2.png" ) inp.value = "pause2.png";
        }
    startAnimation(pnum);
    }
     
    function btnAction() {
      var currentBtn = document.getElementById('pauseBtn').src;
      var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
      var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
    
      if (paused == true){
        paused=false;
        if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
       setTimeout("animate("+(continueStep)+")", tick); 
      } else {
        paused=true;
        if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
      
      }
    }
    The page I'm working on is here

    Everything works as it should except for the toggling between images.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You do know there is a bug in "main.js" don't you?

    Firebug reports that in the line
    Code:
    l.Nb=function(a){return new N(this.j[a].lat(),this.j[a].lng())};
    that this.j[a] is undefined.

    You've got several bugs in the HTML.

    You have
    Code:
    <div id="category">
    <div id="label">
    <div id="bus">
    *REPEATED* for each of the routes. You should never give the same id to more than on object. Better, maybe, would have been to use classes instead of ids, if the purpose is to allow CSS styling.

    And you have the same problem with your <img> tags. But worse.

    You have
    Code:
         <img id="this,"pauseBtn"" ... />
    for *all* of them.

    So first of all, the *ACTUAL* ID of each as seen by HTML and thus by JS is simply
    Code:
        <img id="this," ... />
    HTML has no idea what to do with the bogus pauseBtn"" and just throws it away.

    But in any case, there is no way for JS to *UNIQUELY* identify any of those <img> tags, since they all have the same ID!!! So of course it can't do anything with them.

    I have to ask why you used
    Code:
    <button ...>
        <img ...>
    </button>
    in the first place.

    If you had simply used
    Code:
    <input type="image" src="play.png" onclick="startBus(this,0); return false;" />
    Then your startBus function could be written something like this;
    Code:
    function startBus( inp, num )
    {
       inp.src = "pause.png"; // see?  no id needed!!!
       ...
    Okay? That's just for starters.

    Having said all that: I am very impressed with the overall concept of what you have done, and I really hope you can figure out how to get the restart to work. But it may be that the bug in the "main.js" will prevent you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    You do know there is a bug in "main.js" don't you?
    yes I do, but I'm guessing that being that I don't get it when the codes are working separately (here and here) that this is a problem that arises from trying to combine them...

    You should never give the same id to more than on object. Better, maybe, would have been to use classes instead of ids, if the purpose is to allow CSS styling.
    I'll give that a try, thanks. I have even less experience with CSS than I do with js

    And you have the same problem with your <img> tags. But worse.
    I see what you're saying here, and thanks for pointing it out. I'm guessing (without having tried it yet) that I can give them unique IDs by assigning them the poly_num variable that gets assigned to everything else...

    I have to ask why you used
    Code:
    <button ...>
        <img ...>
    </button>
    in the first place.
    just lazy I guess - I wanted to use a button there and it seemed easier to use all the built-in functions (mouseover, mouseout, blahblah) of calling it a button rather than using an image and then having to assign all that stuff. But if the above doesn't work, I'll give your suggestion a go.

    That's just for starters.
    That's probably enough to go on for now

    I really hope you can figure out how to get the restart to work. But it may be that the bug in the "main.js" will prevent you.
    Like I say, I think that bug will disappear once I get the above sorted. I've pretty much given up on finding a restart function. People who know far more about this stuff than I ever will appear to be stumped. Or disinterested. Or both. I've tried the Javascript forums and the google maps forums - it just seems to be one of those questions that's destined to fall between the gaps
    Thanks once again for the pointers.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I wanted to use a button there and it seemed easier to use all the built-in functions (mouseover, mouseout, blahblah) of calling it a button rather than using an image and then having to assign all that stuff.
    HUH???

    Those all exist for <input> of *any* kind, most certainly including <input type=image>. None of them happen automagically, though. <button> or <input>, you have to supply them yourself.

    Am I misunderstanding you????
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    Am I misunderstanding you????
    A little. It's just that with the button they do happen automagically, whereas with the input image you have to code it all yourself (the way I understand it).

    Anyway. poly_num as a button ID seemed not to work so I'm going with your suggestion. I think I'm a little lost, though. Are you saying that the sidebarhtml should be this:

    Code:
    sidebar_html += '<div class="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div class="label">' + label + '</div><div class="bus"><input type="image" src="play2.png" onclick="startCar(this,0); return false;" style="height:24px; width:30px"></div><br>';
    and the other functions be like this:

    Code:
    function startCar(btn,pnum){
    if (this.wasRun)
     { 
    btnAction();
    } else {
    if( !this.wasRun )
    
    toggleRun(btn, pnum);
    btnAction();
    this.wasRun = true;
    }
    }
    	  
    function toggleRun(btn, pnum){
    btn.src = "pause2.png";
       var inps = document.getElementsByTagName("input"); 
    for ( var i = 0; i < inps.length; ++i ) {
            var inp = inps[i];
            if ( inp.value = "play2.png" ) inp.value = "pause2.png";
        }
    startAnimation(pnum);
    }
     
    function btnAction() {
      var currentBtn = document.getElementById('pauseBtn').src;
      var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
      var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
    
      if (paused == true){
        paused=false;
        if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
       setTimeout("animate("+(continueStep)+")", tick); 
      } else {
        paused=true;
        if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
      
      }
    }
    ?

    obviously not, cos that results in this

    (not worried about css styling at the mo'...)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    No, this kind of stuff isn't going to work:
    Code:
     var currentBtn = document.getElementById('pauseBtn').src;
    You have *THREE* buttons, and they can't *ALL* have an id of "pauseBtn"!

    There are probably other errors, but clearly that's the kind of thing you have to avoid.

    Let me try to rewrite your code so it is readable and then let's see what we can do to it:
    Code:
    sidebar_html += 
        '<div class="category">'
      +     '<input type="checkbox" id="'+category+'" '
      +           ' onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');">'
      + '</div>'
      + '<div class="label">' + label + '</div>'
      + '<div class="bus">'
      +     '<input type="image" src="play2.png" onclick="startCar(this,0); return false;" '
      +           ' style="height:24px; width:30px">'
      + '</div>'
      + '<br>';
    Hmmmm....

    Okay, so I will have to go look at when boxclick() looks like. Why does it need to pass anything but poly_num??

    And what is the value of category?? Where does that come from?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    boxclick (from the way I understand it) is the function that gets the lines and the arrows on the screen when a box is checked.

    category is an xml attribute that is shared by the lines and the arrows, so when you show a line with a certain category, all the arrows that share that particular category are shown, too.

    there are probably much easier ways to do all this stuff, but this is the way it came together, just muddling through...

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    No, this kind of stuff isn't going to work:
    Code:
     var currentBtn = document.getElementById('pauseBtn').src;
    You have *THREE* buttons, and they can't *ALL* have an id of "pauseBtn"!
    ... which was why I thought that img id="pauseBtn'+poly_num+'" might fly...

    but trying it out here gets me a "document.getElementById("pauseBtn" + poly_num) is null" error on the var currentBtn line...

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Okay, first simplification:
    Code:
    function boxclick( box, poly_num) {
        if (box.checked) {
            show( box.id );
    	gpolys[poly_num].show();
        } else {
            hide( box.id );
            gpolys[poly_num].hide();
        }
    }
    No reason to pass the category when the id of the checkbox is the same as the category.

    Alternatively, pass the category but get rid of the id on the checkbox. What other purpose is it serving?

    But let's concentrate on the play button click.

    So when it is clicked on, you want to change it to "pause2.png", right? And when clicked on again, it goes to "play2.png". Etc.

    And when the route is finished then *ALL* the buttons get changed to "Reload"??? Where's the image for that?

    Here is the part I *REALLY REALLY REALLY* don't get:
    Code:
    function startCar(btn,pnum){
        if (this.wasRun)
        { 
            btnAction();
        } else {
            if( !this.wasRun )
                 toggleRun(btn, pnum);
            btnAction();
            this.wasRun = true;
        }
    }
    (a) WHAT in the heck is this here???? THERE WON'T BE any this that I can see! Okay, I just verified that with FireBug. Indeed, this refers to the ENTIRE WINDOW at that point. So I guess it doesn't hurt, but it sure is confusing!
    (b) First you do if (this.wasRun) and then you do else { if ( ! this.wasRun ) ...
    Ummm...if the first if was false, then you get to the else, where *BY DEFINITION* this.wasRun *WILL* be false!!!! There is no point at all in checking it again.

    **********

    My head hurts. I'm still digging.

    But no matter what, your function btnAction() { is just trash. It can't possibly work.
    The very first line there
    Code:
    var currentBtn = document.getElementById('pauseBtn').src;
    gets an error and so the rest of the function never runs.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    My head hurts more. It turns out that wasRun is NEVER DEFINED! The only place it exists is inside that startCar() function.

    At least, I can't find it any place else.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I'm going to take a stab at this.

    I want to replace *ALL* of your code for
    Code:
    function startCar(btn,pnum){
    function toggleRun(btn, pnum){
    function btnAction() {
    function togglePause(){
    I'll leave the checkbox stuff alone, for now.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    My head hurts more.
    ha! welcome to my world.

    that whole wasrun function is all about getting the first click on the play button to start the startAnimation function and then any subsequent clicks to be either pause or plays (because remember firing the startAnimation function again gives undesired results).

    you can see it working fine here

    although (again) there's probably a much more elegant way to do that.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Okay...here is my stab at it:
    Code:
    // runState can have 4 values:
    // 0 -- never started
    // 1 -- running
    // 2 -- paused
    // 3 -- ended
    //
    var runState = 0; 
    
    
    function playPause( btn, pnum )
    {
        // regardless of everything else, when ANY button is clicked on
        // it disables and hides all other buttons.
        var side = document.getElementById("sidebar");
        var inps = side.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            var inp = inps[i];
            if ( inp.type == "image" && inp != btn )
            {
                // if it's an image button and not the one clicked on...
                inp.style.display = "none"; // make it go away!!
            }
        }
        // okay, now... what is the runState?
        switch( runState )
        {
            case 0: /* never has been run before */
                // use replace on btn.src so path of image stays same..
                // only play ==>> pause
                btn.src = btn.src.replace(/play/,"pause");
                runState = 1; // we start running
                paused = false;
                startAnimation(pnum); // and start the animation
                break;
            case 1: /* already running...so pause it */
                // use replace on btn.src so path of image stays same..
                btn.src = btn.src.replace(/pause/,"play");
                runstate = 2; 
                paused = true;
                break;
            case 2: /* paused, so unpause */
                // use replace on btn.src so path of image stays same..
                btn.src = btn.src.replace(/play/,"pause");
                runstate = 1;
                paused = false;
                animate(continueStep); // and continue where we left off
                break;
            case 3: /* animation has ended */
                location.reload(); // force a reload of the page
                return false;
            default:
                alert("Invalid runState!");
        }
    }
    
    *********
    
    sidebar_html += 
        '<div class="category">'
      +     '<input type="checkbox" ' /* no reason for id on this */
      +           ' onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');">'
      + '</div>'
      + '<div class="label">' + label + '</div>'
      + '<div class="bus">'
      +     '<input type="image" src="play2.png" '
      +           ' onclick="playPause(this,' + poly_num " '); return false;" '
      +           ' style="height:24px; width:30px">' /* style should be in css not here! */
      + '</div>'
      + '<br>';
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    xelawho (12-16-2010)

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    I'm going to take a stab at this.

    I want to replace *ALL* of your code for...
    really? wouldn't it just be simpler to get the buttons to toggle here?

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay...here is my stab at it:
    ups. you beat me to it. back in a minute...


  •  
    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
    •