|
JavaScript - Caesar Shift Js Roadblock
Hi all,
I am having a problem with the following code: js Code: function encrypt() {
var char, encryptedoutput = "", rawinput, shiftamt;
rawinput = document.getElementById("inputinfo").value;
shiftamt = document.getElementById("shiftamt").value;
for (i = 0; i < rawinput.length; i++) {
char = rawinput.charCodeAt(i);
if (char >= 65 && char <= 90) encryptedoutput += String.fromCharCode((char - 65 + shiftamt) % 26 + 65);
else if (char >= 97 && char <= 122) encryptedoutput += String.fromCharCode((char - 97 + shiftamt) % 26 + 97);
else encryptedoutput += rawinput.charAt(i);
}
document.getElementById("outputinfo").value = encryptedoutput;
}
function decrypt() {
var encryptedchar, decryptedoutput = "", cipherinput, shiftamt;
cipherinput = document.getElementById("inputinfo").value;
shiftamt = document.getElementById("shiftamt").value;
shiftamt = (26 - shiftamt) % 26;
for (z = 0; z < cipherinput.length; z++) {
encryptedchar = cipherinput.charCodeAt(z);
if (encryptedchar >= 65 && encryptedchar <= 90) decryptedoutput += String.fromCharCode((encryptedchar - 65 - shiftamt) % 26 + 65);
else if (char >= 97 && encryptedchar <= 122) decryptedoutput += String.fromCharCode((encryptedchar - 97 - shiftamt) % 26 + 97);
else decryptedoutput += cipherinput.charAt(z);
}
document.getElementById("outputinfo").value = decryptedoutput;
}
function formReset() {
document.getElementById("cryptoform").reset();
}
html Code: <script type="text/javascript" src="/crypto/caesar.js"></script>
<form name="cryptoform" id="cryptoform">
<div id="inputside">
Input:<br /><br />
<textarea rows="30" cols="50" name="inputinfo" id="inputinfo"></textarea><br /><br />
Shift amount for encryption or decryption:
<select name="shiftamt" id="shiftamt" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option selected="selected" value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<br /><br />
<input type="button" value="Apply Shift" onClick="encrypt()" />
<input type="button" value="Reverse Shift" onClick="decrypt()" /><br /><br />
</div>
<div id="outputside">
Output:<br /><br />
<textarea rows="30" cols="50" name="outputinfo" id="outputinfo" readonly="readonly"></textarea><br /><br /><br /><br /><br /><br />
</div>
<div id="buttonarea">
<input type="button" value="Clear Fields" onClick="formReset(); return false;" />
</div>
</form>
I intend for the code to implement a simple caesar shift by the selected value. For example, with a shift of 1, a = b, b = c, c = d, etc. The problem I am having is that the letter A converts as it should but the other letters do not. For instance, applying a shift of 1, B is converted to L instead of C, C is converted to V instead of D. With a shift of 13, ABC produces NJF. Again, A is correct but the others are wrong, but by a different degree this time. Also, my reverse shift (decrypt) function does not work. If I remove the .value codes from the encrypt function then the decrypt function works. I am guessing there is a problem manipulating the same form components with different functions. It seems that the charCodeAt() values are being produced correctly, checking them by outputing them. If anyone has any ideas let me know. I have been working on projects like this just for fun in an attempt to improve upon my js knowledge/ability. Similar TutorialsHi, New to javascript. Trying to make a pause/play button using bootstrap glyphicons. The pause icon will not display during pause action and I can't figure out why. Code below. Please help! Code: <script>
function playpause_audio(btn,aud,icplay,icpause){
var icplay = document.getElementById(icplay);
var icpause = document.getElementById(icpause);
var aud = document.getElementById(aud);
if(aud.paused){
aud.play();
btn.style.backgroundColor = "white";
icpause.style.display = "inline-block";
icpause.style.visibility = "visible";
/*now hide play button*/
icplay.style.visibility = "hidden";
icplay.style.display = "none";
}
else{
aud.pause();
btn.style.backgroundColor = "blue";
icplay.style.display = "inline-block";
icplay.style.visibility = "visible";
/*now hide pause button*/
icpause.style.visibility = "hidden";
icpause.style.display = "none";
}
aud.onended = function() {
btn.style.backgroundColor = 'inherit';
icplay.style.display = "inline-block";
icplay.style.visibility = "visible";
/*now hide pause button*/
icpause.style.visibility = "hidden";
icpause.style.display = "none";
}
}
</script>
I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number. Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks. <div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden"> <div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe> </div> I am at my wits end! I've added DD belated PNG to nearly every site I've ever made with little or no problems, suddenly it's being super-extra mean to me. It will only load PNGs correctly if you clear your cache when refreshing the page (shift + refresh). Check it out at the link below (obfuscated so google doesn't index the site): http://ow.ly/758Dp Here's the script: PHP Code: <!--[if IE 6]> <script src="/~onsite/js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.shadow, #header_wrapper, header, header a, .slideshow h1, .pager_wrapper, #upcoming_wrapper, li.menuTools a, li.menuRSS a, .eDetailShareE, .saveToCal a, #services_wrapper, #services li'); </script> <![endif]--> What am I doing wrong here? Thanks so much for any help! NOTE: Just so everyone's aware, this is an IE6 only script that is supposed to fix PNG transparencies, so you'll need to look at it in IE6 to see the problems. I developed this under Safari on my mac. I have only been scripting for about 1.5 days so I am not the best with debugging. What would cause this? Code: <html>
<head>
<script ="Javascript>
// Setting vars
var winW = screen.width
var winH = screen.height;
var winLW = (winW / 2) - 240
// Resizing and moving window
self.resizeTo(480,640);
self.moveTo(winLW,0);
// Form reset function
function reset() {
document.shiftReport.reset();
}
// Create report function
function calculate() {
// Name Vars
var name = document.shiftReport.nameBox.value;
var mname = document.shiftReport.ModNameBox.value;
// Server Bar Vars
var j = document.shiftReport.JurSel.value;
var t = document.shiftReport.TriSel.value;
var c = document.shiftReport.CreSel.value;
var p = document.shiftReport.PreSel.value;
// Form Text Vars
var gnotes = document.shiftReport.GeneralNotes.value;
var PWMS = document.shiftReport.PWMS.value;
var SGB = document.shiftReport.SGB.value;
var WPMW = document.shiftReport.WPMW.value;
var CTaO = document.shiftReport.CTaO.value;
// Time Vars
var shifTime = document.shiftReport.TimSel.value;
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var this_date_timestamp=new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()
if (this_year < 1000)
this_year+= 1900;
if (this_year==101)
this_year=2001;
var this_date_string = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date + ", " + this_year //concat long date string
if (shifTime=="Other")
{
var shifTime=prompt("Please enter shift time:","11:00AM - 1:00PM");
}
// Creating Report
var theReport = "<b>Name:</b> " + name + "<br><b>Mod Name:</b> " + mname + "<br><b>Date:</b> " + this_date_string + "<br><b>Time:</b> " + shifTime + "<br><br><b>General Comments:</b><br>** Jurassic " + j + " bars<br>** Triassic " + t + " bars<br>** Cretaceous " + c + " bars<br>** Prehistoric " + p + " bars<br><br>" + gnotes + "<br><br><b>Players Warnings/Mutes/Suspensions:</b><br>" + PWMS + "<br><br><b>Site Glitches/Bugs:</b><br>" + SGB + "<br><br><b>What Players/Mods Want:</b><br>" + WPMW + "<br><br><b>Current Trends and Observations:</b><br>" + CTaO
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=480, height=640, left=400, top=0";
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Simple Shift Report</title>');
docprint.document.write('</head><body>');
docprint.document.write(theReport);
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();
}
</script>
<title>Simple Shift Report Generator</title>
<style type="text/css"></style>
</head>
<body style="background-color:#e5e5e5; color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<table bgcolor="003366"style="text-align: center; width: 100%;" border="0"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td><td bgcolor="#1a4f85"><font color="#FFFFFF">Simple Shift Report Generator</font></td>
<td width="30%"></td>
<td width="20%" style="text-align: right;"><font color="#8099b3" size="1">aaron smithers</font></td>
</tr>
</tbody>
<br>
<form name="shiftReport">
<table bgcolor="#DCDCDC" bordercolor="#FFFFFF" style="text-align: right; width: 100%;" border="15"
cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#e5e5e5"width="25%">Name:</td>
<td bgcolor="d9e7f8" width="75%"><input name="nameBox" size="58" value="" type="text"></td>
</tr>
<td bgcolor="#efefef"width="25%">Mod Name:</td>
<td bgcolor="#ffffcc"width="75%"><input name="ModNameBox" size="58" value="" type="text"></td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Shift:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TimSel"style="width:100%">
<option>Select Time - PST</option>
<option>4:30AM - 5:30AM</option>
<option>5:30AM - 7:00AM</option>
<option>7:00AM - 8:30AM</option>
<option>8:30AM - 10:00AM</option>
<option>10:00AM - 11:30AM</option>
<option>11:30AM - 1:00PM</option>
<option>1:00PM - 2:30PM</option>
<option>2:30PM - 4:00PM</option>
<option>4:00PM - 5:30PM</option>
<option>5:30PM - 7:00PM</option>
<option>7:00PM - 8:00PM</option>
<option>7:00PM - 8:30PM</option>
<option>8:30PM - 9:30PM</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Jurassic:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="JurSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Triassic:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TriSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Cretaceous:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="CreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Prehistoric:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="PreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">General:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="GeneralNotes" cols="42" rows="7" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Warning:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="PWMS" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Glitch:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="SGB" cols="42" rows="5" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Want:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="WPMW" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Trends:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="CTaO" cols="42" rows="5" value=""></textarea></td
</tr>
</tbody>
</table>
<table style="text-align: left; width:100%;" border="15"bordercolor="#e5e5e5"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td width="75%"bgcolor="#FFFFFF">|</td>
<td width="25%"><Input Type = Button NAME = b1 width="48%" VALUE = "Create Report" onClick = calculate()><br>
<input type="button" value=" Clear " onClick= reset()></td>
</tr>
</tbody>
</table>
</body>
</html>
Hi Experts, I'm new to this forum and need your help regarding javascript. I am creating a roster for my team with a web interface. Ex: A picture is attached for your reference The time is in IST (+5:30) I have created a drp down list which has PST, EST,CST time. I need to write a code so that whenever I select any of these times (PST,EST,CST, MST, IST) , it should automatically update the table. Please help. Regards, Indy to see the unexpected page shift in action go to http://lawlocaust.net/gamerverse/ while hovering over the banner u can use the arrow keys to navigate the UI and the page will shift in firefox HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GamerVerse</title>
<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>gamerverse.css" />
<?php include('children.php'); ?>
<script type="text/javascript" src="gamerverse.js">
</script>
</head>
<?php include('top.php'); ?>
top.php Code: <body onload="javascript: initialize()">
<div id="bgimgwrap">
<img id="bgimg" src="<?php echo $domain; ?>mainbg.jpg" alt="" />
</div>
<div id="cursor"> </div>
<div class="header" id="header" onmouseover="activatekeys()" onmouseout="deactivatekeys()">
<div class="menu">
<ul>
<li><a href="#" onclick="javascript: jumpto(0)">Home</a></li>
<li><a href="#" onclick="javascript: jumpto(1)">Users</a></li>
<li><a href="#" onclick="javascript: jumpto(2)">Games</a></li>
<li><a href="#" onclick="javascript: jumpto(3)">New Stuff</a></li>
<li><a href="#" onclick="javascript: jumpto(4)">Forum</a></li>
<li><a href="#" onclick="javascript: jumpto(5)">Guilds</a></li>
<li><a href="#" onclick="javascript: jumpto(6)">Store</a></li>
</ul>
<div style="float: right; width: 100px;">
X: <span id="myx"> </span>
Y: <span id="myy"> </span>
</div>
</div>
<div class="childarea">
<div id="child0"><a href="#" onclick="">child0</a><a href="#" onclick="">child1</a></div>
<div id="child1"><a href="#" onclick="">child1</a><a href="#" onclick="">child1</a></div>
<div id="child2"><a href="#" onclick="">child2</a><a href="#" onclick="">child1</a></div>
<div id="child3"><a href="#" onclick="">child3</a><a href="#" onclick="">child1</a></div>
<div id="child4"><a href="#" onclick="">child4</a><a href="#" onclick="">child1</a></div>
<div id="child5"><a href="#" onclick="">child5</a><a href="#" onclick="">child1</a></div>
<div id="child6"><a href="#" onclick="">child6</a><a href="#" onclick="">child1</a></div>
</div>
<img src="<?php echo $domain; ?>banner.png" alt="" />
</div>
<div class="page" id="page">
<table cellspacing="0px"; cellpadding="0px" id="main">
<tr>
<td><div><?php include('home.php'); ?></div></td><td><div><?php include('users.php'); ?></div></td><td><div><?php include('games.php'); ?></div></td><td><div><?php include('new.php'); ?></div></td><td><div><?php include('forum.php'); ?></div></td><td><div><?php include('guilds.php'); ?></div></td><td><div><?php include('store.php'); ?></div></td>
</tr>
</table>
</div>
<div id="child"><div id="kid0"><?php echo $homekid; ?></div><div id="kid1"><?php echo $userskid; ?></div><div id="kid2"><?php echo $gameskid; ?></div><div id="kid3"><?php echo $newkid; ?></div><div id="kid4"><?php echo $forumkid; ?></div><div id="kid5"><?php echo $guildskid; ?></div><div id="kid6"><?php echo $storekid; ?></div></div>
CSS Code: body {
background: black;
color: white;
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0px;
margin: 0px;
}
#bgimgwrap {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 2;
text-align: center;
}
.menu {
width: 100%;
text-align: center;
margin: auto;
padding: 0px 0px 4px 0px;
}
.menu li {
display: inline;
margin-left: 0px;
float: left;
}
.menu a {
display: block;
width: 100px;
height: 20px;
line-height: 20px;
color: white;
text-decoration: none;
margin-left: 0px;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
.menu a:hover {
color: black;
}
.page {
position: absolute;
left: 0;
}
#cursor {
display: block;
position: absolute;
top: 0;
width: 100px;
height: 20px;
background: red;
opacity:0.4;
filter:alpha(opacity=40);
z-index: 11;
}
td {
overflow: hidden;
background: #6faae4 url(right.png) repeat-y 100% 0%;
padding: 0px 25px 0px 25px;
}
td:before {
display: block;
content: url(topleft.png);
background: url(topright.png) no-repeat 100% 0%;
height: 25px;
margin: 0px -25px 0px -25px;
}
td:after {
display: block;
content: url(bottomleft.png);
background: url(bottomright.png) no-repeat 100% 0%;
height: 25px;
margin: 0px -25px 0px -25px;
}
td div:first-child {
background: #3d74aa;
border: 4px outset #c6c6c6;
overflow: hidden;
}
#child {
position: absolute;
left: 0px;
width: 100%;
}
#kid0 {
display: none;
}
#kid1 {
display: none;
}
#kid2 {
display: none;
}
#kid3 {
display: none;
}
#kid4 {
display: none;
}
#kid5 {
display: none;
}
#kid6 {
display: none;
}
.childarea {
width: 100%;
height: 20px;
margin-top: 17px;
}
.childarea div {
display: none;
}
.childarea a {
display: inline-block;
width: 100px;
height: 20px;
line-height: 20px;
color: white;
text-decoration: none;
margin-left: 0px;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
.childarea a:hover {
color: black;
}
#child0 {
position: absolute;
left: 0px;
}
#child1 {
position: absolute;
left: 101px;
}
#child2 {
position: absolute;
left: 202px;
}
#child3 {
position: absolute;
left: 303px;
}
#child4 {
position: absolute;
left: 404px;
}
#child5 {
position: absolute;
left: 505px;
}
#child6 {
position: absolute;
left: 606px;
}
javascript Code: //sets the global variables
function initialize()
{
//alert(navigator.appName+' '+navigator.appCodeName+' '+navigator.appVersion);
window.bgimg = document.getElementById('bgimg');
window.bgimgwrap = document.getElementById('bgimgwrap');
window.header = document.getElementById('header');
window.page = document.getElementById('page');
window.main = document.getElementById('main');
window.child = document.getElementById('child');
window.cursor = document.getElementById('cursor');
window.childqty = new Array();
window.childqty[0] = 2 - 1;
window.childqty[1] = 2 - 1;
window.childqty[2] = 2 - 1;
window.childqty[3] = 2 - 1;
window.childqty[4] = 2 - 1;
window.childqty[5] = 2 - 1;
window.childqty[6] = 2 - 1;
get_dims();
}
//adjusts various elements to make the site fluid
function get_dims()
{
winH = getH();
winW = getW();
bgimg.width = header.offsetWidth;
bgimg.height = header.offsetHeight;
bgimgwrap.width = header.offsetWidth;
bgimgwrap.height = header.offsetHeight;
var h = header.offsetHeight;
page.style.top = h+"px";
main.style.width = (winW*7)+"px";
child.style.top = winH+"px";
child.height = (winH-h)+"px";
var td = document.getElementsByTagName('td');
for(i = 0; i < td.length; i++)
{
td[i].width = winW+"px";
td[i].style.height = (winH-h)+"px";
td[i].firstChild.style.height = ((winH-h)-58)+"px";
td[i].firstChild.style.width = ((winW - (td[i].firstChild.offsetLeft*2))-8)+"px";
}
}
//gets the height of the window
function getH()
{
var winH = 0;
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winH = document.documentElement.clientHeight;
}
else
{
winH = window.innerHeight;
}
return winH;
}
//gets the width of the window
function getW()
{
var winW = 0;
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winW = document.documentElement.clientWidth;
}
else
{
winW = window.innerWidth;
}
return winW;
}
//the keydown action script
function move(c)
{
c = c || window.Event;
var k = c.which;
if(!k)
{
var k = c.charCode;
}
if(!k)
{
var k = c.keyCode;
}
var winW = getW();
var winH = getH();
var h = header.offsetHeight;
winH = winH - h;
switch(k)
{
case 37:
var thing = pos_check();
if(thing == "parent")
{
if(page.offsetLeft != 0)
{
slide('right', 0);
cursormove('right', 0);
}
}
else
{
slidekid('right', 0);
}
break;
case 38:
var thing = pos_check();
if(thing == "child"){ ditchkids(); }
break;
case 39:
var thing = pos_check();
if(thing == "parent")
{
if(page.offsetLeft != -(winW*6))
{
slide('left', 0);
cursormove('left', 0);
}
}
else
{
slidekid('left', 0);
}
break;
case 40:
var thing = pos_check();
if(thing == "parent"){ getkids(); }
break;
case 116:
window.location.reload();
break;
default:
break;
}
}
//move the page left or right
function slide(dir, i)
{
var w = getW();
if(i < w)
{
switch(dir)
{
case 'left':
page.style.left = (page.offsetLeft - 8)+"px";
break;
case 'right':
page.style.left = (page.offsetLeft + 8)+"px";
break;
}
i++;
i++;
i++;
i++;
i++;
i++;
i++;
i++;
var t = setTimeout("slide('"+dir+"', '"+i+"')", 0);
}
if(page.offsetLeft > 0){ page.style.left = 0+"px"; }
if(page.offsetLeft < -(w*6)){ page.style.left = -(w*6)+"px"; }
}
//moves the cursor left or right
function cursormove(dir, i)
{
switch(dir)
{
case 'left':
cursor.style.left = (cursor.offsetLeft + 1)+"px";
break;
case 'right':
cursor.style.left = (cursor.offsetLeft - 1)+"px";
break;
}
if(i < 100)
{
i++;
setTimeout("cursormove('"+dir+"', '"+i+"')", 20);
}
if(cursor.offsetLeft < 0){ cursor.style.left = 0+"px"; }
if(cursor.offsetLeft > 606){ cursor.style.left = 606+"px"; }
}
//checks to see which set of elements ur looking at
function pos_check()
{
var h = header.offsetHeight;
if(page.offsetTop == h)
{
return "parent";
}
else
{
return "child";
}
}
//displays the child elements
function getkids()
{
var c = cursor.offsetLeft;
c = c/101;
winW = getW();
p = childqty[c];
document.getElementById(c+'child').style.width = (winW*(p+1))+"px";
document.getElementById('child'+c).style.display = "block";
document.getElementById('kid'+c).style.display = "block";
child.style.left = 0+"px";
raisekid('up', 0);
}
function raisekid(d, i)
{
switch(d)
{
case "up":
page.style.top = (page.offsetTop - 2)+"px";
child.style.top = (child.offsetTop - 2)+"px";
break;
case "down":
page.style.top = (page.offsetTop + 2)+"px";
child.style.top = (child.offsetTop + 2)+"px";
if(i >= page.offsetHeight)
{
hidekids();
}
break;
}
if(i < page.offsetHeight)
{
i++;
i++;
setTimeout("raisekid('"+d+"', '"+i+"')", 0);
}
if(page.offsetTop > header.offsetHeight){ page.style.top = header.offsetHeight+"px"; }
}
function ditchkids()
{
raisekid('down', 0);
}
function hidekids()
{
var c = cursor.offsetLeft;
c = c/101;
document.getElementById('child'+c).style.display = "none";
document.getElementById('kid'+c).style.display = "none";
}
//moves the shild pages left or right
function slidekid(dir, i)
{
var w = getW();
if(i < w)
{
switch(dir)
{
case 'left':
child.style.left = (child.offsetLeft - 8)+"px";
break;
case 'right':
child.style.left = (child.offsetLeft + 8)+"px";
break;
}
i++;
i++;
i++;
i++;
i++;
i++;
i++;
i++;
var t = setTimeout("slidekid('"+dir+"', '"+i+"')", 0);
}
var c = cursor.offsetLeft;
c = c/101;
p = childqty[c];
if(child.offsetLeft > 0){ child.style.left = 0+"px"; }
if(child.offsetLeft < -(w*p)){ child.style.left = -(w*p)+"px"; }
}
//turns on the UI when hovering over the banner
function activatekeys()
{
document.addEventListener('keydown', move, true);
}
//turns off the UI when u stop hovering
function deactivatekeys()
{
document.removeEventListener('keydown', move, true);
}
My problem is the following. I have an editable <div>: <div class='edit' id='divContent' name='divContent' ContentEditable>some text</div> If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>. So I want to change 'enter' into 'shift+enter' I have already found something to capture and kill 'return' function killReturn() { key = event.keyCode; if (key == 13) return false; } But now for some means to replace the killed 'enter' with 'shift+enter'? Thanks a lot in advance for any advise! |
|||||||