Tab control for a game : Tab « GUI Components « JavaScript DHTML






Tab control for a game

 

<!--  
/***********************************************************
 jsWordsearch
 Version:  0.4
 Author:  Robert
 Email:  brathna@gmail.com
 Website:  http://jswordsearch.sourceforge.net/
************************************************************
 jsWordsearch, prints out a letter grid with words hidden inside.
 Copyright (C) Robert Klein

 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU General Public License as
 published by the Free Software Foundation; either version 2 of the
 License, or (at your option) any later version.

 This program is distributed in the hope that it will be useful, but
 WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with this program; if not, write to the
 Free Software Foundation, Inc.
 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
 or visit the following website:
 http://www.opensource.org/licenses/gpl-license.php
***********************************************************/

INFO
====
Hotscripts will always have the newest website address and version
info:  http://www.HotScripts.com/Detailed/61953.html


SETUP
=====
The following uses default options:

Upload the files:

  wordsearch.htm
  wordsearch.js
  options.js
  gridstyles.js
  languages.js
  mainlanguages.js

in ASCII to your server. Make sure they are all in the same
directory. Feel free to edit the wordsearch.htm file, which contains
the html for the main table where you input your words.

Adjust all the information to any changes you make in options.js.

You will then go to wordsearch.htm in your browser. Feel free to 
change the file name, wordsearch.htm, to anything you want.


FILE LIST
=========
wordsearch.htm
wordsearch.js
options.js
gridstyles.js
languages.js
readme.txt
mainlanguages.js
gnu_gpl.txt

If you didn't get one of the files listed above, download the
official release at:  http://jswordsearch.sourceforge.net/


HELP ON THE LANGUAGES.JS FILE
=============================
This information is in regards to languages.js.

<info coming soon>


HELP ON THE MAINLANGUAGES.JS FILE
=================================
<coming soon>


HELP ON THE GRIDSTYLES.JS FILE
==============================
<coming soon>


INPUT SAVE GAME VIA URL
=======================
Create a game and press S. You should see a text box with some text
in it. Copy the text (called savegame_text).

wordfinder.htm?savegame=<savegame_text>

Below the text box you'll see a link. Just right click this link and
copy it. It's already in the URL format.

If you're using a custom style, you will not be able to pass the
saved game via the URL.


CREDITS
=======
Author: Robert Klein
Email: brathna@gmail.com

Work on jsWordsearch was derived from FS.WordFinder. Both made by me
and both released under the GPL.

FS.WordFinder:
http://fswordfinder.sourceforge.net/
Project is on hold.


-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;" />

<style type="text/css">

html,body {
  height:95%;
  margin:0px;
  font-family:Arial;
  cursor: crosshair;
}

input {
  padding:2px;
  border:1px solid;
  background:#CCC;
  cursor:crosshair;
}

textarea {
  padding:2px;
  border:1px solid;
  background:#CCC;
  cursor:crosshair;
}

select {
  padding:2px;
  border:1px solid;
  background:#CCC;
  cursor:crosshair;
}

a {
  text-decoration:none;
  color:black;
}

tr,td {
  border:1px solid black;
  padding:5px;
}

.tablist {
  border:1px solid black;
  border-bottom:0px;
  margin-left:5px;
  padding-left:5px;
  padding-right:5px;
}

.tabcontent {
  border:1px solid black;
  padding:5px;
  height:560px;
  background:#DDD;
}

.inputTitle {
  font-weight:bold;
  font-size:12px;
}

.info {
  font-size:12px;
}

li {
  font-size:12px;
  font-weight:normal;
  margin-bottom:5px;
}

</style>

<script type="text/javascript" src="wordsearch.js"></script>

</head>

<body onload="eventHandle();showStart();">

<noscript>You must have Javascript enabled to use this script.</noscript>

<script type="text/javascript">
function changebgcolor(color) {
  document.bgColor = color;
}
</script>

<div style="text-align:center;margin-bottom:5px;margin-top:5px;font-size:16px;font-family:Arial;font-weight:bold;" id="title"><script type="text/javascript">document.write(title);</script></div>

<div id="mainDiv" style="margin-left:auto;margin-right:auto;text-align:left;width:400px;visibility:hidden;">

  <div id="header">
    <div id="menuButton" style="text-align:center;width:400px;font-size:10px;display:none;" onclick="showMenu();">[<script type="text/javascript">document.write(LANG[selectedLanguage]['menu']);</script>]</div>
  </div>

  <div id="menu">

    <div><a href="#" id="main" onclick="return tab(this.id);" class="tablist" style="background:#DDD"><script type="text/javascript">document.write(LANG[selectedLanguage]['main']);</script></a> <a href="#" id="options" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]['options']);</script></a> <a href="#" id="options2" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]['options2']);</script></a> <a href="#" id="load" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]['load']);</script></a> <a href="#" id="information" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]['info']);</script></a></div>

    <div id="_main" style="display:block" class="tabcontent">
      <div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['enter']);</script></div><div class="info">(<script type="text/javascript">document.write(LANG[selectedLanguage]['sep']);</script>)<br />
      <textarea cols="45" rows="15" name="inputWords" id="inputWords" onfocus="inputActive=1;" onblur="inputActive=0;"></textarea></div>

<div class="inputTitle"><br /><script type="text/javascript">document.write(LANG[selectedLanguage]['puzlang']);</script><span id="gridLanguageDiv">
<script type="text/javascript"><!--
  var echoThis = '<select id="gridLanguage">';
  for(var a=0;a<=langsArray.length-1;a++) {
    echoThis += '<option value="'+langsArray[a]+'">'+langsArray[a]+'</option>';
  }
  echoThis += '</select>';
  document.write(echoThis);
  echoThis = null;
//-->
</script></span></div>

<script type="text/javascript"><!--
if(wordlists) {
  var echoThis = ' \
    <div style="text-align:center;"><br />'+LANG[selectedLanguage]['or']+'<br /></div> \
    <div><br /> \
    <table cellspacing="0" style="width:100%"> \
    <tr><td class="inputTitle">'+LANG[selectedLanguage]['wlnum']+'</td><td><input type="text" id="numWords" size="2" /></td></tr> \
    <tr><td class="inputTitle">'+LANG[selectedLanguage]['wlwords']+'</td><td> \
    <select id="wordList">';
  for(var a=0;a<=wordListArray.length-1;a++) {
    if(wordListArray[a]!='') echoThis += '<option value="'+wordListArray[a]+'">'+wordListArray[a].replace(/_|.txt/g," ")+'</option>';
  }
  echoThis += '</select></td></tr></table></div>';
  document.write(echoThis);
  echoThis = null;
} else {
  document.write('<input type="text" value="" id="numWords" style="display:none;" />');
}

document.write('<br /><div class="inputTitle">'+LANG[selectedLanguage]['man']+'<input type="checkbox" id="manually" value="1" /></div>');
//-->
</script>
    </div>

    <div id="_options" style="display:none;" class="tabcontent">
      <table cellspacing="0" style="width:100%">
      <tr><td style="width:50%;"><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['rows']);</script></div></td><td><div><input type="text" id="numRows" value="" size="2" maxlength="3" /></div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['cols']);</script></div></td><td><div><input type="text" id="numCols" value="" size="2" maxlength="3" /></div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['fontsize']);</script></div></td><td><div><input type="text" id="fontSize" value="" size="2" /> mm</div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['fontcolor']);</script></div></td><td><div><input type="text" id="fontColor" value="" size="10" /></div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['bgcolor']);</script></div></td><td><div><input type="text" id="bgColor" value="" size="10" /></div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['hlcolor']);</script></div></td><td><div><input type="text" id="hlColor" value="" size="10" /></div></td></tr>
      <tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]['gridstyle']);</script></div></td><td><div id="gridStyleArrayDiv">
<script type="text/javascript"><!--
  var echoThis = '<select id="gridStyle"><option value="square">Square</option>';
  for(var a=0;a<=gridStyleArray.length-1;a++) {
    echoThis += '<option value="'+gridStyleArray[a]+'">'+gridStyleArray[a]+'</option>';
  }
  echoThis += '<option value="custom">Custom</option>';
  echoThis += '</select>';
  document.write(echoThis);
  echoThis = null;
//-->
</script></div>
<span onclick="makeCustom();" style="padding:0px 3px 0px 3px;border:1px solid black;font-size:11px;text-align:center;"><script type="text/javascript">document.write(LANG[selectedLanguage]['mcustom']);</script></span> <span onclick="if(customStyle = prompt(LANG[selectedLanguage]['inputcs'])) document.getElementById('gridStyle').options[document.getElementById('gridStyle').options.length-1].selected = 'true';" style="padding:0px 3px 0px 3px;border:1px solid black;font-size:11px;text-align:center;"><script type="text/javascript">document.write(LANG[selectedLanguage]['input']);</script></span>
</td></tr>

      </table>
    </div>

    <div id="_options2" style="display:none" class="tabcontent">
      <select name="BorF" id="BorF" style="margin-left:10px;margin-top:10px;">
        <option value="regular"><script type="text/javascript">document.write(LANG[selectedLanguage]['borf']);</script></option>
        <option value="bonly"><script type="text/javascript">document.write(LANG[selectedLanguage]['bonly']);</script></option>
        <option value="fonly"><script type="text/javascript">document.write(LANG[selectedLanguage]['fonly']);</script></option>
      </select>

      <br /><br />

      <select name="diag" id="diag" style="margin-left:10px" onchange="if(document.getElementById('diag').options[1].selected==true && document.getElementById('uand').options[1].selected==true) document.getElementById('uand').options[2].selected=true; else if(document.getElementById('diag').options[0].selected==true && document.getElementById('uand').options[1].selected==true) document.getElementById('uand').options[0].selected=true; else if(document.getElementById('diag').options[1].selected==true && document.getElementById('uand').options[0].selected==true) document.getElementById('uand').options[2].selected=true;">
        <option value="diag"><script type="text/javascript">document.write(LANG[selectedLanguage]['diag']);</script></option>
        <option value="diagonly"><script type="text/javascript">document.write(LANG[selectedLanguage]['donly']);</script></option>
        <option value="nodiag"><script type="text/javascript">document.write(LANG[selectedLanguage]['nodiag']);</script></option>
      </select>

      <br /><br />

      <select name="upanddown" id="uand" style="margin-left:10px" onchange="if(document.getElementById('uand').options[1].selected==true && document.getElementById('diag').options[1].selected==true) document.getElementById('diag').options[2].selected=true; else if(document.getElementById('uand').options[0].selected==true && document.getElementById('diag').options[1].selected==true) document.getElementById('diag').options[0].selected=true; else if(document.getElementById('uand').options[1].selected==true && document.getElementById('diag').options[0].selected==true) document.getElementById('diag').options[2].selected=true;">
        <option value="uand"><script type="text/javascript">document.write(LANG[selectedLanguage]['uandd']);</script></option>
        <option value="uandonly"><script type="text/javascript">document.write(LANG[selectedLanguage]['uanddo']);</script></option>
        <option value="nouand"><script type="text/javascript">document.write(LANG[selectedLanguage]['nouandd']);</script></option>
      </select>

      <br /><br />

      <span style="margin-left:10px"><script type="text/javascript">document.write(LANG[selectedLanguage]['wlplace']);</script>: <select id="wordListPlacement">
        <option value="right"><script type="text/javascript">document.write(LANG[selectedLanguage]['right']);</script></option>
        <option value="bottom"><script type="text/javascript">document.write(LANG[selectedLanguage]['bottom']);</script></option>
      </select></span>

      <br /><br />

      <input type="checkbox" id="sortAlpha" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]['sort']);</script><br />
      <input type="checkbox" id="lowerCase" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]['lower']);</script><br />
      <input type="checkbox" id="useLetters" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]['wordlist']);</script><br />
    </div>

    <div id="_load" style="display:none" class="tabcontent">
      <div style="text-align:center;">
        <br /><script type="text/javascript">document.write(LANG[selectedLanguage]['paste']);</script>:<br />
        <textarea cols="40" rows="3" id="code"></textarea>
        <script type="text/javascript">document.write('<br /><br /><input type="button" value="'+LANG[selectedLanguage]['load']+'" id="loadGameButton" onclick="reloadGame();" />');</script>
      </div>
    </div>

    <div id="_information" style="display:none" class="tabcontent">
      <div style="padding:10px;">
        <script type="text/javascript">document.write(LANG[selectedLanguage]['high']);</script>:
        <ol>
        <li><script type="text/javascript">document.write(LANG[selectedLanguage]['high2']);</script></li>
        <li><script type="text/javascript">document.write(LANG[selectedLanguage]['high3']);</script></li>
        <li><script type="text/javascript">document.write(LANG[selectedLanguage]['high4']);</script></li>
        </ol>
        <script type="text/javascript">document.write(LANG[selectedLanguage]['keys']);</script>:<br />
        <script type="text/javascript">document.write(LANG[selectedLanguage]['keyR']);</script><br />
        <script type="text/javascript">document.write(LANG[selectedLanguage]['keyS']);</script><br />
      </div>
    </div>
  </div>

  <div style="text-align:center;" id="buttons"><br />
    <script type="text/javascript">document.write('<input type="button" value="Return" id="blahblah" style="visibility:hidden;width:50px;" />&nbsp;&nbsp;<input type="button" value="'+LANG[selectedLanguage]['create']+'" id="create" onmouseup="reload=0;" onclick="if(document.getElementById(\'inputWords\').value==\'\' && !document.getElementById(\'numWords\').value) { alert(\''+LANG[selectedLanguage]['nowords']+'\'); } else { if(d.getElementById(\'manually\').checked) manuallyPlace(); else createPuzzle(1); }" style="width:100px;" />&nbsp;&nbsp;<input type="button" value="'+LANG[selectedLanguage]['save']+'" onclick="saveSettings();" style="width:100px;" />&nbsp;&nbsp;<input type="button" value="'+LANG[selectedLanguage]['return']+'" id="returnToGame" style="visibility:hidden;width:50px;" onclick="returnToGame();" />');</script>

    <br /><br />
    <select id="mainLang" onchange="changeLanguages();" style="font-size:11px;">
      <script type="text/javascript"><!--
        var t;
        for(var a=0;a<=mainLanguages.length-1;a++) {
          t = (mainLanguages[a]==selectedLanguage) ? 'selected="selected"' : '';
          echoThis += '<option value="'+mainLanguages[a]+'" '+t+'>'+mainLanguages[a]+'</option>';
        }
        echoThis += '</select>';
        document.write(echoThis);
        echoThis = null;
      //-->
      </script>
    </select>
<!--
Please keep this link visible and intact.
-->
<div style="text-align:center;font-size:12px;font-family:Arial;"><br /><a href="http://jswordsearch.sourceforge.net/">jsWordsearch 0.4</a></div>
  </div>

</div>

  <div id="puzzle" style="width:99%;height:95%;display:none;">
    <table border="0" style="height:99%;width:95%;"><tr><td style="text-align:center;border:0px;">
      <div id="puzzleText"></div>
    </td></tr></table>
  </div>

  <div id="saveGameForm" style="display:none;margin-left:20px;">
    <textarea cols="40" rows="3" id="saveGameData"></textarea> <script type="text/javascript">document.write('<input type="button" value="'+LANG[selectedLanguage]['cont']+'" onclick="document.getElementById(\'puzzle\').style.display=\'block\';document.getElementById(\'saveGameForm\').style.display=\'none\';puzzleActive=1;" />');</script>
    <br /><br /><div id="saveGameURL"></div>
  </div>

</body>

</html>

           
         
  








jswordsearch_0.4.zip( 25 k)

Related examples in the same category

1.Tab Manager 1
2.Tab Manager 2
3.Tabs in JavaScript
4.Tab with control inside
5.Slide tab
6.Tab control
7.Four Tab with different style
8.XP Tab in JavaScript
9.Two tab in one page
10.HTML style tab
11.Calendar in tab
12.Tab in javascript
13.Tab from gwidgets_0.8.0
14.One tab: Easy Tabs 1.2
15.Two tab: Easy Tabs 1.2
16.three tabs: Easy Tabs 1.2
17.Tabber Example
18.Nested tab and tab changed event
19.Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected