Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Lots of Code, cannot reach top of page

    First let me say eveything here validates, css and html5
    http://www.countyfairgrounds.net/tes...gn/testsix.php

    There is a lot of code on this page - for some reason I cannot move the main banner to the top of the page and I am stumped. Please help

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    It just might be:
    Code:
    body {
      padding-top: 100px;   // THIS in file http://www.countyfairgrounds.net/css/togglestyle.css
      color: #000;
    }

  • #3
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks that did it. I am new at jquery.

    Can you tell me now why the toggler does not work in IE8? it works in Firefox and Chrome.
    Do I need some code in the header tag?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    jQuery 1.9.1, which you use, was supposed to stop supporting IE8 and lower. This may be the problem. So I tested this with jQuery 1.8.3 and toggler.js works a little differently and how it works I don't think you'd like.

    So I went back to an old way of doing this. First, added this to line 313.
    Code:
    <button class="btn btn-danger" data-rel="type-fade" onclick="toggle('type-fade');">Toggle Selections</button>
    NEXT line 313:
    Code:
    <div id="type-fade" class="toggle-me hidden" style="display:none;" >
    Then I changed the last part of your page to this:
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--<script src="/js/bootstrap-modal.js"></script>
    <script src="/js/toggler.js"></script>-->
    
      <script>
    function toggle(obj) {
    var el = document.getElementById(obj);
    	if ( el.style.display == 'none' ) {
    		el.style.display = 'block';
    	}else{
    		el.style.display = 'none';
    	}
    }
      </script>
    </body>
    </html>
    I commented out stuff that was not used and replaced the <script> section.

    I see you still have work to do on the page and I hope this does not mess you up too much. You may need <script src="/js/bootstrap-modal.js"> but I'd stay away from toggler.js for now.

  • #5
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    hi, should I take toggler.js out of the page then? from the bottom of the page?
    here is a link
    http://countyfairgrounds.net/testweb.../testseven.php -

    my php guy cannot get the php in the form in the toggler box to work , as he states below. I am wondering if it is possible the toggler.js is causing this not to work? AND, would like to know what you think as you seem to have dealt with this more then me and my php guy. If I do it with the changes you suggested will the php form work then?
    -
    "In all previous web pages, the selections were in a form, with this line at the first:
    <FORM ACTION="<? echo $_SERVER['PHP_SELF']?>" method="get">
    and this line at the end:
    </FORM>

    Test page testseven.php, and another test page, testseven2.php, will not work without these lines BUT when I put them in, nothing works. I assume it has something to do with the lines you put in,
    <section class="form">
    and
    </section>
    I know nothing about those two lines or what is in the .css that has to do with them"

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Quote Originally Posted by CoolKay View Post
    ... I assume it has something to do with the lines you put in,
    <section class="form">
    and
    </section>
    I know nothing about those two lines or what is in the .css that has to do with them"
    I'm sorry CoolKay, I did not add those lines they were in your code already.

    I made the div that contained them invisible, so to speak, and add javascript to make them visible when the <button class="btn btn-danger" data-rel="type-fade" onclick="toggle('type-fade');">Toggle Selections</button> was pushed.

    Your right that the submit button should be in a form, and it looks like yours is, and that the form needs an action. What you gave me:
    Code:
    <FORM ACTION="<? echo $_SERVER['PHP_SELF']?>" method="get">
    would call it's self. Not sure this is what you want. Call one of your php scripts:
    Code:
    <form action="testseven.php" method="get">
    OR
    Code:
    <form action="testseven2.php" method="get">
    This maybe the php to call. I don't know what they do.

    But I think the post method would be better. Right now your form is doing nothing when the submit button is clicked.

    FYI: The entire form can be put into it's own code and worked on without disturbing the main page that is already working.

  • #7
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    hi, I really appreciate your help
    Okay - before we go to the php forum
    we need to make sure the toggle box works - right now it does not
    I have implemented the changes in the code to it you suggested a few posts above and put it on a separate page - and validated it.
    Now the toggle does not work.

    Can you help solve this more basic issue? after we get it working - hopefully without toggle.js then I will go to the php forum with it.
    http://www.countyfairgrounds.net/tes...estfifteen.php

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    This is the section you should concentrate on. I asked you to do three things [post #4]. I have commented out your lines and put in mine. You left two out:
    Code:
      <div id="menu">
        <h2>Vendors, Click the Button below to make Selections </h2>
       - you can make selections for what you would like to see on this page
        <!--<button class="btn btn-danger" data-rel="type-fade">Toggle Selections</button>-->
    <button class="btn btn-danger" data-rel="type-fade" onclick="toggle('type-fade');">Toggle Selections</button>
        <!--<div id="type-fade" class="toggle-me hidden">-->
    <div id="type-fade" class="toggle-me hidden" style="display:none;" >
        <table>
        <tr>
        <td><p><label>Name of Event: <input name="event_name" size="8"  placeholder="event name"></label></p></td>
        <td><p><label>Enter the City:<input  name="city" size="8" placeholder="city"></label></p></td>
        <td><p><label>Enter the County:<input  name="county" size="8" placeholder="county"></label></p></td>
        <td><p><label>Enter the State:<input name="state" size="8" placeholder="two letters only"></label></p></td>
     </tr>
     <tr>
     <th colspan="4">
     <strong>Please make up to three selections at a time from the following</strong>
     </th>
     </tr>
     <tr>
      <td>
      <label> <input type="checkbox">Antiques Fair</label>
     <label> <input type="checkbox">Arts and Crafts Fair</label>
      <label> <input type="checkbox">Auto Show</label>
      <label> <input type="checkbox"> Auto Racing </label>
      <label> <input type="checkbox">Barbecue</label>
      <label> <input type="checkbox">Bluegrass Show</label>
      <label> <input type="checkbox">Bridal Show</label>
      <label> <input type="checkbox"> Cat Show</label>
      <label> <input type="checkbox">Cattle Show</label>
      <label> <input type="checkbox"> Chili Cook-Off</label>
      <label> <input type="checkbox">Christmas</label>
      <label> <input type="checkbox"> Concert</label>
      </td>
      <td>
      <label> <input type="checkbox"> Conference</label>
      <label> <input type="checkbox">County Fair</label>
      <label> <input type="checkbox">Dairy Show</label>
      <label> <input type="checkbox">Dance Ball</label>
      <label> <input type="checkbox">Demolition Derby</label>
      <label> <input type="checkbox">Dog Show</label>
      <label> <input type="checkbox">Expo</label>
      <label> <input type="checkbox">Demolition Derby</label>
      <label> <input type="checkbox">Dog Show</label>
      <label> <input type="checkbox">Farm Show</label>
      <label> <input type="checkbox">Festival</label>
      <label> <input type="checkbox">Flea Market</label></td>
      <td>
      <label> <input type="checkbox">Gem and/or Jewelry Show</label>
       <label> <input type="checkbox">Goat Show</label>
      <label> <input type="checkbox">Gun Show</label>
      <label> <input type="checkbox">Halloween</label>
        <label> <input type="checkbox">Home or Garden Show</label>
      <label> <input type="checkbox">Horse Event</label>
      <label> <input type="checkbox">Independence Day/July 4th</label>
      <label> <input type="checkbox">Indian Event</label>
        <label> <input type="checkbox">Memorial Day</label>
      <label> <input type="checkbox">Monster Truck Show</label>
      <label> <input type="checkbox">Mrtorcycle</label>
     <label> <input type="checkbox">Music Festival</label></td>
     <td>
     <label> <input type="checkbox">Parade</label>
      <label> <input type="checkbox">Pig/Hog Show</label>
     <label> <input type="checkbox">Poultry Show</label>
      <label> <input type="checkbox">Rodeo</label>
      <label> <input type="checkbox">RV Show</label>
     <label> <input type="checkbox">Sales Event</label>
       <label> <input type="checkbox">Sports</label>
      <label> <input type="checkbox">State Fair</label>
     <label> <input type="checkbox">St. Patrick's Day</label>
      <label> <input type="checkbox">Swap Meet</label>
        <label> <input type="checkbox">Theatre</label>
     <label> <input type="checkbox">Tractor Event</label>
      <label> <input type="checkbox">Valentine's Day</label>
     </td>
     </tr>
     <tr>
    <th colspan="4" >
    <input type="submit"  class="btn btn-danger"  value="Submit to View Below">
    </th>
    </tr>
    </table>
        </div>
     </div>
     </div> <!--end of container division-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--<script src="/js/bootstrap-modal.js"></script>
    <script src="/js/toggler.js"></script>-->
      <script>
    function toggle(obj) {
    var el = document.getElementById(obj);
    	if ( el.style.display == 'none' ) {
    		el.style.display = 'block';
    	}else{
    		el.style.display = 'none';
    	}
    }
      </script>

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    I also noticed you removed the <form> tags. I have added them below and did a shortened checkbox list for you. Please notice the name and value attributes. This also calls a separate php file which I posted next to show you how these things are gathered. I echoed an output but in real life I'd a done something different. Good luck in displaying this. If your going to add it to a list already in place you will need ajax.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Test Page</title>
    </head>
    
    <body>
      <div id="menu">
        <h2>Vendors, Click the Button below to make Selections </h2>
       - you can make selections for what you would like to see on this page
        <!--<button class="btn btn-danger" data-rel="type-fade">Toggle Selections</button>-->
    <button class="btn btn-danger" data-rel="type-fade" onclick="toggle('type-fade');">Toggle Selections</button>
        <!--<div id="type-fade" class="toggle-me hidden">-->
    <div id="type-fade" class="toggle-me hidden" style="display:none;" >
    <form id="myform" action="afile.php" method="post">
    	<table border="1">
    		<tr>
    		<td><p><label>Name of Event: <input name="event_name" size="8"  placeholder="event name"></label></p></td>
    		<td><p><label>Enter the City:<input  name="city" size="8" placeholder="city"></label></p></td>
    		<td><p><label>Enter the County:<input  name="county" size="8" placeholder="county"></label></p></td>
    		<td><p><label>Enter the State:<input name="state" size="8" placeholder="two letters only"></label></p></td>
    		</tr>
    
    		<tr>
    		<th colspan="4">
    		<strong>Please make up to three selections at a time from the following</strong>
    		</th>
    		</tr>
    
    		<tr>
    		<td>
    		<label> <input type="checkbox" name="cb[]" value="Antiques Fair">Antiques Fair</label>
    		<label> <input type="checkbox" name="cb[]" value="Arts and Crafts Fair">Arts and Crafts Fair</label>
    		<label> <input type="checkbox" name="cb[]" value="Auto_Show">Auto Show</label>
    		<label> <input type="checkbox" name="cb[]" value="Auto_Racing"> Auto Racing </label>
    
    		</td>
    		</tr>
    
    		<tr>
    		<th colspan="4" >
    		<input type="submit"  class="btn btn-danger"  value="Submit to View Below">
    		</th>
    		</tr>
    	</table>
    </form>
    </div>
     </div>
     </div> <!--end of container division-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--<script src="/js/bootstrap-modal.js"></script>
    <script src="/js/toggler.js"></script>-->
      <script>
    function toggle(obj) {
    var el = document.getElementById(obj);
    	if ( el.style.display == 'none' ) {
    		el.style.display = 'block';
    	}else{
    		el.style.display = 'none';
    	}
    }
      </script>
     </body>
     </html>
    The php file - afile.php:
    PHP Code:
    <?php
    $name 
    $_POST["event_name"];
    $city $_POST["city"];
    $county $_POST["county"];
    $state $_POST["state"];


    if(isset(
    $_POST["cb"]))
    {
        echo 
    "event_name is ".$name "<br />";
        echo 
    "From the city of ".$city "<br />";
        echo 
    "In the county of ".$county "<br />";
        echo 
    "In the State of ".$state "<br />";

        echo 
    "they are having :" "<br />";
        foreach(
    $_POST["cb"] as $value){
        echo 
    $value"<br />";
        }
    }

    ?>

  • #10
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks - my php guy will not be around till later this evening. I don't php.
    I html5 and css3

    I do have a question about the name attribute, because all of the form code had validated without it and from what I gathered when I looked the W3C specifications made no mention of it having to be there. The value attribute is also optional isn't it?
    Anyway where and why did you get name="cb[]" , for this attribute?

    and we cannot really test this till the php guy is around later - or maybe tomorrow.

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    I am the worst person on this forum to tell you about the W3C specifications, but I'll try. If your <input> is coded into the html and you plan on getting this info via lets say javascript then the name/value attribute is not mandatory nor needed, but if your sending it via a post or a get in a <form> then it is needed to get the information to the php file.

    Notice in Name of Event: we have <input name="event_name" and in the php file we obtain what was put into that field with $name = $_POST["event_name"];. It used the name attribute to get that info. Same for the checkboxes.

    If we had a single checkbox (or a few that weren't related) we could have gotten by with the name only; of course they had to have different names. But in your case I used an array to send them. I picked cb[] for the array name for checkbox. Clever, no?

  • #12
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    hi sorry for the delay in getting back to you.
    This is where we currently are
    http://countyfairgrounds.net/testweb...teighteen2.php

    The php guy says it basically works. There are a few php problems in connecting the data from the jquery drop down box BUT he thinks he knows what they are and can fix them. AGAIN thank you.

    I am wondering if the jquery stuff you did will enable me to do on this page (and all our state pages for that matter ) something like this...(drop down below each event)

    http://visitmadisonvilleky.com/events?o=50

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Quote Originally Posted by CoolKay View Post
    I am wondering if the jquery stuff you did will enable me to do on this page (and all our state pages for that matter ) something like this...(drop down below each event)

    http://visitmadisonvilleky.com/events?o=50
    Sure it will. Remember to include a downward pointing arrow head so the reader will know to click for more info. And then change it to an upwards pointing arrow head to show them they can close the new info box. You can also close the open box when a new box is open. I believe this can be done easily with Bootstrap(which you use).
    Thank You and Your welcome.

  • #14
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ah, I have seen that downward pointing arrow - can you give me any more info on it?

    there is one problem we are having with
    http://www.countyfairgrounds.net/tes...teighteen2.php

    when clicking on toggle - and the box opens up and the form - it spreads to the left quite a way. is there any way to keep it from going so far left? I have set the margins in the div id menu - and I know there is a lot of info - but it really is going to far left in the browser screens

  • #15
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,610
    Thanks
    24
    Thanked 647 Times in 646 Posts
    &#x25B2; is an upturned arrowhead. &#x25BC; is down. or if you want the little arrows use this http://twitter.github.com/bootstrap/base-css.html#icons

    You need to do a lot of work to the toggle box. To center the box make this change in your css file:

    Code:
      #menu  {
    	background-color:#990000;
    	margin:5px auto 30px auto;  // WAS margin:5px 10px 30px 100px;
    	float:right;
    	font-size:12px;
    	color:#ffffff;
    	padding-bottom:5px;
    	line-height:13px;
    }


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •