JavaScript - Getting Comment Nodes

i am interested in using RaphaelJS for creating VML/SVG rounded corners etc, but unless i physically put the <script> right after the element to which it needs to be applied, i have to rely on the single DOM load() event. which causes a delay before any script is executed,...thus a FOUC (flash of unstyled content).

i'm guessing there is no way to track when individual elements are loaded into the DOM via a CSS filter or similar, or another way around this other than having <script> in the body or just dealing the the load delay?

thanks,
Leon

I'm developing a simple game that involves a system of interconnected nodes with unidirectional travel between nodes (similar to the circulation system!). The goal of the game is to get from a starting node to an ending node, which can be a variable number of nodes away.

The program picks a random starting point, then randomly chooses one of its connecting nodes (cNodes) and pushes it onto a pathArray. A cNode is randomly chosen from this new node and it is pushed onto the pathArray. This continues for a designated number of turns, thus generating a pathArray (invisible to the player). The last element in the pathArray is the endNode and the goal of the puzzle.

At each node the player is given two options of travel (though there may be more than two ways to go). One of these options MUST be the correct way if the player has not deviated from the path up until that point. If the player has deviated, this option can be any cNode. The other node is any cNode that does not lead to the endNode.

The following code contains a simplified list of nodes that represents the content in my game. The function, however, is taken word for word. In this snippet, the pathArray & startNode have already been generated and I am trying to resolve how to assign "nodeChoice" as either the correct direction of travel (for a player on the correct path) or any random cNode (for a player who has deviated from the path). Keep in mind that the pathArray and cNodes lengths can be any size.

Code:

<script>

//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];

//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];

//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];

//nodeChoice will represent a cNode from any given node
var nodeChoice;

//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
	//check each cNode to see if any are in pathArray
	for (var j = 0; j < _node.cNodes.length; j++) {
		//if a cNode is in pathArray, then we know to assign it nodeChoice...
		if (_node.cNodes[j] in pathArray) {
			nodeChoice = _node.cNodes[j];
			console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
		}
		//...otherwise don't do anything in this forLoop/ifStatement
	};
	//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
	if (nodeChoice == undefined) {
		nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
			console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
	};	
};

//Runtime:

chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);

</script>

...however, nodeChoice is assigned either D, E or F randomly and we are given the troubleshooting statement "choiceNode INCORRECT: D (or) E (or) F", indicating that the if-in statement is always ignored.

I know that the if-in statement doesn't work but am not sure how else to write it so that each cNode is compared the each element in pathArray, both of which can be of variable lengths...

I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so:

PHP Code:
$my_list .= '
    <form action="#" method="post">
        <textarea class="commentbox" name="comment" id="comment"></textarea>
        <input type="hidden" name="post_id"  id="post_id" value=' . $post_id . ' />
        <input type="hidden" name="member_id" id="member_id" value=' . $id . ' />
        <input type="submit" class="submit' . $post_id . '" value="Comment " />
    </form>
    ' . $comment_list . ' // existing comments queried from the db
    <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments
';
?> 


Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id).

So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function.

Code:

<head>
<script type="text/javascript">
$(function() {
    $(".submit<?php echo $post_id; ?>").click(function() {
        var post_id = $("#post_id").val();  // this is the unique id for each story, in a hidden input
        var member_id = $("#member_id").val();  // this is a member for the commenter, in a hidden input
        var comment = $("#comment").val();  // this is the comment from the input box
        var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;   
        if(comment=='') {
            alert('Please enter a valid comment');
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
            $.ajax({
                type: "POST",
                url: "commentajax.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#update<?php echo $post_id; ?>").append(html);
                    $("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
                    document.getElementById('post_id').value='';
                    document.getElementById('member_id').value='';
                    document.getElementById('comment').value='';
                    $("#comment").focus();
                    $("#flash").hide();
                }
            });
        }
        return false;
    });
});
</script>
</head>

Hi I am creating a help page on my website and I am putting a form on there in case users wish to leave any feedback/suggestions. Now, I am using JavaScript to try and solve this. What I want is a form box, which when the submit button is clicked, it creates a new div box underneath the form (or existing comment div) and updates the site this way. At first I would like to just get the functionality of the div being created and updated, then I will imrpove/add my form inputs etc.

Here is what code I have so far:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
      <title>template</title>
<meta name="description" content="Brief description of the page" />
<meta name="author" content="Thomas S. P. Vasey" />

<style type="text/css">



label {width: 7em;
       float: left;
	   text-align: right;
	   margin-right: 1em;
	   margin-left: 1em;
	   display: block;
	   text-decoration: underline;
	   font-family: century gothic;
	   font-size: 10pt;
	   font-weight: bold;}
	   
fieldset {background-color: gray;
          width: 50%;
		  color: #f7852c;
		  display: inline;
		  border: 0pt;}
		  
legend {color: black;
        border: 1px solid #000000;
		font-size: 14pt;
		padding-left: 1em;
		padding-right: 1em;}
		
textarea {border: 1pt solid black;
          background-color: #f7852c;}
		
input {border: 1pt solid black;}

input[type="text"] {background-color: #f7852c;}
input[type="button"] {background-color: #f7852c;
                      font-family: century gothic;
					  border: 2px solid black;
					  padding: 0.5%;
					  margin: 2%;}
input[type="reset"] {background-color: #f7852c;
                     font-family: century gothic;
					 padding: 0.5%;
					 border: 2px solid black;
					 margin: 2%;}

input:focus {background-color: #80b7ff;}
textarea:focus {background-color: #80b7ff;}

</style>
<script type="text/javascript">
function printOut() {
     var alias = document.form1.username.value;
	 var comment = document.form1.comments.value;
	 
	 document.write('<div class="output">' + alias + '</div>');
	 document.write('<div class="output">' + comment + '</div>');
}
</script>
</head>
<body>

<form action="" name="form1" method="">
     <fieldset>
	     <legend>[A!B]Attitude Brothaz Feedback</legend>
		 <p>
		     <label for="username">Name/Alias:</label>
			 <input type="text" name="username" maxlength="25" size="20" />
		 </p>
		 <p>
		     <label for="comments">Comments:</label>
		     <textarea name="comments" rows="5" cols="40"></textarea>
		 </p>
		 
		 
		 
		 <input type="button" value="Submit Post" onclick="printOut()" />
		 <input type="reset" value="Reset Form" />
	 </fieldset>
</form>

</body>
</html>

I hope someone can help me achieve this, I believe I am going in the right direction with it, just need some guidance.


Thank you for your time,

Regards,

LC.

Hi, I'm mainly a PHP/HTML coder, but now I saw an excellent opportunity to use some Javascript. On my social network I'm adding the option to comment on statuses. What I need help with is how to this:
I want it to be a text that says "Comment on status",
when the user clicks this text I want the comment form to drop down under there and the "comment on status" link to disappear.

Please help me with this, thank you in advance.

Hi, I'm trying to make a comment field that only appears once you've clicked the "Add comment link". I'd like it to replace the add comment link. I assume this is an onclick event of some sort, but I'm not sure quite how to go about doing it.

Help would be highly appreciated.

I came across some embedded JavaScript code and I noticed some weird “HTML comment-like tags” within embedded JavaScript that are getting rendered in FireFox but not IE. Specifically the closing tag "//-->"

And the JavaScript code between these tags is functional (not commented out)!

Code:

<SCRIPT type=text/javascript>
<!--

....

//-->
</SCRIPT>

What are these?

Example usage:

Code:

<SCRIPT type=text/javascript>
<!--
var zz, zv, d, fTSR;
d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;

var gBF=false;
function GoTo(u){window.top.location = u + zz;}
function Go(u){window.top.location = u;} 

....

//-->
</SCRIPT>

I am trying to create a comments posting feature in my site using javascript
However everytime i click on submit it shows the comment posted for a second and then the comment dissapears. It does not retain the comment posted. Please help.

code is given below:

Code:

 

<html>
    <head>
        <script type="text/javascript">
            function post(){
                document.getElementById("label").innerHTML=document.hello.posted.value;
                              
            }
            
        </script>
    </head>
    <body>
        <form name="hello">
            <div id="label"> </div>
        <textarea name="posted">  </textarea>
        <input type="submit" value="Submit" onclick="post()">
        </form>
    </body>
</html>

Hello, I have not been able to do any JS because my damn books have been on order for the last 3 weeks but I'm wondering if anybody could help me put a script into my webpage so that when anybody visits the 'contact us' page they can leave comments.

Here's my code:

HTML:

Code:

<!DOCTYPE html "PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>

<link rel="stylesheet" type="text/css" href="css/contactus.css" />

</head>

<body bgcolor="grey">

<img src="gradientheader.jpg" id="header" width="930px;" height="120px;" align="center" border="1" />

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="headerwithbuttons.html">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">Games</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Music</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Contact Us</a></li>
<li><a href="http://www.codingforums.com/">Links</a></li>
</ul>
</div>
</br>

<div>
<img src="contactus.jpg" id="contactusright" alt="contact1" height="120px;" />
</div>

<div>
<img src="contactus.jpg" id="contactusleft" alt="contact2" height="120px;" />
</div>

<div class="infoarea1" height="300">
<img src="tel2.jpg" width="250" height="100px;" />
<p class="infoarea1">Please contact us on either our Fax line or Business line on:</p>
<br />
<p><i>Telephone: <b>012....</b></i>;</p>
<p><i>Fax: <b>012.....6</b></i></p>
</div>

<div class="infoarea2" height="300">
<img src="emailicon.jpg" width="250" height="100px;" />
<p class="infoarea2">Please contact us by e-mail to the following e-mail address:</p>
<br />
<p><i>E-Mail: <b>flipmode...........co.uk</b></i></p>
</div>

<div class="infoarea3" height="300">
<img src="postboxicon.jpg" width="250" height="100px;" />
<p class="infoarea3">Please contact us by post by sending all relevant post to:</p>
<br />
<p><i>..........</p>
<p>............</p>
<p>.......</p>
<p>.......</i></p>
</div>





</body>
</html>

CSS:

Code:

#header {border-style: solid; 
         border-width: 2px;
         border-color: black;
         }

.gradientbuttons {position:absolute; top:95px; left:149px; }

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 50px;
border: 1px solid #778;
color: white; 
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: red;
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); 
}

#contactusright {position: absolute; top:8px; left:895px;}
#contactusright {border: 2px solid #8dcb41;
                 width: 100px;} 

#contactusleft {position: absolute; top:8px; left:8px;}
#contactusleft {border: 2px solid #8dcb41;
                width: 100px;}

div.infoarea1 {float: left;}
div.infoarea1 {width: 250px;
               background-color: green;
               margin-top: 20px;}


p {padding: 1;
   margin: 5;} 
p {font-family: franklin gothic;
   color: black;
   }

div.infoarea2 {float: left;}
div.infoarea2 {width: 250px;
               background-color: red;
               margin-top: 20px;
               margin-left: 130px;}

div.infoarea3 {float: right;}
div.infoarea3 {width: 250px;
               background-color: blue;
               margin-top: 20px;
               margin-right: 0px;
               }

BTW - I know this doesn't validate but it's only a draft site until I get my books.

Thanks for any info!

Here's the page, I want the comment underneath all three div's.

Why does a comment tag hide the havascript if the browser does not support javascript? I thought comment tags were for comments not to hide things...

Is it just considered proper format to always have comment tags in javascript code
such as


*/ and /*

and //

etc?
thanks

Hello I'm not sure if I post this message on the right section or not...Actually what iam having difficulty at is I put a facebook plugin commentbox on my page. here is the link for my site http://www.mxstudio.ca/comments.html
what my qestion is I can't delit other people message from this page. So if someone post badwords to my site is there anything I can remove his or her comments from this comment section. Any answer greatly precaite thanks...

Hello I'm not sure if I post this message on the right section or not...Actually what iam having difficulty at is I put a facebook plugin commentbox on my page. here is the link for my site http://www.mxstudio.ca/comments.html
what my qestion is I can't delit other people message from this page. So if someone post badwords to my site is there anything I can remove his or her comments from this comment section. Any answer greatly precaite thanks...

Hi.
So, I have this loop I run to retrieve wallposts with php. Within this loop, I want a link/button on every post that says "comment". When the user clicks the comment link I want a comment field and post button to appear on the post I clicked on. The problem is that when I've tried making a link that does this, it only drops down the comment field on the most recent wallpost regardless of which wallpost I click on.

I'd appreciate some help, a lot!

Hi

I normally use Firefox as my web browser. After adding the comment script to my site I have now found out that the script isn't working with Explorer 8. Clicking on the 'Send Comment' button when using Explorer 8 doesn't work, yet it works fine with Firefox. Hopefully then there can't be too much wrong.

You can see the script and test it he

http://creatingwebsites-4u.co.uk/com...st/example.php

Regards
Mark