Web Analytics Made Easy -
StatCounter 2 buttons to 1 toggle button ? - CodingForum

Announcement

Collapse
No announcement yet.

2 buttons to 1 toggle button ?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 2 buttons to 1 toggle button ?

    Good day to you all,
    here is a question about making a show/hide toggle button instead of two separate button.

    Here is my code :
    Code:
    function hide(li) {
           
      if (document.getElementById)
         document.poppedLayer = eval('document.getElementById(li)');
      else if (document.all)
         document.poppedLayer = eval('document.all[li]');
      else
         document.poppedLayer = eval('document.layers[li]');
      document.poppedLayer.style.display = "none";
    }
    
    function show(li) {
      if (document.getElementById)
         document.poppedLayer = eval('document.getElementById(li)');
      else if (document.all)
         document.poppedLayer = eval('document.all[li]');
      else
         document.poppedLayer = eval('document.layers[li]');
      document.poppedLayer.style.display = "block";
    }

  • #2
    firefox solution
    <script>
    var count=0;
    </script>
    <img src="image.jpg" onclick="javascript:count++;if(count%2==0){this.style.opacity=1}else{this.style.opacity=0}">

    Comment


    • #3
      Using your existing code:-

      Code:
      <img src="togglelImageButton.gif" onclick = "toggle()" >
      
      <script type = "text/javascript">
      var count = 1;
      function toggle(li) {
      count ++;
      if (count%2 == 0) {hide(li)}
      else {show(li)}
      }
      </script>

      "Normally the Pakistani police are armed with rifles and atomic weapons". - Political commentator.
      Last edited by Philip M; Apr 14, 2009, 03:02 AM. Reason: Change 0 to 1 as below

      All the code given in this post has been tested and is intended to address the question asked.
      Unless stated otherwise it is not just a demonstration.

      Comment


      • #4
        try it. when you switch it to display none, you can't get a mouseover

        Comment


        • #5
          but i need my image to change onclick and it didn't work.

          Comment


          • #6
            Not sure what does not work, nor the remark re mouseover, but in my script change
            count = 0 to count = 1 i.e. first click will hide, second click will show etc.

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              not sure to understand the method, sorry, i'm learning, and want to learn.

              I can see that it cont the click and if you can divide the count by 2 then show else hide.

              I have tried this to call the onclick function :


              PHP Code:
                 foreach($folders as $folder) {
                    echo 
              "<li><div class=\"folder\"><img src=\"plus_icon.gif\" onclick=\"toggle('".preg_replace('/\//','_',$dircor."".$folder)."'); return false;\" /><b>".$folder."</b></div>\n"//echo the folder name enclosed in a list item
                      
              dirList($directory.$folder.'/'); //loop through the contents of $folder
                    
              echo "</li>\n"//close this list item after all files and folders in $folder have been looped through 
              and your code in the head section ?

              Comment


              • #8
                Originally posted by Philip M View Post
                Not sure what does not work, nor the remark re mouseover, but in my script change
                count = 0 to count = 1 i.e. first click will hide, second click will show etc.
                once it's gone, you can't click on it again to restore it.
                Code:
                <img id="li" src="image.jpg" onclick = "toggle(this.id)" >
                
                <script type = "text/javascript">
                function hide(li) {
                       
                  if (document.getElementById)
                     document.poppedLayer = eval('document.getElementById(li)');
                  else if (document.all)
                     document.poppedLayer = eval('document.all[li]');
                  else
                     document.poppedLayer = eval('document.layers[li]');
                  document.poppedLayer.style.display = "none";
                }
                
                function show(li) {
                  if (document.getElementById)
                     document.poppedLayer = eval('document.getElementById(li)');
                  else if (document.all)
                     document.poppedLayer = eval('document.all[li]');
                  else
                     document.poppedLayer = eval('document.layers[li]');
                  document.poppedLayer.style.display = "block";
                }
                var count = 1;
                function toggle(li) {
                alert(li)
                count ++;
                if (count%2 == 0) {hide(li)}
                else {show(li)}
                }
                </script>
                what am I missing?

                I used opacity to hid it since it will still be there, but see through so you CAN CLICK on it

                Code:
                <img id="li" src="image.jpg" onclick = "toggle(this.id)" >
                
                <script type = "text/javascript">
                function hide(li) {
                       
                  if (document.getElementById)
                     document.poppedLayer = eval('document.getElementById(li)');
                  else if (document.all)
                     document.poppedLayer = eval('document.all[li]');
                  else
                     document.poppedLayer = eval('document.layers[li]');
                  document.poppedLayer.style.opacity = 0;
                }
                
                function show(li) {
                  if (document.getElementById)
                     document.poppedLayer = eval('document.getElementById(li)');
                  else if (document.all)
                     document.poppedLayer = eval('document.all[li]');
                  else
                     document.poppedLayer = eval('document.layers[li]');
                  document.poppedLayer.style.opacity = 1;
                }
                var count = 1;
                function toggle(li) {
                alert(li)
                count ++;
                if (count%2 == 0) {hide(li)}
                else {show(li)}
                }
                </script>

                Comment


                • #9
                  here's the microsoft opacity filter
                  filter: progidXImageTransform.Microsoft.Alpha(opacity=70);

                  change the number to set
                  Google how to use it. I don't know about Microsoft crap.

                  Comment


                  • #10
                    As I understand it the toggle is to be triggered by a button. In other words, not triggered by clicking on the image itself (which as you say is gone after the first click).

                    Code:
                    <div id = "li">
                    <img src="image.jpg">
                    <input type = "button" id = "but1" value = "Show/Hide This Image" onclick = "toggle()">
                    </div>
                    
                    
                    <script type = "text/javascript">
                    
                    var count = 1;
                    function toggle(li) {
                    count ++;
                    if (count%2 == 0) {hide(li)}
                    else {show(li)}
                    }
                    Last edited by Philip M; Apr 14, 2009, 03:54 AM.

                    All the code given in this post has been tested and is intended to address the question asked.
                    Unless stated otherwise it is not just a demonstration.

                    Comment


                    • #11
                      ahh i misunderstood because of this

                      Good day to you all,
                      here is a question about making a show/hide toggle button instead of two separate button.

                      I guess I've never seen a an image turned off with one button and turned on with another
                      I mistook the objective altogether. My apologies.

                      Comment

                      Working...
                      X