Button list problems

along with the other class code correct?

I’m sorry, I don’t know what other class code and placement you’re referring to.

The HTML includes surrounding code so you can see where the new blue is to be added beneath the existing menus. Nothing has been deleted to “make room” for it. I simply didn’t show the existing commented out code.

The css should be added to the existing css sheet. Nothing is being replaced or deleted. I used a different classname so the demo would not cause any conflicts.

Does this answer your question?

i’m sorry, I meant along with the list class code for the bottom menus

I should ask is the greybox code in addition to the list code or is this to see if it can replace the separate class coding?

This code does not replace anything. It is in addition to the existing code. It places a row of vertical lists over the gray box on the games page, per your objective. Just copy and paste into your HTML and CSS files. It should work and nothing else should be disturbed. I even spelled it American “gray” instead of English “grey” to be sure it didn’t conflict anywhere :slight_smile:

I guess i’m a little confused. Where does it get the images for the links in this code?

There are no images being called. It is a structural demo. The text should show up in the gray area where you want the lists to appear. You will have to apply whatever anchors and anchor treatments (images) you wish. That will require additional code. I could not possibly know in advance what that might be :slight_smile: All I did was show you how to position the lists where you want them. It’s up to you to make them look and act the way you wish.

ohhhhhh, I see. So because the greybox takes care of the spot of the image, all that is needed then is the image code. I have been using Id most of the time, I don’t think I have called an anchor image using a div class? Do I need to add a <img src> line to the code?

I typically use classes rather than id’s when coding. If you prefer to use id’s, then change the dots to hash marks and change “class” to “id”. It will make NO difference at all. You just have to remember that classes can be reused and IDs can only be used once on a page. In the interest of reusing code and minimizing problems with specificity, I would think that you would prefer to use classes.

Have you posted the code on your development page yet to see that the text appears in the gray box area?

actually I haven’t, I’ll do that right now

Ooooooooh ok, I learn more and more. That does work but it is a bit to wide. Mostly because of the long Recognition and rewards name. Can I line break that?

that did work. It is still a little bit wide, the space between the links needs to be cut down or something. I can send you an image if you want. I also have an image of the desired look if you would like to see that.

[FONT=Verdana]Looks like you’ve got it under control :slight_smile:

Just for the fun of it…

In the css, Lines 397 and 403 are commented out. Delete the leading comment mark from the left edge of the page to enable those outlines. You will be able to see how the div and the list boxes are arranged. I use outlines a lot when layout out a page. They do not affect the layout like borders do, and you can always delete them when you’re finished.

[/FONT]

Ok, that will probably help too. Thanks

shakmbakm, What is the reason for the horizontal scroll bar about half way down the page? Does it have a purpose?

There is no point for that to be there. I copied my code for the scroll bar from another page and that appeared. I don’t know why or how, because it wasn’t there before.

Ok, the horizontal scroll bar is gone. Now we need to talk about divs.

Just after the open <body> tag we have the following:


<div id="wrapup">
    <div class="container">
        <div id="header">
            <div style="overflow: auto; height: 1000px">

I cannot find any use for any except the first one, #wrapup. Do you know why they are there, what they do? Did they come with the main menu code that you copied?

If there is no known purpose for them, I recommend deleting the last 3. The third one’s a goner anyway. No choice.

I have already deleted them from my mockup, so I know the games page works. Just to be clear, the css has been revised a bit, too. Are you interested?

Also cleaned up some validation errors… from 29 down to zero.

Your turn.

Yeah I’d like to see it. Do you need my email or something of the like?

These two files work together. The games4c.html and games4c.css . Rename as desired, of course.

The menus have colored outlines around them so you can see how they are placed. The outlines are identified with comments in css. Delete them when you’re ready.

I did not document the changes very well. Nevertheless, it should be fairly easy to apply the other pages to his structure, if you wish. 70% of the games page code belongs to JavaScript and forms. Take that away and it’s very simple.

The primary change on the HTML page is the deletion of those divs already mentioned and adding a close div just below the commented out menu. There were lots of smaller changes to clean up the validation errors, but most of them were in the bottom 70%.

There are still some deprecated tags and inline styles on the page; things that you should be able to clean up yourself. I just focused on the (apparently useless) divs, the menus and that horizontal scroll bar.

There are two changes in the following src URL where “&” was replaced with “%26” (Line 108).

<script type=“text/javascript” src=“http://www.emailmeform.com/builder/js/dynamic.php?t=post[color=blue]%26[/color]t2=0[color=blue]%26[/color]use_CDN=true”>

The pages were tested in Firefox, Chrome, IE8 and IE9.

Test thoroughly (there’s no warranty implied or otherwise :slight_smile: )

games4c.css


@charset "UTF-8";

body {
    width:100%;
    background:#533996 url(../images/games.png) no-repeat scroll 50% 0;
    font:10px normal Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
}

#wrapup {
    width:1024px;
    padding-bottom:60px;
    margin:0 auto;
}

/* THIS .clear should not be necessary.  Containers of floats have been assigned {overflow:hidden} */
.clear {
    clear:both;  /*--- Clears the float of the list items to restore normal document flow ---*/
}

#mainMenu {
    outline:1px solid magenta;  /* TEST OUTLINE ONLY - DELETE or comment out */
    list-style:none;  /* --- Makes the bullets go away --- */
    overflow:hidden;
    padding:20px 0 0 140px;  /* --- Take out any default padding and margin on the UL tag --- */
    margin:0;
}

#mainMenu li {
    position:relative;
    float:left;  /* --- Make the list go horizontal --- */
}

#mainMenu li + li {
    margin-left:30px;  /* --- Spacing between list items --- */
}

#mainMenu li li {
    float:none;
    position:static;
}

#mainMenu li a {
    display:block;  /* --- Make the entire button are clickable rather than the text alone --- */
    width:185px;  /* --- Height of buttons --- */
    height:78px;  /* --- Width of buttons --- */
    text-indent: -9999px; /* --- Push the text off screen to hide text --- */
    overflow: hidden; /* --- Makes text outside of bounding box hidden --- */
}

/*
#mainMenu li#games ul li a.mba {
    background: url(../images/mbagames.jpg) no-repeat;
    width: 88px;
    height: 40px;
}

#mainMenu li#games ul li a.cb {
    background: url(../images/cb.jpg) no-repeat;
    width: 88px;
    height: 25px;
}

#mainMenu li#games ul li a.snowmanwars {
    background: url(../images/snoman.jpg) no-repeat;
    width: 88px;
    height: 40px;
}

#mainMenu li#games ul li a.arrowclimber {
    background: url(../images/ac.jpg) no-repeat;
    width: 88px;
    height: 40px;
}

#mainMenu li#games ul li a.crystalcatacombs {
    background: url(../images/crystalcatacombs.jpg) no-repeat;
    width: 88px;
    height: 40px;
}
*/

#mainMenu ul {
    margin-left:-999em;
    top:100%;
    left:0;
    position:absolute;
}

#mainMenu ul li a {
    width: 95px;
}

#mainMenu li:hover ul {
    margin: 0;
}

/*
The following rules place the "normal"
state image as the background for our anchor tags
*/

#mainMenu li#home a {
    background: url(../images/sfg.png) no-repeat;
    width: 68px;
    height: 74px;
}

#mainMenu li#about a {
    background: url(../images/a1.png) no-repeat;
    width: 60px;
    height: 24px;
}

#mainMenu li#games a {
    background: url(../images/g1.png) no-repeat;
    width: 70px;
    height: 24px;
}

#mainMenu li#news  a {
    background: url(../images/n1.png) no-repeat;
    width: 60px;
    height: 24px;
}

#mainMenu li#presskits  a {
    background: url(../images/press.png) no-repeat;
    width: 76px;
    height: 24px;
}

#mainMenu li#faq  a {
    background: url(../images/faq.png) no-repeat;
    width: 60px;
    height: 24px;
}

#mainMenu li#contact a {
    background: url(../images/c1.png) no-repeat;
    width: 80px;
    height: 24px;
}
/*
#mainMenu li#careers a {
    background: url(../images/careers.png) no-repeat;
    width: 88px;
    height: 24px;
}
*/
/*
#mainMenu li#beta a {
    background: url(../images/b1.png) no-repeat;
    width: 88px;
    height: 35px;
}
*/

/*
The following rules place the "over"
state image as the background for our anchor tags
when they are hovered over by the mouse
*/

#mainMenu li#home a:hover {
}

#mainMenu li#about a:hover {
    background: url(../images/about2.png) no-repeat;
    width: 60px;
    height: 24px;
}

#mainMenu li#games a:hover {
    background: url(../images/games2.png) no-repeat;
    width: 70px;
    height: 24px;
}

/*
#mainMenu li#careers a:hover {
    background: url(../images/careers2.png) no-repeat;
    width: 88px;
    height: 24px;
}
*/

#mainMenu li#contact a:hover {
    background: url(../images/contact2.png) no-repeat;
    width: 80px;
    height: 24px;
}

#mainMenu li#news a:hover {
    background: url(../images/news2.png) no-repeat;
    width: 60px;
    height: 24px;
}

/*
The following rules place the "down"
state image as the background for our anchor tags
when they anchor tag has the class of current
*/

#mainMenu li#home a.current {
    cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
}

#mainMenu li#about a.current {
    background: url(../images/about.png) no-repeat;
    cursor:default;
}

#mainMenu li#games a.current {
    background: url(../images/games.png) no-repeat;
    cursor:default;
}

#mainMenu li#careers a.current {
    background: url(../images/careers.png) no-repeat;
    cursor:default;
}

#mainMenu li#contact a.current {
    background: url(../images/contact.png) no-repeat;
    cursor:default;
}


#gamesMenu {
    outline:1px solid magenta;  /* TEST OUTLINE ONLY - DELETE or comment out */
    list-style:none;  /*--- Makes the bullets go away ---*/
    overflow:hidden;
    padding:0 0 0 136px;    /* left padding changed from:160px to 136px */
    margin:150px 0 0;
}

#gamesMenu li {
    position:relative;
    float:left;  /*--- Make the list go horizontal ---*/
}

#gamesMenu li li {
    float:none;
    position:static;
}

#gamesMenu li a {
    display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
    width:165px;  /*--- Height of buttons ---*/
    height:25px;  /*--- Width of buttons ---*/
    text-indent: -9999px; /*--- Push the text off screen to hide text---*/
    overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/

}


#gamesMenu ul {
    margin-left: -999em;
    top: 100%;
    left: 0;
    position: absolute;

}

#gamesMenu ul li a {
    width: 95px;
}

#gameMenu s li:hover ul {    /* IS THIS A VALID SELECTOR?  "s" ? */
    margin: 0;
}

/*
The following rules place the "normal"
state image as the background for our anchor tags
*/

#gamesMenu li#mba a {
    background: url(../images/music.png) no-repeat;
    width: 165px;
    height: 25px;
}

#gamesMenu li#cc a {
    background: url(../images/crystal.png) no-repeat;
    width: 175px;
    height: 25px;
}

#gamesMenu li#cb a {
    background: url(../images/cuddly.png) no-repeat;
    width: 135px;
    height: 25px;
}

#gamesMenu li#smw  a {
    background: url(../images/snow.png) no-repeat;
    width: 150px;
    height: 25px;
}

#gamesMenu li#ac  a {
    background: url(../images/climber.png) no-repeat;
    width: 135px;
    height: 25px;
}

#gamesMenu li#mba a:hover {
    background: url(../images/music2.png) no-repeat;
    width: 165px;
    height: 25px;
}

#gamesMenu li#cc a:hover {
    background: url(../images/crystal2.png) no-repeat;
    width: 175px;
    height: 25px;
}

#gamesMenu li#cb a:hover {
    background: url(../images/cuddly2.png) no-repeat;
    width: 135px;
    height: 25px;
}

#gamesMenu li#smw a:hover {
    background: url(../images/snow2.png) no-repeat;
    width: 150px;
    height: 25px;
}

#gamesMenu li#ac a:hover {
    background: url(../images/climber2.png) no-repeat;
    width: 135px;
    height: 25px;
}

/*
The following rules place the "down"
state image as the background for our anchor tags
when they anchor tag has the class of current
*/

#gamesMenu li#mba a.current {
    background: url(../images/music.png) no-repeat;
    cursor:default;
}

#gamesMenu li#cc a.current {
    background: url(../images/crystal.png) no-repeat;
    cursor:default;
}

#gamesMenu li#cb a.current {
    background: url(../images/cuddly.png) no-repeat;
    cursor:default;
}

#gamesMenu li#ac a.current {
    background: url(../images/climber.png) no-repeat;
    cursor:default;
}

/* *** is not on games.html page ***
.textbg {
    background:url(../images/textbg1.png);
    padding:10px;
    margin:50px auto;
}
*/

.graybox {                   /* THIS CONTAINER div holds the row of lists */
    outline:1px solid magenta;   /* TEST OUTLINE ONLY - DELETE or comment out */
    text-align:center;       /* centers inline-block objects (the ul's) */
    margin-top:620px;        /* distance from overhead container */
}

.graybox ul {
    outline:1px solid yellow;    /* TEST OUTLINE ONLY - DELETE or comment out */
    display:inline-block;    /* sets the ul to an inline-block object so they will align in a row */
    vertical-align:top;      /* top-aligns the ul boxes */
    list-style-type:none;    /* removes the bullets */
    padding:0;               /* removed default padding for bullets */
    margin:0 10px;           /* horizontally separates the list boxes (the ul's) */
}

.graybox li {
    text-align:left;         /* left-aligns text within each list item */
}

/* anchor treatment (if needed) */
.graybox a {
    line-height:1.5;
    font-size:1.25em;
    text-decoration:none;
}
.graybox a:link,
.graybox a:visited {
    color:#000;
}
.graybox a:hover {
    color:#533996;
}
.graybox a:active {
    color:#f00;
}

games4c.html


<!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">
<!-- Mirrored from superfunproductions.com/games.html by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 23 Mar 2012 00:40:21 GMT -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="author" content="Rosalynne Chan" />
    <meta name="contact" content="webmaster@superfunproductions.com" />
    <meta name="copyright" content="Copyright (c)2013 Super Fun Productions. All Rights Reserved." />
    <meta name="description" content="Super Fun Games formed around the idea of quality game apps for all major mobile markets." />
    <meta name="keywords" content="super fun games, puzzle, fun games, games, puzzle games, apps, puzzle apps, music block attack, cuddly bears, game apps" />
    <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
    <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/nvMclWbb8C2" />
    <link rel="stylesheet" type="text/css" href="http://superfunproductions.com/css/games4c.css" />
    <title>Super Fun Games</title>
    <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26578422-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
    </script>
</head>
<body>
<div id="wrapup">
    <ul id="mainMenu">
        <li id="home"><a href="home.html">Home</a></li>
        <li id="about"><a href="about.html">About</a></li>
        <li id="games"><a href="#">Games</a></li>
        <li id="news"><a href="news.html">News</a></li>
        <li id="presskits"><a href="presskits.html">Press Kits</a></li>
        <li id="faq"><a href="faq.html">FAQ</a></li>
        <li id="contact"><a href="contact.html">Contact</a></li>
    </ul>
    <ul id="gamesMenu">
        <li id="mba"><a href="music_block_attack.html">music block attack</a></li>
        <li id="cc"><a href="CC.html">crystal catacombs</a></li>
        <li id="cb"><a href="cuddlybears.html">cuddly bears</a></li>
        <li id="smw"><a href="snowmanwars.html">snowman wars</a></li>
        <li id="ac"><a href="arrow.html">arrow climber</a></li>
    </ul>
    <div class="graybox">
        <ul>
            <li><a href="home.html">HOME</a></li>
        </ul>
        <ul>
            <li><a href="#">Games</a></li>
            <li><a href="cuddlybears.html">Cuddly Bears</a></li>
            <li><a href="arrow.html">Arrow Climber</a></li>
        </ul>
        <ul>
            <li><a href="CC.html">Crystal Catacombs</a></li>
            <li><a href="music_block_attack.html">Music Block Attack</a></li>
            <li><a href="snowmanwars.html">Snowman Wars</a></li>
        </ul>
        <ul>
            <li><a href="#">Technology</a></li>
            <li><a href="games.html">Games</a></li>
        </ul>
        <ul>
            <li><a href="#">About<br/>SFG<br/>Team</a></li>
        </ul>
        <ul>
            <li><a href="about.html">Special Thanks</a></li>
            <li><a href="about.html">Who we Support</a></li>
            <li><a href="#">Press Kits</a></li>
        </ul>
        <ul>
            <li><a href="news.html">Recognition<br/>and Awards</a></li>
        </ul>
        <ul>
            <li><a href="#">Other</a></li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <ul>
            <li><a href="news.html">News</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>
    </div>
<!--
    <ul>
        <li><a href="music_block_attack.html" class="mba">music block attack</a></li>
        <li><a href="cuddlybears.html" class="cb">cuddly bears</a></li>
        <li><a href="snowmanwars.html" class="snowmanwars">snowman wars</a></li>
        <li><a href="arrow.html" class="arrowclimber">arrow climber</a></li>
        <li><a href="CC.html" class="crystalcatacombs">crystal catacombs</a></li>
    </ul>
-->
</div> <!-- #wrapup  -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post%26t2=0%26use_CDN=true"></script>
<div id="emf-container-outer">
  <div id="emf-container">
    <div id="emf-logo">
      <a>EmailMeForm</a>
    </div>
    <form id="emf-form" class="topLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/nvMclWbb8C2" name="emf-form">
      <div id="emf-form-instruction" class="emf-head-widget">
        <div id="emf-form-title" class="emf-bold">
          Beta signup
        </div>
        <div id="emf-form-description"></div>
      </div>
      <ul>
        <li id="emf-li-0" class="emf-li-field emf-field-text data_container" style="text-align:">
          <label class="emf-label-desc" for="element_0">Name <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_0" name="element_0" value="" size="30" type="text" class="validate[required]" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-1" class="emf-li-field emf-field-email data_container" style="text-align:">
          <label class="emf-label-desc" for="element_1">Email <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-2" class="emf-li-field emf-field-select data_container" style="text-align:left">
          <label class="emf-label-desc" for="element_2">Device type <span>*</span></label>
          <div class="emf-div-field">
            <select id="element_2" name="element_2" class="validate[required]">
              <option value="" selected="selected">
                Android
              </option>
              <option value="Iphone">
                Iphone
              </option>
            </select>
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-3" class="emf-li-field emf-field-text data_container" style="text-align:left">
          <label class="emf-label-desc" for="element_3">Device version <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_3" name="element_3" value="" size="30" type="text" class="validate[required]" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-4" class="emf-li-field emf-field-text data_container" style="text-align:left">
          <label class="emf-label-desc" for="element_4">Gamer type <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_4" name="element_4" value="" size="30" type="text" class="validate[required]" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-recaptcha">
          <script type="text/javascript">
//<![CDATA[

                                $(function(){
                                        $('#recaptcha_response_field').addClass('validate[required]');
                                });
          //]]>
          </script>
          <div>
            <script type="text/javascript">
//<![CDATA[
            var RecaptchaOptions = {
                theme: 'clean',
                custom_theme_widget: 'emf-recaptcha_widget'
                };
            //]]>
            </script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
</script> <noscript><iframe src="https://www.google.com/recaptcha/api/noscript?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9" height="300" width="500" frameborder="0"></iframe><br />
            <textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge" /></noscript>
          </div>
        </li>
        <li id="emf-li-post-button" class="right">
          <input value="Apply" type="submit" onmouseover="return true;" />
        </li>
      </ul><input name="element_counts" value="5" type="hidden" /> <input name="embed" value="forms" type="hidden" />
    </form>
  </div>
</div><br />
<div style="text-align:center">
  <font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src="http://www.emailmeform.com/builder/images/footer-logo.png" alt="" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/" target="_blank"><font face="Verdana" size="2" color="#000000">Form Builder</font></a><br />
  <a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/nvMclWbb8C2" target="_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>
</div><script type="text/javascript">
//<![CDATA[
EMF_jQuery(function(){
    EMF_jQuery("#emf-form").validationEngine({
            validationEventTriggers:"blur",
            scroll:true
    });



    EMF_jQuery("#emf-form ul li").mousedown(highlight_field_on_mousedown);
    EMF_jQuery("#emf-form ul li input, #emf-form ul li textarea, #emf-form ul li select").focus(highlight_field_on_focus);

            var form_obj=EMF_jQuery("#emf-container form");
    if(form_obj.length>0 && form_obj.attr('action').indexOf('#')==-1 && window.location.hash){
            form_obj.attr('action', form_obj.attr('action')+window.location.hash);
    }

    init_rules();
});

EMF_jQuery(window).load(function(){
        post_message_for_frame_height();

});



var emf_widgets={text :
            function(index){
                    return $("#element_"+index).val();
            }
    ,number :
            function(index){
                    return $("#element_"+index).val();
            }
    ,textarea :
            function(index){
                    return $("#element_"+index).val();
            }
    ,checkbox :
            function(index){
                    var arr=new Array();
                    $("input[name='element_"+index+"[]']:checked").each(function(){
                            arr[arr.length]=this.value;
                    });
                    var result=arr.join(", ");
                    return result;
            }
    ,radio :
            function(index){
                    var result="";
                    $("input[name=element_"+index+"]:checked").each(function(){
                            result=this.value;
                    });
                    return result;
            }
    ,select :
            function(index){
                    return $("#element_"+index).val();
            }
    ,email :
            function(index){
                    return $("#element_"+index).val();
            }
    ,phone :
            function(index){
                    var arr=new Array();
                    $("input[id^=element_"+index+"_]").each(function(){
                            arr[arr.length]=this.value;
                    });

                    var result="";
                    if(arr.length>0){
                            result=arr.join("-");
                    }else{
                            result=$("#element_"+index).val();
                    }
                    return result;
            }
    ,datetime :
            function(index){
                    var result="";

                    var date_part="";
                    if($("#element_"+index+"_year").length==1){
                            date_part=$("#element_"+index+"_year-mm").val()+"/"+$("#element_"+index+"_year-dd").val()+"/"+$("#element_"+index+"_year").val();
                    }

                    var time_part="";
                    if($("#element_"+index+"_hour").length==1){
                            time_part=$("#element_"+index+"_hour").val()+":"+$("#element_"+index+"_minute").val()+" "+$("#element_"+index+"_ampm").val();
                    }

                    if(date_part && time_part){
                            result=date_part+" "+time_part;
                    }else{
                            result=date_part ? date_part : time_part;
                    }

                    return result;
            }
    ,url :
            function(index){
                    return $("#element_"+index).val();
            }
    ,file :
            function(index){
                    return $("#element_"+index).val();
            }
    ,select_multiple :
            function(index){
                    return $("#element_"+index).val();
            }
    ,price :
            function(index){
                    var result="";
                    var arr=new Array();
                    $("input[id^=element_"+index+"_]").each(function(){
                            arr[arr.length]=this.value;
                    });
                    result=arr.join(".");
                    return result;
            }
    ,hidden :
            function(index){
                    return $("#element_"+index).val();
            }
    ,section_break :
            function(index){
                    return "";
            }
    ,page_break :
            function(index){
                    return "";
            }
    ,deprecated :
            function(index){
                    return $("#element_"+index).val();
            }
    ,address :
            function(index){
                    var result="";
                    var element_arr=$("input,select").filter("[name='element_"+index+"[]']").toArray();
                    result=element_arr[0].value+" "+element_arr[1].value+"\
"
                            +element_arr[2].value+","+element_arr[3].value+" "+element_arr[4].value+"\
"
                            +element_arr[5].value;
                    return result;
            }
    ,name :
            function(index){
                    var arr=new Array();
                    $("input[id^=element_"+index+"_]").each(function(){
                            arr[arr.length]=this.value;
                    });
                    var result=arr.join(" ");
                    return result;
            }
    };

var emf_condition_id_to_js_map={1 :
            function(field_value, value){
                    return field_value.indexOf(value)>-1;
            }
    ,2 :
            function(field_value, value){
                    return field_value.indexOf(value)==-1;
            }
    ,3 :
            function(field_value, value){
                    return field_value.indexOf(value)==0;
            }
            ,4 :
            function(field_value, value){
                    return field_value.indexOf(value)==field_value.length-value.length;
            }
    ,5 :
            function(field_value, value){
                    return field_value==value;
            }
    ,6 :
            function(field_value, value){
                    return field_value!=value;
            }
    ,7 :
            function(field_value, value){
                    return field_value==value;
            }
    ,8 :
            function(field_value, value){
                    return field_value>value;
            }
    ,9 :
            function(field_value, value){
                    return field_value<value;
            }
    ,10 :
            function(field_value, value){
                    var date_for_field_value=Date.parse(field_value);
                    var date_for_value=Date.parse(value);
                    if(date_for_field_value && date_for_value){
                            return date_for_field_value == date_for_value;
                    }
                    return false;
            }
    ,11 :
            function(field_value, value){
                    var date_for_field_value=Date.parse(field_value);
                    var date_for_value=Date.parse(value);
                    if(date_for_field_value && date_for_value){
                            return date_for_field_value < date_for_value;
                    }
                    return false;
            }
    ,12 :
            function(field_value, value){
                    var date_for_field_value=Date.parse(field_value);
                    var date_for_value=Date.parse(value);
                    if(date_for_field_value && date_for_value){
                            return date_for_field_value > date_for_value;
                    }
                    return false;
            }
    };
var emf_group_to_field_rules_map=[];
var emf_group_to_page_rules_for_confirmation_map=[];


//]]>
</script>

<!--
<input type="button" name="mba" value="Music Block Attack" style="position: absolute; left: 135px; top: 265px; " />
<div id="stuff">
<ul class="superwords">
<h1>
<img src="images/osfg.png" alt="super fun games" align="left">
</h1>
</br>
<table>
<tbody>
<tr>
<th><a href="music_block_attack.html"><img src="images/games/mbabanner.jpg" /></a></th>
-->
<!-- <td>Bejeweled - eat your heat out!<br /><br /> Music Block Attack is an addictive puzzle game that is easy to learn and hard to master! Blocks move to the music as you touch and match blocks. Play either Casual Mode or Attack Mode or Battle Mode to compete against friends! Game is timed to 10 completely original music tracks with 10 unique enviroments with their own bosses. Full Achievements list and bragging rights. 200+ phases to play through. <br /><br /> Are you ready to get your MBA?</td> -->
<!-- <th><a href="cuddlybears.html"><img src="images/games/cuddlybanner.jpg" border="0" /></a></th> -->
<!-- <td>So cute, you can't resist the urge to squeeze 'em! <br /><br /> Cuddly Bears is an adorable, yet addictive matching game that will make you say "aww" at every move!  Match three Cuddly Bears to clear the bears; match six Cuddly Bears to create a Cuddly Boy Bear or Cuddly Girl Bear.  Pair up a Cuddly Boy Bear and Cuddly Girl Bear to create 'Cuddly Love.'  Collect enough 'Cuddly Loves' to be able to use special Cuddly abilities. You will adore the Cuddly Bears in two very different game styles with Boy Bear mode and Girl bear mode.<br /><br /> The love will begin 2012.</td> -->
<!-- </tr>
<tr>
<th><a href="snowmanwars.html"><img src="images/games/snowwarsban.jpg" border="0" /></a></th>
<td>Spring is coming. The A-thaw-colpyse is nigh. The only hope for you and your army of snowy soldiers is to capture Permafrost Glacier, but it won't be easy: mad snow-scientists, cold-hearted princesses, fearsome generals, and their legions stand between you and snowy salvation.  You'll have to command your mighty snowman armies in this fast-paced strategy game if you hope to avoid your melty doom.<br /><br />CHILL 'EM ALL!.</td> -->
<!-- <th><a href="arrow.html"><img src="images/games/aclimbbanner.jpg" /></th>
<td><strong>Mission Briefing</strong><br /><br /> Operation: Arrow Climber<br /><br /> Agent:  311, code name 'Rich'<br /><br /> Primary Objective:  <br /><br /> A. Secure top secret information at all costs<br /><br /> B.  Escape with your life intact, if at all possible<br /><br /> Mission Summary: After obtaining the primary objective, Agent Rich has to escape with his life, but the only escape is up!  Rich's only way out is by shooting arrows into the wall to create a safe path for him to climb atop buildings and mountains.  Operation Arrow Climber takes place in a world of neo-noir-esque art style with dramatic color variations.  Easy enough right?  Beware, the enemy has put traps all over the place and are gaining on him fast. <br /><br /> The fate of humanity is in your hands alone&hellip;. you cannot let us down!</td> -->
<!-- </tr>
<tr>
<th><img src="images/games/knightsbanner.jpg" /></th>
<td>...Coming Soon...</td>
</tr>
</tbody>
</table>
</ul>
</div>
<center><a href="http://twitter.com/#!/SuperFunGamesAZ" target="_blank" border="0"> <img src="images/twitterlogo2.png" border="0" /></a> <a href="http://www.facebook.com/pages/Super-Fun-Games/169546349765028" target="_blank" border="0"><img src="images/facebook2.png" border="0" /></a><br /><br /> (c)2011 Super Fun Productions. All rights reserved.</center></div>
</body>
-->
<!-- Mirrored from superfunproductions.com/games.html by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 23 Mar 2012 00:40:21 GMT -->
</body>
</html>

ok i’ll give it a try! Just curious, what is the difference between the &amp and %26?