6 Replies Latest reply on Aug 29, 2016 12:38 PM by Thomas Golaszewski

    Where to put query code on a responsive web site

    Thomas Golaszewski

      Hi!

      I wanted do put a separate page for my menu. Nancy O Suggested that I use query to do this instead of the separate page because it would be a problem for phones.

      I'm making a responsive web site in dreamweaver.  I have one of my div containers for a pizza shop.  I even tried a separate container for the menu. and I'm using jquery code to show and hide the menu in the Pizza Shop container and don't know exactly where to put the code.

      If I put it in the same container, (source code) the h1 tag is "click here to see the menu" is all h1.  The menu itself is h3.

      It does work in a regular HTML page but I having a real problem with the responsive page.  Can you give me a hint?

      This is what I did; The first part is my code and no matter where I put it is either shows up in the live view or ann of the menu shows as an h1 tag.

       

      $(document).ready(function() {

        $("p").hide();

        $("h1").click(function() {

        $(this).next().slideToggle(300);

        });

      });

      <script type="text/javascript" src="jquery-3.1.0.min.js"></script>

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

      </body>

      </html>

      Using Dreamweaver 6

      Thanks.

      Tom

        • 1. Re: Where to put query code on a responsive web site
          Nancy OShea Adobe Community Professional & MVP

          To clarify, the separate page for menu was in an iframe.  And iframes are a very bad choice for navigation (usability reasons).  What you're trying to do (I think) is toggle a show/hide menu with jQuery.

           

          Below is a working example.  Copy & paste code into a new, blank document to test.

           

          <!doctype html>
          <html lang="en">
          <head>
          <meta charset="utf-8">
          <title>jQuery - Show/Hide Nav</title>
          <style>
          /**NAV MENU**/
          nav li {
              list-style: none;
              margin: 0 0 0 -12px;
              display: block;
              font-size: 1.5em;
              padding: 0;
          }
          /**Nav Links**/
          nav li a {
              text-decoration: none;
              padding: 3px;
              color: #4488c3;
          }
          nav li a:hover, nav li a:active, nav li a:focus {
              background: #4488C3;
              color: #FFF;
          }
          </style>
          </head>
          <body>
          <h1>My Aweseome Website</h1>
          <h2>Some Pithy Slogan</h2>
          <h3 class="clickme" data-text-original>
          <button data-text-swap="Hide Menu &#9650;">Show Menu &#9660; </button>
          </h3>
          <nav>
          <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          </ul>
          </nav>
          
          <!--latest jQuery library--> 
          <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> 
          <script>
          //SHOW/HIDE NAV
          $(document).ready(function() {
          $('nav').hide();
          $('.clickme').click(function(){
          $('nav').toggle('slow');
          });
          $(".clickme").on("click", function() {
            var el = $("button");
            if (el.text() == el.data("text-swap")) {
              el.text(el.data("text-original"));
          } else {
              el.data("text-original", el.text());
              el.text(el.data("text-swap"));
            }
          });
          });
          </script>
          </body>
          </html>
          
          
          

           

          Nancy O.

          1 person found this helpful
          • 2. Re: Where to put query code on a responsive web site
            Thomas Golaszewski Level 1

            Yes Nancy;  I did want to place an iframe.  You're correct.  I didn't know about the iframe issue.  The jquery "show hide" is much better works in a regular html page.  ButI can't find the correct place to make it work in a responsive site.  If I place the my_code in the div id for the pizza shop, everything is h1 even if I only wanted the word menu in h1. I hope you can see it.Screen Shot 2016-08-29 at 2.13.39 PM.png  Maybe a screen shot will say it better. I hope you can see it.

            • 3. Re: Where to put query code on a responsive web site
              Nancy OShea Adobe Community Professional & MVP

              I can't read code in screenshots without a microscope.  My eyes are not that good.

              BTW, why are you still using Fluid Grid Layouts?  They are going to be discontinued soon.  FGL is not the best choice for responsive layouts.

               

               

              Nancy O.

              • 4. Re: Where to put query code on a responsive web site
                Thomas Golaszewski Level 1

                Sorry about the screen shot.  I didn't know about the FGL going away.  I guess I can use the regular layout.  Back to the drawing board.

                I only get into a job for a web site every few years.  The person (people) that I'm working with keep changing things. I guess I'll have to study a new way for this site.

                Thanks for your time.  Every time I put up a post, I know that you would come to the rescue!

                Thanks

                • 5. Re: Where to put query code on a responsive web site
                  Nancy OShea Adobe Community Professional & MVP

                  Learn to work with Bootstrap.  It's much more than a responsive layout system. 

                  Bootstrap 3 Tutorial

                  • 6. Re: Where to put query code on a responsive web site
                    Thomas Golaszewski Level 1

                    Thank You! I will start that right away.