Learn VBA & Macros in 1 Week!

JavaScript - Javascript Image Menu Problem

Full Excel VBA Course - Beginner to Expert

Javascript Image Menu Problem	View Content

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

Full Excel VBA Course - Beginner to Expert

Javascript Menu Problem

Similar Tutorials

View Content

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

Need Help With Javascript Select List/menu Image Swap!

Similar Tutorials

View Content

I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me?

Thanks in advance for any help given!

Code:

function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}

Code:

 <label>
<select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()">
<option value="/images/thumbnails/image1.jpg">White</option>
<option value="/images/thumbnails/image2.jpg">Blue</option>
<option value="/images/thumbnails/image3.jpg">Green</option>
</select>
</label>

Code:

<div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" />

Problem Adding Another Menu In Javascript

Similar Tutorials

View Content

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;
	};

};

Javascript Drop-down Menu Display Problem In Ie 6 And 7

Similar Tutorials

View Content

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.

Chained Javascript Menu. Problem With Displaing Categories

Similar Tutorials

View Content

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?

Javascript Onclick=window.open, Problem With Mouse Right-hand Context Menu

Similar Tutorials

View Content

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!

Image Keeps Resizing Javascript Problem?

Similar Tutorials

View Content

Problem With Javascript Image Swap

Similar Tutorials

View Content

Hi guys,

I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.

Here's the javascript code
Code:

	var News_Images = new Array();
	News_Images[0]="images/max.gif"
	News_Images[1]="images/min.gif"

function DisplayNews(body,box,link,id){
		
		$(body + " > div > .news_box").each(function(){
	        if($(this).css("display")=="block"){
	        	$(this).slideToggle("slow");
	        }
	     });

	     $(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     $(body + " > div > a[class='open_button']").each(function(){
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     if($(body + " > div > #"+box+id).css("display")=="none"){
	     	$(body + " > div > #"+box+id).slideDown("slow");
			
	     	$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
			alert("box =" + box + " id = " + id + " link =" + link);
	     }
	}

And here is the html sample
Code:

    <div class="recent_news_box">
    <a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
    <a class="link_block" href="">Some Title Text</a>
        <div style="display: none;" class="news_box" id="news_link3">
        <img class="front_image" alt="" src="" align="right">
        <span class="date">Jul 21, 2009</span>
        <div>Some Stuff to display here will be short text</div>											
        </div>
    </div>

Thanks in advance.

Javascript Image Slideshow Little Problem

Similar Tutorials

View Content

Hi,

Im using the following javascript to cycle through 3 images on my website header.

http://www.dynamicdrive.com/dynamici...nslideshow.htm

However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page.

is there anyone who could help me?

Javascript Problem: Random Image Cycle On Load Up

Similar Tutorials

View Content

Hi
I have some Javascript on my website http://www.restoreanddesign.co.uk
The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors.

I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript.

i have bolded/coloured the lines i think is causing the problems

--------------------------------------------------------------------

Code:

<script type="text/javascript" language="JavaScript">
// JavaScript Document

var imagenumber = 4 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "images/newtopbar.jpg"

images[2] = "images/newtopbar2.jpg"

images[3] = "images/newtopbar3.jpg"

images[4] = "images/newtopbar4.jpg"

 

var image = images[rand1]
function MM_swapImgRestore() { //v3.0
   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
  
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
   if(!x && d.getElementById) x=d.getElementById(n); return x;
} 

function MM_swapImage() { //v3.0
   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
 </script>

Newbie Javascript Problem - Onmouseover Slideshow With Multiple Image Locations

Similar Tutorials

View Content

hi,

please ignore this thread..it is a duplicate of one already active.

MODS please delete.

apologies for my mistake.

Newbie Javascript Problem - Onmouseover Slideshow With Multiple Image Locations

Similar Tutorials

View Content

Hi,

Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

http://www.javascriptkit.com/script/...ifferent.shtml

to use on my site.

Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?

If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

Thanks in advance

Script Below:

Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages(my images here)

</script>

For the Links:

<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>

For the Image:

<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

Javascript Menu Tree Issue With Sub-menu

Similar Tutorials

View Content

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);

Javascript Full-browser Bg Image And Image Gallery Interference

Similar Tutorials

View Content

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Javascript Menu Help

Similar Tutorials

View Content

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>&nbsp; &nbsp; </td -->
<td id=mm0 align=left><a class=tab href="/portal/page/portal/ABCEmp"><div><span> <b>&nbsp; &nbsp; 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 &amp; 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> &nbsp; &nbsp; </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)>
&nbsp;BCS &nbsp;&nbsp; &nbsp;</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)>
&nbsp;BLS &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Business Services &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Client Services &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Estimating &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Marketing &nbsp; &nbsp; &nbsp;</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)>
&nbsp;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)>
&nbsp;Sales &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Long Term Sched &nbsp; &nbsp; &nbsp;</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)>  
&nbsp;HR Home &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Job Postings &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Safety &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Shared Services &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Transformation &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Manufacturing &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Supply Chain &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Reports &nbsp; &nbsp; &nbsp;</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)>
&nbsp;Content &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>


</td>
</tr></table>
</body>
</html>

-Krzysztof

Dropdown Image Menu

Similar Tutorials

View Content

I'm searching for a (customizable) script which allows me to make a simple drop-down menu. It might not look like a whole lot, but there's more to it than it seems.
With any menu builder one can make such a menu BUT since I am restricted to a non html regular font I have to use (small) images with white on black text in that specific font, in order to show always this font to a visitor. Since the page background will also be black, the menu just looks like simple text.

any help, advice or directions are highly appreciated.

Hide Javascript Menu From Ie9?

Similar Tutorials

View Content

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

Javascript Dropdown Menu Help!

Similar Tutorials

View Content

Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together.

the first dropdown box displays the country with two titles, Can and USA.
the other dropdown box displays the province/state.

when Can is selected, 10 provinces is listed in the second box.
when USA is selected, 50 states is listed in the second box

The second menu is disabled until they select from the first menu

any help is appreciated!

Menu In Jquery Javascript

Similar Tutorials

View Content

hi how can i make somethin like the menus A,b, bla bla
one this site?

http://www.kanzenanimes.net/animes

Javascript Menu Type

Similar Tutorials

View Content

Okay I am looking for some good free scripts of dynamic javascript menu (I dont know how to call them properly). A type of menu where let say on the left you click on item and on the right it updates content to cliced item. Any ideas where could I find some good or how are those called?

Reply With Quote

01-24-2015, 11:31 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

I think you need to be more specific.

Do you mean you want to do this all in one HTML page? So that the displayed content changes depending on what tab or button the user clicks on? That's not quite the same thing as what is normally called a navigation menu, where more often then not you are using the menu to get to ANOTHER html page.