|
JavaScript - Javascript Jump-menu That Affects Another...
Hi all,
I'm having problems with a javascript jump menu that uses two select form elements, where the first one enables the second one if the right option is picked. I've not much knowledge of javascript so I've basically combined two separate functions, but at the moment only the second menu redirects the user - I need the first menu to do this as well if the second option is selected. Any ideas?! Here's the code - many thanks in advance if you can help: Code: <html>
<head>
<script type="text/javascript">
function chooseSelect(selectOption) {
document.getElementById('shape').disabled = (selectOption!=1);
}
function jumpMenu(select) {
var i = select.selectedIndex;
var selection = select.options[i].value;
var url;
if (i === 0) {
alert("Please select an option");
} else {
url = selection;
location.href = url;
}
}
</script>
</head>
<body>
<form action="" method="get">
<select name="color" id="color" onChange="chooseSelect(this.value);">
<option value="">- Choose Color -</option>
<option value="red.html">Red</option>
<option value="1">Shape</option>
</select><br />
<select name="shape" id="shape" disabled="disabled">
<option value="">- Choose Shape-</option>
<option value="square.html">Square</option>
<option value="circle.html">Circle</option>
<option value="rectangle.html">Rectangle</option>
</select><br />
<br />
<input type="button" value="GO" onclick="jumpMenu(this.form.shape);">
</form>
</body>
</html>
Similar TutorialsI am using a Jump Menu: Code: function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_jumpMenuGo(selName,targ,restore){ //v3.0
var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
Code: <form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)">
<!--webbot bot="Validation" b-disallow-first-item="TRUE" --><select name="menu" class="TextArea" onchange="MM_jumpMenu('self',this,0)">
<option value="javascript:myVoid()" selected>Choose One
</option>
<option value="1.html">One</option>
<option value="2.html">Two</option>
</select>
</form>
Is there some way to make such a jump menu observe the history, so that going back will go back to the page containing the form? I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); Hi, I need your help guys. I've got a little problem. I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode It works perfectly, it enters the smileycode to the textarea. My problem is... When I say document.getElementById('message').focus() it goes back to where the cursors has last been so before the smileycode. Instead of this, I want the focus to go back after the insertion of the code. I hope it's understandable. And thanks in advance! Hello all, I needs some help. I currently have a script to jump to an anchor tag when the page loads: Code: <script type="text/javascript">
function goToAnchor() {
location.href = "myPage.html#myAnchor";
}
</script>
Now, I would like to take it a step further and would like to link from page A to page B that usually takes a while to load and once the page loads, run a script to jump to the specified anchor tag on the page after everything has loaded. I know I have to add some parameters at the end of the url link on page A, but that's where I get stuck. Can anyone please help? Right so I have a popup window that when opened in any browser expect of course IE will open perfectly in the centre of the screen. However with IE it decides to jump to the top of the page, then is pushed back down to just show the popup at the bottom of the window. Anyone got any idea how I can stop this? Using IE8. Code: function openPopup_JD(params){
var name = params.name;
var blanket = params.blanket || true;
var effect = params.effect || "fade"
var afterOpen = params.afterOpen || "";
var width = document.getElementById(name).style.width;
var height = document.getElementById(name).style.height;
width = width.slice(0, -2);
height = height.slice(0, -2);
width = width * 1;
height = height * 1;
document.getElementById(name).style.left = getLeft_JD(width) + "px";
document.getElementById(name).style.top = getTop_JD(height) + "px";
//Create blanket if it doesn't already exist.
if(!document.getElementById('blanket')){
var popupBlanket = document.createElement("div");
popupBlanket.id = 'blanket';
popupBlanket.style.display = "none";
popupBlanket.style.opacity = 0;
popupBlanket.style.filter = 'alpha(opacity = 0)';
popupBlanket.style.backgroundColor = "#000";
popupBlanket.style.position = "absolute";
popupBlanket.style.zIndex = 9998;
popupBlanket.style.top = "0px";
popupBlanket.style.left = "0px";
popupBlanket.style.width = "100%";
popupBlanket.style.height = getBlanketHeight()+"px";
document.body.appendChild(popupBlanket);
}
switch(effect){
//-----------------------------------
//FADE IN
//-----------------------------------
case "fade":
if(blanket == true){
animate_JD({
objects: 'blanket |'+name,
properties: "opacity |opacity",
start: "0",
end: "0.75 |1",
inerval: "20 |20",
frames: "15 |20",
effect: "SFS",
wait: "0 |-1",
onStart: "toggle('blanket') |toggle('"+name+"')",
onComplete: " |"+afterOpen
});
}else{
animate_JD({
objects: ''+name,
properties: "opacity",
start: "0",
end: "1",
interval: "20",
frames: "6",
effect: "SFS",
wait: "0",
onStart: "toggle('"+name+"')",
onComplete: ""+afterOpen
});
}
break;
Not all of the function is shown because below this are only other effects if i have a large script built multi-select-list-box, is there a way within javascript to onClick of a hyperlink, jump-to the line within the select box that corresponds to the value clicked?
Hi all, I am having trouble with the Form Validation I have on my wifes website...everything is working how it should it's just when you hit the submit button the screen jumps up about an inch or so putting the error message out of view....Is there anything that can be done to stop... Thanks all. Hello I need some help with Google Maps please. Im using Google Maps API V3. So I can create a simple map but what I need is to have two markers (which are quite far apart) on the map. For example these markers are called 'Marker 1' and 'Marker 2'. Below the map I would have 2 links called for example 'Marker 1 link' and 'Marker 2 link'. When the map loads, 'Marker 1' is visible and centered. Now to move to 'Marker 2' on the map, I would click the link under the map. And vice versa. A good example is http://arts.brighton.ac.uk/contact-u...aculty-of-arts I tried but failed when I tried this guys answer on this website: http://stackoverflow.com/questions/2...utside-the-map Any help to create this is greatly appreciated! Hi, I want my page to jump to a different page based on data collected in the form input fields. I can jump to a new page alright, using the following javascript: 1. javascript code in form_a.html document.forms["form_A"].action = "page_x.html"l; document.forms["form_A"].submit(); 2. document.forms[0].action = "page_x.html"l; 3. window.locaton = "page_x.html"; 4. window.location.href = "page_x.html"; The problem is, I can see the new page was jumped to, but immediately it return back to the page that trigger the jump. Any idea? I need to finish the project before Christmas. Any help is greatly appreciated! Jeff I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?
Hi, I am working on modifying a menu, and trying to add a sub-sub menu under Mfg & Dist, where Operations would expand to show Reports and Content. However, I can't get it to work. I think some javascript modification is needed, but I don't know much javascript. Can anyone help me find what I would need to change? Below is the code I have thus far. Thank you! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style>
.tab{line-height: 36px; text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 12px; color: #ffffff; cursor:pointer;}
.asd{text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 11px; color: #ffffff; cursor:pointer;}
.box {border-top: 1px solid #274f40; border-left: 1px solid #274f40; border-right: 1px solid #274f40; width: 148px; margin: 0; padding: 7px 8px 6px 10px; background-color:#4F7F6D;}
td.menuborder {background: #33735B url(http://dl.dropbox.com/u/16052106/58545.PNG);background-repeat: repeat-x; border-top:1px solid #1E3C31; border-bottom:1px solid #ABB8BB;}
td.menudiv {background: url(http://dl.dropbox.com/u/16052106/58546.PNG) no-repeat scroll 50% -2px transparent; padding-right: 20px;}
</style>
</head>
<script language=javascript>
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;
function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x) - 11;
var ww =findPosY(x) + 41;
<!-- x.style.backgroundColor = '#6B8F81'; -->
if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
layers.top = ww;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}
function Indicator(n)
{
var box = document.getElementByID(n);
box.style.backgroundcolor='#000000';
}
function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
}
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}
function btnTimer() {
timeOn = setTimeout("btnOut()",600);
}
function btnOut(layerName){
if (menuActive == 0){
hideLayer(onLayer)
}
}
var item;
function menuOver(itemName){
item=itemName;
itemName.style.backgroundColor = '#33735B'; //background color change on mouse over
clearTimeout(timeOn);
menuActive = 1
}
function menuOut(itemName){
if(item)
itemName.style.backgroundColor = '#4F7F6D';
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>
<table valign=top cellpadding=0 cellspacing=0 width=100% border=0>
<tr><td class="menuborder">
<table align=left>
<tr>
<!-- td> </td -->
<td id=mm0 align=left><a class=tab href="/portal/page/portal/ABCEmp"><div><span> <b> Home</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm7 align=left> <a class=tab href="/portal/page/portal/ABCEmp/EngIT"> <div><span><b>Eng/IT</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm6 align=left> <a class=tab href="/portal/page/portal/ABCEmp/Finance"> <div><span><b>Finance</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm2 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu2",'mm2')> <b>Human Resources</b></td>
<td class="menudiv"></td>
<td id=mm3 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu3",'mm3')> <b>Market Segments</b></td>
<td class="menudiv"></td>
<td id=mm4 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu4",'mm4')> <b>Mfg & Dist</b></td>
<td class="menudiv"></td>
<td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <div><span><b>New Bus Dev</b></span></div></a></td>
<td class="menudiv"></td>
<!-- td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <b>New Bus Dev</b></a></td>
<td class="menudiv"></td -->
<!-- <td id=5 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2')><a class=tab href="/portal/page/portal/ABCEmp/IT"> <b>IT</b></a></td>
<td> </td>
-->
</tr>
</table>
<!-- <div id=MainMenu1 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">
</div> -->
<div id=MainMenu3 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/BCS">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
BCS </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/AquPlan">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
BLS </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/BusServ">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Business Services </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/ClntServ">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Client Services </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Est">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Estimating </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Mark">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Marketing </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Pap">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Paper</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Sal">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Sales </p></a>
</div>
<!-- div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/LTS">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Long Term Sched </p></a>
</div -->
</div>
<div id=MainMenu2 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
HR Home </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Job">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Job Postings </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Saf">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Safety </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/ShrServ">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Shared Services </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Trans">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Transformation </p></a>
</div>
</div>
<div id=MainMenu4 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Man">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Manufacturing </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=showLayer("Reports",'mm8')>
<b>Operations</b></p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/SupChn">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Supply Chain </p></a>
</div>
</div>
<div id=Reports style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1001;">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/rep">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Reports </p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/con">
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
Content </p></a>
</div>
</div>
</td>
</tr></table>
</body>
</html>
-Krzysztof My Javascript dropdown menu drops down behind my embedded music player on my website (http://www.blackoutplaylists.com). I need help fixing this, I've tried everything and can't seem to get it fixed. Any suggestions?
Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work. Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/) To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now). Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left. Thanks for any help I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone. The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually. My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad. Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"? I would be truly grateful for any ideas that would help me fix this. My site is http://fay.iniminimo.com/ Thank you so much for your interest. Fay If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet. I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this: Menu Item 1 [Click to expand] -Sub Item 1.1 [Click to expand] -Sub Item 2.1 [Click to get to page] Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please? URL: http://dinotamermeep.blogspot.com/p/blog-archive.html Thank you, -Meepski 1) Script Title: Arrow Side Menu 2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-arrow.htm 3.) My Test Pg. http://macmajor.homeip.net/shadow_test/shadow.html 3) Describe problem: After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there). If you know of a fix, I would certainly appreciate it. Thanks in advance! Tracy Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already. I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu. But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all. Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover? Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh? Let me know! Okay I am looking for some good free scripts of dynamic javascript menu (I dont know how to call them properly). A type of menu where let say on the left you click on item and on the right it updates content to cliced item. Any ideas where could I find some good or how are those called?
Reply With Quote 01-24-2015, 11:31 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts I think you need to be more specific. Do you mean you want to do this all in one HTML page? So that the displayed content changes depending on what tab or button the user clicks on? That's not quite the same thing as what is normally called a navigation menu, where more often then not you are using the menu to get to ANOTHER html page. Code:
function initMenu(){
var menus, menu, text, a, i, CurrentID;
menus = getChildrenByElement(document.getElementById("menu"));
CurrentID = document.getElementById("auto");
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
//CurrentID.showMenu; thought this would work but it doesn.t
}
I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts I've building a site for a letting agents using Joomla and JomEstate Pro. I've got everything working great and am quite happy with it. However, there is an accordion 'property filter' menu on the right which works fine in every other browser, but not in IE. Would anyone be able to tell me why it is doing this or at least if there is any way i can find out what is wrong. Sample site is at www.dspadtest.co.uk/tapton Thanks. |
|||||||