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:
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.
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.
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.
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.
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.
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>
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:
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.
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.
Also: Is there an kind of upvote on this board? For you certainly deserve one for sticking with this.
Originally Posted by dhe
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).
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?
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. :/
Need help with a simple script
Reply With Quote
Originally Posted by dhe
Bookmarks