JavaScript - Navigation Bar Hidden Behind The Javascript

Hi,
I wanted to know if there is way in Javascript to send a hidden variable to an external URL without actually submitting to the URL?

Code below is what I intend to do. I want to use an image to do an onClick event and send the name to an external URL without actually doing a submit. Code:

 <td width="25">&nbsp;</td>

		  	<input type="image" src="images/btn_Activate.gif" onClick="window.location.href='www.abc.com'">
		  	<input type="hidden" name="name" value="<% = name %>">

		  </td>

Thanks.
Jeeten.

hi guyz i do have a problem in passing javascript variable to <input type=hidden value="">


here's my code:

<?php
while ($row = mysql_fetch_array($result))
{
?>


<script type="text/javascript">
function viewcodec(){
var randomValueCodec = randomString(5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789');
document.getElementById('commentMarkCodeCompCodec-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec;
document.getElementById('commentMarkCodeComp-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec;

}

</script>
<form action="" method="post" name="postsForms">
<div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>>

<input type=text id="commentMarkname-<?php echo $row['p_id'];?>" name="commentmarkname" class="commentMarkname" size="35" maxlength="20">
<textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentmark" cols="60"></textarea>
<input type=text id="commentMarkcode-<?php echo $row['p_id'];?>" name="commentmarkcode" class="commentMarkcode" size="35" maxlength="20">
<br clear="all" />
<span id='commentMarkCodeCompCodec-<?php echo $row['p_id'];?>'><b><script type="text/javascript">viewcodec();</script></b></span>
<input type="hidden" id="commentMarkCodeComp-<?php echo $row['p_id'];?>" name="commentMarkCodeComp" value="">
<br clear="all" />
<br clear="all" />
<a id="SubmitComment" style="float:right" class="small button comment"> Comment</a>
</div>
</form>

<?php
}
?>

Hello,

I use a iplocator api, which is javascript and gives out the city name, country and zipcode output
PHP Code:
<script language="JavaScript" src="http://www.somesite.com/somefile.js?key=apikey"></script>
<script language="JavaScript">
<!--
document.write(ip2location_isp() + ', ' + ip2location_city() + ', ' + ip2location_zip_code() + ', ' + ip2location_net_speed());
//-->
</script> 


my question or where i need help is that, i would like to output each of those as a hidden text field, so later i can store into mysq database with POST method from the hidden field.

thank you in advance for your time n help

Afternoon All,

I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie:


<!-- begin Referer Check -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>");
</script>

<script type='text/javascript'>
var pageTracker = _gat._getTracker("UA-1-1");
pageTracker._trackPageview();

//
// This is a function that I "borrowed" from the urchin.js file.
// It parses a string and returns a value. I used it to get
// data from the __utmz cookie
//
function _uGC(l,n,s) {
if (!l || l=="" || !n || n=="" || !s || s=="") return "-";
var i,i2,i3,c="-";
i=l.indexOf(n);
i3=n.indexOf("=")+1;
if (i > -1) {
i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; }
c=l.substring((i+i3),i2);
}
return c;
}

//
// Get the __utmz cookie value. This is the cookies that
// stores all campaign information.
//
var z = _uGC(document.cookie, '__utmz=', ';');
//
// The cookie has a number of name-value pairs.
// Each identifies an aspect of the campaign.
//
// utmcsr = campaign source
// utmcmd = campaign medium
// utmctr = campaign term (keyword)
// utmcct = campaign content
// utmccn = campaign name
// utmgclid = unique identifier used when AdWords auto tagging is enabled
//
// This is very basic code. It separates the campaign-tracking cookie
// and populates a variable with each piece of campaign info.
//
var source = _uGC(z, 'utmcsr=', '|');
var medium = _uGC(z, 'utmcmd=', '|');
var term = _uGC(z, 'utmctr=', '|');
var content = _uGC(z, 'utmcct=', '|');
var campaign = _uGC(z, 'utmccn=', '|');
var gclid = _uGC(z, 'utmgclid=', '|');
//
// The gclid is ONLY present when auto tagging has been enabled.
// All other variables, except the term variable, will be '(not set)'.
// Because the gclid is only present for Google AdWords we can
// populate some other variables that would normally
// be left blank.
//
if (gclid !="-") {
source = 'google';
medium = 'cpc';
}
// Data from the custom segmentation cookie can also be passed
// back to your server via a hidden form field
var csegment = _uGC(document.cookie, '__utmv=', ';');
if (csegment != '-') {
var csegmentex = /[1-9]*?\.(.*)/;
csegment = csegment.match(csegmentex);
csegment = csegment[1];
} else {
csegment = '(not set)';
}

//
// One more bonus piece of information.
// We're going to extract the number of visits that the visitor
// has generated. It's also stored in a cookie, the __utma cookis
//
var a = _uGC(document.cookie, '__utma=', ';');
var aParts = a.split(".");
var nVisits = aParts[5];

/*

function populateHiddenFields(f) {
f.source.value = source;
f.medium.value = medium;
f.term.value = term;
f.content.value = content;
f.campaign.value = campaign;
f.segment.value = csegment;
f.numVisits.value = nVisits;

alert('source='+f.source.value);
alert('medium='+f.medium.value);
alert('term='+f.term.value);
alert('content='+f.content.value);
alert('campaign='+f.campaign.value);
alert('custom segment='+f.segment.value);
alert('number of visits='+f.numVisits.value);

return false;
}

*/

document.forms["cforms2"].elements["cf2_field_1"].value = source;

</script>




The key outputs from this code are the vars:

source
medium
term
content
campaign
csegment
nVisits

My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co?

I have tried to pass just the source var from within the <script> tags.

document.forms["cforms2"].elements["cf2_field_1"].value = source;

I have commented out part of original code that I did not think I needed.

Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields.

Thanks

Paul Brown

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.

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!

Can someone explain to me as to why the "New Art" button in the navigation doesn't have the "on" function as the others where you hover over the button and the text turns orange?

Keep in mind, I didn't design/develop this site...I'm merely just trying to insert a button in the nav for a friend of mine. Thanks for your help it is greatly appreciated!

Here's the website: http://www.thejam2.com/two/

And the code:

Code:

}

menuImage = {};
function makeMenu(){
	var imgs = ["thejam", "newart", "theartist","viewit","orderit","theCollage","theBorder","detailedImages","theMusicians"];
	for(i in imgs){
		menuImage[imgs[i]+"off"] = new Image();
		menuImage[imgs[i]+"off"].src = "pics/menu_"+imgs[i]+".gif";
		menuImage[imgs[i]+"on"] = new Image();
		menuImage[imgs[i]+"on"].src = "pics/menu_"+imgs[i]+"_on.gif";
	}
	document.write('<div id="menu"><table width="'+((ns4) ? 794 : '100%')+'" cellpadding=0 cellspacing=0 border=0>');
	if(ns4) document.write('<tr><td><img src="pics/spacer.gif" width="418" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td></tr>');
	document.write('<tr><td width="100%">&nbsp;</td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=about','thejam','jamMenu') + '<br></td>');
	document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('newart.php','newart','newart') + '<br></td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=mike_keirstead','theartist') + '<br></td>');
	document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('jam2.php','viewit','viewMenu') + '</td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('jam2.php?loc=order','orderit') + '</td></tr>');
	document.write('<tr><td>&nbsp;</td><td>');
	makeJamMenu();
	document.write('</td><td colspan="4" align="center">');
	makeViewMenu();
	document.write('</td></tr></table></div>');
}

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!

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

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!

I'm a long time lurker on here just barely created an account to ask this question.

I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like:

Code:

javascript:if((top.detail.findObj('X31').value="Inquiry")!="");

That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes.

I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples:

Old app source ex: Code:

<label for="X31">Category:</label>

was all i needed
new app(before the body code is just code for the login form, etc): Code:

<body onLoad="startit()" onUnload="stopit()"> 
                </body> 
  <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> 
  <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> 
  Loading...
  </div> 
</html>

formloader: Code:

<form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post">

example of inspect element in chrome (something i want to change with javascript injection): Code:

<input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly="">

Hi!
I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function.
I need to send this variable as the value of a hidden field in the form which is in the body of the document.

This is my JavaScript Code:
Code:

function WriteContactFormStatement1 () { 
var ContactFormValue = ref2; 
document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />'); 
} 
var WriteContactFormStatement = WriteContactFormStatement1 ();

And at the end of my form, before the submit button, I have the following code:
Code:

<!-- START -- Javascript to print the statement for UReferrersName -->
<script language="JavaScript" type="text/JavaScript">
//WriteContactFormStatement();
document.write (WriteContactFormStatement); 
</script>
<!-- End -- Javascript to print the statement for UReferrersName -->

When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button .....

Please help !...

- Xeirus.

After searching the web most of the day, nothing has resolved this issue:

Code:

<!-- ALERT IS NEVER HIT -->
<html>
	<input type="hidden" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info').value;
		alert(me);
	</script>
</html>

Code:

<!-- ALERT SAYS "null" -->
<html>
	<input type="hidden" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info');
		alert(me);
	</script>
</html>

Code:

<!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
	<input type="text" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info').value;
		alert(me);
	</script>
</html>

Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method.