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;
cursorointer;
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>
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;
cursorointer;
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>