JavaScript - Javascript Navigation - One Button Issue?

Hello

I have a javascript navigation bar at the top of my page. I would like to split the navigation with 3 links on the left side of my logo and 3 links on the right side. Like this....

Home Designs Services (LOGO IMAGE) About FAQ's Contact

Can someone help me figure out how to split a javascript navigation? I don't know if it should be separate navigation for the right and left or if it is just a CSS change? Below is my javascript and CSS.

Code:

<script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
    <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">Home</a></li>
        <li><a href="#">Designs</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li class="submenu">
                    <a href="#">Three</a>
                    <ul>
                        <li class="noborder"><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>      
            </ul>
        </li>
        <li><span>Services</span>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li class="submenu">
					<span>No Link</span><ul>
                		<li class="noborder"><a href="#">One</a></li>
                		<li><a href="#">Two</a></li>
                		<li><a href="#">Three</a></li>
                		<li><a href="#">Four</a></li>
                		<li><a href="#">Five</a></li>
					</ul>
				</li>
                <li><a href="#">Five</a></li>
                <li><a href="#">Six</a></li>
            </ul>
        </li>
         <li class="nodiv"><a href="#">About</a></li>
        <li><a href="#">FAQ's</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li class="submenu">
                    <a href="#">Three</a>
                    <ul>
                        <li class="noborder"><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>      
            </ul>
        <li class="nodiv"><a href="#">Contact</a></li></li>
      </li>
    </ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>

Code:

.nav {
	height:36px;
	color:#fff;
	text-shadow:1px 1px #888;
	position:absolute;
	z-index: 100;
	width: 960px;
	padding-top: 70px;
	padding-left: 0px;
	}
	
	
.menu a {
	float:left; 
	color:#eee; 
	text-decoration:none; 
	width:120px; 
	height:28px; 
	padding-top:8px;
	}
	
.menu span {
	float:left; 
	color:#eee; 
	text-decoration:none; 
	width:120px; height:28px; 
	padding-top:8px;
	}
	
	
.menu a:hover {
	color:#fff;
	}
	
.menu {
	list-style:none; 
	font:16px Arial,Verdana; 
	text-align:center; 
	width:900px; 
	margin:0 auto;
	}
	
.menu li {
	position:relative; 
	float:left; 
	width:120px; 
	z-index:1000;
	}
	
.menu ul {
	display:none; 
	position:absolute; 
	font:normal 13px Arial,Verdana; 
	top:36px; 
	left:0; 
	background:#aaa; 
	display:none; 
	list-style:none;
	}
	
.menu ul li {
	float:none; 
	border-top:1px solid #ccc; 
	width:120px;
	}
	
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
	float:none; 
	display:block; 
	background:none; 
	height:22px; 
	padding-top:5px;
	}
	
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999; 
color:#fff;
}

.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
	float:none; 
	display:block; 
	background:none;
	 height:22px; 
	 padding-top:5px;
	 }
	 
.menu ul ul {
	left:120px; 
	top:0;
	}
	
.menu li.submenu {
	font-weight:bold;
	}
	
.menu li.noborder {
	border-top:none;
	}
	
li.menuhover a, li.menuhover li.menuhover a {
	color:#fff; 
	background:#999;
	}
	
li.menuhover span, li.menuhover li.menuhover span {
	color:#fff; 
	background:#999;
	}

THANKS!

Hi forums,

I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea.



This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do.

Any assistance is highly appreciated.

Hi guys! I'm having trouble deciphering the javascript on my webpage

www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads.

Here is the code:

Code:

jQuery.noConflict(); jQuery(document).ready(function(){

	//VAR SETUP
	var rightBg = jQuery('#rightBg'),
		boxStuff = jQuery('.boxStuff'),
		bgControls = jQuery("#bgControls"),
		nextImg = jQuery('#nextImg'),
		prevImg = jQuery('#prevImg'),
		blogNav = jQuery('#blogNav'),
		navBox = jQuery("#navBox"),
		navBoxa = jQuery("#navBox a"),
		navHeight = navBox.height(),
		firstImg = jQuery('.wrapperli:first-child'),
		lastImg = jQuery('.wrapperli:last-child'),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPhone = deviceAgent.match(/(iphone|ipod)/);
	
	//CLOSE FUNCTION
	function closeSesame(){
		jQuery('.activeBox').fadeOut(600,function(){
			navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
			jQuery(".activeNav").removeClass('activeNav');
			rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
			bgControls.fadeIn(600);
		}).removeClass('activeBox');
	}
	
	//OPEN FUNCTION
	function openSesame(){
		navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
		rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
			jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
			navBox.fadeIn(600);
		});
		bgControls.fadeOut(300);
	}
	
	//OPACITY STUFF
	rightBg.css({opacity:".85"});
	
	//REMOVE TITLE ATTRIBUTE
	jQuery("#dropmenu a").removeAttr("title");

	//MENU
	jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
	jQuery("#dropmenu li").hover(function(){
		jQuery(this).find('ul:first').show();
	},function(){
		jQuery(this).find('ul:first').hide();
	});
	jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>&rsaquo;</span>");
		
	//PRETTY PHOTO
	jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
	jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed: 'normal', // fast/slow/normal 
		opacity: 0.35, // Value betwee 0 and 1 
		show_title: false, // true/false 
		allow_resize: true, // true/false 
		overlay_gallery: false,
		counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2 
		//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square 
		hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto 
		modal: false // If set to true, only the close button will close the window 
	});	
		
	//WINDOW LOAD
	jQuery(window).load(function(){
		//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
		jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
		
		//LOAD MESH BG
		jQuery('#mesh').fadeIn(600);
		
		jQuery('#loading').fadeOut(600);
		
		//IF GALLERY PAGE
		if(jQuery('body').hasClass('page-template-page_gallery-php')){
			navBox.fadeIn(600);
			bgControls.fadeIn(600);
			jQuery(".wrapperli:first-child a").click();
		//IF NOT GALLERY PAGE
		} else { 
			openSesame();			
		}
	});
	
	//FADE CRUMBS IN/OUT ON SCROLL
	jQuery('#pageContent').scroll(function(){
		if(jQuery('#pageContent').scrollTop()>150){
			blogNav.fadeOut(300);
		} else {	
			blogNav.fadeIn(300);
		}
	});	

	//NAV BOX STUFF
	navBox.css({marginTop:"-"+navHeight/2+"px"});
	boxStuff.css({marginTop:"-"+navHeight/2+"px"});

	//NAV BUTTON CLICK
	navBoxa.click(function(){
		
		//VAR SETUP
		var thisBox = jQuery(this).attr('href');
			
		//IF ACTIVE LINK, CLOSE STUFF
		if(jQuery(this).hasClass('activeNav')){
			closeSesame();
			return false;
		
		//IF NOT ACTIVE LINK
		}else{
			
			//IF CONTENT OPEN
			if(navBox.hasClass("openNav")){
				navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
				jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
				jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
					jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
				});
			
			//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});
	
	//CLICKING GALLERY IMG
	jQuery(".wrapperli a").click(function(){
		
	if(iPhone){
		return false;	
	}else{
		//GET HREF
		var galleryHref = jQuery(this).attr('href'),
			galleryTitle = jQuery(this).attr('title'),
			imageInfo = jQuery('#imgInfo'),
			itemNumber = jQuery(this).parent().index() + 1;
			numberItems = jQuery('.wrapperli').length;
				
		//CHANGE TITLE INFO	
		if(galleryTitle){
			imageInfo.hide().html(galleryTitle + "&nbsp / &nbsp"+ itemNumber + " of " + numberItems).fadeIn(150);
		} else {
			imageInfo.hide();
		}
		
		//CHANGE CLASSES
		jQuery(".wrapperli").not(this).removeClass('activeImg');
		jQuery(this).parent().addClass('activeImg');
		
		//IF MENU OPEN, CLOSE IT
		if(navBox.hasClass("openNav")){ closeSesame(); }
		
		//CHANGE BACKGROUND
		jQuery.backstretch(galleryHref, {speed: 300});

		return false;
	}
	});
	
	//NEXT CONTROLS
	nextImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.next().length > 0){
				activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				firstImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	//PREV CONTROLS
	prevImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.prev().length > 0){
				activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				lastImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	// Keyboard shortcuts
    jQuery(document).keydown(function(e) {
    	var unicode = e.charCode ? e.charCode : e.keyCode;    	
        if (unicode == 39) { nextImg.click();} // right arrow
        else if (unicode == 37) {prevImg.click();} // left arrow
    });
    
});

and I changed the open sesame to closed sesame here in the code

Code:

//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});

but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated!

I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/

When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework.

I need this type of horizontal menu for a custom coded CSS and PHP site.

Any and all help would be appreciated. Either code or point me to a tutorial.

Thanks,

WiLd

Hi
I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question.

The code is in Jquery and Javascript and i'm still learning.

I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too....


Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{

			if (flag==false)
			{
				try {
					checkAnswer(document.getElementById('quizForm'))
					flag=true;
					return false;
				}
				catch(err)
				{
					if (err.number !=-2146823281)
					{
						alert(err.description);
					}
				}
			}
			next_page = (current_page + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

This is what the code looks like now without the changes....

Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{
			next_page = (parseInt (current_page) + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing.

I put this bit together but it doesn't do anything....


Code:

else{    

                        

        if (document.getElementById('quizForm')){

 

            if (document.quizForm.cc.disabled==true)

                      document.quizForm.cc.disabled=false

 

else

 

{return true;}

Any advise? Thanks.

I have a website using this pageslide function
http://srobbin.com/blog/jquery-pageslide/

Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back?

How you handle back button scenario in firefox browser.
The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache.

It works in IE..

hello,

i have this script that doesn't work exactly right yet. but i can't figure it out what i need to chance to let it work.

in the script i want the button to be enabled when both text boxes are filled,
atm when i fill in 1 it will already enable the button and thats exactly what i don't want.

im quite a nooby in this so could some1 help me ?

tyvm in advance




code___________________



<html>

</head>



<script type="text/javascript">
function ButtonDisable1(text)
{
if (text.length > 0)
document.getElementById("submit_button").disabled = false;
else
document.getElementById("submit_button").disabled = true;
}
</script>



</head>
<body>

<input type="text" id="search_text" onchange="ButtonDisable1(this.value)">
<input type="text" id="search2_text" onchange="ButtonDisable1(this.value)">
<input type="submit" id="submit_button" value="Search" disabled="true">

</body>
</html>

I have set's of radio buttons that have on click functions, and when i restore the form data i would like the onclick functions to re-calculate. Is there a simply way such as if this.checked = true run onclick function that i can apply to every radio with onload???





Reply With Quote




01-10-2015, 01:51 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

You cannot auto-click for security reasons. But you can use local storage to keep the status of the radio buttonds and reinstate them on page reload. You can then run a script to do whatever is required.

I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding
Code:

<input type="button" value="GO" name="proj_list" />

But here is the whole index page
Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2009 Events</title>

<link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="../css/sortable.css" />
<link rel="stylesheet" type="text/css" href="../css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" />

<script type="text/javascript" src="../includes/datepicker.js"></script>
<script language="javascript" src="../includes/tablesort.js"></script>
<script language="javascript" src="../includes/tableActions.js"></script>
<script language="javascript" src="../includes/chrome.js"></script>
<script language="javascript" src="../includes/ajaxtabs.js"></script>

</head>

<body>

<div id="container">

	<div id="header">
		<?php include("../header.php"); ?>
	</div>

	<div id="navbar2">
		<?php include("../menu.php"); ?>
	</div>

	<div id="content">
		<div id="breadcrumb">
			<script language="javascript" src="../includes/breadcrumbs.js"></script>
		</div>

<?php
  // If the user wants to add a project
  if (isset($addproject)):

else:

$dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx");
if (!$dbcnx) {
  echo( "<P>Unable to connect to the xxxxxxxxx" .
        "database server at this time.</P>" );
  exit();
}

mysql_select_db("techweb", $dbcnx);

if (! @mysql_select_db("techweb") ) {
  echo( "<P>Unable to connect to the xxxxxxx" .
        "database at this time.</P>" );
  exit();
}
   
// If a project has been submitted,
// add it to the database.

if ("SUBMIT" == $proj_submit) {
  $sql = "INSERT INTO projects SET " .
         "proj_priority='$priority', " .
         "proj_title='$title', " .
		 "proj_bdlead='$bdlead', " .
		 "proj_englead='$englead', " .
		 "proj_objective='$objective', " .
		 "proj_capability='$capability', " .
		 "proj_approach='$approach', " .
		 "proj_venue='$venue', " .
		 "proj_tradeshow='$tradeshow', " .
		 "proj_funding='$funding', " .
		 "proj_src-ds='$src-ds', " .
		 "proj_src-cap='$src-cap', " .
		 "proj_src-irad='$src-irad', " .
		 "proj_status='$status', " ;
  if (mysql_query($sql)) {
    echo("<P>Your project has been added.</P>");
  } else {
    echo("<P>Error adding submitted project: " .
         mysql_error() . "</P>");
  }
}

echo("<h1 style='text-align:left'> 2009 Projects </h1>");

// Request the text of all the projects
$result = mysql_query(
          "SELECT * FROM projects");
if (!$result) {
  echo("<P>Error performing query: " .
       mysql_error() . "</P>");
  exit();
}

?>

<form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
	<optgroup label="projects">
<?php 
	// Display the details of each event in a table
	while ( $option = mysql_fetch_array($result) ) {
    	echo("<option label=" . $option["proj_title"] . 
			"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
	}
?>
	</optgroup>
</select>
<input type="button" value="GO" name="proj_list" />

<?
  
endif;
?>

<div id="tabcontainer">
	<ul id='tabs' class='shadetabs'>
<?php 
	// Populate tabs with data related to the selected project
	echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
	echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
	echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
	echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
	echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");

?>
	</ul>

<!--
	<ul id='tabs' class='shadetabs'>
	<li><a href='project.php' rel='container' class='selected'>Project</a></li>
	<li><a href='capability.php' rel='container'>Demo Capability</a></li>
	<li><a href='approach.php' rel='container'>Approach</a></li>
	<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
	<li><a href='financials.php' rel='container'>Financials</a></li>
	</ul>
-->



<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above.  Use the tabs to view information about the selected project.</p>
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

</div>

Hello all!

I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more.

It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca).

My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time.

Here is my Javascript:

Code:

		

		var categoryLink=new Array(); 
		var counter;
		var link = "";
		categoryLink[0] = "";   
		categoryLink[1] = "";   
		categoryLink[2] = "";   
		counter = "0";

$(document).ready(function() {
        $(".atonal").live('click', function() { {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "atonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".tonal").live('click', function() {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "tonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".being").live('click', function() {
          alert("sometext");
         categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
          
          		if (categoryLink[1]=="") {
					categoryLink[1] = "being";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".doing").live('click', function() {
          alert("sometext");
          		if (categoryLink[1]=="") {
					categoryLink[1] = "doing";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".abstract").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "abstract";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".documentary").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "documentary";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

and the HTML in question:

Code:

<table>
<tr>
<td height="35" width="210" valign="top">choose your sound</td>
<td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td>
<td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your text</td>
<td width="165" valign="top"><a href="#" id="being">being words</a></td>
<td width="165" valign="top"><a href="#" id="doing">doing words</td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your image</td>
<td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td>
<td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td>
</tr>
</table>

I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great!

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 Guys,
I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
I create the following code but it did not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="JavaScript" type="">
function changeColor(){
document.bgColor = "Gray";
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var person = "";
person = prompt('What is Your Name:');
if (person == "Foo") {
document.write("<h1 />Welcome " + person);
document.bgColor = "Yellow";
}
else {
document.write("<h1 />Access Denied!!!!");
document.bgColor = "Red";
document.getElementById("gree").disabled = true;
}
</script>

<div>
<p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
</div>
</body>
</html>

as you can see I used the:
document.getElementById("gree").disabled = true;
but it did not work , could you please give an idea how I can solve this problem?
Thanks

hello everyone

I am working on a quiz which marks the user and displays to different screens when the total has been calculated. If the user gets over 80% a congratulations page is shown but if you score less your told to go back and look at some of the material again.
I would like the congratulations page to show a button to let the users continue on to the next section of the tutorial. Does any one have any ideas how I could do this? im stumped. I have inserted the code below, any help would be much appreciated as I'm a little stuck :/

Code:

// Function to create arrays.
function makeArray(len) {
    for (var i = 0; i < len; i++) this[i] = null;
this.length = len;
}

// creates objects for this question.
function makeQuestion(question, correctAnswer) {
var args = makeQuestion.arguments;
this.question = question;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
this.isCorrect = isCorrect;
this.showForm = showForm;
this.userChoices = new makeArray(args.length - 2);
   for (var i = 0; i < args.length - 2; i++) { 
   this.userChoices[i] = args[i + 2];
   }
}

// determins if the questions answered correctly
function isCorrect() {
if (this.correctAnswer == this.userAnswer) return true;
else return false;
}

// Method to display contents of question object.
function showForm(n) { //argument n is the number of the question.
document.write((n + 1) + '. ' + this.question + '<BLOCKQUOTE><FORM>'); //n+1 = the number of the question in the array (has to add one because the array starts with 0 or the first question would be number 0, this question displays the questions text, blockquote off sets the answer making them indented.
    for (var i = 0; i < this.userChoices.length; i++) { //goes through the questions one by one.
        document.write('<INPUT TYPE = "RADIO" NAME = "q' + n + //create the radio buttons.
                       '" onClick = "quiz[' + n + '].userAnswer = ' + i + '">');
        document.write(this.userChoices[i] + '<BR>');
    }
document.write('</FORM></BLOCKQUOTE>');
}

// 	This corrects the quiz, dispays the correct answers and the score.
function correctQuiz() {
var correct = 0; // sets the correct page to a score of zero
correctPage = '<HTML><TITLE>Corrections</TITLE><BODY BGCOLOR = "#FFFFFF">'; // sets the attributes of the correction page
    for (var i = 0; i < quiz.length; i++) { //loop runs through questions
    if (quiz[i].isCorrect()) correct++; // the is correct starts at 0 every time is correct returns true (an answer is correct) it adds 1 to the number adding up correct answers.
    }
var score = Math.round((correct / quiz.length) * 100); // find out the % of correct answers by using math and the % equation
correctPage += 'Sco  <STRONG>' + score + '</STRONG> %';
    if (correct < (quiz.length / 100) * 80) {  //if the correct number is less than the quiz length then not all the answers were correct if it is the same then all ansers were correct.
    correctPage += ifWrong; // if there were wrong answers
        for (var i = 0; i < quiz.length; i++) {  // starts a for loop through the answers
            if (!quiz[i].isCorrect()) { // if quiz doesn't = to iscorrect.
            correctPage += (i + 1) + '. ' + // this shows what number was wrong.
            quiz[i].userChoices[quiz[i].correctAnswer] + '<BR>'; // displays the correct answes for the questions that were wrong
            }
        }
    }
    else correctPage += ifAced;  // this is the correct page displayed if all the answers were right.
correctPage += '</BODY></HTML>'; // opens the window of correct page
correctwin = window.open ('', '', 'height=300,width=300,scrollbars=yes'); 
    if (correctwin.opener == null) correctwin.opener = window;
correctwin.location = 'javascript:opener.correctPage';
}

// Message to display if quiz is aced.
var ifAced = "<P>Well done! you have passed the test. You can now move on to the next section of the tutorial<P>"; 
// Message to display if any are wrong.
var ifWrong = "<P>Check below to see the answers that you got wrong. It maybe helpful if you go back and read the bits your unsure of.<P>";

// Create seven question objects...
quiz = new makeArray(8); // this is how many questions there is in the quiz 
quiz[0] = new makeQuestion("What is the correct name for the leg marking found in picture 1?", // 1st question  starts at 0 because thats the first number in an array
                            2,                             // correct answer           
                           "Sock",                // choice 0
                           "Stocking",                // choice 1
                           "Coronet band",                    // choice 2         
                           "half cannon");    // choice 3        

quiz[1] = new makeQuestion("What is the correct name for the leg marking found in picture 2?",         // 2nd question 
                            0,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon"); //choice 3

quiz[2] = new makeQuestion("What is the correct name for the leg marking found in picture 3?",         
                            1,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon");

quiz[3] = new makeQuestion("What is the correct name for the leg marking found in picture 4?",
                             3,                             // correct answer
                           "Sock",    // choice 0
                           "Stocking",        // choice 1
 	        			   "Coronet band", //choice 2
                           "half cannon");

quiz[4] = new makeQuestion("What is the correct name for the face marking found in picture 5?", 
                            2, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

quiz[5] = new makeQuestion("what is the correct name for the face marking found in picture 6?",
                              0, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

quiz[6] = new makeQuestion("what is the correct name for the face marking found in picture 7?",
                              3, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");
quiz[7] = new makeQuestion("what is the correct name for the face marking found in picture 8?",
                             1, 
                           "Bald",
                           "Star", 
                           "Snip",
                           "Blaze");

i am trying to achieve a JS driven button for a cms. for example i have a text in a textarea so i select the text and add the bold attribute to this text.
my text before : text
my text with bold added : <b>text</b>
what the function to achieve this ?
thanks