JavaScript - Noob Javascript Line Help

Hi all,

ok firstly i know all but nothing about javascript and you prob about to see the worst attempt eva at trying to understand it

ok so here is my js code
Code:

<script language="javascript">
function selectElement(idElement)
{
	var ratingval = "";
	liElement = document.getElementById('sel'+idElement);
	lirating = document.ratingform.userrating.value;
	if(liElement == "sel1")
	{
		raingval = "1";
		lirating = "1";
	}
	if(liElement == "sel2")
	{
		raingval = "2";
		lirating = "2";
	}
	if(liElement == "sel3")
	{
		raingval = "3";
		lirating = "3";
	}
	if(liElement == "sel4")
	{
		raingval = "4";
		lirating = "4";
	}
	if(liElement == "sel5")
	{
		raingval = "5";
		lirating = "5";
	}
}
</script>

and here is my html code
Code:

	<form name="ratingform" action="" method="post">
		<fieldset class="login">
			<legend>Personal Details</legend>
			<div>
				<label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="<?php if(isset($_POST['fname'])){ echo $_POST['fname'];}?>"> 
			</div>
			<div>
				<label for="lname">Surname</label> <input type="text" id="lname" name="lname" value="<?php if(isset($_POST['fname'])){ echo $_POST['lname'];}?>">
			</div>
		</fieldset>
		<fieldset class="contact">
			<legend>Review</legend>
			<div>
				<label for="title">Review Title</label> <input type="text" id="title" name="title" value="<?php if(isset($_POST['title'])){ echo $_POST['title'];}?>">
			</div>
			<div>
				<label for="review">Review</label> <textarea name="review" id="review" cols="33" rows="5"><?php if(isset($_POST['review'])){ echo $_POST['review'];}?></textarea>
			</div>
		</fieldset>
		<fieldset class="rating2">
			<legend>Rating</legend>
			<div>
				<label for="rating">User Rating</label>
                <ul class="rating">
                <li id="current" class="current" style="width: <?php echo $_GET['rating']?>em;"></li>
                <li id="sel1"><a onclick='onClick="javascript:selectElement(1)' class="rate1" title="I hated it">*</a></li>
                <li id="sel2"><a href="?rating=2" class="rate2" title="I disliked it">*</a></li>
                <li id="sel3"><a href="?rating=3" class="rate3" title="It was OK">*</a></li>
                <li id="sel4"><a href="?rating=4" class="rate4" title="I liked it">*</a></li>
                <li id="sel5"><a href="?rating=5" class="rate5" title="I loved it">*</a></li>
                </ul>
			</div>
		</fieldset>
		<div>
        <input type="hidden" name="userrating" value="" />
        <input type="submit" name="Submit" value="Submit"><?php if($error == TRUE){echo $message;}if($submit == TRUE && $error == FALSE){echo $message;}?></div>
	</form>

ok so what im trying to acheive is that when a user clicks on either of the rating links, a js function is run which gets the li value and then sets a value of a varible to match the li value and then i want to add that value to the hidden userrating form input and set the value of <li id"current" width value to the same value

but as im sure youve noticed from my code it isnt working.

any help it greatly needed and appreciated,
thanks
Luke

I am trying to dynamically add rows to a table when the user clicks a button. here my function

Code:

function addFocusArea()
{
	if(addTlFocusAreaCount <= 5)
	{
		//Create new Title row
		var titleRow = document.createElement("tr");
		var titleCol = document.createElement("th");
		var titleText = document.createTextNode("Additional Focus Area " + addTlFocusAreaCount);
		titleCol.appendChild(titleText);
		titleRow.appendChild(titleCol);
		document.getElementById("focusTable").appendChild(titleRow);		
			
		//Create new category row
		var categoryRow = document.createElement("tr");
		var categoryCol = document.createElement("td");
		var categorySelect = document.createElement("select");
		var categories = document.getElementById("<%=DecisionToolKeys.PRIMARY_FOCUS%>");
                
                //copy a dropdown menu that is already existing on the page
		for(var i=0; i<categories.length; i++)
		{
			var option = document.createElement("option");
			option.value = categories[i].value;
			option.text = categories[i].text;
			categorySelect.options.add(option);
		}

		categoryCol.appendChild(categorySelect);
		categoryRow.appendChild(categoryCol);
		document.getElementById("focusTable").appendChild(categoryRow);			
			
		addTlFocusAreaCount++;			
	}

	else
	{
		alert("You cannot add more than five additional practice areas.");
	}
}

And here is my button
Code:

<input type="button" value="Add Focus Area" onclick="JavaScript:addFocusArea()"/>

This is working in Firefox and Chrome, but not IE 8. Any clue as to why?

Thanks,
Nick

I have a page that open two frames. Second frame, most of the page, is empty. First frame contains a form that retrieves user input, when you click the button, it send that input back to the original parent html, which detects the GET parameters, and builds a custom URL.

I want to then load that custom URL in the 2nd empty frame. I figure I need to modify the src atttribute of the 2nd frame in the frameset, but I can't make it work.

Code:

<frameset id='parent' rows='10%,90%'>
    <frame id='frm1' src='./form.html' />
    <frame id='frm2' src='' />
</frameset>
<script>modFrmSrc();</script>

where modFrmSrc() checks for the GET values, builds the URL, and then tries to load the URL in frm2.

Is there a way to get this done?

Hi all,

I sincerely apologise for the noob question. I have search and searched for an answer but to no avail, so I hope someone on here can help.

I'm trying to get a fisheye verticle menu working. I've found somethin which fits the requirement he http://zendold.lojcomm.com.br/ifisheye/ and tried to make it work. It just doesn't.

I've tried different versions of mootools etc but I think I'm missing something really stupidky simple. I'd really appreciate it if someone could have a look at my temp page (http://www.parkerbs.com/home1.htm) and point me in the right direction.

Many thanks in advance.

Paul

Hi all,

I'm desperately trying to figure out how to "transform" Javascript commands into HTML code. Excuse my noobness but I really know nothing about Javascript.

Basically, I have this Google API Search code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My Google AJAX Search API Application</title>
    <script src="http://www.google.com/jsapi?key=CUT"></script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[

    google.load("search", "1");

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint("New York, NY");

      // Tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // Execute an inital search
      searchControl.execute("Google");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading...</div>
  </body>
</html>

Now, what I'm desperately trying to do since 4-5 hours is to have the search results between the <div id="searchcontrol"></div> encoded as HTML in the loaded page.

Currently, when the page is loaded and I look at the source code, I have the word 'Loading...' in the <div> tags, despite in the normal view there are G results listed.

I need those results encoded as HTML for SEO reasons.

Researching on this matter I thought the problem could be the OnLoad command, that makes the script load after all the other HTML elements are loaded. But I tried to make it load before all the elements in the page, and the problem persists.

How can I solve this?

Thanks in advance for any help!

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?


Any help would be greatly appreciated,

Cheers,

Drew.

How do I get new line to work in javascript. Everytime I try to use it, it never works.
There should be a new line with 5 * instead of having 17 * on one line.

Code:

<html>
<body>

<script type ="text/javascript">
var x=0;



for (x=0;x<=12;x++)


{
	
	document.writeln("*");
}
document.writeln("\n");
for (x=0;x<=5;x++){
	document.writeln("*");
	
	}

</script>
</body>
<html>

I have these line of javascript:


Code:

$(document).ready(function () {
    /*$('#first').focus();
    $(this).keyup(function (e) {
        if (e.keyCode == 13) {
            generate();
        }
    });*/
        });
function generate() {
    if($("input[name='name']").val().length > 1) {
        fi = $("input[name='name']").val().substring(0,1).toUpperCase();
        var sl = ["Cool "];
        var sl2 = ["Hand "];
        var sl3 = ["Luke",];
 
        {
            var i = Math.floor(Math.random() * sl.length);
            var j = Math.floor(Math.random() * sl2.length);
            var k = Math.floor(Math.random() * sl3.length);
            var nick = sl[i] +   sl2[j] +   sl3[k];
        }
        {
        $("#answer").text("Your Name Is: " +nick);
        $("#answer").fadeIn("slow");
        } ;
    }
}

I would like for it to return:

Your Name Is:
Cool Hand Luke


I want the "Cool Hand Luke" to be on a separate line but I don't know how to put a linebreak in the .text string. Is this something somebody could tell me how to do?

Where in the line:
Code:

$("#answer").text("Your Name Is: " +nick);

Do I put (<br>)

How do I change the <br /> tags in the follow code to javascript code that performs the same function. I need new lines where you see the <br /> tags and I can't use <br /> since my javascript is within the header section of my HTML file and the W3C validator doesn't like it. Therefore, how do I change the following code to pure javascript with no <br />'s. I tried using \n and \r\n but maybe I didn't use this right as it didn't work. Please help, I am new to javascript

txt="Name: "+name+"Sex: "+sex+"<br />Ethnicity: "+ethnicity+"<br />Region: "+region+"<br />Profession: "+profession+"<br />Membership_status: "+membership_status+"<br />Seeking: "+seeking+"<br />Education: "+education+"<br />Body Type: "+body_type+"<br />Eye Colour: "+eye_colour+"<br />Smoker: "+smoker+"<br />Drinker: "+drinker ;

Hi there,

I am working on javascript, the problem i have faced here is, i am unable to break the line in javascript. Actually i am using a javascript to open Microsoft Outlook Express, And in the body text i am sending some value like "Name and Address(Shown in code)". I want after task it should break the line and the value of Address will start from new line. But i am unable to do that. The code i have used is given below.

Code:

// JScript File

function EmailIt(emailTO,strAddress,strName)
{
    var daReferrer = document.referrer; 
    var task = escape(document.URLUnencoded);
    var issue_id = document.URLUnencoded.split("=");    
    
    var email = emailTO; 
    var Address = strAddress;
    var Name = strName;
    var subject = "Issue Task number is " + issue_id[issue_id.length-1] + " - " + Address ;
    
    var body_message = "Name "+ Name + " <br />\r\n " + " Address " + Address;
    var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message;
     
    win = window.open(mailto_link); 
   
    if (win && win.open &&!win.closed) win.close(); 
}

Also i have used following syntax to break the line:
//body_message += '<br />\r\n';
//body_message += "&nbsp;";
//body_message += "\"\n\"";.
But didn't got succeed.
Can anybody help me to come out of this problem.

Regards
Vimal kumar
Madhepura, Bihar

I have this Javascript and I am wanting to create a line break between the tweet and the time it was posted, here is the javascript, I am guessing I need to insert the <BR> tag somewhere but just not sure where? Thanks

function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return '<br>about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

Hi there, I could probably say that I'm some sort of "game developer" as we're modifying an old (but great) hockey title that has html frontend.
http://z6.invisionfree.com/flyermani...showtopic=1864

My JS skills suck though... I have millions of great ideas but because of my very limited skills I run into all kinds of obstacles all the time. This is yet another.

I'd like to redesign the scoring summary layout in the game... so I'm trying to create a scoring line that would show the goal scorers like this:
Atlanta Scoring:
Antropov (1), Reasoner (1)

But currently I'm always getting a line break and I get the scorers like this:
Antropov (1)
Reasoner (1)
etc.

Screenshot:



My code must be sloppy as hell though:

This shows the scorers:

Code:

var sDataHTML4 = ""
	var aHeaderText = new Array(nhlMsg(" Goal assist") , nhlMsg("Team"), nhlMsg("# Assists", true) );
	var aHeaderWidth = new Array( 300 , 120, 50);
	var sHeaderHTML4 = createHeaderRow( aHeaderText , aHeaderWidth );
	for ( var i = 0; i < oAwayLastGame.nNumPlayers; i++ )
	{
	if (oAwayLastGame.aPlayerStats[i].nAssists > 0)
		sDataHTML4 += createDataRow4( oManagerInterface.GetPlayerFullName( oAwayLastGame.aPlayerStats[i].nPlayerID), ( oManagerInterface.GetTeamShortName(oAwayLastGame.nTeamID)), oAwayLastGame.aPlayerStats[i].nAssists) ;
	}
	
	return createTable( sHeaderHTML + sDataHTML + sDataHTML2  + sHeaderHTML3 + sDataHTML4 + sDataHTML3 + sGoals );

Datarow arguments:

Code:

function createDataRow4( args )
{
	var sHTML = "<tr>";
	var nNumArgs = arguments.length;
	for( nIndex = 0 ; nIndex < nNumArgs ; nIndex++)
	{
		(nIndex == 0 ) ? sHTML += "<td class=\"fourthDataCell\">" + arguments[nIndex] + "</td>" :sHTML += "<td class=\"data2\">(" + arguments[nIndex] + ")</td>"

	}
	return sHTML += "</tr>";
}

What the heck I have to do make the scorers to show all in the same line? Does "create datarow" automatically define them in one separate row? The answer must be simple but I simply can't figure it out... I have tried to Google this for days now.

Thanks.

Hey guys

I export data from Javascript to Xml file. I have tried several ways to break a line in xml file like document.write("<br/>"); or document.writeln(); etc, but seem it is impossible.

Maybe you can give me a solution......

Look at below:

XML File:
<?xml version="1.0"?>
<DATA>
<Cust>< Select>Debit Card</Select> </Cust ><Cust>[ User>Jan</User ></Cust> <DATA>

I want to break <Cust> from another <Cust>.

Javascript:

function ok_click() {
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0");
xmlDoc.async = false;
xmlDoc.load("data.xml");
if (xmlDoc.readyState == 4 && xmlDoc.parseError.errorCode == 0) {
var root = xmlDoc.documentElement;

var e1 = document.getElementById("Select1");
var _account_type = xmlDoc.createTextNode(e1.options[e1.selectedIndex].value);

var e2 = document.getElementById("Select2");
var _user = xmlDoc.createTextNode(e2.options[e2.selectedIndex].value);


var account_type = xmlDoc.createNode(1, "Select", "");
var user = xmlDoc.createNode(1, "User", "");


account_type.appendChild(_account_type);
user.appendChild(_user);


var cust = xmlDoc.createNode(1, "Cust", "");

cust.appendChild(account_type);
document.write("<br/>");
cust.appendChild(user);


root.appendChild(cust);

SaveXML(xmlDoc, "data.xml");
alert("Save!");
}
}

Your help would much appreciated

Thanks
Natz

I have a Java Applet that I have been managing for some time. Approximately how long would it take to port a 900 line Java Applet to JavaScript? My intention is to reproduce as close as I can to the Java Applet. If you would like to see the Java Applet code, it is available here : http://www.chatapp.comuf.com/AppletClient(Public).java
This Java Applet is a chat client that connects to a Java server (I am NOT porting the server). It has a simple interface with panel tabs for various activities (chat room, login, text color chooser, etc).

**Note : I have not programmed in JavaScript before. I went over some tutorials before I posted this.

***N00b note : I know Java and JavaScript have NOTHING to do with each other.

Hi,

I'm having trouble figuring out why my image is disappearing when the user clicks on the arrow image to expand text for viewing. The arrow image only disappears if the link text is is more than one line. It remains if the link is only one line of text. Here is the code:


HTML code:
Code:

<div class="ws-webpart>

<div class="hidecat1"></div>


<div class="hidecat1">       
<!--This comment line added please dont remove this comment line -->

<a class="hidecat2" id="za0.91" onclick="showHide('a0.91')" href="javascript:void(0)">Lorem ipsum dolor sit amet</a>
</div>
    
    
<div style="display:none;" id="a0.91">
        
<!--This comment line added please dont remove this comment line -->

<div class="hideqst1">
<a id="sb0.913.92" class="hideqst2" onclick="showHide('b0.913.92')" href="javascript:void(0)">
Sed lectus lectus, varius quis vestibulum non, molestie vel est. Integer enim quam, 
elementum vel ornare non, egestas non augue. Ut varius vulputate mi, </a>
</div>
        
        
<div style="display:none;" id="b0.913.92">
<!--This comment line added please dont remove this comment line -->

<div class="hideAns">
<p>Fusce suscipit tempus magna eget eleifend. Ut lacinia, turpis ac tempus euismod, 
nulla ipsum vehicula sem, et laoreet augue nunc in neque. Maecenas porttitor lacinia risus, 
et rhoncus felis vestibulum eget. Sed nec turpis nulla. Vestibulum ante ipsum primis in faucibus 
orci luctus et ultrices posuere cubilia Curae; In fringilla mollis leo sed auctor. 
</p>
</div>

</div>
        
        
<div class="hideqst1">
<a id="sb0.9134.65" class="hideqst2" onclick="showHide('b0.9134.65')" href="javascript:void(0)">
Integer non urna vel ligula interdum?</a>
</div>
        
        
<div style="display:none;" id="b0.9134.65">
<!--This comment line added please dont remove this comment line-->
            
<div class="hideAns">
<p>Suspendisse pretium gravida tortor, id blandit elit hendrerit porttitor. 
Mauris at purus id neque mollis placerat vitae in tortor. Morbi porta tincidunt sagittis. 
Nam quis augue justo, id euismod nisl.</p>

<p>&bull;&nbsp;&nbsp;&nbsp;&nbsp;Donec sit amet urna felis. Praesent at erat ligula, 
eget porttitor diam.<br>
&bull;&nbsp;&nbsp;&nbsp;&nbsp;Quisque quis sapien leo.  Proin sit amet sem et lectus gravida 
iaculis a non turpis. Vivamus at metus quis odio mattis </p>
</div>
            
</div>

</div>

CSS code:
Code:

div.ws-webpart{margin-bottom:15px;clear:both;}
.ws-webpart.hidecat1{padding-top:7px;}
.ws-webpart.hidecat2{padding-left:2.2ex;color:#000;font-weight:700;text-decoration:underline;background:url(../images/layout/link_arrow.gif) no-repeat 0 3px;}
.ws-webpart.hidecat3{padding-left:2.2ex;color:#000;font-weight:700;text-decoration:none;background:url(../images/layout/link_arrow_down.gif) no-repeat 0 3px;}
.ws-webpart.collapseqst1{padding-top:7px;padding-left:2.2ex;}
.ws-webpart.hideqst2{padding-left:2.2ex;color:#7C902C;padding-right:0;background:url(../images/layout/link_arrow.gif) no-repeat 0 3px; zoom:1;}
.ws-webpart.hideqst3{padding-left:2.2ex;color:#7C902C;padding-right:0;background:url(../images/layout/link_arrow_down.gif) no-repeat 0 3px;}
.ws-webpart.hideAns{color:#000;padding-left:4.4ex;padding-right:1.5ex;padding-top:7px;}

Javascript code:
Code:

<script language="javascript" >
	// Function for Collapsible Link
	function showHide(ID) { 
		if (document.getElementById(ID).style.display == "block"){ 
			document.getElementById(ID).style.display = "none";        
			if(ID.charAt(0)=="a"){
		    	document.getElementById("z"+ID).className="hidecat2";
			}
			if(ID.charAt(0)=="b"){
		    	document.getElementById("s"+ID).className="hideqst2";
			} 
		}
		else { 
			document.getElementById(ID).style.display = "block"; 
			if(ID.charAt(0)=="a"){
		    	document.getElementById("z"+ID).className="hidecat3";
			}
			if(ID.charAt(0)=="b"){
				document.getElementById("s"+ID).className="hideqst3";
			} 
		} 
	}
</script>

I have attached the images.

Thanks in advance