|
JavaScript - Need A Function That Sees If The Computer Has A 2 Move Forced Win
//Need a function that sees if the computer has a 2 move forced win, if so take first of those two moves.
//and then see if the opponent has a 2 move forced win. if so, then blaock the first of those two moves. // The gameboard array --this holds the game status var gaBoard = [['o', 'o', 'o', 'o', 'o', 'o', 'o'], ['o', 'o', 'o', 'o', 'o', 'o', 'o'], ['o', 'o', 'o', 'o', 'o', 'o', 'o'], ['o', 'o', 'o', 'o', 'o', 'o', 'o'], ['o', 'o', 'o', 'o', 'o', 'o', 'o'], ['o', 'o', 'o', 'o', 'o', 'o', 'o']]; var gcPlayer = "r"; // current player color var gbGameOver = false; //Loading the Gameboard function vLoad() { var strTable, i, j, strID, strOver, strOut, strTitle, strHover, strPush, strArrow; strTable = "<table cellpadding='0' cellspacing='0'>"; //put a row in the table for the title for (i = 0; i < 1; i++) { strTable += "<tr>"; strTitle = "<h1 style= 'color:Orange; font-family:Broadway'>Connect Four</h1>"; //put in the title strTable += strTD(7, strTitle); strTable += "</tr>"; // Buttons area strTable += "<tr>"; strTable += strTD(4, strButton("New Game", "vReset()")); strTable += strTD(3, strButton("Computer Move", "vComputerMove()")); strTable += "</tr>"; } //Arrows Row strTable += "<tr>"; //put in the columns for (j = 0; j < 7; j++) { strID = "img" + j; strHover = "vHover(\"" + strID + "\")"; strPush = "vPush(\"" + strID + "\"," + j + ")"; strArrow = "vArrow(\"" + strID + "\")"; strTable += strTD(1, strImage("arrow.jpg", strID, strPush, strHover, strArrow)); } strTable += "</tr> <tr><td colspan='7'><hr/></td></tr>"; //put a row in the table for the gameboard for (i = 5; i >= 0; i--) { strTable += "<tr>"; //put in the columns for (j = 0; j < 7; j++) { strID = "img" + i + j; strTable += strTD(1, strImage("open.jpg", strID, "", "", "")); } strTable += "</tr>"; } //put a row in the table for the text area for (i = 0; i < 1; i++) { strTable += "<tr>"; strTable += strTD(7, strTextArea(16, 66)); strTable += "</tr>"; } strTable += "</table>"; frm1.innerHTML = strTable; } //*************************************************************************************************** //Functions for Modifying controls function vHover(strID) { document.getElementById(strID).src = "hover.jpg"; } function vArrow(strID) { document.getElementById(strID).src = "arrow.jpg"; } function vMakeRed(strID) { document.getElementById(strID).src = "red.jpg"; } function vMakeBlack(strID) { document.getElementById(strID).src = "black.jpg"; } function vMakeOpen(strID) { document.getElementById(strID).src = "open.jpg"; } function iTopSlot(iCol) { var iRow, iCol; iRow = 0; while ( (iRow < 6) && (gaBoard[iRow][iCol] != 'o')) iRow++; return iRow; } function vPush(strID, iCol) { var iRow, iCol; document.getElementById(strID).src = "push.jpg"; /* if (gbGameOver) { return 0; } */ // see if we can drop a piece into the selected column if (gaBoard[5][iCol] == 'o') { iRow = iTopSlot(iCol); gaBoard[iRow][iCol] = gcPlayer; strID = "img" + iRow + iCol; // switch players if (gcPlayer == "r") { vMakeRed(strID); if (bWinner(gcPlayer)) { alert(gcPlayer + " has won the game."); frm1.taOutput.value += gcPlayer + " has won the game."; gbGameOver = true; } gcPlayer = "b"; } else { vMakeBlack(strID); if (bWinner(gcPlayer)) { frm1.taOutput.value += gcPlayer + " has won the game."; alert(gcPlayer + " has won the game."); gbGameOver = true; } gcPlayer = "r"; } } else { frm1.taOutput.value += "That column is full - try again.\n"; } } function bWinner(cPlayer) { var iCol, iRow; //Horizontal Win for (iRow = 0; iRow < 6; iRow++) { for (iCol = 0; iCol < 4; iCol++) { if ((gaBoard[iRow][iCol] == cPlayer) && (gaBoard[iRow][iCol + 1] == cPlayer) && (gaBoard[iRow][iCol + 2] == cPlayer) && (gaBoard[iRow][iCol + 3] == cPlayer)) return true; } } //Verticle Win for (iRow = 0; iRow < 3; iRow++) { for (iCol = 0; iCol < 7; iCol++) { if ((gaBoard[iRow][iCol] == cPlayer) && (gaBoard[iRow + 1][iCol] == cPlayer) && (gaBoard[iRow + 2][iCol] == cPlayer) && (gaBoard[iRow + 3][iCol] == cPlayer)) return true; } } //diagonal win Positive Slope for (iRow = 0; iRow < 3; iRow++) { for (iCol = 0; iCol < 4; iCol++) { if ((gaBoard[iRow][iCol] == cPlayer) && (gaBoard[iRow + 1][iCol + 1] == cPlayer) && (gaBoard[iRow + 2][iCol + 2] == cPlayer) && (gaBoard[iRow + 3][iCol + 3] == cPlayer)) return true; } } //diagonal win Negative Slope for (iRow = 3; iRow < 6; iRow++) { for (iCol = 0; iCol < 4; iCol++) { if ((gaBoard[iRow][iCol] == cPlayer) && (gaBoard[iRow - 1][iCol + 1] == cPlayer) && (gaBoard[iRow - 2][iCol + 2] == cPlayer) && (gaBoard[iRow - 3][iCol + 3] == cPlayer)) return true; } } return false; } function vComputerMove(){ var iRow,iCol,iWinCol; //Try to win iWinCol = -1; iLoseCol = -1; for(iCol = 0; iCol < 7; iCol++) { iRow = iTopSlot(iCol) if(iRow < 6) { gaBoard[iRow][iCol] = gcPlayer; if(bWinner(gcPlayer)) iWinCol = iCol; gaBoard[iRow][iCol] = 'o'; } } if (iWinCol > -1) { vPush("img" + iWinCol, iWinCol); } //Try to Block if (gcPlayer == 'b') { for (iCol = 0; iCol < 7; iCol++) { iRow = iTopSlot(iCol) if (iRow < 6) { gaBoard[iRow][iCol] = 'r'; if (bWinner('r')) iLoseCol = iCol; gaBoard[iRow][iCol] = 'o'; } } } else if (gcPlayer == 'r') { for (iCol = 0; iCol < 7; iCol++) { iRow = iTopSlot(iCol) if (iRow < 6) { gaBoard[iRow][iCol] = 'b'; if (bWinner('b')) iLoseCol = iCol; gaBoard[iRow][iCol] = 'o'; } } } if (iLoseCol > -1) { vPush("img" + iLoseCol, iLoseCol); } else vRandomMove(); } function vRandomMove() { var iRandom, iRow; iRow = 6; while (iRow == 6) { iRandom = (Math.floor(Math.random() * 7)); iRow = iTopSlot(iRandom); } vPush("img" + iRandom, iRandom); } function vReset() { for (i = 5; i >= 0; i--) { for (j = 0; j < 7; j++) { gaBoard[i][j] = 'o'; strID = "img" + i + j; vMakeOpen(strID); } } frm1.taOutput.value = ""; gcPlayer = "r"; } //*************************************************************************************************** //Functions for making form controls //Button Maker function strButton(strValue, strOnclick) { return "<input type='button' value='" + strValue + "' onclick='" + strOnclick + "' />" } //Image Maker function strImage(strSource, strID, strOnclick, strMouseOver, strMouseOut) { var strReturn; strReturn = "<img src='" + strSource + "' id='" + strID + "' onclick='" + strOnclick + "' "; strReturn += "onmouseover='" + strMouseOver + "' onmouseout='" + strMouseOut + "' />" return strReturn; } //TD Maker function strTD(iColspan, strContent) { return "<td colspan='" + iColspan + "'>" + strContent + "</td>"; } //Text Area Maker function strTextArea(iRows, iCol) { var strReturn; strReturn = "<textarea id='taOutput' "; strReturn += "' rows= '" + iRows + "' cols='" + iCol + "'readonly='readonly'>"; strReturn += "</textarea>"; return strReturn; } Similar TutorialsHey guys, I need to create a constructor for a computer object. This object must have three properties: speed, and mem_live mem_dead. Then I need to create a new object using this constructor and then have its properties displayed on the screen. Look at what I'm up to so far: Quote: function Computer(speed, mem_live, mem_dead) { this.speed = speed; this.mem_live = mem_live; this.mem_dead = mem_dead; } var computer1 = new Computer("4.0ghz", true, false); document.write(computer1.speed + " " + computer1.mem_live + " " + computer1.mem_dead); What am I doing wrong? It always just shows : 4.0ghz, true, false Hi everyone, Is it possible to determine at the startup of the page if the visitor is using a computer or a phone to access the site? I would like to make the intro process much better than a simple "click here for HTML version or click here for Flash version". I would like for it to simply redirect to the page I set it to go to depending on whether or not they're using a regular browser or a mobile browser. How would I go about this? Thank you all very much in advance. so here is my "Project http://sw.cs.wwu.edu/~strickk/Project2/project2.html and here are the directions where im stuck at, just right click view source to see the code. I believe what i am doing wrong is where i enter my variables and i dont know how to get an alert message to pop up using an if statement as well as getting the values for the distances to show up correctly directions: 8. Now we will write some JavaScript to validate the input. We don’t want the user to be able to enter the same origin and destination city when they book a ticket. So we will use an if statement to check that. If they have entered the same origin and destination city then we will tell them that by using an alert statement and make them select again. All of your code to validate the input code goes in between the single quotes of the onClick event in the Calculate Fare button. Follow these steps: a) Assign the value of the origin city to a variable called origin Note that the value that gets assigned to origin is actually 0, 60, 90, 120 or 150 (and NOT Bellingham, Everett, Seattle etc.) since the value we gave to the each element of the list was its distance from Bellingham. This will make our lives easier later when we compute the fare. b) Assign the value of the destination city to a variable called destination in a similar fashion. c) Write an if statement that will test whether origin is equal to destination and if it is then do two things. i. Issue an alert message that says Please input different origin and destination cities ii. Stop the execution of the JavaScript code in the onClick event. Use return; as the second statement inside the if statement. Remember to use curly braces to denote that two statements are contained within the if statement. Your if statement will have the following structure to it. if (<put the test you want to do here>) { alert(<put the message here>); return; } I'm writing a report for my college class about what it takes to get into the field of computer programming and i need to obtain information from someone who is in the position of hiring entry level computer programmers. it would Really! help me out if someone has time to fill out these questions. I know its asking for a lot but if anyone has the time it would be highly appreciated! 1. Tell me a little bit about the company? ( Main focus, how did it start, who are your customers, company growth,etc) 2. Where do you see the industry in 5 years? 3. What makes the company successful? 4. What are you looking for in a potential candidate? 5. When interviewing a potential employee, what questions do you expect them to ask you? 6. How could a typical day on the job be described? How much variety is there on a day-to-day basis? 7. When you look at resume, what is your main focus in terms of order and importance, reference? 8. How do you feel about networking as a tool to research potential candidates? (ex. LinkedIN, Facebook?) 9. What education, experience and qualifications are need to enter the field as entry level position? 10. What is the salary range and job responsibilities? 11. What is best liked and least liked about this field / job? 12. What is a typical interview in this field? How is it different then regular interviews? 13. Is there a demand for people in this field? 14. What special advice could you give a person entering the field? 15. What types of training do companies offer persons entering this field? 16. Which professional journals and organizations would help me learn more about this field? 17. How can a new graduate obtain experience in the field? How and where can one get internship? 18. What types of technologies and software is used in the field? 19. Would you have any more information that will be of use to me? 20. Can you suggest others who may be valuable sources of information? Hey all im getting used to using .js still and I am trying to figure out how to create a button to move a selected field within a box of fields to the top, instead of just moving it one-by-one to the top. Here is what I currently have that moves the selected just up one. Can someone expand on this and make it so it will move to the top instead of just one? SearchFieldsWindow.prototype.cmdMoveUp_OnClick = function() { var searchFields = this.__searchFields; var items = this.__lstSelected.get_Items(); var selectedIndices = this.__lstSelected.get_SelectedIndices(); var count = selectedIndices.get_Count(); for (var i = 0; i < count; i++) { var selectedIndex = selectedIndices.get_Item(i); // Don't allow when first item selected if (selectedIndex == 0) break; var uniqueID = items.get_ItemValue(selectedIndex); var label = items.get_ItemLabel(selectedIndex); searchFields.MoveUp(uniqueID); items.RemoveAt(selectedIndex); items.Insert(selectedIndex - 1, uniqueID, label); this.__lstSelected.SetSelected(selectedIndex - 1, true); this.__lstSelected.SetSelected(selectedIndex, false); } }; So if the user enters a serial number in the "Serial_Number" field and hits enter I would like the cursor to move DOWN to the next "Serial_Number" field. Is this possible?? Tracy Code: <table>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4853" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4853" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4854" >
</td>
<td> Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4854" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4855" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4855" >
</td>
</tr>
</table>
Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
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, I am trying to write a script to get my sprite to move to the next row once it reaches the last frame on it's current row. Here's my attempt so far; in the code below I want bird2 when it reaches frame 3 and spState(1) - this means first row - to switch to spState (2) second row. Code: if ($('#bird2'['current_frame']) == 3 && $('#bird2').spState(1)) {
$('#bird2').spState(2);
} else {
$('#bird2').spState(1);
}
Here's the code regarding the spState() Code: spState: function(n) {
$(this).each(function() {
// change state of a sprite, where state is the vertical
// position of the background image (e.g. frames row)
var yPos = ((n - 1) * $(this).height()) + 'px';
var xPos = $._spritely.getBgX($(this));
var bp = xPos + ' -' + yPos;
$(this).css('background-position', bp);
});
return this;
this is from http://www.spritely.net/ you will notice on this site that if you drag the slider to the left the bird sprites change direction, in fact they play the second row of frames. The reason I want my bird sprite to go automatically to the next row is because I am using video turned into individual frames and a png strip, and I am limited by the max width of png (8192px). see http://www.cranihum.com/ scroll down to see the bird on the rooftop. Each frame in that bird sprite is 80px wide and there are 93 frames. So I would like to include multiple rows to allow me to increase the number of frames. Up to 15 rows will be needed and after the last row it should go back to the first row. Perhaps a switch statement would be better than what I currently have. I am new to JavaScript and have been trying to pick up clues from http://www.w3schools.com I am very happy to learn and I hope to be prompted and pushed in the right direction. I hope my request is clear, please ask questions if not. Thank you Will I have a html form that uses AJAX to display an XML file for a live search box to appear underneath the search box while the user is typing. I want to be able to click on the links and for the data to be entered into the search box, kinda like on Google's main page. Someone mentioned to be about moving the text using javascript onclick, can anyone help with this?
Hi once again! Is it possible to detect was the mouse on the move or not in the moment when button is released ? Hi all, I'm trying to do something with a WYSIWYG editor. Below is a piece of code that takes selected text and wraps various BBCodes around it. The code almost works... but I want a few changes and I hope someone has an idea for me. Note: the var range = ed.selection.getRng(true); line gets a W3C compatible range containing the current selection - even under MSIE. The editor takes care of this. Note: The var elem = ed.dom.create('span', false, ' '); line creates a SPAN element with the initial content " " and returns it's element in "elem". Code: var ed = (tinymce.activeEditor || opener.tinymce.activeEditor);
if(ed)
{
var sel = ed.selection.getContent();
var range = ed.selection.getRng(true);
var elem = ed.dom.create('span', false, ' ');
elem.innerHTML = bbopen + sel + bbclose;
range.deleteContents();
range.insertNode(elem);
ed.selection.select(elem);
ed.focus();
return;
}
This code works, but not exactly as I want. For example, if I type "This is a test" and wrap code tags around it, I get this: But what I WANT is this: Also, if I select no text and hit the BBCode button, I get the open tag and the close tag, all highlighted. What I want in this case is the open tag, the close tag and the cursor IN BETWEEN them ready for text insertion. I'm thinking that I can take the range start and end offsets and move them to get what I want, but so far I've failed. One thing I DON'T want to have to do is create THREE spans... one for the open, one for the selection and one for the close. Trying to avoid that if possible. Any help will be greatly appreciated! Thanks! -- Roger Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown)
{
switch(keyValueDown)
{
case 97: //A Move Left
//move it left
break;
case 100: //D Move Right
//move it right
break;
case 119: //W Move Up
//move it up
break;
case 115: //S Move Down
//move it down
break; }
}
p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! I am working on a ajax chat system right now and I've ran into a little problem. I have no idea how to go about doing this but I know there has to be a way of doing this because I've seen it done before on other ajax chats I've seen. How do I ago about moving the scrollbar of a div to the bottom so that it shows the last that has been entered into the chat. If you need me to explain more then just let me know. But basically I'm wanting the scrollbar when it overflows in the window of a div to go and to the bottom when someone enters something new to the chat. Hi Guys. First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design. Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending. I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit. ----> menupic variable is being passed by php into javascript Code: function moveImagesLeft() {
for (i=0; i<=100; i++) {
setPixels = (i + 2);
for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
indexpic = "menupic"+L;
document.getElementById(indexpic).style.left="-"+setPixels+"px";
}
}
}
Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code: document.getElementById(indexpic).style.left="-"+setPixels+"px"; Nothing else happens, the pictures all shift left 2pixels as they should but nothing else. The top loop is not going again (excuse the poor use of terminology) I dont know if it makes a different but where the images are they are declared as so. Code: <a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a> Code: .menupic {position:relative; display:block; width:60px, height:40px}
and the Id class is there so that my javascript can control it. I hope that I have worded this in a way that is easily understandable. Any help would be greatly appreciated. I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution. Kindest Regards Oli Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.top = randomHeight + "px";
}
if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.left = randomWidth + "px";
}
Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. Hi there, I am pretty new to javascript coding, and I could use little help... As you can see here, I got this code where I can move image inside of a box, and I do it by clicking these "links". And now I want to ask you, is there any way that I could move image using keys on keyboard (arrows or WSAD)? I'd like to keep this as simple as possible since I am not really into very advanced scripts (although I could probably understand them if you give little explanation). Code: <html>
<head>
<body>
<script type="application/ecmascript">
// X position of image
var x = 0;
// Y position of image
var y = 0;
// Move per click
var inc = 10;
function Init()
{
document.getElementById('autic').style.left = x + 'px';
document.getElementById('autic').style.top = y + 'px';
}
function moveRight()
{
x += inc;
document.getElementById('autic').style.left = x + 'px';
}
function moveLeft()
{
x -= inc;
document.getElementById('autic').style.left = x + 'px';
}
function moveUp()
{
y -= inc;
document.getElementById('autic').style.top = y + 'px';
}
function moveDown()
{
y += inc;
document.getElementById('autic').style.top = y + 'px';
}
</script>
<style>
#box
{
width: 500px;
height: 300px;
position: relative;
margin: 20px auto 0px auto;
border: 5px outset #000;
overflow: hidden;
}
.image
{
position: absolute;
z-index: 100;
}
</style>
</head>
<body onload="javascript:Init()">
<div id="box"><img class="image" id="autic" src="auto.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>
Hi all, I am trying to wrap a text selection with BBCode. I have it working, but there is one final part I need help with. First, here's the code I'm using: Code: var range = ed.selection.getRng(true);
var s = ed.dom.create('span', {}, '');
range.surroundContents(s);
s.innerHTML = open + s.innerHTML + close;
ed.selection.select(s);
This is an explanation of each line: get the user's selection as a W3C compatible range create an empty <span> element surround the selection range with the span convert the selection from "selection" to "[bbcode]selection[/bbcode]" by using innerHTML select the new <span> element Of course, selecting the span ALSO selects the BBCode open and close tag... like in this pictu So, the last thing I need to do (the whole point of this post)... how do I MOVE the range start and end points so that only the selection is selected and NOT the whole thing? I will greatly appreciate if someone can tell me how to move those selection start and end points... Thanks! -- Roger I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> |
|||||||