|
JavaScript - Creating A Slideshow With Custom Intervals Between Slides
I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one.
I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript. I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas? Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230. I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks! Similar TutorialsI am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug. 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">
<head>
<body>
<div id="page-wrap">
<button id="nextButton2">next('div')</button>
<button id="prevButton2">prev('div')</button>
<div id="start" style="background: none repeat scroll 0% 0% red;"></div>
<div id="link_Babbling Brook" class="art">
<div id="link_Botany 101" class="art">
<div id="link_Cracking Up" class="art">
<div id="link_Eclipse" class="art">
<div id="link_Equinox" class="art">
<div id="link_Foliage Fluoresced" class="art">
<div id="link_In Vein" class="art">
<div id="link_Microscopic" class="art">
<div id="link_Pickup Sticks" class="art">
<div id="link_Relief" class="art">
<div id="link_Rhubarb" class="art">
<div id="link_Snow Dyed Shibori" class="art">
<div id="link_Symmetry" class="art">
<div id="link_Undulations" class="art">
<div id="link_Willow Mist" class="art">
<div id="link_Wired" class="art">
</div>
</body>
</html>
Javascript code Code: if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('art').each(function () {
var id = $(this).attr('id');
var name = $(this).find('name').text();
var full = $(this).find('large').text();
var detail = $(this).find('detail').text();
var thumb = $(this).find('thumb').text();
var category = $(this).find('category').text();
var dimensions = $(this).find('dimensions').text();
var description = $(this).find('description').text();
var detailthumb = '<img src= " ' + thumb + ' " />';
var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>';
var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />';
$('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap');
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#nextButton2").click(function () {
if(!$currElement.next('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#prevButton2").click(function () {
if(!$currElement.prev('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.prev('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
}
});
});
Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP Hello everyone, i hope your good. I decided when redesigning my website that i would try and build nearly everything in it by hand, which included a nice Javascript slideshow. While coding it (coded on Windows 7 and Vista) I ensured i checked it compatability with Firefox, IE, Chrome and Safari. From what i could tell everything was working good (except for some endless looping problems but lets ignore that for now). It even worked on the iPhone browser. But i sent it to a friend to test and they said nothing was working, after some discussion i descovered they were using IE7 (i was testing in IE8). From what i can see, IE7 has some problems with nested .appendChild and general document handling. I had tried to do my best keeping to using objects in javascript and now just writing HTML, and on one side it worked as it works on most browsers, but not IE7. The page it can be tested on it: http://xvolt.x-volt.com/downloads/view.php?id=3 And the code itself is: http://xvolt.x-volt.com/js/slideshow.js The code is nearly all based in a class, but i kept finding problems so there are a few functions found outside the class. The area where most things go wrong is in the function: this.goToImage = function (image) { As this is used to generate the floating div above all the content. This function also uses IMG objects which are hidden until the image has loaded (instead showing a nice please wait logo) and then once loaded it appears. I have tried using .innerHTML to get around the append child problems but the images dont seem to work the same as just passing object around. If anyone has any tips to get around this would be awesome as this little self project has seemed to become harder then i thought! Thanks Simon i have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/ Thanks for any suggestions or help in advance Hey everyone, I am writing a Javascript program which requires several different functions to be assigned to buttons, and an array created as the source of images in the program. I have written/looked at/worked on it for hours and hit a wall. Can't make heads or tails of it anymore, and I would really appreciate any insight on where to go or points of weakness in my code! If anyone is willing to help me out, let me know and I will post. Again any help or knowledge would be MUCH appreciated! I would like to create a slideshow like what most wedding sites have but I would like to have some fancy transitions like "Random dissolve, checkerboard, spiral" e.t.c, how can I add any of those to my slideshow, this is a regular fade slideshow I have: Code: var speed=40; /* this is the image fade speed - higher value=slower, lower value=faster */
var timer=4000 /* this is the time that each image is static - 4000=4 seconds */
var pics=new Array();
pics[0]='images/autumn.jpg';
pics[1]='images/lace.jpg';
pics[2]='images/lotus1.jpg';
pics[3]='images/lotus.jpg';
pics[4]='images/apple.jpg';
pics[5]='images/apple4.jpg';
pics[6]='images/girl.jpg';
pics[7]='images/clouds.jpg';
pics[8]='images/blood.jpg';
pics[9]='images/buddha.jpg';
/****************** these links are optional and can be removed if not required ******************/
var links=new Array();
links[0]='http://www.google.com/';
links[1]='http://www.guardian.co.uk/crossword/';
links[2]='http://www.htmlforums.com/';
links[3]='http://www.w3schools.com/';
links[4]='http://www.alistapart.com/';
links[5]='http://news.bbc.co.uk/';
links[6]='http://validator.w3.org/';
links[7]='http://en.wikipedia.org/';
links[8]='http://tools.dynamicdrive.com/gradient/';
links[9]='http://www.hoogerbrugge.com/';
/*************************************************************************************************/
var topop=100;
var botop=0;
var topnum=0;
var botnum=1;
var test=0;
function init() {
objt=document.getElementById('top');
if(document.getElementById('link')) {
objl=document.getElementById('link');
}
else {
objl=document.getElementById('container');
}
bimg=document.createElement('img');
bimg.setAttribute('id','bot');
bimg.setAttribute('src',pics[1]);
objl.appendChild(bimg);
objb=document.getElementById('bot');
fader=setTimeout(function(){fadeout()},timer);
}
function fadeout() {
if(document.getElementById('link')) {
objl.href='#';
objl.style.cursor='default';
}
test==0?(topop--,botop++):(topop++,botop--);
if(objt.filters) {
objt.style.filter='alpha(opacity='+topop+')';
objb.style.filter='alpha(opacity='+botop+')';
}
else {
objt.style.opacity=topop/100;
objb.style.opacity=botop/100;
}
if(topop==0){
test=1;
topnum+=2;
if(topnum==pics.length+1) {
topnum=1;
}
if(topnum==pics.length){
topnum=0;
}
objt.src=pics[topnum];
clearTimeout(fader);
return stop();
}
if(topop==100){
test=0;
botnum+=2;
if(botnum==pics.length) {
botnum=0;
}
if(botnum==pics.length+1){
botnum=1;
}
objb.src=pics[botnum];
clearTimeout(fader);
return stop();
}
setTimeout(function(){fadeout()},speed);
}
function stop(){
if(document.getElementById('link')) {
objl.style.cursor='pointer';
}
if(test==0){
objl.href=links[topnum];
topop=100;
botop=0;
}
if(test==1){
if(document.getElementById('link')) {
objl.href=links[botnum];
}
topop=1;
botop=99;
}
setTimeout(function(){fadeout()},timer);
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks Hi, I'm really new to Javascript. Recently in my IT class, we made a HTML page which would open a popup box, where the user could enter a key word. When the user pressed enter, the page would navigate to a specific page. The code we used was: Code: <script language = "JavaScript">
where = window.prompt ("Please tell me where you would like to go.");
switch (where){
case "Digg" :
window.location = "http://www.digg.com" ;
break;
default:
window.location = "http://www.google.com" ;
}
</script>
What I am hopeing to do, is implement this code on my workplaces server, and have the keywords link to other html documents within the server. However when I tested this, for some reason the links are not working. Can this actually be done? Am I missing something silly? Are there any other ways of doing this? Thanks in advance Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work! Heres what i got in my 'name.js' file i got var name=new Array() name='name.jpg' and in my HTML i got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div> <table> <script type="text/javascript" language="JavaScript" src="name.js"> document.write('<td id="name2" background="' + name + '">'); </script> </td> </table> </div> </body> </html> Where have a gone wrong?? If I type Hello World into the name.js file and put it in a tb it works fine, im confused thanks, Paul Hey guys, hope this is in the right place... Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads. My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously. I have this gallery he http://juicenothing.com/freelance/gallery.php The div id is wrap. Is this possible? I can't find a good example anywhere!! Thanks (i'm a bit of a n00b, so pls go easy on me ) Hi all, I have created the following page http://www.kylehouston.com/testing/cci/ When loading in ie6 and ie7 the content slider exposes all the slides until fully loaded, is it possible to hide these slides while loading? Thanks in advance Kyle Hello, i have a qustion that maybe has a very simple answer but i'm a beginner in working with scripts and i couldn't find it. i have the code below. so i have 5 time intervals but the thing that i couldn't do is to make that for saturdays to show only the 5th interval and hide the other ones. The full code is attached. Thank you! Code: <script type="text/javascript" src="/js/date.js"></script>
<!--[if IE]><script type="text/javascript" src="/js/jquery.bgiframe.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.datePicker.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/js/datePicker.css">
<br/>
<div id="livraredata" >
<#if cache.getSessionInterface(jsp_request).getAttribute("ro.kubu.magazin.EditareComanda")?exists>
<br/>Detalii de livra <input type="text" id="livraredetalii" name="livraredetalii" value="${c_livrare_detalii}"/>
<#else>
<b>Data livra </b><input id="livare-data" type="text" class="date-picker" style="width:100px;"/>
<b>Interval orar: </b>
<select id="livare-interval" style="width:100px !important;">
<option value="09-13" id="li1">09-13</option>
<option value="13-17" id="li2">13-17</option>
<option value="17-21" id="li3">17-21</option>
<option value="09-21" id="li4">09-21</option>
<option value="10-17" id="li5">10-17</option>
</select>
<input type="hidden" id="livraredetalii" name="livraredetalii" value="${c_livrare_detalii}"/>
<script type="text/javascript">//<![CDATA[
var today = new Date();
var firstday = today;
<#if sel?exists>
var zonaclasa = ${sel.getClasa()};
<#else>
var zonaclasa = -1;
</#if>
function updateinterval_livraredetalii() {
var dd = $('#livare-data').val();
dd = Date.fromString(dd);
dd = dd.asStringFmt('yyyy-mm-dd');
$('#livraredetalii').val(dd+" "+$('#livare-interval').val());
}
function update_livraredetalii() {
var dd = $('#livare-data').val();
dd = Date.fromString(dd);
var oraazi = new Date().getHours();//0--23
var ziazi = new Date().getDay();//0--6, 0 dum
if (dd.getDayOfYear() == today.getDayOfYear() && ziazi != 6 && oraazi >=12) {
$('#li1').hide();$('#li4').hide();$('#li5').hide();
$('#li2').show();
$('#li3').show();
$('#livare-interval').val($('#li2').html());
} else if (dd.getDayOfYear() == today.getDayOfYear() && ziazi == 6) {
$('#li1').hide();
$('#li2').hide();
$('#li3').hide();
$('#li4').hide();
$('#livare-interval').val($('#li5').html());
} else {
$('#li1').show();
$('#li2').show();
$('#li3').show();
$('#li4').show();
$('#li5').hide();
}
dd = dd.asStringFmt('yyyy-mm-dd');
$('#livraredetalii').val(dd+" "+$('#livare-interval').val());
}
$(function(){
today = new Date();today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0);
var oraazi = new Date().getHours();//0--23
var ziazi = new Date().getDay();//0--6, 0 dum
var msecsInADay = 86400000;
firstday = today;
if (ziazi == 0 || (ziazi != 6 && oraazi >= 16) ) { //daca e duminica sau e zi a saptamanii dupa ora 16
firstday = new Date(today.getTime()+msecsInADay);
} else
if (ziazi == 6 && oraazi >= 10) {//daca e sambata dupa 10
firstday = new Date(today.getTime()+2*msecsInADay); //urmatoare zi e luni
} else
if (zonaclasa != 0) {
firstday = new Date(today.getTime()+msecsInADay);$('#li4').hide();
} else
if (zonaclasa != 0 && oraazi >= 17) {
firstday = new Date(today.getTime()+2*msecsInADay);
} else
if (oraazi >= 9) { //daca e dupa ora 9 dispar intervalele 1 si 4
$('#li1').hide();$('#li4').hide();
$('#li2').show();$('#li3').show();
}
<#if mag.hasText("setup.inchideazi")>
firstday = new Date(today.getTime()+msecsInADay);
</#if>
<#if mag.hasText("setup.inchidemaine")>
firstday = new Date(today.getTime()+2*msecsInADay);
</#if>
Date.format = 'dd-mmm-yyyy';
$('.date-picker').datePicker({
clickInput:true,
showYearNavigation:false,
createButton:false,
renderCallback:function($td,thisDate,month,year) {
if (thisDate.getDay() == 0 || thisDate.getDayOfYear() < firstday.getDayOfYear()) { //ascundem default toate zilele pana la firstday si duminicile
$td.addClass('disabled');
}
}
}).val(firstday.asString())
.trigger('change');
//$('.date-picker').datePicker({startDate:'01/01/2000',showYearNavigation:'true'});
$('#livare-interval').change(function(){
updateinterval_livraredetalii();
});
$('#livare-data').change(function(){
update_livraredetalii();
});
update_livraredetalii();
});
//]]></script>
</#if>
</div><br/>
I have an interval set that runs indefinitely (backgrounds switching) or until the viewer stops it. I've noticed that when I close a tab while it's running and revisit the page, it "doubles" the interval and the backgrounds get mixed up. Refreshing the page returns it to normal. Does anyone know how to fix this? I've tried clearing the interval with window.onunload and window.onbeforeunload. I'm thinking it has something to do with firefox not clearing its cache for the tab. I'll look into disabling that. Hi all. I am having a problem understanding exactly how setInterval and setTimeout work and really need some help. I want to create an array and then print out each element one at a time at one second intervals. I've only been able to come up with something like this, but it just prints the last value of the array after a second. Code:
<script type = "text/javascript">
<!--
var myArray = new Array();
for (var i = 0; i < 11; i++){
myArray[i]=i+50;
}
for (var i = 0; i < myArray.length-1; i++){
setInterval("document.getElementById('here').innerHTML = myArray[i];", 1000);
}
//-->
</script>
<div id="here">Stuff here</div>
i know there are pre-made scripts to do what i'm doing. i want to create this myself to learn. i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me. my js - Code: function expandAll() {
var collapsedDivs = document.getElementsByClassName('collapsed');
for (var i=0; i<collapsedDivs.length; i++) {
var expandMe = collapsedDivs[i];
expandMe.style.display = 'block';
expandMe.addClassName('expanded');
expandMe.removeClassName('collapsed');
document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />';
}
}
my html - Code: <div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div> upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong? Hey guys, I am new at JavaScript, but I have been able to piece together some code for a stopwatch. I have everything the way I want it in regards to the function and look of the stopwatch, but I want to be able to set timers so that the ss() function in the code below will go and stop automatically at intervals I can set. I just can't seem to get there with this one and any help is greatly appreciated. Thank you for your time. Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
var t=[0, 0, 0, 0, 0, 0, 0, 1];
document.onkeyup=function(event) {
if((event.which && event.which === 32) || (event.keyCode && event.keyCode === 32))
{
ss()
}
}
function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}
function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}
function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}
function load()
{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById("disp");
disp();
}
</script>
</head>
<body onload='load();'>
<div></div>
<input type="text" style="border: none" id="disp" readonly />
<style type="text/css">
#disp {
font-size: 180px;
text-align: center;
font-family: Verdana;
}
</style>
</body>
<form>
</form>
</html>
I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript">
function translate() {
if (document.form1.elements[0].checked == true) {
EtoA()
} else if (document.form1.elements[1].checked == true) {
AtoE()
} else {
}
}
function EtoA() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "a") {
tempb = "9"
} else if(tempa == "b") {
tempb = "a"
} else if(tempa == "c") {
tempb = "0"
} else if(tempa == "d") {
tempb = "c"
} else if(tempa == "e") {
tempb = "3"
} else if(tempa == "f") {
tempb = "b"
} else if(tempa == "g") {
tempb = "4"
} else if(tempa == "h") {
tempb = "?"
} else if(tempa == "i") {
tempb = "5"
} else if(tempa == "j") {
tempb = "6"
} else if(tempa == "k") {
tempb = "e"
} else if(tempa == "l") {
tempb = "+"
} else if(tempa == "m") {
tempb = "x"
} else if(tempa == "n") {
tempb = "7"
} else if(tempa == "o") {
tempb = "v"
} else if(tempa == "p") {
tempb = "1"
} else if(tempa == "q") {
tempb = "t"
} else if(tempa == "r") {
tempb = "q"
} else if(tempa == "s") {
tempb = "g"
} else if(tempa == "t") {
tempb = "n"
} else if(tempa == "u") {
tempb = "<"
} else if(tempa == "v") {
tempb = ">"
} else if(tempa == "w") {
tempb = "^"
} else if(tempa == "x") {
tempb = "!"
} else if(tempa == "y") {
tempb = "@"
} else if(tempa == "z") {
tempb = "#"
} else if(tempa == "A") {
tempb = "9"
} else if(tempa == "B") {
tempb = "a"
} else if(tempa == "C") {
tempb = "0"
} else if(tempa == "D") {
tempb = "c"
} else if(tempa == "E") {
tempb = "3"
} else if(tempa == "F") {
tempb = "b"
} else if(tempa == "G") {
tempb = "4"
} else if(tempa == "H") {
tempb = "h"
} else if(tempa == "I") {
tempb = "5"
} else if(tempa == "J") {
tempb = "6"
} else if(tempa == "K") {
tempb = "e"
} else if(tempa == "L") {
tempb = "f"
} else if(tempa == "M") {
tempb = "x"
} else if(tempa == "N") {
tempb = "7"
} else if(tempa == "O") {
tempb = "v"
} else if(tempa == "P") {
tempb = "1"
} else if(tempa == "Q") {
tempb = "t"
} else if(tempa == "R") {
tempb = "q"
} else if(tempa == "S") {
tempb = "g"
} else if(tempa == "T") {
tempb = "n"
} else if(tempa == "U") {
tempb = "<"
} else if(tempa == "V") {
tempb = ">"
} else if(tempa == "W") {
tempb = "^"
} else if(tempa == "X") {
tempb = "!"
} else if(tempa == "Y") {
tempb = "@"
} else if(tempa == "Z") {
tempb = "#"
} else if(tempa == "1") {
tempb = "}"
} else if(tempa == "2") {
tempb = "{"
} else if(tempa == "3") {
tempb = "("
} else if(tempa == "4") {
tempb = "'"
} else if(tempa == "5") {
tempb = "|"
} else if(tempa == "6") {
tempb = "`"
} else if(tempa == "7") {
tempb = ":"
} else if(tempa == "8") {
tempb = ";"
} else if(tempa == "9") {
tempb = "="
} else if(tempa == "0") {
tempb = ")"
} else if(tempa == "~") {
tempb = "R"
} else if(tempa == "!") {
tempb = "T"
} else if(tempa == "@") {
tempb = "F"
} else if(tempa == "#") {
tempb = "Y"
} else if(tempa == "$") {
tempb = "K"
} else if(tempa == "%") {
tempb = "J"
} else if(tempa == "^") {
tempb = "H"
} else if(tempa == "&") {
tempb = "G"
} else if(tempa == "*") {
tempb = "X"
} else if(tempa == "_") {
tempb = "V"
} else if(tempa == "-") {
tempb = "B"
} else if(tempa == "+") {
tempb = "M"
} else if(tempa == "=") {
} else if(tempa == "<") {
tempb = "N"
} else if(tempa == ">") {
tempb = "U"
} else if(tempa == ".") {
tempb = "S"
} else if(tempa == ",") {
tempb = "W"
} else if(tempa == "?") {
tempb = "."
} else if(tempa == ":") {
tempb = ","
} else if(tempa == ";") {
tempb = "$"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
function AtoE() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "9") {
tempb = "a"
} else if(tempa == "a") {
tempb = "b"
} else if(tempa == "0") {
tempb = "c"
} else if(tempa == "c") {
tempb = "d"
} else if(tempa == "3") {
tempb = "e"
} else if(tempa == "b") {
tempb = "f"
} else if(tempa == "4") {
tempb = "g"
} else if(tempa == "?") {
tempb = "h"
} else if(tempa == "5") {
tempb = "i"
} else if(tempa == "6") {
tempb = "j"
} else if(tempa == "e") {
tempb = "k"
} else if(tempa == "+") {
tempb = "l"
} else if(tempa == "x") {
tempb = "m"
} else if(tempa == "7") {
tempb = "n"
} else if(tempa == "v") {
tempb = "o"
} else if(tempa == "1") {
tempb = "p"
} else if(tempa == "t") {
tempb = "q"
} else if(tempa == "q") {
tempb = "r"
} else if(tempa == "g") {
tempb = "s"
} else if(tempa == "n") {
tempb = "t"
} else if(tempa == "<") {
tempb = "u"
} else if(tempa == ">") {
tempb = "v"
} else if(tempa == "^") {
tempb = "w"
} else if(tempa == "!") {
tempb = "x"
} else if(tempa == "@") {
tempb = "y"
} else if(tempa == "#") {
tempb = "z"
} else if(tempa == "9") {
tempb = "A"
} else if(tempa == "a") {
tempb = "B"
} else if(tempa == "0") {
tempb = "C"
} else if(tempa == "c") {
tempb = "D"
} else if(tempa == "3") {
tempb = "E"
} else if(tempa == "b") {
tempb = "F"
} else if(tempa == "4") {
tempb = "G"
} else if(tempa == "?") {
tempb = "H"
} else if(tempa == "5") {
tempb = "I"
} else if(tempa == "6") {
tempb = "J"
} else if(tempa == "e") {
tempb = "K"
} else if(tempa == "+") {
tempb = "L"
} else if(tempa == "x") {
tempb = "M"
} else if(tempa == "7") {
tempb = "N"
} else if(tempa == "v") {
tempb = "O"
} else if(tempa == "1") {
tempb = "P"
} else if(tempa == "t") {
tempb = "Q"
} else if(tempa == "q") {
tempb = "R"
} else if(tempa == "g") {
tempb = "S"
} else if(tempa == "n") {
tempb = "T"
} else if(tempa == "<") {
tempb = "U"
} else if(tempa == ">") {
tempb = "V"
} else if(tempa == "^") {
tempb = "W"
} else if(tempa == "!") {
tempb = "X"
} else if(tempa == "@") {
tempb = "Y"
} else if(tempa == "#") {
tempb = "Z"
} else if(tempa == "}") {
tempb = "1"
} else if(tempa == "{") {
tempb = "2"
} else if(tempa == "(") {
tempb = "3"
} else if(tempa == "'") {
tempb = "4"
} else if(tempa == "|") {
tempb = "5"
} else if(tempa == "`") {
tempb = "6"
} else if(tempa == ":") {
tempb = "7"
} else if(tempa == ";") {
tempb = "8"
} else if(tempa == "=") {
tempb = "9"
} else if(tempa == ")") {
tempb = "0"
} else if(tempa == "R") {
tempb = "~"
} else if(tempa == "T") {
tempb = "!"
} else if(tempa == "F") {
tempb = "@"
} else if(tempa == "Y") {
tempb = "#"
} else if(tempa == "K") {
tempb = "$"
} else if(tempa == "J") {
tempb = "%"
} else if(tempa == "H") {
tempb = "^"
} else if(tempa == "G") {
tempb = "&"
} else if(tempa == "X") {
tempb = "*"
} else if(tempa == "V") {
tempb = "_"
} else if(tempa == "B") {
tempb = "-"
} else if(tempa == "M") {
tempb = "+"
} else if(tempa == "N") {
tempb = "<"
} else if(tempa == "U") {
tempb = ">"
} else if(tempa == "S") {
tempb = "."
} else if(tempa == "W") {
tempb = ","
} else if(tempa == ".") {
tempb = "?"
} else if(tempa == ",") {
tempb = ":"
} else if(tempa == "$") {
tempb = ";"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. |
|||||||