button list problems

**shakmbakm** · Feb 21, 2013 21:07

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

**ronpat** · Feb 21, 2013 21:10

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

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.

**shakmbakm** · Feb 21, 2013 21:29

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?

**ronpat** · Feb 21, 2013 21:47

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?

**shakmbakm** · Feb 21, 2013 22:04

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

**shakmbakm** · Feb 21, 2013 22:13

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?

**shakmbakm** · Feb 21, 2013 22:34

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.

**ronpat** · Feb 21, 2013 22:42

Looks like you've got it under control

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.

**shakmbakm** · Feb 21, 2013 23:04

Ok, that will probably help too. Thanks

**ronpat** · Feb 22, 2013 03:39

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

**shakmbakm** · Feb 22, 2013 22:30

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.

**ronpat** · Feb 23, 2013 01:38

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

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

Code:

<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.

**shakmbakm** · Feb 24, 2013 20:48

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

**ronpat** · Feb 24, 2013 23:31

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%26t2=0%26use_CDN=true">

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

Test thoroughly (there's no warranty implied or otherwise

)

games4c.css

Code:

@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

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">
<!-- 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+"\n"
                            +element_arr[2].value+","+element_arr[3].value+" "+element_arr[4].value+"\n"
                            +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>

**shakmbakm** · Feb 25, 2013 10:47

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

**ronpat** · Feb 25, 2013 14:29

& is the HTML code used to display/print an ampersand symbol in the browser window.

%26 is the URL code used when an ampersand needs to be transmitted within a URL string.

A handy URL encoding reference chart can be found here.

**shakmbakm** · Feb 25, 2013 20:15

I gave that code a test and I attached an image of what it looks like. It looks like this on all browsers. games.png

**shakmbakm** · Feb 25, 2013 20:32

In the place where it says listOne item, right now, will need to be an image. So will the rest of the greybox need to be moved over or can that be a part of the greybox?

**ronpat** · Feb 25, 2013 20:48

We have to wait for the image to be approved. Or, you could post the HTML page and the CSS on your site under the names that I gave them and I can see them via the web.

I'm a bit suspicious of what you have done, though, because in the HTML code that I last posted, there is NO "listOne item"... I reworded it to say "Home". So what have you really done?

The lists in the graybox are auto-centered. Nothing should need to be adjusted.

**shakmbakm** · Feb 25, 2013 20:54

you're right it says home now. My fault. Where it says Home, there needs to be a image of the company logo to link to home. If nothing will need to be adjusted how do I add this image to the graybox, I seem to be having trouble with that. I changed the page back to what it was because the new page didn't look very finished. But I can change it back if you would like to take a look that way.

**shakmbakm** · Feb 25, 2013 21:19

I've been giving it a try and connected the image to "home". But I have only been able for it to appear as big as the word "home" is so it only shows a small part of the image.

**ronpat** · Feb 25, 2013 21:44

Can you post the HTML and CSS code on your server with different names along side your "working" page?

Please note that the link the new css sheet must reflect the correct css name and URL, otherwise the page will look ugly.

**shakmbakm** · Feb 25, 2013 22:01

oh my gosh, you were right. The CSS name was put in wrong. Always a simple mistake it seems. The page looks great, only the logo image needs to be put in the "home" area. I'm having trouble with that because it seems to be anchored to the word which keeps the image very small.

**ronpat** · Feb 25, 2013 22:20

Remember also that you cannot use the same ID twice on a page.

Therefore, the id for home in graybox cannot be "home". It must be id="home2" or something else unique.

**shakmbakm** · Feb 25, 2013 22:24

Ok I see, so I can connect the image but it needs a different name than home?

User Tag List

Thread: button list problems

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions