|
JavaScript - Chained Javascript Menu. Problem With Displaing Categories
part of index page
Code:
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
js Code: (function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php Code: <?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem? Similar TutorialsI am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! Hi I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too. I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it. Cheers! hey just wondering if anyone could help me with a problem im having with this menu for a website i got a chained menu javascript downloaded and all the data entered for it it will work in firefox but wont in internet explorer and i just dont understand why http://www.jomcfall97.talktalk.net/index1.html its the menu on the right hand side this is the error message Message: Object doesn't support this property or method Line: 247 Char: 5 Code: 0 URI: http://www.jomcfall97.talktalk.net/chainedmenu.js Here are lines 244 - 248 function initListGroup(n) { var _content=cs_findContent(n), count=0; if (_content!=null) { content=new cs_contentOBJ("cs_"+n,_content.menu); cs_content[cs_content.length]=content; and heres the full chainedmenu.js Code: var _disable_empty_list=false;
var _hide_empty_list=false;
var onclickaction="alert"
function goListGroup(){
for (i=arguments.length-1;i>=0; i--){
if (arguments[i].selectedIndex!=-1){
var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
if (selectedOptionvalue!=""){
if (onclickaction=="alert")
alert(selectedOptionvalue)
else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break
}
}
}
}
if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
function cs_findOBJ(obj,n) {
for (var i=0; i<obj.length; i++) {
if (obj[i].name==n) { return obj[i]; }
}
return null;
}
function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
function cs_findM(m,n) {
if (m.name==n) { return m; }
var sm=null;
for (var i=0; i<m.items.length; i++) {
if (m.items[i].type==cs_M) {
sm=cs_findM(m.items[i],n);
if (sm!=null) { break; }
}
}
return sm;
}
function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
function cs_submenuOBJ(dis,link,sub) {
this.name=sub;
this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
var x=cs_findMenu(sub);
this.items=x==null?new Array():x.items;
this.addM=cs_addM; this.addL=cs_addL;
}
function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
function cs_showMsg(msg) { window.status=msg; }
function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
function cs_refreshList(list,opt,df) {
cs_emptyList(list);
for (var i=0; i<opt.length; i++) {
list.options[i]=new Option(opt[i].text, opt[i].value);
}
if (opt.length>0) {
list.selectedIndex=df;
}
}
function cs_getOptions(menu) {
var opt=new Array();
for (var i=0; i<menu.items.length; i++) {
opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
}
return opt;
}
function cs_updateListGroup(content,idx,sidx,mode) {
var i=0, curItem=null, menu=content.menu;
while (i<idx) {
menu=menu.items[content.lists[i++].selectedIndex];
}
if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+(idx+1),df);
}
if (idx+1<content.lists.length) {
if (disable_empty_list) {
content.lists[idx+1].disabled=false;
}
if (hide_empty_list) {
content.lists[idx+1].style.display="";
}
cs_updateListGroup(content,idx+1,df,mode);
}
}
else {
for (var s=idx+1; s<content.lists.length; s++) {
cs_emptyList(content.lists[s]);
if (disable_empty_list) {
content.lists[s].disabled=true;
}
if (hide_empty_list) {
content.lists[s].style.display="none";
}
if (content.cookie) {
cs_setCookie(content.cookie+"_"+s,"");
}
}
}
}
function cs_initListGroup(content,mode) {
var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+0,df);
}
cs_updateListGroup(content,0,df,mode);
}
function cs_updateList() {
var content=this.content;
for (var i=0; i<content.lists.length; i++) {
if (content.lists[i]==this) {
if (content.cookie) {
cs_setCookie(content.cookie+"_"+i,this.selectedIndex);
}
if (i<content.lists.length-1) {
cs_updateListGroup(content,i,this.selectedIndex,"");
}
}
}
}
function cs_getIdx(mode,name,idx,df) {
if (mode) {
var cs_idx=cs_getCookie(name+"_"+idx);
if (cs_idx!="") {
df=parseInt(cs_idx);
}
}
return df;
}
function _setCookie(name, value) {
document.cookie=name+"="+value;
}
function cs_setCookie(name, value) {
setTimeout("_setCookie('"+name+"','"+value+"')",0);
}
function cs_getCookie(name) {
var cookieRE=new RegExp(name+"=([^;]+)");
if (document.cookie.search(cookieRE)!=-1) {
return RegExp.$1;
}
else {
return "";
}
}
// ----
function addListGroup(n,tm) {
if (cs_goodContent) {
cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
var c=cs_findContent(n);
if (c==null) {
cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
}
else {
delete(c.menu); c.menu=cs_curTop;
}
}
}
function addList(n,dis,link,sub,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addM(dis,link||"",sub);
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function addOption(n,dis,link,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addL(dis,link||"");
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function initListGroup(n) {
var _content=cs_findContent(n), count=0;
if (_content!=null) {
content=new cs_contentOBJ("cs_"+n,_content.menu);
cs_content[cs_content.length]=content;
for (var i=1; i<initListGroup.arguments.length; i++) {
if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
content.lists[count]=arguments[i];
arguments[i].onchange=cs_updateList;
arguments[i].content=content; arguments[i].idx=count++;
}
}
if (content.lists.length>0) {
cs_initListGroup(content,content.cookie);
}
}
}
function resetListGroup(n) {
var content=cs_findContent("cs_"+n);
if (content!=null && content.lists.length>0) {
cs_initListGroup(content,"");
}
}
any help appreciated as ive just come to a standstill over this thanks I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? 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 Hello, I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated. Thank you, Alva www.alvadesign.com Hi, I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one. I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something. Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included. If I'm not making myself clear, please let me know and I will try to explain it better Thanks walkie index.htm 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>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<div id="leftSide">
<!--Site Title-->
<div id="title">
<!--Main Title-->
<h1><span></span>Identity</h1>
<!--Caption/Sub Title-->
<span class="titleSubText">the portfolio of john smith</span>
</div>
<div id="arrowWrapper"><div id="arrow"></div></div>
<div id="buttonsWrapper">
<!--About Button-->
<div id="aboutButtonWrapper">
<div class="navButton" id="aboutButton"></div>
<div class="navCaption" id="aboutCaption">
<!--About Button: Label-->
<span class="navCaptionText">about</span><br />
<!--About Button: Sub-Label-->
<span class="navSubCaptionText">who I am</span>
</div>
</div>
<!--Portfolio Button-->
<div id="portfolioButtonWrapper">
<div class="navButton" id="portfolioButton"></div>
<div class="navCaption" id="portfolioCaption">
<!--Portfolio Button: Label-->
<span class="navCaptionText">portfolio</span><br />
<!--Portfolio Button: Sub-Label-->
<span class="navSubCaptionText">my work</span>
</div>
</div>
<!--Services Button-->
<div id="servicesButtonWrapper">
<div class="navButton" id="servicesButton"></div>
<div class="navCaption" id="servicesCaption">
<!--Services Button: Label-->
<span class="navCaptionText">services</span><br />
<!--Services Button: Sub-Label-->
<span class="navSubCaptionText">what I do</span>
</div>
</div>
<!--Contact Button-->
<div id="contactButtonWrapper">
<div class="navButton" id="contactButton"></div>
<div class="navCaption" id="contactCaption">
<!--Contact Button: Label-->
<span class="navCaptionText">contact</span><br />
<!--Contact Button: Sub-Label-->
<span class="navSubCaptionText">get in touch</span>
</div>
</div>
</div>
</div>
<div id="contentPanelWrapper">
<div id="contentPanelEdge"></div>
<!--Wrapper That Contains 'About' Content-->
<div class="content" id="aboutContent">
<!--Title-->
<div class="contentTitle">about</div>
<!--Body Text-->
<div id="aboutText">
<h3>Who I Am</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
sagittis id neque.</p><br />
<p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
</div>
</div>
<!--Wrapper That Contains 'Portfolio' Content-->
<div class="content" id="portfolioContent">
<!--Title-->
<div class="contentTitle">portfolio</div>
<!--Image Slider-->
<div id="portfolioSlider">
<div id="sliderToolbar">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="imageWrapper">
<ul id="imgList">
<!--Portfolio Images Go Here (See Documentation)-->
<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<!--Wrapper That Contains 'Services' Content-->
<div class="content" id="servicesContent">
<!--Title-->
<div class="contentTitle">services</div>
<!--Service 1 Column-->
<div class="serviceColumn" id="serviceColumn1">
<h3>Identity Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 2 Column-->
<div class="serviceColumn" id="serviceColumn2">
<h3>Web Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 3 Column-->
<div class="serviceColumn" id="serviceColumn3">
<h3>Icon + UI Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
</div>
<!--Wrapper That Contains 'Contact' Content-->
<div class="content" id="contactContent">
<!--Title-->
<div class="contentTitle">contact</div>
<div id="contactFormWrapper">
<!--Contact Form-->
<form id="contact" method="post" action="mail.php">
<input type="text" id="name" name="name" value="name" />
<input type="text" id="email" name="email" value="email" /><br /><br />
<textarea id="message" name="message" rows="" cols="">message</textarea>
<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
</form>
<div id="successMessage"></div>
</div>
</div>
</div>
</body>
</html>
javascript.js Code: numImages=0;
currentImage=1;
currentPanel="none";
$(document).ready(function(){
// Initializes FancyBox Lightbox
$("a.sliderImage").fancybox({
'zoomSpeedIn':200,
'zoomSpeedOut':200,
'overlayShow':true,
'padding':4
});
SelectButton("none");
$("#arrow").fadeOut(0);
if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
$("input").css({"height":13});
$("#name").css({"width":155});
};
$("#title").click(function(){
ShowPanel("none");
});
// Handles Formatting the Portfolio Slider
$("#imgList").children().each(function(){
numImages++;
});
$("#imageWrapper").css({"width":(numImages*541)});
// Handles Function of the Portfolio Slider
$("#prevButton").click(function(){
if (currentImage==1){
currentImage=numImages;
} else {
currentImage--;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
$("#nextButton").click(function(){
if (currentImage==numImages){
currentImage=1;
} else {
currentImage++;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
// Handles Rollover and Click For the Nav Buttons
$("#aboutButton").mouseenter(function(){
SelectButton("about");
});
$("#portfolioButton").mouseenter(function(){
SelectButton("portfolio");
});
$("#servicesButton").mouseenter(function(){
SelectButton("services");
});
$("#contactButton").mouseenter(function(){
SelectButton("contact");
});
$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
SelectButton("none");
});
$("#aboutButton").click(function(){
ShowPanel("about");
});
$("#portfolioButton").click(function(){
ShowPanel("portfolio");
});
$("#servicesButton").click(function(){
ShowPanel("services");
});
$("#contactButton").click(function(){
ShowPanel("contact");
});
// Handles Contact Form Behavior
$("#name").focus(function(){
$("#name").css({"background-color":"#FFFFFF"});
if ($("#name").val()=="name"){
$("#name").val("");
$("#name").css({"color":"#444444"});
};
});
$("#name").blur(function(){
if ($("#name").val()==""){
$("#name").val("name");
$("#name").css({"color":"#888888"});
$("#name").css({"background-color":"#ffdddd"});
};
});
$("#email").focus(function(){
$("#email").css({"background-color":"#FFFFFF"});
if ($("#email").val()=="email"){
$("#email").val("");
$("#email").css({"color":"#444444"});
};
});
$("#email").blur(function(){
if ($("#email").val()==""){
$("#email").val("email");
$("#email").css({"color":"#888888"});
$("#email").css({"background-color":"#ffdddd"});
};
if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
$("#email").css({"background-color":"#ffdddd"});
};
});
$("#message").focus(function(){
$("#message").css({"background-color":"#FFFFFF"});
if ($("#message").val()=="message"){
$("#message").val("");
$("#message").css({"color":"#444444"});
};
});
$("#message").blur(function(){
if ($("#message").val()==""){
$("#message").val("message");
$("#message").css({"color":"#888888"});
$("#message").css({"background-color":"#ffdddd"});
};
});
$("#submit").mousedown(function(){
$("#submit").attr({"src":"images/sendButtonSel.png"});
});
$("#submit").mouseup(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#submit").mouseout(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#name,#email,#message").keyup(function(){
if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
EnableSubmitButton();
} else {
DisableSubmitButton();
};
});
$("#submit").click(function(){
DisableSubmitButton();
var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function() {
ResetForm();
$("#successMessage").fadeIn(10);
setTimeout('$("#successMessage").fadeOut(1000);',2000);
}
});
return false;
});
});
function EnableSubmitButton(){
$("#submit").attr({"disabled":""});
$("#submit").attr({"src":"images/sendButton.png"});
};
function DisableSubmitButton(){
$("#submit").attr({"disabled":"disabled"});
$("#submit").attr({"src":"images/sendButtonDis.png"});
};
function ResetForm(){
DisableSubmitButton();
$("#name, #email, #message").css({"background-color":"#FFFFFF"});
$("#name, #email, #message").css({"color":"#888888"});
$("#name").val("name");
$("#email").val("email");
$("#message").val("message");
};
function ShowPanel(panel){
currentPanel=panel;
SelectButton(panel);
$(".content").fadeOut(250);
switch(panel){
case "none":
$("#contentPanelWrapper").animate({"left":"100%"},500);
$("#arrow").fadeOut(50)
break;
case "about":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#aboutContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
break;
case "portfolio":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#portfolioContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
break;
case "services":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#servicesContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
break;
case "contact":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#contactContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
break;
};
};
function SelectButton(button){
if (currentPanel!="about"){
$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"0px 0px"});
};
if (currentPanel!="portfolio"){
$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"0px -64px"});
};
if (currentPanel!="services"){
$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"0px -128px"});
};
if (currentPanel!="contact"){
$("#contactCaption").animate({"left":50},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
$("#contactButton").css({"background-position":"0px -192px"});
};
switch(button){
case "none":
break;
case "about":
$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"65px 0px"});
break;
case "portfolio":
$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"65px -64px"});
break;
case "services":
$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"65px -128px"});
break;
case "contact":
$("#contactCaption").animate({"left":70},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
$("#contactButton").css({"background-position":"65px -192px"});
break;
};
};
I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke Hi! I'm using this javascript and php/MySQL: http://www.dynamicdrive.com/dynamici...ects/index.htm When I make a selection in all 3 lists I have a button that saves the selections in my MySQL database, like this: set1, Toyota, Cars, Camry Then I want to be able to select set1 in a list and press an "Edit" button that retrieves these 3 selections and auto selects them in the list. How is this possible? Thanks in advance Vigour Hi I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776 And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer. 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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
<div id="storesContent">
<div id="one" class="hiddenDiv">DIV1</div>
<div id="two" class="hiddenDiv">DIV2</div>
<div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>
many thanks Roy Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html 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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)
{
hideDiv(courseSelect.options[i].value);
}
}
function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');
cascadeSelect(deptartmentSelect, courseSelect);
});
And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td><select name="deptartmentSelect" class="deptartmentSelect">
<option value="0">Select a Department</option>
<option value="1">Dept A</option>
<option value="2">Dept B</option>
<option value="3">Dept C</option>
</select></td>
</tr>
<tr>
<th>Territory:</th>
<td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
<option value="0" class="static">- Courses -</option>
<option value="A1" class="sub_1">Course A1</option>
<option value="B1" class="sub_2">Course B1</option>
<option value="C1" class="sub_3">Course C1</option>
</select></td>
</tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>
Thanks again in advance! 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); Hello, I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB. 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 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 I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone. The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually. My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad. Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"? I would be truly grateful for any ideas that would help me fix this. My site is http://fay.iniminimo.com/ Thank you so much for your interest. Fay If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet. I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this: Menu Item 1 [Click to expand] -Sub Item 1.1 [Click to expand] -Sub Item 2.1 [Click to get to page] Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please? URL: http://dinotamermeep.blogspot.com/p/blog-archive.html Thank you, -Meepski |
|||||||