|
JavaScript - Can I Use Javascript To Adjust The Top Of My Flyout Submenu
Hello! Please take a look at my site:
Test Flyout Lists As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient. Can I do this in JavaScript? Similar TutorialsHi all I'm no expert with javascript so would really appriciate your help. I'm using a mootools flyout menu, but having a few problems. When I incease the speed of the flyout, the height of the flyout also increases and the opacity doesnt go back to 0. therefore you can still see the flyout once the mouse is away from it. What I want is to increase the speed (DDSPEED) but keep the height of the flyout to 0 when the mouse isnt over. my site is : www.thetestinghouse.co.uk If you go to this site, and copy the below code in to the console of firebug, you will see exactly what I mean. Can someone please help? this is the code: var DDSPEED = 15; var DDTIMER = 1; var OFFSET = 0; var ZINT = 100; function ddMenu(id,d){ var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); clearInterval(c.timer); if(d == 1){ clearTimeout(h.timer); c.style.display = 'block'; if(c.maxh && c.maxh <= c.offsetHeight){return} else if(!c.maxh){ c.style.left = (h.offsetWidth + OFFSET) + 'px'; c.style.height = 'auto'; c.maxh = c.offsetHeight; c.style.height = '0px'; } ZINT = ZINT + 1; c.style.zIndex = ZINT; c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); }else{ h.timer = setTimeout(function(){ddCollapse(c)},50); } } function ddCollapse(c){ c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER); } function cancelHide(id){ var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); clearTimeout(h.timer); clearInterval(c.timer); if(c.offsetHeight < c.maxh){ c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); } } function ddSlide(c,d){ var currh = c.offsetHeight; var dist; if(d == 1){ dist = Math.round((c.maxh - currh) / DDSPEED); }else{ dist = Math.round(currh / DDSPEED); } if(dist <= 1 && d == 1){ dist = 1; } c.style.height = currh + (dist * d) + 'px'; c.style.opacity = currh / c.maxh; c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')'; if(currh > (c.maxh - 2) && d == 1){ clearInterval(c.timer); }else if(dist < 1 && d != 1){ clearInterval(c.timer); c.style.display = 'none'; } } A menu is not hovered will be like this: some errors are found 1. Sub-menus are displayed under the menu I want to display All sub-menus on the right and next to menu border Eg: The result I want it to be looked like this: How can I fix the code like that ? 2. Sub menu does have the same size of length. When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties. How can fix the problem so that All submenu will be the same size of length when they are called ? My code is for leftMenu.php Code: <div id="leftmenu">
<ul>
<li><a href="index.php?page=dress">Fashion Dress</a></li>
<li><a href="index.php?page=handbag">Hand Bags</a></li>
<li><a href="index.php?page=scraves">Scraves</a></li>
<li><a href="index.php?page=watch">Bracelet Watches</a></li>
<li><a href="#" rel="dropmenu1">Silk Ties</a></li>
<li><a href="#" rel="dropmenu2">Pyjamas</a>
</li>
</ul>
</div>
<!-- SILK TIES drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="index.php?page=plain">Plain Style</a>
<a href="index.php?page=woven">Woven Style</a>
</div>
<!-- PYJAMAS drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?page=wonen">For Women</a>
<a href="index.php?page=men">For Men</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("leftmenu")
</script>
My code is for leftmenu.css Code: #leftmenu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
margin-top: .1em;
}
ul#leftmenu li {
display: block;
position: relative;
float:left;
}
#leftmenu li a {
display: block;
text-decoration: none;
background-image:url(images/leftNormal.gif);
width: 218px;
height: 30px;
margin-top: .1em;
}
#leftmenu li a:hover {
display: block;
text-decoration: none;
background-image:url(images/leftHover.gif);
width: 218px;
height: 30px;
white-space: 1em;
color:#FFF;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
background-image:url(images/leftmenu.gif);
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only @hắc*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-image:url(images/lefthover.gif);
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#FFF;
}
Javascript code in the page of leftmenu.js Code: var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)
//No need to edit beyond here////////////////////////
dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},
getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},
showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},
revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH<maxH){
var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},
clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},
dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
},
positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},
hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},
delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},
hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},
clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},
addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startchrome
}
I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly. Thanks I'm looking to do the following in javascript. Either on image_load OR on mouseover of an image, I would like to transition the exposure (or gamma, or brightness) of the image from over-exposed, down to the regular image. If that doesn't make sense, please see an example at: http://www.entheosweb.com/Flash/Phot...20/default.asp The coding for the example in Flash (Actionscript 3.0) is as follows: Code: function changeColor()
{
var colorComponent = 400;
onEnterFrame = function ()
{
myColor = new Color(big_mc_image);
myColTr = new Object();
colorComponent = colorComponent + (100 - colorComponent) / 6;
myColTr = {ra: colorComponent, ga: colorComponent, ba: colorComponent};
myColor.setTransform(myColTr);
big_mc_image._visible = true;
if (Math.round(colorComponent) == 100)
{
delete this.onEnterFrame;
colorComponent = 400;
}
}
;
}
But as you can see, they use a built-in "TRANSFORM" function. In JAVASCRIPT, is it possible to affect the brightness/exposure of an image??? I know that alpha/opacity can be manipulated and would love to have this effect in my html/javascript code. I've attached the following code (simple fade in/fade out of an image). But would basically like to replace "OPACITY" with "EXPOSURE". Code: function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
I haven't come across any .js files that I can download. Know of any? Hey I was wondering, I have a box with tabs at the bottom. As you click the tabs, different stories appear in the box. However, I have the box in a fixed length. So if stories are longer, then they disappear beneath the visible line of the box. When I had it auto-adjusting though, the box would change based on the story I was clicking on. It gets weird. Is there a way to have the box auto-adjust based on the largest amount of text and have it stay that height regardless on what story you pick? I hope this makes sense. Thanks! KZ I have a flyout that is created in straight javascript, but it really makes my website mad...it breaks a lot of stuff. File is too big to attach, download it on my website: http://billboardfamily.com/billboard_updated.zip Can someone help me convert this to a simple jquery menu so it will be friends with my site? thanks! Hello all, I'm trying to create a sub menu that displays based on what the user clicks on the main nav. Here's an image of what I'm trying to accomplish. The main nav is at the top right corner, when the click on one of the links, I want the sub nav to display in the gray area....how would I do this. Would it be through an if/else statement using document.getElementById with inner HTML? Or would there be a better way. I'm really trying to do this by myself, so please don't do it for me...just give me a couple of suggestions if you don't mind. THanks I have been over this code several times and through as many tutorials as I can fine and I still can not figure out why it does not work. Is anyone here able to point out my error? The objective of the code is to get the size in pixels of the viewport when the browser loads page, and when the browser window is resized. After obtaining that number I want to use it to set the size of my DIV to 770px if the viewport has gotten shorter than than 770, and to auto if my viewport is larger than 770. Note, I am not posting the HTML or CSS code because it seems like this should be simple - I will gladly post that code if it turns out my question is not simple. Code: <script language="JavaScript" type = "text/javascript">
<!--
function inspectview() {
var viewportheight;
// most modern browsers
if (typeof window.innerWidth != 'undefined')
{
viewportheight = window.innerHeight;
}
// IE6 in standards compliant mode
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportheight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
if (viewportheight <= 770){
document.getElementById("bg").style.height = "770px";
} else {
document.getElementById("bg").style.height = "100%";
}
}
window.onload = inspectview;
window.onresize = inspectview;
//-->
</script>
Thank you in advance -Alaric_ I have been searching all over the net for a solution to do this. What I want is to create a menu with submenus which is shown when hovering over the mainmenu link. That part is fairly easy... But the part which is tricky is that I want to show the submenu if the mainmenu link is activated... That part I allmost got, but with some issues... I think I need javascript for it, caurse I want to be able to show the other submenus over the parent one when hovering over the other mainmenu links, and then when not, again the active submenu.... Here is what I got so far: The CSS: Code: <style>
/* These styles create the dropdown menus. */
#navbar {
top: 0;
left: 0;
margin: 0;
padding: 0;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold; }
#navbar li a:hover {
color: #000; }
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
/*position: absolute;*/
display: inline;
/*left: 0;*/
width: 100%;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: left; }
#navbar li:hover li a, #navbar li.hover li a {
color: #000; }
#navbar li li a:hover {
color: #357; }
#navbar li:hover ul, #navbar li.hover ul, #navbar li ul.active {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
</style>
And the php: Code: <ul id="navbar">
<li><a href="TEST_menu2.php?page=start">Start</a>
<ul<?php echo (isset($_GET['page']) && $_GET['page']=='start')?' class="active"':''; ?>>
<li><a href="TEST_menu2.php?page=mypage">My Page</a></li>
</ul>
</li>
<li><a href="TEST_menu2.php?page=info">Info</a>
<ul<?php echo (isset($_GET['page']) && $_GET['page']=='info')?' class="active"':''; ?>>
<li><a href="TEST_menu2.php?page=about">About Us</a></li>
<li><a href="TEST_menu2.php?page=contact">Contact</a></li>
</ul>
</li>
</ul>
This allmost does the job besides the hiding of the active submenu when hovering over the other mainmenu parts... Hope somebody can help me... Hi when we used to place mouse over a menu,the submenu goes downwards.The submenu is not visible in one page as it is hided by an iframe which contains the pdf. Is there any way to over this Bug in order to display the the submenu over the iframe. the link with this error is http://www.rosarychurchqatar.com/lec...pg=roster&id=2 Any help will be appreciated Regards Rajeev Hello, I'd like to make an iframe that will automatically get the height of the webpage it is on (not the source url) - I'm not talking the browser viewport but the entire document - so basically the height in pixels minus a certain value to prevent the iframe from sliding out - example: Code: <iframe src="http://google.com/" height="CURRENT DOCUMENT'S HEIGHT MINUS 50" width="FIXED"></iframe> Maybe it is better to achieve this function in php - or any other way? And perhaps there is some better way than an iframe - like a container of some sort that can automatically expand to the webpage's length... Thanks in advance! Hi people, I'm new to this and I was wondering how to adjust the iframe height by itself if my html height increases. My html code includes a facebook comment at the bottom of my page and the comment will show making it expand the height once users post comments. On the other hand, I'm using a CMS that have its own iframe. I've tried many solutions that can be found on the web but none works. It only can work if I don't put in CMS. Is it possible to adjust the iframe height using CMS or there is no way? I hope you guys understand what I'm trying to say. Hope to hear from you guys soon. Thanks alot. Please where do I need to look to find such a script? I’ve been looking for 3 days now and I can’t find something that will have all of those. I need a floating horizontal dropdown menu, and submenu with mouse over description of the site. EX: menu 1 On the road ------- --------Restaurant .... .... ... .... ... .... .... .... ... .Mama house (home made cooking) .... .... ... .... ... .... .... .... ... .All fast food (only fast food get carb) .... .... ... .... ... Motel .... .... ... .... ... .... .... .... ... .No fleas motel (bugs free motel) .... .... ... .... ... .... .... .... ... .Pet free ( no pet allowed) Car rental Well I am sure you get the ideal. Where do I need to look or what would be the kind of scrip for that ? Java, html, css…. Please tell me to find the proper code for what I need. thanks i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
I had a thread on here earlier in which one of you helped me immensely. As I mentioned in that thread, I know very little about javascript. The code I was given basically handles one user, and does it very well. I have since attended a meeting in which I was asked to have multiple users on one page. For example: My current code handles the following: Name - Hours - series of radio button choices. My updated request is the following: Name - Hours - series of radio button choices Name - Hours - series of radio button choices Name - Hours - series of radio button choices Name - Hours - series of radio button choices etc. up to 15 total users. I have tried to adjust the javascript, but with my lack of knowledge in this area I keep breaking it. Any help would again be greatly appreciated, here is my code: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jared Daily Sales Goal Calculation Worksheet</title>
</head>
<script type="text/javascript">
var IE = navigator.appName == "Microsoft Internet Explorer";
var nSets = "";
var answeredQ = [];
function advanceTo(nextQ,nQ){
var currAns = answeredQ[nQ.name.replace(/q/,"")-1];
if (currAns != "-" && currAns != nQ.value)
{
var nFloor = nQ.parentNode.parentNode.id.replace(/f/,"")-1;
for (i=0; i<nSets.length; i++)
{
if (i > nFloor)
{
nSets[i].style.display = "none";
}
}
}
nSets[nextQ-1].style.display = "";
answeredQ[nQ.name.replace(/q/,"")-1] = nQ.value;
}
function init(){
nSets = document.forms[0].getElementsByTagName('fieldset');
for (i=1; i<nSets.length; i++)
{
nSets[i].style.display = "none";
answeredQ[answeredQ.length] = "-";
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #ffffff; margin-top: 60px;}
fieldset {border: 0px}
td { font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
h1 { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;}
</style>
<body>
<cfform action="" method="post">
<!--- Header --->
<table border="1">
<tr>
<td>
<table align="left">
<tr bgcolor="#E5E5E5">
<td>Name</td>
<td>Hours</td>
<td colspan="4"></td>
</tr>
<!--- Emp 1 --->
<tr bgcolor="#ffffff">
<td valign="top"><input name="" size="10"></td>
<td valign="top"><input name="" size="10"></td>
<td valign="top">
<fieldset id="f1">
<!-- Question 1 -->
<label><input type="radio" name="e1q1" value="Diamond1" onclick="advanceTo(2,this)">Diamond</label>
<label><input type="radio" name="e1q1" value="Perimeter1" onclick="advanceTo(3,this)">Perimeter</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f2">
<!-- Question 2 -->
|<label><input type="radio" name="e1q2" value="GM1">GM</label>
<label><input type="radio" name="e1q2" value="AGM1">AGM</label>
<label><input type="radio" name="e1q2" value="DDM1">DDM</label>
<label><input type="radio" name="e1q2" value="FT1" onclick="advanceTo(4,this)">Full Time</label>
<label><input type="radio" name="e1q2" value="PT1" onclick="advanceTo(4,this)">Part Time</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f3">
<!-- Question 3 -->
<label><input type="radio" name="e1q3" value="PDM">PDM</label>
<label><input type="radio" name="e1q3" value="RL">RL</label>
<label><input type="radio" name="e1q3" value="FT1" onclick="advanceTo(4,this)">Full Time</label>
<label><input type="radio" name="e1q3" value="PT1" onclick="advanceTo(4,this)">Part Time</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f4">
<!-- Question 4 -->
|<label><input type="radio" name="e1q4" value="Tenured1">Tenured</label>
<label><input type="radio" name="e1q4" value="NonTenured1">Under 2 Years</label>
</fieldset>
</td>
</tr>
</table>
</td></tr></table>
</cfform>
</body>
</html>
Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible. So, here is the code I have so far: Code: <div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Over Meves</a>
<ul class="submenu">
<li><a href="#" class="suba">Historie</a></li>
<li><a href="#" class="suba">Onze mensen</a></li>
<li><a href="#" class="suba">Werkzijze</a></li>
</ul>
</li>
<li>
<a href="vervolg3.html">Disciplines</a>
<ul class="submenu">
<li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
<li><a href="#" class="suba">Elektrotechniek</a></li>
<li><a href="#" class="suba">Sanitaire techniek</a></li>
<li><a href="#" class="suba">Energiebesparingstechniek</a></li>
<li><a href="#" class="suba">Bouwfysica en geluid</a></li>
<li><a href="#" class="suba">Diensten energiebesparing</a></li>
</ul>
</li>
<li>
<a href="#">Expertise</a>
<ul class="submenu">
<li><a href="#" class="suba">Woningbouw & Utiliteit</a></li>
<li><a href="#" class="suba">Zorg & Welzijn</a></li>
<li><a href="#" class="suba">Milieu & Energie</a></li>
<li><a href="#" class="suba">Beheer & Onderhoud</a></li>
<li><a href="#" class="suba">EPA & EPC</a></li>
<li><a href="#" class="suba">Legionella beheersing</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="submenu">
<li><a href="#" class="suba">Adres & route</a></li>
<li><a href="#" class="suba">Werken bij</a></li>
</ul>
</li>
</ul>
</div>
The javascript: Code: <script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('a').each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr('href');
if (currentURL = thisURL) {
$(this).parents('ul.submenu').css('display', 'block');
}
// else {
// $(this).parents('ul.submenu').css('display', 'none');
// }
});
});
</script>
And the css: Code: #topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Hope I explained it clear. Thanks for any help. I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : ) Code: //** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...height-script/
var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["sidebar-a", "content"]
ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}
ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}
ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second)
var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
var slideSpeed_in = 10;
var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
var xOffsetSubMenu = 0; // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
var slideDirection = 'right'; // Slide to left or right ?
/* Don't change anything below here */
var activeSubMenuId = false;
var activeMainMenuItem = false;
var currentZIndex = 1000;
var autoHideTimer = 0;
var submenuObjArray = new Array();
var okToSlideInSub = new Array();
var subPositioned = new Array();
function stopAutoHide()
{
autoHideTimer = -1;
}
function initAutoHide()
{
autoHideTimer = 0;
if(autoHideTimer>=0)autoHide();
}
function autoHide()
{
if(autoHideTimer>timeBeforeAutoHide)
{
if(activeMainMenuItem){
activeMainMenuItem.className='';
activeMainMenuItem = false;
}
if(activeSubMenuId){
var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
showSub();
}
}else{
if(autoHideTimer>=0){
autoHideTimer+=50;
setTimeout('autoHide()',50);
}
}
}
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function showSub()
{
var subObj = false;
if(this && this.tagName){
var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
okToSlideInSub[numericId] = false;
var subObj = document.getElementById('subMenuDiv' + numericId);
if(activeMainMenuItem)activeMainMenuItem.className='';
if(subObj){
if(!subPositioned[numericId]){
if(slideDirection=='right'){
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
}else{
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
}
submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
subPositioned[numericId] = true;
}
subObj.style.visibility = 'visible';
subObj.style.zIndex = currentZIndex;
currentZIndex++;
this.className='activeMainMenuItem';
activeMainMenuItem = this;
}
}else{
var numericId = activeSubMenuId;
}
if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
if(numericId!=activeSubMenuId && this && subObj){
subObj.style.width = '0px';
slideMenu(numericId,slideSpeed_out);
activeSubMenuId = numericId;
}else{
if(numericId!=activeSubMenuId)activeSubMenuId = false;
}
if(showSubOnMouseOver)stopAutoHide();
}
function slideMenu(menuIndex,speed){
var obj = submenuObjArray[menuIndex]['divObj'];
var obj2 = submenuObjArray[menuIndex]['ulObj'];
var width = obj.offsetWidth + speed;
if(speed<0){
if(width<0)width = 0;
obj.style.width = width + 'px';
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
obj.style.visibility = 'hidden';
obj.style.width = '0px';
if(activeSubMenuId==menuIndex)activeSubMenuId=false;
}
}else{
if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
obj.style.width = width + 'px';
if(width<submenuObjArray[menuIndex]['width']){
setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
}else{
okToSlideInSub[menuIndex] = true;
}
}
}
function resetPosition()
{
subPositioned.length = 0;
}
function initLeftMenu()
{
var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
if(!browserVersion)browserVersion=1;
var menuObj = document.getElementById('dhtmlgoodies_menu');
var mainMenuItemArray = new Array();
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
while(mainMenuItem){
if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
var aTag = mainMenuItem.getElementsByTagName('A')[0];
if(showSubOnMouseOver)
aTag.onmouseover = showSub;
else
aTag.onclick = showSub;
}
mainMenuItem = mainMenuItem.nextSibling;
}
var lis = menuObj.getElementsByTagName('A');
for(var no=0;no<lis.length;no++){
if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
lis[no].onmouseout = initAutoHide;
lis[no].onmousemove = stopAutoHide;
}
for(var no=0;no<mainMenuItemArray.length;no++){
var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
if(sub){
mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
var div = document.createElement('DIV');
div.className='dhtmlgoodies_subMenu';
document.body.appendChild(div);
div.appendChild(sub);
if(slideDirection=='right'){
div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
}else{
div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
}
div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
div.id = 'subMenuDiv' + (no+1);
sub.id = 'submenuUl' + (no+1);
sub.style.position = 'relative';
if(navigator.userAgent.indexOf('Opera')>=0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
}
sub.style.left = 1 - sub.offsetWidth + 'px';
if(browserVersion<7 && isMSIE)div.style.width = '1px';
if(navigator.userAgent.indexOf('Opera')<0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
}
if(!document.all)div.style.width = '1px';
}
}
menuObj.style.visibility = 'visible';
window.onresize = resetPosition;
}
window.onload = initLeftMenu;
I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu. Now the active page is hightlighted, but the parent isn't (if the active page is a submenu). So what I want is that when a subitem is active, also it's parent should be active, for example: main_item_1 main_item_2 --sub_item_1 --sub_item_2 In this case when sub_item_2 is active, also main_item_2 should be. I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it. So here is the code I use: Code: $('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = decodeURIComponent(document.location.href);
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = decodeURIComponent(document.location.href);
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
//$('a', $('.active').parents("li:last")).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
The middle group code is for the subitem, so the code to make the parent also active should be there I think. When I add the following line to the middle group (after the $(this).parents part): Code: $(this).parents("#topnav ul li").addClass('parent');
I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent. Please help. Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help Here is the code implemented on the search results page: Code: <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 500; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas? I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. |
|||||||