Full script fails

U

UKuser

Hi folks,

Ok - here is the complete script.

When you tick the box it should popup to say its ticked (box a1)
however for some reason it doesnt.

Please can you advise me where I'm going wrong.

Many thanks

A

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.mainDiv
{
width:160px;
}
..topItem
{
width:160px;
height:22px;
text-decoration: none;
color: white;
font-weight:bold;
font-family:"GOTHIC";
background-color:lightgreen;
}


..dropMenu
{
border-top:1px solid #467BF2;
border-left:1px solid #92B1F8;
border-right:1px solid #92B1F8;
border-bottom:1px solid #92B1F8;
}

..subMenu
{
display:none;
}
..subItem
{
padding-left:5px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
color:black;
}

..collapsible {display: none;}

</style>
<title>Test dynamic drop down</title>
</head>
<body>
<script language="JavaScript" type="text/javascript"
src="menu.js"></script>
<script type="text/javascript">
// Slide Down Menu Bar - Uncle Jims Web Designs - www.jdstiles.com

var timer_slide = null;
var pix_slide = 4; // how graceful the slide is - NOTE any less
than 4 and
// a semi-quick double click throws it into wobbly world as it
takes too long to load/hide
var delay_slide = 30; // the speed at which it appears (was 10 -
higher slower)
var div_height = 0; //value irrelevant
var re_init_obj = null;
var MainDiv,SubDiv,obj_slide,obj_view,new_pix_val

document.write('<div id="tempcontainer" style="visibility:
hidden;position: absolute"></div>')

function Init(objDiv)
{
if (timer_slide == null)
{
MainDiv = objDiv.parentNode; // parent of the div hovered
over (ie top item - parent is MainDiv)
SubDiv = MainDiv.getElementsByTagName("DIV").item(0); //
get first div
obj_slide =
MainDiv.getElementsByTagName("DIV").item(1)
obj_view = MainDiv.getElementsByTagName("DIV").item(2)

SubDiv.onclick = SetSlide; // Set all divs below to be
onClick set slide

// Sets tempcontainer to be the spans from the spans
containing the links

document.getElementById("tempcontainer").innerHTML=obj_view.innerHTML //
core height of spans as not visible at moment

div_height=document.getElementById("tempcontainer").offsetHeight

new_pix_val = parseInt(MainDiv.getAttribute("title")); //
get title of MainDiv

}
}

function SetSlide()
{
if (window.timer_slide) clearInterval(timer_slide)
/* The clearInterval() method cancels a timeout that is set
with the setInterval() method.*/
if (timer_slide == null && this.parentNode == MainDiv) { //
check that the div is the same as we're on
timer_slide = setInterval('RunSlide()', delay_slide);
}
else
{
re_init_obj = this;
setTimeout('ReInit()', 500); // wait 500 milliseconds
}
}

function ReInit(obj)
{
Init(re_init_obj);
timer_slide = setInterval('RunSlide()', delay_slide); // run
runslide at the delay_slide interval
re_init_obj = null;
}

function RunSlide()
{
// If subMenu title is closed (0) which by default it is
if (obj_view.getAttribute("title") == 0)
{
new_pix_val += pix_slide; // height pixel increase from 0
if current title is 0
obj_slide.style.height = new_pix_val; // set dropmenu div
height as new pixels which pushes submenu

if (new_pix_val >= div_height) // if height is over (i.e.
menu at max height)
{
clearInterval(timer_slide); // clear timer - stop it
timer_slide = null;
obj_view.style.display = 'inline'; // set status to
inline
obj_view.setAttribute("title","1") // set title = 1
MainDiv.setAttribute("title",new_pix_val); // not sure
- depends on which div is which
}
} else // menu title is open (1)
{
obj_view.style.display = 'none';
new_pix_val -= pix_slide;
if(new_pix_val > 0)obj_slide.style.height = new_pix_val;
if (new_pix_val <= 0)
{
new_pix_val = 0;
obj_slide.style.height = new_pix_val
clearInterval(timer_slide);
timer_slide = null;
obj_view.setAttribute("title","0")
MainDiv.setAttribute("title",new_pix_val);
}
}
}


function isTick(id){
if (document.getElementById(id).checked == true){
alert(id+" is ticked");
} else {
alert(document.getElementById(id).checked+". The id is:"+id);
}
}
</script>
<form action="">
<div class="mainDiv" title="0">
<input type="checkbox" onclick="checkAll('a',4,this.id);"
id="Europe">Europe
<div class="topItem">
<span onmouseover="Init(this.parentNode);">[Show/Hide]</span>
</div>
<div style="height: 0pt;" class="dropMenu">
<div style="display: block;" class="subMenu" title="0">
a1: <input type="checkbox" id="a1"
onclick="isTick(this.id);"><br>
a2: <input type="checkbox" id="a2" onclick=""><br>
a3: <input type="checkbox" id="a3" onclick=""><br>
a4: <input type="checkbox" id="a4" onclick="">
</div>
</div>
</div>

<div class="mainDiv" title="0" style="margin-top:150px;">
<div class="topItem" onmouseover="Init(this);">
<input type="checkbox">Click
</div>
<div style="height: 0pt;" class="dropMenu">
<div style="display: none;" class="subMenu" title="0">
b1: <input type="checkbox" id="b1"><br>
b2: <input type="checkbox" id="b2"><br>
b3: <input type="checkbox" id="b3"><br>
b4: <input type="checkbox" id="b4">
</div>
</div>
</div>
</form>
<p style="clear:both">
force text down
</p>
</body>
</html>
 
H

Henry

Hi folks,

Ok - here is the complete script.

It is not a complete script when you import an external LS file called
"menu.js" and do not include its contents.
When you tick the box it should popup to say its ticked (box a1)
however for some reason it doesnt.

Yes it does.
Please can you advise me where I'm going wrong.
<snip>

The code you have posted is unintelligible and non-functional due to
wrapping. The code you have posted contains much that is superfluous
and still omits significant information. The code you have posted does
not demonstrate the issue you have described, and you did not test it
in isolation prior to posting to verify that it did demonstrate the
issue.

If the code shows the alert in the absence of "menu.js" and does not
show it when that code is imported then the likelihood is that the
issue is a direct consequence of the un-shown code.
 
U

UKuser

It is not a complete script when you import an external LS file called
"menu.js" and do not include its contents.


Yes it does.


<snip>

The code you have posted is unintelligible and non-functional due to
wrapping. The code you have posted contains much that is superfluous
and still omits significant information. The code you have posted does
not demonstrate the issue you have described, and you did not test it
in isolation prior to posting to verify that it did demonstrate the
issue.

If the code shows the alert in the absence of "menu.js" and does not
show it when that code is imported then the likelihood is that the
issue is a direct consequence of the un-shown code.

Well thank you for highlighting that to me !!

For the full coding error - you may remove that single line (a
mistake!! on my behalf) and it will replicate the problem.

Any help would be great.

A
 
H

Henry

Well thank you for highlighting that to me !!

For the full coding error - you may remove that single line (a
mistake!! on my behalf) and it will replicate the problem.

But my point was that I did remove that line as the result did not
exhibit the symptoms you described.
 
R

RobG

Hi folks,

Ok - here is the complete script.

Rather than the complete script, post a *minimal* example that shows
the issue. Ensure that it "works" if copied and pasted into an empty
document and that you have manually wrapped it at about 70
characters. Use spaces (2 or 4) for indenting, not tabs.
When you tick the box it should popup to say its ticked (box a1)
however for some reason it doesnt.

Please can you advise me where I'm going wrong.

See above. Here is what I get:


    <script type="text/javascript"> [...]

    function isTick(id){
      if (document.getElementById(id).checked == true){
      alert(id+" is ticked");
      } else {
      alert(document.getElementById(id).checked+". The id is:"+id);
      }
    }
    </script> [...]
        a1: <input type="checkbox" id="a1"
onclick="isTick(this.id);"><br>

Which, when cleaned up and properly inserted into a document, works as
expected although the code itself could be significantly cleaned up,
e.g.


<script type="text/javascript">
function isTicked(el) {
if (el) {
alert ( 'The element ' + ((el.checked)? 'is':'isn\'t')
+ ' checked.');
}
}
</script>

<input type="checkbox" id="a1" onclick="isTick(this);">
 
R

RobG

Hi folks,
Ok - here is the complete script.

Rather than the complete script, post a *minimal* example that shows
the issue.  Ensure that it "works" if copied and pasted into an empty
document and that you have manually wrapped it at about 70
characters.  Use spaces (2 or 4) for indenting, not tabs.


When you tick the box it should popup to say its ticked (box a1)
however for some reason it doesnt.
Please can you advise me where I'm going wrong.

See above.  Here is what I get:


    <script type="text/javascript"> [...]

    function isTick(id){
      if (document.getElementById(id).checked == true){
      alert(id+" is ticked");
      } else {
      alert(document.getElementById(id).checked+". The id is:"+id);
      }
    }
    </script> [...]
        a1: <input type="checkbox" id="a1"
onclick="isTick(this.id);"><br>

Which, when cleaned up and properly inserted into a document, works as
expected although the code itself could be significantly cleaned up,
e.g.

<script type="text/javascript">
  function isTicked(el) {

Ha, hoist on my own petard... that should be

function isTick(el) {
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,810
Latest member
Kassie0918

Latest Threads

Top