|
JavaScript - Scrollto Menu Not Working In Ie
I have a menu on my site that is not working in IE. It works fine in Safari and Firefox, but it doesnt even open the link for the correspoding button. It just stays on the home page. Someone told me it was the google analytics, but I changed the menu portion of the code and added the gaq_push and the trackEvent, but it's still not working. Help guys, thanks.
Similar TutorialsHey guys, im pretty new to using Jquery and coding period. i came across a problem with the .scrollto plug-in and i have searched up and down for an answer and none would really solve the problem. im trying to run .scrollto to jump from one div to the next with a smooth animation in a horizontal website. this is what the head tag looks like so far <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script src="scripts/jquery.localscroll-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $.localScroll(); }) </script> i tried removing either local scroll or scrollTo and see if there was a conflict but that wasnt the case. ive seen the script run on a webpage without having to add $.localScroll(); to every link, right now it just doesn't move at all. any help would be greatly appreciated. At the bottom of my document (pageA), I have an iframe like this: <iframe src="pageB.html#anchor" ... pageA opens with the iframe at position 0,0. <body onload="window.scrollTo(0,0)" ... works for FF but not for IE(8). How could this be fixed in IE? Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
Hi I am having a problem with that code : Code: <!DOCTYPE html>
<html>
<head>
<title>ScrollTo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
</head>
<body>
<div id="sections">
<ul>
<li id="s1">
<h2>Section 1</h2>
</li>
<li id="s2">
<h2>Section 2</h2>
</li>
<li id="s3">
<h2>Section 3</h2>
</li>
<li id="s4">
<h2>Section 4</h2>
</li>
<li id="s5">
<h2>Section 5</h2>
</li>
</ul>
</div>
</div>
<a href="#" onclick="$('#sections').scrollTo($("#s5"));>#5</a>
</body></html>
onclick="$('#sections').scrollTo($("#s5")); is not working thank you for helping Thank you in advance for your help with this. I have two pages. One page with thumbnails and another page with the actual gallery. On the gallery.html page I can scroll to my 5th image in the list by the following code: onclick="myScroll.scrollToPage(5,5)" I want to achieve this same effect from the index.html file into the gallery.html file. I have tried using anchored links like #image5, but that just messes up the page and the iscroll script I am working off of. Thank you again anyone who can help. Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file. Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. Hi, I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum. What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma. I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page). Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated. Code: CSS
body {
background: black;
text-align: center;
vertical-align: middle;
}
div#bkg {
position: absolute;
text-align: center;
z-index: 1;
}
p#day1 {
position: absolute;
top: 800px;
left: 1000px;
font-weight: bold;
width: 50px;
background: white;
}
Javascript
function showVid(srcVid) {
// set the proper filename of the vid
srcVid = srcVid + ".ogv";
// create the video tag
var vidWin = document.createElement("video");
vidWin.id = "movie";
vidWin.setAttribute("width", "320");
vidWin.setAttribute("height", "240");
vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
var vpw = window.innerWidth;
var vph = window.innerHeight;
var xPosOff = window.pageXOffset;
var yPosOff = window.pageYOffset;
var leftNum = ((vpw/2) + xPosOff) - 160;
var topNum = ((vph/2) + yPosOff) - 120;
vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
var vidSrc = document.createElement("source");
vidSrc.src = "videos/" + srcVid;
vidSrc.type = "video/ogg";
vidSrc.codecs = "theora, vorbis";
vidWin.appendChild(vidSrc);
document.getElementById('bkg').style.opacity = 0.5;
document.body.appendChild(vidWin);
window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
// location.reload(false);
}
HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>
Thanks for looking, I am a novice. Desi Drop down menu that works with IE7 & 8 Works with: MSIE6? andversions (that I have checked) of FF, Safari, Safari for iPhone Page: http://sfphotography.com/menu/test.html All files: http://sfphotography.com/menu/ Note, there are no linked pages, IE7 does not even show the option for selecting pages. [code=html] <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> @import url(style2.css); </style> <body text="black" bgcolor="white" link="#a50921" vlink="#767676" background=""> <div align="center"> <ul><font size="2"> <li><a href="#">Rooms</a> <ul> <li><a href="queen.html">2 Queen / King</a></li> <li><a href="family.html">Family Suite</a></li> <li><a href="jacuzzi.html">Jacuzzi Suite</a></li> </ul> </li> <li><a href="#">Rates</a> <ul> <li><a href="queen_.html">2 Queen / King</a></li> <li><a href="family_.html">Family Suite</a></li> <li><a href="jacuzzi_.html">Jacuzzi Suite</a></li> </ul> </li> </font> </ul> [/code] [code=javascript] // JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; [/code] [code=CSS] body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #a50921; background: #f9f9f9; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ [/code] Hello, I'm attempting to use the sfhover script to make my multilevel menu work in Internet Explorer 6. It does not seem to be having any effect. Sorry, I do not have experience with Javascript...I just found this solution online. Here's the code I'm using: Code: // JavaScript Document
//sfHover couresty of http://www.htmldog.com (http://www.htmldog.com/articles/suckerfish/dropdowns/)
sfHover = function() {
if(document.getElementById("nav")){
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
And the CSS for my menu is: Code: .button {
background:url(http://www.wdi-whq.com/images/page-elements/btn.gif) no-repeat;
border:none;
color:#CFF;
display:block;
font:13pt Verdana, Arial, sans-serif;
padding:11px 0;
text-align:center;
text-decoration:none;
height:48px;
width:176px;
}
.button:hover {
background:url(http://www.wdi-whq.com/images/page-elements/btn-over.gif) no-repeat;
color:#FFF;
display:block;
}
.button:active {
background:url(http://www.wdi-whq.com/images/page-elements/btn-click.gif) no-repeat;
color:#069;
display:block;
}
#sidebar1 {
float:left;
width:250px;
padding:10px 25px 0 25px;
position:relative;
z-index:2;
}
div#nav {
height:28px;
width:250px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-top.gif) top no-repeat;
margin:0;
padding-top:28px;
}
div#navbody {
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-bg.gif) repeat-y;
}
div#navbottom {
height:28px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-btm.gif) bottom no-repeat;
}
ul#navlist {
width:250px;
list-style-type:none;
padding:0;
margin:0;
}
ul#navlist a {
width:200px;
font:bold 11pt Verdana, Arial, sans-serif;
color:#FFF;
height:35px;
text-decoration:none;
padding:6px 0 0 50px;
display:block !important;
}
ul#navlist a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-hilight.gif) left;
}
ul#navlist li {
height:35px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-normal.gif) bottom repeat-x;
position:relative;
}
ul#navlist ul {
list-style-type:none;
margin-left:250px;
padding:0px;
position:absolute;
top:0px;
visibility:hidden;
width:250px;
}
ul#navlist ul > li {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu.gif) bottom no-repeat;
}
ul#navlist li ul li a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu-hilight.gif) bottom no-repeat;
height:28px;
}
ul#navlist li:hover > ul {
visibility:visible;
}
I'm was working on show and hide drop down menu and this works fine on IE, Google Chrome, Safari but not firefox. Can anyone explain to me one this is? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
function mopen(eid) {
//cancel the timer
cancelTimer();
//if there is a existing menu close it
if(menu) menu.style.display='none';
//now go about opening the current one
var menu = document.getElementById(eid);
menu.style.display='block';
}
function mclose() {
menu.style.display='none';
}
function startTimer() {
closetimer = window.setTimeout(mclose, timeout);
}
function cancelTimer() {
if(closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
</script>
<style type="text/css">
body,html {
background:#2E2D3B;
font-family:Arial;
font-size:0.9em;
}
div#menu {
width:120px;
height:auto;
display:none;
border-top:1px solid #cccccc;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
overflow:hidden;
position:relative;
top:3px;
}
a {
color:#f1f1f1;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#menu a {
color:#111111;
text-decoration:none;
}
#menu a:hover {
color:#FF0000;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style:none;
list-style-position:inside;
list-style-type:none;
padding:5px;
background:#ffffff;
border-bottom:1px solid #cccccc;
}
#menu li:hover {
background:#f1f1f1;
}
</style>
</head>
<body>
<a href="javascript:;" onmouseover="mopen('menu');" onmouseout="startTimer();">Show Menu</a>
<div id="menu">
<ul onmouseover="cancelTimer();" onmouseout="startTimer();">
<li><a href="#">Page</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>
</body>
</html>
And you can view it he http://idigteck.com Thanks, Jon W I have an function that shoud be activated when the pull down menu in triggerd, the if functions is corresponding to the same menu overig_eenh[] PHP Code: function overig_tot_abs(selectVeld, nr) { // Prijs totaal if (document.getElementsByName('overig_eenh[]')[nr].value == 'totaal') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value).toFixed( 2 ) } // Prijs kg if (document.getElementsByName('overig_eenh[]')[nr].value == 'kg') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_gew[]')[nr].value + document.getElementsByName('plaat_tot_gew[]')[nr].value)).toFixed( 2 ) } // Prijs verf opp. if (document.getElementsByName('overig_eenh[]')[nr].value == 'verf_opp') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_verf_opp[]')[nr].value + document.getElementsByName('plaat_tot_verf_opp[]')[nr].value)).toFixed( 2 ) } } Form (in loop): PHP Code: <tr> <td><select name="overig_omsch[]" > <option></option> <option value=Engineering>Engineering</option> <option value=Inkoop bev.middelen>Inkoop bev.middelen</option> <option value=Inkoop snijwerk>Inkoop snijwerk</option> <option value=Spuiten>Spuiten</option> <option value=Stralen>Stralen</option> <option value=Transport>Transport</option> </select> </td> <td><select name="overig_eenh[]" onChange="overig_tot_abs(this, 0)" > <option></option> <option value="totaal">Totaal</option> <option value="kg">Per Kg</option> <option value="verf_opp">Per 1m2</option> </td> <td><input type="text" name="overig_prijs[]" size="10" value="" /></td> <td><input type="text" name="overig_totaal[]" size="10" style="text-align:right;background-color: #f1f1f1" value="" readonly="readonly" /></td> <td><input type="text" name="overig_opmerkingen[]" size="75" value="" /></td> </tr> I am having an issue using the Cut & Paste jQuery Mega Menu. I am using it on the main page of my future forum (test forum is here - http://illini-nation.deepermethod.co...nity/index.php It's the button labeled 'Forum Categories'). The mega menu works fine on the main page of the forum, but once I drill down into the forums, the mega menu no longer works. The mega menu ONLY works on the index of the forum. Any and all help is greatly appreciated. IlliniCrusader I thought I was so cool combining both this shopping cart with the double drop down menu, but now my menu isnt working and I can't seem to trouble shoot my way through it anymore. I am sure I am missing just one small part because the page loads fine, but when I select an option from step three where it says "select a subject" it no longer loads the options into the subsequent drop down menu which reads "Pages appear here" (LoL at least I WISH they would appear there) Here is the code. I apologize for not making it smaller, but as I mentioned it is meshed with a shopping cart and I am not skilled enough to seperate my code. Code:
<head>
<script language="javascript">
<!--//
//new Option("text","value")
//this code changes menus
function nullOptionsDMA(aMenu){
var tot=aMenu.options.length
for (i=0;i<tot;i++)
{
aMenu.options[i]=null
}
aMenu.options.length=0;
}
function MySubjectDMA0(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Drink Low/No Alcohol Beer","295");
options[2]=new Option("Drink Mixed Drinks","295");
options[3]=new Option("Buy Chewing Tobacco","295");
options[0].selected=true
}
}
function MySubjectDMA1(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Fine Jewelry,<$400","295");
options[2]=new Option("Buy Aerobic/Fitness Shoes, $50+","295");
options[3]=new Option("Dry Cleaning,$100+","295");
options[0].selected=true
}
}
function MySubjectDMA2(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Lease Most Recent Vehicle","295");
options[2]=new Option("Own/Lease New Vehicle","295");
options[3]=new Option("Own/Lease Used Vehicle","295");
options[0].selected=true
}
}
function MySubjectDMA3(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Satellite Dish","295");
options[2]=new Option("Watch Any Pay-per-View","100");
options[0].selected=true
}
}
function MySubjectDMA4(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Own Camcorder","295");
options[2]=new Option("Buy Any TV","295");
options[3]=new Option("Own 3+ Television Sets","295");
options[0].selected=true
}
}
function MySubjectDMA5(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Any Homeowner/Per Pr Insurance","295");
options[2]=new Option("Has Auto","295");
options[3]=new Option("Has Disability Insurance","295");
options[0].selected=true
}
}
function MySubjectDMA6(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Grocery Shop,4+ Times 1wk","295");
options[2]=new Option("Grocery Store, Travel 11+ Miles ","295");
options[0].selected=true
}
}
function MySubjectDMA7(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Health/Beauty Products for Women,$100+","295");
options[2]=new Option("Go to the Doctor for Check-Ups","295");
options[3]=new Option("Use Hair Growth Products","295");
options[0].selected=true
}
}
function MySubjectDMA8(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy from Fast Food","295");
options[2]=new Option("Dine Out,1+ Times/wk","295");
options[3]=new Option("Dine Out,<1 Times/mo","295");
options[0].selected=true
}
}
function MySubjectDMA9(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Belong to a Church Board ","295");
options[2]=new Option("Belong to a Country Club ","100");
options[3]=new Option("Buy Any Children's Toys","295");
options[0].selected=true
}
}
function MySubjectDMA10(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Average Monthly Cell Phone Bill,$100+","295");
options[2]=new Option("Own Cell Phone ","295");
options[3]=new Option("Has Cell Phone for Business Use ","295");
options[0].selected=true
}
}
function MySubjectDMA11(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","0");
options[1]=new Option("Ads Keep Me Up-to-Date about Prods/Svcs I Want","295");
options[2]=new Option("Buy Based on Quality, Not Price","295");
options[3]=new Option("Choose Store b/c Store Personnel Service","295");
options[0].selected=true
}
}
function MySubjectDMA12(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Cooling Equipment, Heat Pump","1650");
options[2]=new Option("Has Heater System, Central Warm","1650");
options[3]=new Option("Has Heater System, Heat Pump ","1650");
options[0].selected=true
}
}
function MySubjectDMA13(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Online Game Download Sub","1650");
options[2]=new Option("Has Online Movie Download Sub","1650");
options[3]=new Option("Has Online","1650");
options[0].selected=true
}
}
/* ####################### setUp100 ####################### */
function setUpDMA(){
with (document.orderform) {
if (menuSubjectsDMA.selectedIndex==0){
menuSubjectsDMA.options[0].selected=true
qty4.options[0].selected=true
}
if (menuSubjectsDMA.selectedIndex==1)
MySubjectDMA0(qty4)
if (menuSubjectsDMA.selectedIndex==2)
MySubjectDMA1(qty4)
if (menuSubjectsDMA.selectedIndex==3)
MySubjectDMA2(qty4)
if (menuSubjectsDMA.selectedIndex==4)
MySubjectDMA3(qty4)
if (menuSubjectsDMA.selectedIndex==5)
MySubjectDMA4(qty4)
if (menuSubjectsDMA.selectedIndex==6)
MySubjectDMA5(qty4)
if (menuSubjectsDMA.selectedIndex==7)
MySubjectDMA6(qty4)
if (menuSubjectsDMA.selectedIndex==8)
MySubjectDMA7(qty4)
if (menuSubjectsDMA.selectedIndex==9)
MySubjectDMA8(qty4)
if (menuSubjectsDMA.selectedIndex==10)
MySubjectDMA9(qty4)
if (menuSubjectsDMA.selectedIndex==11)
MySubjectDMA10(qty4)
if (menuSubjectsDMA.selectedIndex==12)
MySubjectDMA11(qty4)
if (menuSubjectsDMA.selectedIndex==13)
MySubjectDMA12(qty4)
if (menuSubjectsDMA.selectedIndex==14)
MySubjectDMA13(qty4)
}
}
/* ####################### changeFiles ####################### */
function changeFilesDMA(){
aMenu=document.orderform.menuSubjectsDMA
aMenu2=document.orderform.qty4
with (aMenu){
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("Pages appear here","0")
aMenu2.options[0].selected=true;
history.go(0)
break
case 1:
MySubjectDMA0(aMenu2)
aMenu2.options[0].text="Drink Any Beer"
break
case 2:
MySubjectDMA1(aMenu2)
aMenu2.options[0].text="Buy Costume Jewelry"
break
case 3:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="Bought Most Recent Vehicle"
break
case 4:
MySubjectDMA3(aMenu2)
aMenu2.options[0].text="Subscribe to Cable TV"
break
case 5:
MySubjectDMA4(aMenu2)
aMenu2.options[0].text="Buy Camera"
break
case 6:
MySubjectDMA5(aMenu2)
aMenu2.options[0].text="Has Any Credit Card"
break
case 7:
MySubjectDMA6(aMenu2)
aMenu2.options[0].text="Grocery Shopping spend $150+ 1wk"
break
case 8:
MySubjectDMA7(aMenu2)
aMenu2.options[0].text="Buy Health/Beauty Products for Men,$100+"
break
case 9:
MySubjectDMA8(aMenu2)
aMenu2.options[0].text="Buy from Any Fast Food Restaurant"
break
case 10:
MySubjectDMA9(aMenu2)
aMenu2.options[0].text="Attend Classical/Opera perform.,1+ Times/mo"
break
case 11:
MySubjectDMA10(aMenu2)
aMenu2.options[0].text="Average Monthly Cell Phone Bill,<$26"
break
case 12:
MySubjectDMA11(aMenu2)
aMenu2.options[0].text="Ads Are More Manipulative Than Informative100"
break
case 13:
MySubjectDMA12(aMenu2)
aMenu2.options[0].text="Has Cooling Equipment, Central Air"
break
case 14:
MySubjectDMA13(aMenu2)
aMenu2.options[0].text="Has Wireless home network"
break
}
}
}
//-->
</script>
<!-- ######## end copying code (DMA) from the HEAD ####### -->
<script>
<!--
function wopen(url, name, w, h)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
var win = window.open(url,
name,
'width=' + w + ', height=' + h + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=no, resizable=no');
win.resizeTo(w, h);
win.focus();
}
// -->
</script>
<SCRIPT SRC="language-en.js"></SCRIPT>
<SCRIPT SRC="nopcart.js">
</SCRIPT>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<BODY>
<table class="Global" cellpadding="0" cellspacing="0" border="0">
<tr><td height="117" colspan="2">
<!-- ============ Navbar Menu ============== -->
<table class="NavBar" style="height: 27px;" cellspacing="0" border="0"><tr><td>
<table class="NavBarMenu" style="height: 27px;" align="left" border="0" cellspacing="0"><tr>
<td><a href="index.html">Home</a> </td>
<td><a href="samples.html">Samples</a> </td>
<td><a href="ordering.html">Ordering</a> </td>
<td><a href="faq.html">F.A.Q.</a> </td>
<td><a href="contact.html">Contact</a></td>
</tr></table>
</td></tr></table>
<div style="height: 1px; background: #000000;"><img src="images/space1x1.gif" width="1" height="1" alt="spacer"></div>
<noscript>
<p style="color:red">You appear to have Javascript disabled. This page requires Javascript. Please <a
href="http://support.microsoft.com/gp/howtoscript" target="_blank">enable Javascript</a> and reload this page before
continuing.</p>
</noscript>
<script language="JavaScript">
<!--
function CalculateTotals(){
f=document.orderform;
f.total1.value=parseInt(f.qty1.value)*50;
f.total2.value=parseInt(f.qty2.value)*((f.qty1.value)*10+10);
f.total3.value=parseInt(f.qty3.value)*100;
f.total4.value=parseInt(f.qty4.value)*1.2;
f.grandtotal.value=parseInt(f.total1.value)
+parseInt(f.total2.value)
+parseInt(f.total3.value)
+parseInt(f.total4.value)
+parseInt(f.sh.value);}
//-->
</script></head>
<body>
<form name="orderform" method="post" action="formprocessor">
<table border="1" width="100%" cellpadding="4"><tr>
<td colspan="2" align="center"><b>Step 1: Select what to include in your report</b><br><i>My report should...</i></td></tr>
<tr><td>
Evaluate a radius of <select name="qty1" onchange="CalculateTotals()">
<option Selected value="0">5 miles
<option value="1">10 miles
<option value="2">15 miles
<option value="3">20 miles
</select>
around <INPUT TYPE="text" NAME="Location" VALUE="Full Address OR Zipcode" SIZE="22" MAXLENGTH="45">
</td>
<td align="right"><input name="total1" size="7"
OnFocus="document.orderform.qty2.select();
document.orderform.qty2.focus();" /></td></tr>
<tr><td>
<select name="qty2" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include competitive analysis (<a href="whatis1.html" target="popup"
onClick="wopen('whatis1.html', 'popup', 350, 450); return false;">what is this?</a>)
</td>
<td align="right"><input name="total2" size="7"
OnFocus="document.orderform.qty3.select();
document.orderform.qty3.focus();" /></td></tr>
<tr><td>
<select name="qty3" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include target market report (<a href="whatis2.html" target="popup"
onClick="wopen('whatis2.html', 'popup', 350, 450); return false;">what is this?</a>)
</td>
<td align="right"><input name="total3" size="7"
OnFocus="document.orderform.qty4.select();
document.orderform.qty4.focus();" /></td></tr>
</table><br><table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center">
<b>Step 2: Define your target market</b><br><i>The people I am looking for are...</i></td></tr>
<tr><td colspan="2">
Household Age</td><td colspan="2">
<select name="HHAge" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="Less than 35">Less than 35
<option value="Less than 100">Less than 55
<option value="25to44">25-44
</select>
<tr><td colspan="2">
Average Household Education</td><td colspan="2">
<select name="HHEducation" onchange="CalculateTotals()">
<option Selected value="">Target Education
<option value="GradPlus">Graduate Plus
<option value="CollegeGrad">College Grad
</select><br>
<tr><td colspan="2">
Household Employment Type</td><td colspan="2">
<select name="HHEmployment" onchange="CalculateTotals()">
<option Selected value="">Target Employment
<option value="Management">Management
<option value="Professional">Professional
</select><br>
<tr><td colspan="2">
Household Ethnicity</td><td colspan="2">
<select name="HHEthnicity" onchange="CalculateTotals()">
<option Selected value="">Target Ethnicity
<option value="White">White
<option value="WhiteAsianMix">White, Asian, Mix
</select><br>
<tr><td colspan="2">
Household Composition</td><td colspan="2">
<select name="HHComposition" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="HHwithKids">Household with kids
<option value="MostlywithKids">Mostly with kids
</select><br>
<tr><td colspan="2">
Household Income</td><td colspan="2">
<select name="HHIncome" onchange="CalculateTotals()">
<option Selected value="">Target Income
<option value="Wealthy">Wealthy
<option value="Upscale">Upscale
<option value="UpperMiddle">Upper Middle
<option value="Middle">Middle
<option value="LowerMid">Lower Middle
</select><br>
<tr><td colspan="2">
Household Tenure</td><td colspan="2">
<select name="HHTenure" onchange="CalculateTotals()">
<option Selected value="">Target Tenure
<option value="Homeowners">Homeowners
<option value="Renters">Renters
</select><br>
</td></tr>
</table><br><table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 3: Add a specialty targeting criteria</b><br><i>I want people
who...</i></td></tr><tr></td>
<tr><td>
<!-- This menu holds the subjects-->
<select name="menuSubjectsDMA" onChange="changeFilesDMA()" size="1">
<option value="0">Select a subject
<option value="">Alcohol & Tabacco $295
<option value="">Jewelry & Apparel $295
<option value="">Automotive $295
<option value="">TV Media $295
<option value="">Electronics & Internet $295
<option value="">Finance $295
<option value="">Grocery $295
<option value="">Health & Drugs $295
<option value="">Restaurants $295
<option value="">Sports & Leisure $295
<option value="">Telecommunications $295
<option value="">Consumer Behavior $295
<option value="">Home and Utilities $1980
<option value="">Home Technology $1980
</select>
</td><td colspan="2">
<!-- this menu holds the files to go-->
<select name="qty4" onChange="CalculateTotals()" style="width:200" size="1">
<option value="0">Pages appear here
</select>
<td align="right"><input name="total4" size="7"
OnFocus="document.orderform.qty1.select();
document.orderform.qty1.focus();" /></td></tr>
</td></tr>
</table><br>
<table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 4: Tell us about your business</b><br><i>Customize my report for...</i></td></tr>
<tr><td>
<td align="right">Minimum Order:</td><td align="right">$200 </td></tr>
<tr><td></td><td></td>
<td align="right"><b>GRAND TOTAL:</b></td>
<td align="right"><input name="grandtotal" size="7"
OnFocus="document.orderform.qty1.select();
document.orderform.qty1.focus();" /></td></tr>
</table>
<input type="hidden" value="5" name="sh" />
<br />
<center><input type="reset" value="Reset Form">
<input type="submit" value="Proceed to Checkout"> </center>
</form>
<script language="JavaScript">
<!--
f=document.orderform;
f.qty1.value=0; f.qty2.value=0;
f.qty3.value=0; f.qty4.value=0;
f.total1.value=0; f.total2.value=0;
f.total3.value=0; f.total4.value=0;
f.sh.value=200;
f.grandtotal.value=200;
//-->
</script>
</body></html>
<!-- ======= End Content ======== -->
</td></tr>
<!-- ======== Footer ========== -->
<tr><td colspan="2" class="Footer" style="vertical-align: middle;">
Copyright © GrowthEdge
</td></tr></table>
</body>
</html>
I also check my email regularly if anyone has any comments or advice. Hi, I really need urgent help. I am using a javascript on a DotNetNuke CMS site to allow the user to choose text/background colour, basically it changes stylesheets. Here is the code that I have used: http://www.dynamicdrive.com/dynamici...etswitcher.htm and here is my example: http://lrptintranet.com.dnnmax.com/ - you can see the colour image buttons top right under the main menu. The style sheet changer seems to work on the top menu level items but as soon as you choose a submenu the javascript doesn't seem to work. I don't know anything at all about javascript - can anyone offer any advice how I can get this working on the sub menu pages?
Hello all, I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file. The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way. I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads. I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below. Code: <!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine
Peninsula & The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script>
// initialise the drop-down menus
runOnLoad(Dropdown.initialise);
</script>
</head>
<body>
<div id="wrapper">
<a href="tel://+61425859742"><div id="mobile_header"></div></a>
<a href="tel://+61425859742"><div id="phoneBlock"></div></a>
<div id="header"></div>
<div id="nav">
<ul class="dropdown">
<li>
<a href="index.html">Home</a>
</li>
<li>Electrical
<ul>
<li>
<a href="domestic_electrician.html">Domestic</a>
</li>
<li>
<a href="electrical_contractors.html">Commercial/Industrial</a>
</li>
</ul>
</li> <li>
<a href="air_conditioner_installation.html">Air Conditioners</a>
</li> <li>
<a href="solar_power_systems.html">Solar</a>
<ul>
<li><a href="solar_system_maintenance.html">Maintenance</a>
</li>
<li><a href="solar_energy_facts.html">About Solar</a>
</li>
</ul>
</li> <li>
<a href="b_type_gas_service.html">Type B Gas</a>
</li> <li>
<a href="formgenerator/forms/contact.html">Contact Us</a>
</li>
</ul>
</div>
<div id="content-2">
<div class="clear"> </div>
<div id="top_border"></div>
<div id="content-2-1">
<span class="blackheading">Watt You Need Electrical -
Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast</span>
<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can
take that extra bit of time and effort to make sure you get the best service and advice.
<br /><br />
If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a
split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best
quality job at a competitive price.
<br /><br />
Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>,
we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B
Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
<br /><br />
<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
</p>
</div>
<div id="bottom_border"></div>
</div>
<div id="footer">
<table class="tableFooter">
<tr><td>Watt You Need Electrical Pty. Ltd. © 2014</td></tr>
</table>
</div>
</div>
</body>
</html>
Code: /*
Dropdown.js
Creates touch-friendly drop-down menus
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the Dropdown object
var Dropdown = (function(){
// the delay, in milliseconds
var DELAY = 250;
// the list of menus
var menus = [];
// Initialises the drop-down menus.
function initialise(){
// listen for touch events on the document if appropriate
if ('createTouch' in document){
document.body.addEventListener('touchstart', handleTouchStart, false);
}
// loop over the menus, converting them
var menus = document.querySelectorAll('ul.dropdown');
for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);
}
/* Handles a touch start event. The parameter is:
*
* e - the event
*/
function handleTouchStart(e){
// determine whether any menu is open
var isOpen = false;
for (var i = 0; i < menus.length; i ++){
if (menus[i].isOpen) isOpen = true;
}
// return immediately if all menus are closed
if (!isOpen) return;
// move up the document tree until we reach the root node
var node = e.target;
while (node != null){
// return immediately if we are inside a drop-down menu
if (/\bdropdown\b/.test(node.className)) return;
// move onto the parent node
node = node.parentNode;
}
// close all menus
close();
}
/* Closes all menus except the specified menu. The parameter is:
*
* menu - a menu not to close; this parameter is optional
*/
function close(menu){
// loop over the menus, closing them
for (var i = 0; i < menus.length; i ++){
if (menus[i] != menu) menus[i].close();
}
}
/* Creates a drop-down menu. The parameter is:
*
* node - either the DOM node of the menu or the ID of the node
*/
function applyTo(node){
// fetch the DOM node if a string was supplied
if (typeof node == 'string') node = document.getElementById(node);
// create and store the new menu
menus.push(new Menu(node));
}
/* Creates a drop-down menu. The parameter is:
*
* node - the DOM node of the menu
*/
function Menu(node){
// store the node
this.node = node;
// update the class name
node.className += ' dropdownJavaScript';
// listen for mouse events
if ('addEventListener' in node){
node.addEventListener(
'mouseover', this.bind(this.handleMouseOver), false);
node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
node.addEventListener('click', this.bind(this.handleClick), false);
}else{
node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
node.attachEvent('onmouseout', this.bind(this.handleMouseOut));
node.attachEvent('onclick', this.bind(this.handleClick));
}
// listen for touch events if appropriate
if ('createTouch' in document){
node.addEventListener('touchstart', this.bind(this.handleClick), false);
}
}
// whether the menu is open
Menu.prototype.isOpen = false;
// the timeout
Menu.prototype.timeout = null;
/* Binds the specified function to the current object. The parameter is:
*
* f - the function
*/
Menu.prototype.bind = function(f){
// return the bound function
var thisObject = this;
return function(){ f.apply(thisObject, arguments); }
}
/* Handles a mouse over event. The parameters a
*
* e - the event
* immediate - true to open the menu without a delay
*/
Menu.prototype.handleMouseOver = function(e, immediate){
// clear the timeout
this.clearTimeout();
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// if the target is within a list item, set the timeout
if (item.nodeName == 'LI'){
this.toOpen = item;
this.timeout =
window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
}
}
// Handles a mouse out event.
Menu.prototype.handleMouseOut = function(){
// clear the timeout
this.clearTimeout();
// set the timeout
this.timeout = window.setTimeout(this.bind(this.close), DELAY);
}
/* Handles a click event. The parameter is:
*
* e - the event
*/
Menu.prototype.handleClick = function(e){
// close any other menus
close(this);
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// check that the target is within a list item
if (item.nodeName == 'LI'){
// check whether the item has a closed submenu
var submenu = this.getChildrenByTagName(item, 'UL');
if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){
// open the submenu
this.handleMouseOver(e, true);
// prevent the default action
if ('preventDefault' in e){
e.preventDefault();
}else{
e.returnValue = false;
}
}
}
}
// Clears the timeout.
Menu.prototype.clearTimeout = function(){
// clear the timeout
if (this.timeout){
window.clearTimeout(this.timeout);
this.timeout = null;
}
}
// Opens the last item hovered over.
Menu.prototype.open = function(){
// store that the menu is open
this.isOpen = true;
// loop over the list items with the same parent
var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
for (var i = 0; i < items.length; i ++){
// check whether there is a submenu
var submenu = this.getChildrenByTagName(items[i], 'UL');
if (submenu.length > 0){
// check whether the submenu should be opened or closed
if (items[i] != this.toOpen){
// close the submenu
items[i].className =
items[i].className.replace(/\bdropdownOpen\b/g, '');
this.close(items[i]);
}else if (!/\bdropdownOpen\b/.test(items[i].className)){
// open the submenu
items[i].className += ' dropdownOpen';
// determine the location of the edges of the submenu
var left = 0;
var node = submenu[0];
while (node){
left += node.offsetLeft;
node = node.offsetParent;
}
right = left + submenu[0].offsetWidth;
// move the submenu to the right of the item if appropriate
if (left < 0) items[i].className += ' dropdownLeftToRight';
// move the submenu to the left of the item if appropriate
if (right > document.body.clientWidth){
items[i].className += ' dropdownRightToLeft';
}
}
}
}
}
/* Closes the menus within the specified node. The parameter is:
*
* node - the node; if omitted, all menus are closed
*/
Menu.prototype.close = function(node){
// if no node was specified, close all menus
if (!node){
this.isOpen = false;
node = this.node;
}
// loop over the items, closing their submenus
var items = node.getElementsByTagName('li');
for (var i = 0; i < items.length; i ++){
items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
}
}
/* Returns an array containing the children of the specified node with the
* specified tag name. The parameters a
*
* node - the node
* tagName - the tag name
*/
Menu.prototype.getChildrenByTagName = function(node, tagName){
// initialise the list of children
var result = [];
// loop over the children, adding those with the right tag name to the list
for (var i = 0; i < node.childNodes.length; i ++){
if (node.childNodes[i].nodeName == tagName){
result.push(node.childNodes[i]);
}
}
// return the children
return result;
}
// return the public API
return {
initialise : initialise,
applyTo : applyTo
};
})();
Any help is appreciated. Hi developers Needing some help. My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse. I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices? The code I am using is: <script type="text/javascript"><!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; //--></script> Which drives the following html: <ul id="links"> <li><a href="whats_new/whats_new.html">what's new</a></li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">clothing</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="clothing/clothing_page1.html">clothing</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">accessories</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="bags/bags_page1.html">bags</a> <a href="jewellery/jewellery_page1.html">jewellery</a> </div> </li> </ul> Any suggestions would be much appreciated. Thank you. Nonye Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
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); |
|||||||