|
JavaScript - Javascript Menu Flickering In Ff On Mac
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 Similar TutorialsHopefully this isn't too badly placed in the Java forum. I'm doing research for a website I'm going to be working on, and am going to be working with a friend to develop (my idea, their coding experience). I have a couple friends that deal in a couple languages, but I'm not sure which can accomplish what I want, so I turn to you: I want to create text that flickers, like an eerie dying fluorescent lightbulb in a horror film. I don't expect it to put out light, and it really doesn't have to even appear like a light, just...like the text it degrading, I suppose is the best way to put it. Like the pixels are trying to stay alive and struggling. I'd really, REALLY like to avoid anything heavy like Flash (and er...I don't know anyone that knows that one) so something in-code (Java, PHP, or even CSS if that's a possibility) would be amazing. I appreciate any help and guidance in this direction. Thanks in advance! I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 100; i >= 0; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function fade_up(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function changeOpac(opacity, id) {
//change the opacity for different browsers
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously. The html page is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JAVASCRIPT TESTING</title> <script language="javascript" type="text/javascript" src="FloatingMenu.js"> </script> <link rel="stylesheet" type="text/css" href="formatting.css"> </head> <body> <div id="header1"> <b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b> </div> <div id="content"> <p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create. Signing Scripts In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to. With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client. A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it. Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following: Unambiguously assigns ownership of the script to a person or organization. Allows an HTML page to use multiple signed scripts. Places the signed script into a Java Archive (JAR) file. Places the source of the script in the JAR file. Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script. .</p> </div> <div id="movable"> <b>Please Login or Register</b> </div> </body> </html> JAVASCRIPT FILE IS AS FOLLOWS: Code: var startY=0;
var currY=startY;
var destY=currY;
var timerID=0;
var tmr_on=0;
var temp;
function floatMenu() {
clearInterval(timerID);
tmr_on=0;
if (document.documentElement.scrollTop) {
temp=document.documentElement.scrollTop; }
else {
temp=document.body.scrollTop; }
destY=temp+startY;
startFloat();
}
function startFloat() {
if(currY==destY) {
clearInterval(timerID);
tmr_on=0;
}
else if(currY<destY) {
currY+=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
timerID=setInterval("startFloat()",10);
tmr_on=1;
}
}
else if(currY>destY) {
currY-=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
timerID=setInterval("startFloat()",10);
tmr_on=1;
}
}
}
window.onscroll=floatMenu;
window.onresize=floatMenu;
AND CSS FILE IS AS FOLLOWS: Code: #header1 {
background-color: #66ccff;
border: 1px solid #66ccff;
margin-bottom: 5px;
}
#content {
padding: 10px;
border: 1px solid #66ccff;
margin-bottom: 5px;
margin-left: 21%;
height: 800px;
}
#content a {
text-decoration: none;
color: blue;
display: block;
}
a {
text-decoration: none;
color: blue;
}
#movable {
position: absolute;
width: 20%;
background: #fdcfcc;
top: 0px;
left: 0px;
}
At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable. Problem is coming on both IE and FF.Any help seriously appreciated... 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 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 I am using a drop down menu for a website I'm working on to display menu items under categories. I'm using the same code to do this on two different pages with the actual content of the menu's loading from a MySQL database using PHP scripts. www.browniepointscatering.com/menu.php www.browniepointscatering.com/seasonal.php On the menu.php page I left the code below in the mix which drops down the first category listed on the left. On the seasonal.php page I took the code below out and it no longer drops down any menu by default when the page is loaded. What I'd like to do is drop down nothing initially when the page is loaded but if someone opens up the "Cupcakes" category and clicks on an item it would keep that category open when it loads the item details in the center column. If you need to see more code let me know! <!-- Add-On Code: Show Select Containers On Load --> <script type="text/javascript">/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_init);else if(window.addEventListener)window.addEventListener("load",qm_sopen_init,1);};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script> 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 Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together. the first dropdown box displays the country with two titles, Can and USA. the other dropdown box displays the province/state. when Can is selected, 10 provinces is listed in the second box. when USA is selected, 50 states is listed in the second box The second menu is disabled until they select from the first menu any help is appreciated! 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?
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. Hi Only a very simple beginner (thicko) so please don't laugh :-) I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it. The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder. However, on this second page, it does not display the menu. I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it. I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please? Thanks. Barry I'm pretty new to Javascript and found this menu, which I want for my website. I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again. I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P Does anyone know the solution? Here's the code of the menu: Code: eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;
this.a1=this.a2=this.isVertical?0:Math.PI/2},
spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";
document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},
muta:function(){a8=document.getElementById("controale");
for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");
a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));
a10=(this.p+xi)/(2*this.p);
a11=this.fontsize*(this.p+xi)/(2*this.p)+2;
a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;
a10=(this.p+yi)/(2*this.p);
a11=this.fontsize*(this.p+yi)/(2*this.p)+2;
a12=parseInt(100*(this.p+yi)/(2*this.p))};
a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;
a9s.top=(yi+this.y-a14/2)+"px";
a9s.left=(xi+this.x-a13/2)+"px";
a9s.width=a13+"px";a9s.fontSize=a11+"px";
a9s.zIndex=a12};
a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;
a8.style.left=this.x-a8.offsetWidth/2;
if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);
if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;
setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;
document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');eye.muta()}};
function getposOffset(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;
}
hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes 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 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 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! 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 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. Hello guys, The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE. Take a look here - the menu is called "Produkter" Thanks in regard hii i struck ed with problem from last one weak. i want validations for two dropdown menu's... when user click on second dropdown menu by skipping first dropdown menu at that time alert box will come and it should say please select from upper menu.... please help me thanks this is the code but it's not working <HTML><HEAD> <TITLE>drop down validation</TITLE> <script type="text/javascript"> function validateForm(){ if(document.ItemList.Item.selectedIndex==0) { alert("Please select item from first list."); document.ItemList.Item.focus(); return false; } return true; } </SCRIPT> </HEAD> <BODY> Please choose an item from the drop down menu: <form name="ItemList" method="post" action="asp.html" onsubmit="validateForm()"> <table width="100%" border="0"> <tr> <td width="135">Choose a username: </td> <td> <select name="Item"> <option value selected> SELECT </option> <option value>Apples</option> <option value>Oranges</option> </select> <table width="100%" border="0"> <tr> <td width="135">Choose a username: </td> <td> <select name="Item" onchange="validateForm()"> <option value selected> SELECT </option> <option value>Apples</option> <option value>Oranges</option> </select> <input type="submit" name="Submit" value="Submit"> </td></tr></table></form> </BODY> </HTML> |
|||||||