www.webdeveloper.com
Results 1 to 14 of 14

Thread: Need help with a simple script

  1. #1
    Join Date
    Feb 2013
    Posts
    15

    Question Need help with a simple script

    Hello everybody, new to this forums.

    Appreciated, if youīd take a minute out of your time to help me with a relatively small ( hopefully ) issue, I just canīt get my head wrapped around.

    As you may see from my code I am relatively new at coding Jscript, however I think I got the basics right.

    Now, what I am trying to do is coloring a named TD-element ( in the case below itīs called "td_teles_c5" ). The HTML Code for the TD Element looks like this:

    HTML Code:
    <td id="td_teles_c5">
    <!-- Teles C5 -->
    <a href="javascript:void(0)" onclick="toggle_div('teles_c5','toggle');"><img src="img/bg_main/teles_logo_c5_125_80.png"></a>
    </td>
    So a click on the link toggles the corresponding DIV element ( "teles_c5" in this example ) either open or close, which works perfectly.

    The toggling code looks like this:

    Code:
    function toggle_div(div_id,status)
    {
    	if (div_id=='all')
    	{
    		var el=document.getElementsByTagName('div');
    		for (var i=0;i<el.length;i++)
    		{
    			if (el[i].id!=='div_navigation')
    			{
    				document.getElementById(el[i].id).style.display=status;
    
    				if (status='none') 
    					{ set_color_of_div(el[i].id,'off'); }
    				else 
    					{ set_color_of_div(el[i].id,'color');  }
    			}
    		}
    	}
    	else if (status=='toggle') 
    	{
    		document.getElementById(div_id).style.display = (document.getElementById(div_id).style.display=='block') ? 'none' : 'block';
    		
    		if (document.getElementById(div_id).style.display=='block') 
    			{ set_color_of_div(div_id,'color'); }
    		else
    			{ set_color_of_div(div_id,'off'); }
    	}
    	else
    	{
    		document.getElementById(div_id).style.display=status;
    		
    		if (status='none') 
    			{ set_color_of_div(div_id,'off'); }
    		else 
    			{ set_color_of_div(div_id,'color');  }
    	}
    }
    
    function set_color_of_div(div_id,color)
    {
    	alert ('switchting td_'+div_id+' to '+color);
    	// document.getElementById('td_'+div_id).style.backgroundColor='red';
    }
    Now, here are my questions:
    1) Is adressing the TD element via getElementById the correct way? I suppose not, since I fail to set the TD backgroundcolor.

    2) As you can see, toggle_div contains three actions. It can toggle elements, it can switch on/off elements and it can grock through all elements and make them either appear or disapper.

    Now the "all" function works only, when I remove the calls to "set_color_of_div". When "set_color" is called, what happens is that I see 8 times ( the number of DIVs I have currently ) the alert Window with correct values for div_id and color, but only the first DIV element is actually toggled, whilst the other 7 stay closed. Why is that? What can I do to fix this?

    I sincerely hope I explained clearly what I am trying to do and what fails.

    Looking forward to any helpful input.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Question

    Couple of questions...

    1. Do you have the rest of the HTML code to test the JS against? Either post it here or provide a live link.
    Difficult to replicate your problem without some sample code of the problem.

    2. Are you trying the change the background color of the <td> with the image displayed?
    If yes, the image background is not controlled by JS. It is a function of the image displayed.

  3. #3
    Join Date
    Feb 2013
    Posts
    15
    Hi there.

    Thanks for your interest in helping me out. I know, it does not count for much but thank you - I feel pretty stupid at this point for not figuring this out and need a push into the right direction to solve it.

    I uploaded a zip file containing a modified version of the index.php ( replaced the links with localhost links ), keeping the DIV structure intact and also included a current version of the jscript, for convenience. not included is the refer.ph mentioned, as it is no needed as well as the user-data entries ( deactivated ) since also irrelevant.

    As usual, the normal safety rules like virusscan, etc. should apply, but for what itīs worth, I think my host is virusfree.

    http://wraith-node.de/upload/src/project.zip

  4. #4
    Join Date
    Feb 2013
    Posts
    15
    Forgot to answer to question 2)

    No, I only want to control the background color fo the TD. The TD Elements are a little bit bigger than the 128x128 pixel PNGīs thus leaving a nicely colored border for ease of orientation on the page.

  5. #5
    Join Date
    Feb 2013
    Posts
    15
    Ok, i found some minor syntax errors in the javascript ( one wrong comparison "=" instead of "==" ) and a wrongly placed "{" but the Jscript debugging console isnīt showing anymore errors and still I have the beforementioned errors.

    Just reuploading the corrected jscript file.

    -> http://wraith-node.de/upload/src/toggle_view.js

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

    Lightbulb

    Cannot see your CSS or images as the URL to access is not supplied.
    Know very little PHP so you'll need to evaluate that area as it is un-testable as provided.
    Note some comments in your code about the links. Also 'javascript:void(0)' is deprecated, so note changes
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?272577-Need-help-with-a-simple-script&daysprune=30 -->
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SND Navigation</title>
    
    <!-- // CSS not provided
    <link href="default.css" rel="stylesheet" type="text/css" />
         // JS provided inline below
    script src="toggle_view.js" type="text/javascript"></script>
    -->
    
    <?php // require_once('read_user_data.php'); ?>
    </head>
    
    <body>
    <div id="div_navigation">
     <table><tr>
      <td id="td_teles_c5">
    <!-- Teles C5 -->
       <a href="#" onclick="toggle_div('teles_c5','toggle');return false">
       <img src="img/bg_main/teles_logo_c5_125_80.png"></a>
      </td>
      <td style="background-color:#D8F781;">
    <!-- Teles C4 -->
       <a href="#" onclick="toggle_div('teles_c4','toggle');return false">
       <img src="img/bg_main/teles_logo_c4_125_80.png"></a>
      </td>
      <td style="background-color:#A9F5F2;">
    <!-- EWSD -->
       <a href="#" onclick="toggle_div('ewsd','toggle');return false">
       <img src="img/bg_main/siemens_ewsd_125_87.png"></a>
      </td>
      <td style="background-color:#D0F5A9;">
    <!-- Softwix -->
       <a href="#" onclick="toggle_div('softx','toggle');return false">
       <img src="img/bg_main/huawei_125_125.png"></a>
      </td>
      <td style="background-color:#A9D0F5;">
    <!-- System independent/overwatching Tools -->
       <a href="#" onclick="toggle_div('sip_ss7_tools','toggle');return false">
       <img src="img/bg_main/sip_ss7_tools_128_128.png"></a>
      </td>
      <td style="background-color:#E6E6E6;">
    <!-- Rufbereitschaft -->
       <a href="#" onclick="toggle_div('rufbereitschaft','toggle');return false">
       <img src="img/bg_main/rufbereitschaft_124_95.png"></a>
      </td>
      <td style="background-color:#A9A9F5;">
    <!-- Scripts -->
       <a href="#" onclick="toggle_div('scripts','toggle');return false">
       <img src="img/bg_main/scripts_tools_125_125.png" alt="scripts and tools"></a>
      </td>
      <td style="background-color:#A9F5A9;">
    <!-- Tasks // Refer to refer.php to open a variety of windows. -->
       <a href="#" onclick="toggle_div('tasks','toggle');return false">
       <img src="img/bg_main/tasks_128_128.png"></a>
      </td>
      <td style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','none');return false">
       <img src="img/bg_main/shutter_close_128_128.png"></a>
      </td>
      <td style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','block');return false">
       <img src="img/bg_main/shutter_open_128_128.png"></a>
      </td>
      <td><input id="js_control" type="checkbox" name="keep_tabs_open" checked="checked">Close Tabs</td>
     </tr></table>
    </div>
    
    <div id="teles_c5">
     <hr/>
     <table><tr><td>
    
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('teles_c5','none');">
      <img src="img/bg_teles_c5/nagios_128_128.png" alt="Teles Nagios" /></a>
    
     </td></tr></table>
    </div>
    
    
    <div id="teles_c4">
     <hr/>
     <table><tr><td>
    
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank"onclick="toggle_div('teles_c4','none');">
      <img src="img/vkm_128_128.png" alt="Teles VKM" /></a>
     </td></tr></table>
    </div>
    
    <div id="ewsd">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('ewsd','none');">
      <img src="img/vkm_128_128.png" alt="EWSD VKM" /></a>
     </td></tr>
    </table>
    </div>
    
    <div id="softx">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('softx','none');">
      <img src="img/vkm_128_128.png" alt="Softx VKM" /></a>
     </td></tr></table>
    </div>
    
    <div id="sip_ss7_tools">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="<?php if (isset($tools['asr'])) echo 'refer.php?target=switch_single_app&switch=asr'; else echo 'http://localhost'; ?>" target="_blank" onclick="toggle_div('sip_ss7_tools','none');">
      <img src="img/bg_sip_ss7_tools/asr_tool_128_128.png" alt="ASR Tool" /></a>
     </td></tr></table>
    </div>
    
    <div id="rufbereitschaft">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('rufbereitschaft','none');">
      <img src="img/bg_fraud/overview_128_128.png" alt="Rufbereitschaft - Tools" /></a>
     </td></tr></table>
    </div>
    
    <div id="scripts">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('scripts','none');">
      <img src="img/bg_scripts/cospace_fax_128_128.png" alt="CoSpace Fax" /></a>
     </td></tr></table>
    </div>
    
    <div id="tasks">
     <hr/>
     <table><tr><td>
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('tasks','none');">
      <img src="img/bg_tasks/exit_128_128.png" alt="Leave" /></a>
     </td><td>
      <a href="refer.php?target=enter_user_data_for_tasks" target="_blank"  onclick="toggle_div('tasks','none');">
      <img src="img/bg_tasks/enter_user_data_128_128.png" alt="Test Task" /></a>
     </td><td>
    
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <?php // Developer tasks only. // Not working, due to local policies restricting protocol assigning. :/
       if (strtolower($_SERVER['REMOTE_USER'])=='dhe') { ?> 
       <a href="refer.php?target=test_developer" target="_blank"  onclick="toggle_div('tasks','none');">
       <img src="img/bg_tasks/test_developer_128_128.png" alt="Test Task" /></a>
     </td><td>
       <a href="webwinaxe:C:\Programme\Labtam\WinaXe\XWP_INET3.ini">WebWinAxe Protokoll Test</a>
       <?php } ?>
     </td></tr></table>
    </div>
    
    <script type="text/javascript">
    function toggle_div(div_id,status) {
      if (div_id=='all') {
        var el=document.getElementsByTagName('div');
        for (var i=0;i<el.length;i++) {
          if (el[i].id!=='div_navigation') {
    // alert(el[i].attributes); // -> Returns: [object NamedNodeMap]
          document.getElementById(el[i].id).style.display=status;
            if (status='none') { set_color_of_div(el[i].id,'off'); } else { set_color_of_div(el[i].id,'color');  }
          }
        }
      } else if (status=='toggle') {
     	   document.getElementById(div_id).style.display
                 = (document.getElementById(div_id).style.display=='block') ? 'none' : 'block';
    	   if (document.getElementById(div_id).style.display=='block') { set_color_of_div(div_id,'color'); }
    	                                                          else { set_color_of_div(div_id,'off'); }
    	 } else {
    	   document.getElementById(div_id).style.display=status;
    	   if (status=='none') { set_color_of_div(div_id,'off'); }
    	                  else { set_color_of_div(div_id,'color');  }
             }
    } 
    
    function set_color_of_div(div_id,color) {
      alert ('switchting td_'+div_id+' to '+color);
    // document.getElementById('td_'+div_id).style.backgroundColor='red';
    }
    </script>
    
    </body>
    </html>

  7. #7
    Join Date
    Feb 2013
    Posts
    15

    Question

    It sadly is an internal production environment ( sounds important... ^^ ) so, I cannot link it.

    The PHP parts work, those arenīt the problem.

    I switched the "void()" parts as you said I should. No change at all, except that it looks fancier now.

    HTML Code:
    <!-- following cannot go to another page and toggle the display at the same time!!! -->
      <a href="http://localhost" target="_blank" onclick="toggle_div('rufbereitschaft','none');">
      <img src="img/bg_fraud/overview_128_128.png" alt="Rufbereitschaft - Tools" /></a>
    Actually it can. What happens is that a new browser Tab opens and when you return to the page where you clicked the link, you can see that the DIV has closed. Donīt ask me why it works, if it shouldnīt but it does. I jsut retested it in FF and Chrome to see if I made a mistake there, but it works.

    The problem I am still having is about these lines of code:

    HTML Code:
      <td style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','none');return false">
       <img src="img/bg_main/shutter_close_128_128.png"></a>
      </td>
      <td style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','block');return false">
       <img src="img/bg_main/shutter_open_128_128.png"></a>
      </td>
    What I want it to do:

    OPEN all the DIV elements of the page, which are not called "div_navigation".

    What it does:

    It calls 8 times ( the amount of DIVs in the page ) the function "set_color_of_div" - so I see 8 alert boxes for debugging.

    But it only closes or opens the FIRST DIV Element instead of all.

    And this is what does not make sense at all, because if I remove the calls to "set_color_of_div" it toggles them all. Why does it call set_color 8 times, but does not toggle each div as it should?

    RAAGGGEEE!

    Well, thanks for helping out so far. Remind me to buy you a beer whenever we meet near a pub.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440
    You have so many links on the page that I'm not sure which to click on to see the problem.
    Can you give a specific example or two of what to click and what should or should not be happening?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    While waiting for a response, I wrote some test code without the links being active.
    Still cannot see the CSS layout or the images for further checking. If you could at least provide a path to the images it would be helpful for further testing.

    Until the, see if this is closer to your needs. Still not sure what the final effect is to be produced. See previous post.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?272577-Need-help-with-a-simple-script&daysprune=30 -->
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SND Navigation</title>
    
    <!-- // CSS not provided
    <link href="default.css" rel="stylesheet" type="text/css" />
         // JS provided inline below  -- place call there as well
    <script src="toggle_view.js" type="text/javascript"></script>
    -->
    
    <?php // require_once('read_user_data.php'); ?>
    </head>
    
    <body>
    <div id="div_navigation">
    
      <div id="td_teles_c5"> <!-- Teles C5 -->
       <a href="#" onclick="toggle_div('teles_c5','toggle');return false">
       <img src="img/bg_main/teles_logo_c5_125_80.png" alt="td_teles_c5"></a>  </div>
    
      <div style="background-color:#D8F781;"> <!-- Teles C4 -->
       <a href="#" onclick="toggle_div('teles_c4','toggle');return false">
       <img src="img/bg_main/teles_logo_c4_125_80.png" alt="teles_logo_c4_125_80"></a>  </div>
    
      <div style="background-color:#A9F5F2;"> <!-- EWSD -->
       <a href="#" onclick="toggle_div('ewsd','toggle');return false">
       <img src="img/bg_main/siemens_ewsd_125_87.png" alt="siemens_ewsd_125_87"></a>  </div>
    
      <div style="background-color:#D0F5A9;"> <!-- Softwix -->
       <a href="#" onclick="toggle_div('softx','toggle');return false">
       <img src="img/bg_main/huawei_125_125.png" alt="huawei_125_125"></a>  </div>
    
      <div style="background-color:#A9D0F5;"> <!-- System independent/overwatching Tools -->
       <a href="#" onclick="toggle_div('sip_ss7_tools','toggle');return false">
       <img src="img/bg_main/sip_ss7_tools_128_128.png" alt="sip_ss7_tools_128_128"></a>  </div>
    
      <div style="background-color:#E6E6E6;"> <!-- Rufbereitschaft -->
       <a href="#" onclick="toggle_div('rufbereitschaft','toggle');return false">
       <img src="img/bg_main/rufbereitschaft_124_95.png" alt="rufbereitschaft_124_95"></a>  </div>
    
      <div style="background-color:#A9A9F5;"> <!-- Scripts -->
       <a href="#" onclick="toggle_div('scripts','toggle');return false">
       <img src="img/bg_main/scripts_tools_125_125.png" alt="scripts and tools"></a>  </div>
    
      <div style="background-color:#A9F5A9;"> <!-- Tasks // Refer to refer.php to open a variety of windows. -->
       <a href="#" onclick="toggle_div('tasks','toggle');return false">
       <img src="img/bg_main/tasks_128_128.png" alt="tasks_128_128"></a>  </div>
    
      <div style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','none');return false">
       <img src="img/bg_main/shutter_close_128_128.png" alt="shutter_close_128_128"></a>  </div>
    
      <div style="background-color:#BDBDBD;">
       <a href="#" onclick="toggle_div('all','block');return false">
       <img src="img/bg_main/shutter_open_128_128.png" alt="shutter_open_128_128"></a>  </div>
    
      <div><input id="js_control" type="checkbox" name="keep_tabs_open" checked="checked">Close Tabs </div>
    
    <!-- removed for testing purposes
    <hr />
    <div id="teles_c5">
      <a href="http://localhost" target="_blank" onclick="toggle_div('teles_c5','none');">
      <img src="img/bg_teles_c5/nagios_128_128.png" alt="Teles Nagios" /></a></div>
    
    <hr />
    <div id="teles_c4">
      <a href="http://localhost" target="_blank" onclick="toggle_div('teles_c4','none');">
      <img src="img/vkm_128_128.png" alt="Teles VKM" /></a></div>
    
    <hr />
    <div id="ewsd">
      <a href="http://localhost" target="_blank" onclick="toggle_div('ewsd','none');">
      <img src="img/vkm_128_128.png" alt="EWSD VKM" /></a></div>
    
    <hr />
    <div id="softx">
      <a href="http://localhost" target="_blank" onclick="toggle_div('softx','none');">
      <img src="img/vkm_128_128.png" alt="Softx VKM" /></a></div>
    
    <hr />
    <div id="sip_ss7_tools">
      <a href="<?php if (isset($tools['asr'])) echo 'refer.php?target=switch_single_app&switch=asr'; else echo 'http://localhost'; ?>" target="_blank" onclick="toggle_div('sip_ss7_tools','none');">
      <img src="img/bg_sip_ss7_tools/asr_tool_128_128.png" alt="ASR Tool" /></a></div>
    
    <hr />
    <div id="rufbereitschaft">
      <a href="http://localhost" target="_blank" onclick="toggle_div('rufbereitschaft','none');">
      <img src="img/bg_fraud/overview_128_128.png" alt="Rufbereitschaft - Tools" /></a></div>
    
    <hr />
    <div id="scripts">
      <a href="http://localhost" target="_blank" onclick="toggle_div('scripts','none');">
      <img src="img/bg_scripts/cospace_fax_128_128.png" alt="CoSpace Fax" /></a></div>
    
    <hr />
    <div id="tasks">
      <a href="http://localhost" target="_blank" onclick="toggle_div('tasks','none');">
      <img src="img/bg_tasks/exit_128_128.png" alt="Leave" /></a>
      <a href="refer.php?target=enter_user_data_for_tasks" target="_blank"  onclick="toggle_div('tasks','none');">
      <img src="img/bg_tasks/enter_user_data_128_128.png" alt="Test Task" /></a>
      <p />
      <?php // Developer tasks only. // Not working, due to local policies restricting protocol assigning. :/
       if (strtolower($_SERVER['REMOTE_USER'])=='dhe') { ?> 
       <a href="refer.php?target=test_developer" target="_blank"  onclick="toggle_div('tasks','none');">
       <img src="img/bg_tasks/test_developer_128_128.png" alt="Test Task" /></a>
    
       <a href="webwinaxe:C:\Programme\Labtam\WinaXe\XWP_INET3.ini">WebWinAxe Protokoll Test</a>
       <?php } ?>
    </div>
    <hr />
    -->
    
    <!-- following for testing purposes only -->
    <hr />
    <div id="teles_c5">
      <a href="#" target="_blank" onclick="toggle_div('teles_c5','none');return false">
      <img src="img/bg_teles_c5/nagios_128_128.png" alt="Teles Nagios" /></a></div>
    
    <hr />
    <div id="teles_c4">
      <a href="#" target="_blank" onclick="toggle_div('teles_c4','none');return false">
      <img src="img/vkm_128_128.png" alt="Teles VKM" /></a></div>
    
    <hr />
    <div id="ewsd">
      <a href="#" target="_blank" onclick="toggle_div('ewsd','none');return false">
      <img src="img/vkm_128_128.png" alt="EWSD VKM" /></a></div>
    
    <hr />
    <div id="softx">
      <a href="#" target="_blank" onclick="toggle_div('softx','none');return false">
      <img src="img/vkm_128_128.png" alt="Softx VKM" /></a></div>
    
    <hr />
    <div id="sip_ss7_tools">
      <a href="#" target="_blank" onclick="toggle_div('sip_ss7_tools','none');return false">
      <img src="img/bg_sip_ss7_tools/asr_tool_128_128.png" alt="ASR Tool" /></a></div>
    
    <hr />
    <div id="rufbereitschaft">
      <a href="#" target="_blank" onclick="toggle_div('rufbereitschaft','none');return false">
      <img src="img/bg_fraud/overview_128_128.png" alt="Rufbereitschaft - Tools" /></a></div>
    
    <hr />
    <div id="scripts">
      <a href="#" target="_blank" onclick="toggle_div('scripts','none');"return false>
      <img src="img/bg_scripts/cospace_fax_128_128.png" alt="CoSpace Fax" /></a></div>
    
    <hr />
    <div id="tasks">
      <a href="#" target="_blank" onclick="toggle_div('tasks','none');return false">
      <img src="img/bg_tasks/exit_128_128.png" alt="Leave" /></a>
      <a href="#" target="_blank"  onclick="toggle_div('tasks','none');return false">
      <img src="img/bg_tasks/enter_user_data_128_128.png" alt="Test Task" /></a>
      <p />
      <?php // Developer tasks only. // Not working, due to local policies restricting protocol assigning. :/
       if (strtolower($_SERVER['REMOTE_USER'])=='dhe') { ?> 
       <a href="#" target="_blank"  onclick="toggle_div('tasks','none');return false">
       <img src="img/bg_tasks/test_developer_128_128.png" alt="Test Task" /></a>
    
       <a href="#">WebWinAxe Protokoll Test</a>
       <?php } ?>
    </div>
    <hr />
    
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    function toggle_div(div_id,status) {
      if (div_id=='all') {
        var el=document.getElementsByTagName('div');
        for (var i=0;i<el.length;i++) {
          if (el[i].id!=='div_navigation') {
    // alert(el[i].attributes); // -> Returns: [object NamedNodeMap]
          $_(el[i].id).style.display=status;
            if (status='none') { set_color_of_div(el[i].id,'off'); } else { set_color_of_div(el[i].id,'color');  }
          }
        }
      } else if (status=='toggle') {
     	   $_(div_id).style.display
                 = ($_(div_id).style.display=='block') ? 'none' : 'block';
    	   if ($_(div_id).style.display=='block') { set_color_of_div(div_id,'color'); }
    	                                     else { set_color_of_div(div_id,'off'); }
    	 } else {
    	   $_(div_id).style.display=status;
    	   if (status=='none') { set_color_of_div(div_id,'off'); }
    	                  else { set_color_of_div(div_id,'color');  }
             }
    } 
    
    function set_color_of_div(div_id,color) {
    //  alert ('switchting '+div_id+' to '+color);
      $_(div_id).style.backgroundColor='red';
    }
    </script>
    
    </body>
    </html>

  10. #10
    Join Date
    Feb 2013
    Posts
    15
    ARGH!

    I am such a fool! Sorry, I forgot to inlcude details, like for example that the CSS states that all DIVs begin as style:display=none for example... >_< I could have sworn I mentioned that, but rereading my posts I obviously didnt!

    Just finishing banging my head against a wall. This happens when I am too lost in details, I fail to see the bigger picture.

    Let me just edit a new package for you, with all the relevant code included - also sorry for the dayled answer. I was on sick leave yesterday, hurt my shoulder.

    New package next post, will take me half an hour to make it right this time. :/

  11. #11
    Join Date
    Feb 2013
    Posts
    15

    Thumbs up

    ARGH! I AM SO FXXXING STUPID!

    I solved it. The code was right all along! I just had a speeling error in. You even took it over from my code!

    HTML Code:
    if (status='none')
    OF COURSE STATUS IS EASILY SET TO NONE!

    Anyway, I finally fixed it and if it hadnīt been for you playing around with the code Iīd probably gone insane! Thank you.

    For anyone who is interested what the code finally does, here is the final solution. I finshed a package with all the needed demo files.

    wraith-node.de/upload/src/toggle-div-demo.zip
    Itīs strictly HTML, I edited all the unneccessary PHP out for convenience.

    Thanks again mate. I can finally get some sleep again.

  12. #12
    Join Date
    Feb 2013
    Posts
    15
    Life is good, finally coding on.

    /Thread

    Also: Is there an kind of upvote on this board? For you certainly deserve one for sticking with this.

  13. #13
    Join Date
    Feb 2013
    Posts
    15
    Also, with your agreement, Iīd like to take over the

    function $_(IDS)

    from your code. I like that one.

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    resolved

    Quote Originally Posted by dhe View Post
    Life is good, finally coding on.

    /Thread

    Also: Is there an kind of upvote on this board? For you certainly deserve one for sticking with this.
    Quote Originally Posted by dhe View Post
    Also, with your agreement, Iīd like to take over the

    function $_(IDS)

    from your code. I like that one.
    You are most welcome.
    Happy to help.
    Good Luck!

    The $_(IDS) function is not mine, just a common shortcut I have found.
    There are other versions called "tid()" and "el()" which may even be faster, but this one is easy for me to remember
    It does not seem to interfere with the $() function of JQuery (so far as I can tell).

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