|
JavaScript - Trying To Move A Image Around A Grid!
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 ! Similar Tutorialsi am trying to change my background image after click on given in grid option. any body show me complete code in java script. resource: HP Laptop Repair and Solution Service Center in Delhi 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 I need the image to move horizontal instead of vertical. Here is the code. Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code:
THE HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>
<div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
<div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>
THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}
THE .JS FILE
function intr()
{
var x, xi;
x=0;
xi=document.getElementById('img_intrare').style.left;
if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}
}
ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith Hi I had a problem earlier with the dom, which I have resolved. I was just wondering if anyone new how to use the dom, to create a table styled effect, a 3x5 grid. I find that I can create div elements and add them to the document, but they are only added vertically and not in the horizontal. This is my code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META name="generator" content="Free Script Editor, see www.freescripteditor.com">
<TITLE>Email Client</TITLE>
<link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/dragdrop.js" type="text/javascript"></script>
<script src="javascript/controls.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script src="javascript/builder.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlhttp = false;
//check if we are using IE
try {
//If the javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("You are using Microsoft Internet Explorer.");
}
catch(e)
{
//if not, then use the older active x object.
try {
//if we are using Internet Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("You are using Microsoft Internet Explorer");
}
catch (E)
{
xmlhttp = false;
}
}
//If we are using a non-IE browser, crea a javascript instance of the object
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
xmlhttp = new XMLHttpRequest();
alert ("You are not using Microsoft Internet Explorer");
}
function createTable()
{
var divright, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15;
divright = document.getElementById('right');
div1 = document.createElement('div');
div1.className = 'droparea';
div1.setAttribute('id', 'sortList1');
div2 = document.createElement('div');
div2.className = 'droparea';
div2.setAttribute('id', 'sortList2');
div3 = document.createElement('div');
div3.className = 'droparea';
div3.setAttribute('id', 'sortList3');
div4 = document.createElement('div');
div4.className = 'droparea';
div4.setAttribute('id', 'sortList4');
div5 = document.createElement('div');
div5.className = 'droparea';
div5.setAttribute('id', 'sortList5');
div6 = document.createElement('div');
div6.className = 'droparea';
div6.setAttribute('id', 'sortList6');
div7 = document.createElement('div');
div7.className = 'droparea';
div7.setAttribute('id', 'sortList7');
div8 = document.createElement('div');
div8.className = 'droparea';
div8.setAttribute('id', 'sortList8');
div9 = document.createElement('div');
div9.className = 'droparea';
div9.setAttribute('id', 'sortList9');
div10 = document.createElement('div');
div10.className = 'droparea';
div10.setAttribute('id', 'sortList10');
div11 = document.createElement('div');
div11.className = 'droparea';
div11.setAttribute('id', 'sortList11');
div12 = document.createElement('div');
div12.className = 'droparea';
div12.setAttribute('id', 'sortList12');
var div13 = document.createElement('div');
div13.className = 'droparea';
div13.setAttribute('id', 'sortList13');
div14 = document.createElement('div');
div14.className = 'droparea';
div14.setAttribute('id', 'sortList14');
div15 = document.createElement('div');
div15.className = 'droparea';
div15.setAttribute('id', 'sortList15');
divright.appendChild(div1);
divright.appendChild(div2);
}
function getmessage(inbox_id)
{
var object = document.getElementById('content');
var server = "getmessage.php?inbox_id=" +inbox_id;
xmlhttp.open("GET", server);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
object.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function createSortables()
{
Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
}
window.onload = function()
{
this.createTable();
this.createSortables();
}
</script>
</HEAD>
<BODY>
<!--header div - for message 'new', 'reply' -->
<div class="container" id="container">
<div class="header">
</div>
<!-- end of header div-->
<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left" id='container1'>
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
{//start while trainer query
$inbox_id = $row['0'];
$to = $row['1'];
$subject= $row['2'];
$sent = $row['3'];
$message = $row['4'];
$i++;
echo "<div class='draggable' id='$str$i'>
$inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a>
</div>";
}//end while inbox query
?>
</div>
<!--end left div-->
<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">
</div>
<div class="content" id="content">
</div>
</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
</BODY>
</HTML>
I have created an editable grid based on: http://www.webismymind.be/editablegrid Although I have created a few basic sites - coding is still pretty new to me, but what I want to do is make this grid editable by an admin user - and then have other users who can view it but not edit it. I am trying to create a basic staff rota & any help would be much appreciated Thanks Hi, This is my plan. I want to create a 3x3 grid on the page. Each square needs to be the height and width of the page. I will then use jquery scroll.to to move the grid, dispalying a different square to the user. Am I right in thinking that I wont be able use 100% width and 100% height in my CSS for the single box, since there are actually going to 8 squares that are off the page? I am guessing therefore that I should use javascript to take the window width and height, and then use this value to create each of the gridbox's. Is this the right way of doing it? Hello, I have this idea, but I wouldn't want to reinvent the wheel if it's already been done. I want to generate perspective grid on canvas depending on browser window size, something like this, but without textures: http://www.123rf.com/photo_2651286_a...rspective.html Do someone of you guys know if some similar script already exists? Or at least some tips on how not to end up writing a 1000 lines script (At this point I would just drop the idea)? All thoughts appreciated. P.S. even an obscure algorithm would probably suffice, 'cause the main problem I'm struggling with is diminishing size perspective calculations Hi, I need s JavaScript component that will allow the user to edit small amounts of data (<20 rows and Cols) in a grid format. Any suggestions on what to use? Thanks Bob Hi Peers, i am trying to build a template for my work. 1- it consists of 3 rows of data pulled from a databse based on 3 parameters entered in a form. those 2 rows includes 60 cells each ( 60 columns : 60 months) 2- i will have another 2 empty rows where i have to call another data from another table or enter it manually.. 3- i ll have the last row that will hold calculation results based on the above rows.. Any idea on how to build that ? \please let me know if you need more details or mock up .. it almost like an excel web spreadsheet except that sopme data is pulled directly from a database.. thank you Hello, I'm more looking for advice but any helpful examples would be great. So basically what I need to accomplish is a grid, that I can drop objects into, then save the coordinates. So let's say I have a 3x3 set of tiles which will represent "floor tiles", and I load from my MySql database a users "furniture", what's the best method of being able to take these dynamic items drop them on a tile which can be then saved in an xml file or something. What are the best j/s libraries for this? I know jQuery and mootools have drag and drop functions but can they accomplish what I'm looking for? Any feedback will help, I'm comfortable coding in js but I want to do it effeciently and there's got to be people who have done similar things. 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); } }; 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.
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>
Hi once again! Is it possible to detect was the mouse on the move or not in the moment when button is released ? 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 ; 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?
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 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 |
|||||||