Jump to content

JMRKER

Members
  • Posts

    194
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by JMRKER

  1. From the link at: https://www.w3schools.com/code/tryit.asp?filename=G645EZ9AAZ7U

    Modify for two character arrow bar

    	<!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: lightblue;
    }
    	h1 {
      color: white;
      text-align: center;
    }
    	p {
      font-family: verdana;
      font-size: 20px;
    }
    #A-arrowleft, #A-arrowright {
    padding-top: 9px;
    display: inline-block;
    position: relative;
    	}
    	#A-arrowleft:before, #A-arrowright:before {
    position:absolute;
    top:0;
    left: 0; right: 0;
    height:9px;
    font-size:9px;
    vertical-align: top;
    line-height: 9px;
    text-align: center;
    }
    	#A-arrowleft:before {
    content: "\2190";
    font-size: 1.2em;
    }
    #A-arrowright:before {
    content: "\2192";
    font-size: 1.2em;
    }
    	</style>
    </head>
    <body>
    	<h1>My First CSS Example</h1>
    <p>This is a paragraph. <span id="A-arrowleft">AB</span></p>
    <p>This is a paragraph. <span id="A-arrowright">BA</span></p>
    </body>
    </html>
    	

     

  2. Try adding:

    	.btnBottom { position: relative; bottom: -175px; left: 75px; }
    	

    And modifying:

    	                <div class="button btnBottom">
                        <span><a href="#">Learn More</a></span>
                    </div>
    
    

    for each of the buttons.

     

  3. On 7/11/2019 at 10:49 PM, owlerz said:

    We have a lot of stuff discussing geometry, so have a need to do the line and ray symbols, which would be an overline with left and right arrows for line, and overline ending in a right arrow for ray. I absolutely have been unable to find a solution for implementing these using CSS/HTML. These are fairly common symbols, so I'm sure there's a way to do it

     

    Suggestions?

    I am unclear of what you are trying to do. 
    Can you give an example or link to the display you wish to create? 
    What is an "overline" in relation to a left/right arrow?  Is it like a superscript or subscript display?

     

  4. Is the size of the sub-menus still a problem? 
    It appears to be working correctly in the FF browser
    but perhaps I don't understand the problem.

    By size do you mean the width of the displays? 
    Or the font sizes? Or the number of column visible?
    Or something else?

     

  5. I don't have access to your images so I just chose an arbitrary size.  Modify as needed.

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    	<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    	<title> HTML5 Test Page </title>
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
    <style>
     div { border: 1px solid black; height: 100px; width: 200px; float: left; }
    </style>
    	</head>
    <body>
    	<div>
     <a href="https://goo.gl/2qQsCf">
      <img src="/wp-content/uploads/2019/06/car-wreckers-review.png" alt="Call: ???"></a>
    </div>
    	<div>
    <a href="tel:00000000">
      <img src="/wp-content/uploads/2016/08/call-1.png" alt="Call: 00000000" onClick="goog_report_conversion('tel:00000000')"></a>
    </div>
    	</body>
    	</html>
    
    

     

  6. Looks like very OLD code you are trying to implement.
    Indications are:  <script type="text/javascript" language="JavaScript">

    Show the pertinent HTML code associated with the problem.
    Post #1 may reference the "field name/id", but you are not referencing them correctly.

     

  7. Following is based on several assumptions.

     - where is row_id coming from and to what does it refer?

     - you have elements id as qty_???.val and qtyact_value_???.val defined?

     - is qty_1.value defined somewhere or does it represent one of the above?
    if you have a numeric ID for an element (ie, row.id) it may not work in all browsers

     - there is more code available?  If yes, show pertinent parts.

    Difficult to answer questions fully when there is not enough information provided.  Good Luck! :)

     

  8. This seemed to me to be an easier solution to your problem.
    Check the reference links for further information or look up the new Set() function of ES6

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> Unique Object Entries </title>
    <!-- From: http://w3schools.invisionzone.com/topic/59291-eliminating-objects-of-an-array/ -->
    </head>
    <body>
    	<script>
    var visitData = [
       {'visitorID':'6b77f74d969f0254','fullDate':'2019/01/01'},
       {'visitorID':'6b77f74d969f0254','fullDate':'2019/01/01'},
       {'visitorID':'8305d1d7c98cfe07','fullDate':'2019/01/03'},
       {'visitorID':'8305d1d7c98cfe07','fullDate':'2019/01/03'},
       {'visitorID':'8305d1d7c98cfe07','fullDate':'2019/01/03'},
       {'visitorID':'8305d1d7c98cfe07','fullDate':'2019/01/03'},
       {'visitorID':'8305d1d7c98cfe07','fullDate':'2019/01/04'},
       {'visitorID':'470b11ecb96f51a8','fullDate':'2019/01/04'},
       {'visitorID':'470b11ecb96f51a8','fullDate':'2019/01/05'},
       {'visitorID':'7783172ce39cd663','fullDate':'2019/01/05'},
       {'visitorID':'1834494d8537012d','fullDate':'2019/01/06'},
       {'visitorID':'3321037b66164959','fullDate':'2019/01/06'}
    ];
    	/* Following solution from:
      https://stackoverflow.com/questions/36032179/remove-duplicates-in-an-object-array-javascript
    */
    var uniq = new Set(visitData.map(e => JSON.stringify(e)));
    var res = Array.from(uniq).map(e => JSON.parse(e));
    console.log(JSON.stringify(res));
    	</script>
    </body>
    </html>
    	

     

    • Like 1
  9. You had a number of syntax errors in the CSS and JS you provided. 
    I fixed them as best I could understand your logic and keeping most of your original code.
    Of most important:
    1) You cannot reference and ID without naming the ID in the element and
    2) You cannot make a comparison (if...) with an assignment (=, should be ==)

    Note that your calculation DO NOT take into account any of the activity selections.  Oversight?

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> HTML5 Test Page </title>
    <!-- From: http://w3schools.invisionzone.com/topic/59183-form-calculation-help/ -->
    	<style>
    body {
          font:   15px gothic, sans-serif;
          letter-spacing: 1px;
          }
    input { width: 100%; }
    input[type=number] {
      border: none;
      border-bottom: 1px solid grey;
    }
    input[type=button], input[type=submit], input[type=reset] {
      background-color: #ddcecb;
      border: none;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
      color: #95483e;
      padding: 16px 32px;
      text-decoration: none;
      letter-spacing: 1px;
      margin: 4px 2px;
    	#submit:hover {
     border: none;
     background: #d2d1d1;
     box-shadow: 0px 0px 1px #777;
    }
    input[type=text]:focus { border: 1px solid #555; }
    .form-inline label { margin: 5px 10px 5px 0; }
    	@media (max-width: 800px) {
      .form-inline input {
        margin: 10px 0;
      }
      .form-inline {
        flex-direction: column;
        align-items: stretch;
      }
    }
    </style>
    	</head>
    <body>
    	<form name="RMRcalc" action="javascript:alert('Success')" method="post">
      weight (kg) :   <input type="number" name="weight" id="weight" autofocus><br><br>
      height (cm):    <input type="number" name="height" id="height" > <br><br>
      age (years):    <input type="number" name="age" id="age" > <br><br>
    	activity Level:
    <select name="activity" id="activity">
      <option value="1.2">sedentary (1-2x/week)</option>
      <option value="1.3">low (2-3x/week)</option>
      <option value="1.4">moderate (3-4x/week)</option>
      <option value="1.6">high (5+x/week)</option>
    </select>
    <br><br>  female <input type="radio" name="gender" value="female" checked>
        <br>  male <input type="radio" name="gender" value="male">
    	<br> <input type="submit" value="Calculate" id="calculate" onclick="return RMRCalc()" target="results">
    <br><br>
    	</form>
    	<p><a name="results">
    Your Daily Caloric Requirements:
    <div id ="RMR"></div>
    	</a></p>
    <br>
    	<p>
    Did you know that
    	<script>
    "use strict"
    function RMRCalc () {
      var weight = document.getElementById ("weight").value;
      var height = document.getElementById("height").value;
      var age = document.getElementById("age").value;
      var activity = document.getElementById("activity").value;
      var RMR;
      if (document.RMRcalc.gender.value == "female") { RMR = (10*weight) + (6.25*height) - (5*age) -161; }
                                                else { RMR = (10*weight) + (6.25*height) - (5*age) +5; }
      document.getElementById("RMR").innerHTML=RMR;
      return false;
    }
    </script>
    </body>
    </html>
    
    

    Modify as necessary.  Good Luck! :)

  10. I'm not exactly sure of the original concept, but you can try to use this if it is of any help.

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> HTML5 Test Page </title>
    <!-- For: http://w3schools.invisionzone.com/topic/59173-how-to-order-sentences-in-a-non-random-order/ -->
    </head>
    <body>
    <button id="inSequence">Display in sequence</button>
    <button id="inRandom">Random Display</button>
    <p>
    <div id="demo"></div>
    	<script>
     var feedback_array1 = [
        "<p>Congratulations you won the game.  </ p> <p>The other player picked A</p>",
        "<p>Congratulations you won the game.  </ p> <p>The other player picked B</p>",
        "<p>Congratulations you won the game.  </ p> <p>The other player picked C</p>",
        "<p>You lost! </p><p>The other player picked A</p>",
        "<p>You lost! </p><p>The other player picked B</p>",
        "<p>You lost! </p><p>The other player picked C</p>",
     ];
     var msg_feedback1 = function(){
       return feedback_array1 [Math.floor(Math.random()*feedback_array1.length)] ;
     };
    	var order = 0;  // global variable
    function init() {
      document.getElementById('inSequence').addEventListener('click',
        function() { document.getElementById('demo').innerHTML = feedback_array1[order];
                     var len = feedback_array1.length;
                     if (order < len) { order++; if (order >= len) { order = 0; } }
                   }
      )
      document.getElementById('inRandom').addEventListener('click',
        function() { document.getElementById('demo').innerHTML = msg_feedback1(); }
      )
    } init();
    </script>
    	</body>
    </html>
    
    

     

  11. Associative array would be a good solution, but here is an alternative with a simple function:

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> HTML5 Test Page </title>
    <!-- From: http://w3schools.invisionzone.com/topic/58931-javascriptswitch/ -->
    </head>
    <body>
    <pre>Expected:
    Cards Sequence 2, 3, 4, 5, 6 should return 5 Bet
    Cards Sequence 7, 8, 9 should return 0 Hold
    Cards Sequence 10, J, Q, K, A should return -5 Hold
    Cards Sequence 3, 7, Q, 8, A should return -1 Hold
    Cards Sequence 2, J, 9, 2, 7 should return 1 Bet
    Cards Sequence 2, 2, 10 should return 1 Bet
    Cards Sequence 3, 2, A, 10, K should return -1 Hold
    </pre>
    <pre id="demo"></pre>
    	<script>
     const doc = (IDS) => document.getElementById(IDS);
     const msg = (IDS, ...message) => doc(IDS).innerHTML += message.join(' ')+'\n';
    	 function countCards(c) {
       const cards = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
       const arr = c.split(',');
       var count = 0, pos, a;
       while (arr.length > 0) {
         a = arr.shift();
         pos = cards.indexOf(''+a);
         if (pos < 5) { count++; }
         if (pos > 7) { count--; }
       }
       if (count > 0) { return count+' Bet'; } else { return count+' Hold'; }
     }
     msg('demo',countCards('2,3,4,5,6'));
     msg('demo',countCards('7,8,9'));
     msg('demo',countCards('10,J,Q,K,A'));
     msg('demo',countCards('3,7,Q,8,A'));
     msg('demo',countCards('2,J,9,2,7'));
     msg('demo',countCards('2,2,10'));
     msg('demo',countCards('3,2,A,10,K'));
    </script>
    </body>
    </html>
    
    

     

  12. 17 hours ago, Mei Giyanto said:

    I Have tried The code you suggested But in another part, if I make the search box using the input element tag it actually disappears cause that style with selector input on that style

    That statement is totally un-helpful.  You need to show some code or describe your problem with some examples for me to help.

     

  13. On 4/8/2019 at 4:39 PM, Funce said:

    You can also paste code by using the code block button! So you won't need to use (very limited) attachment space putting in screenshots.

    XcQfW3F.png

    Plus you are relying on a very poor typist (me) to enter your less than visually optimal code to test! 😖

    • Haha 1
  14. On 4/2/2019 at 6:39 PM, Tyefoods said:

    @JMRKER You sir, are a legend. That is exactly what I am after!
    My original code will be left on the desktop version of the website as the hover functionality is easy, but your magnificently built code will be for our mobile (And more used!) version!

     

    I cannot tell you how many hours I spent playing with this code.
    Absolute life saver!

    You are most welcome.

    Glad I could help.

    Good Luck! :)

  15. The original posted code works as it should on both mouse and hover style screens.
    Personally I would leave it as is.

    However, if I am reading your original request correctly, you want the content selections
    to be visible when the title is clicked on and removed when it is clicked a second time.
    Forgive me if that is not the desired results.

    To accomplish this, you could make these changes to your code.

    In the CSS section, change:

    	<style>
     .wcustomhtml { overflow: visible !important; }
     .dropbtn {
      background-color: #a1a1a1;
      color: white;
      min-width: 250px;
      padding: 16px;
      font-size: 16px;
      border: none;
     }
     .dropdown {
      position: relative;
      display: inline-block;
     }
     .dropdown-content {
      position: absolute;
      background-color: #f1f1f1;
      min-width: 250px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }
     .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
     }
     .dropdown-content a:hover {background-color: #ddd;}
    	 .hide { display: none; }
    	</style>
    	

    Add a JS section with this:

    	<script>
    function init() {
      const sel = document.querySelectorAll('.dropbtn');
      for ( let el of sel) {
        el.addEventListener('click',
           function () { el.nextElementSibling.classList.toggle('hide'); } );
      }
    } init();
    </script>
    	

     Un-tested on phone:
     Might also be able to combine CSS with separate 'media' setups

    Another un-tested attempt would be able to use the CSS above
    but add in the original :hover logic for the button as well
    but it might be confusing to the user when the display occurs
    both on hover and click (with possible conflicts due to simultanous displays)
    Add the following CSS back into the block to see resulting actions

    	 .dropdown:hover .dropdown-content {display: block;}
     .dropdown:hover .dropbtn {background-color: a1a1c1;}
    	

    I don't like this, but if it fulfills your needs then feel free to experiment further.

     

    Final version incorporating code for each of the suggestions above.
    Current setup below is for clicking the top buttons to hide/show rather than hover actions.

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <!-- From: http://w3schools.invisionzone.com/topic/58819-weebly-dropdown-need-help-with-code/ -->
    <title> HTML5 Test Page </title>
    	<style>
     .wcustomhtml { overflow: visible !important; }
     .dropbtn {
      background-color: #a1a1a1;
      color: white;
      min-width: 250px;
      padding: 16px;
      font-size: 16px;
      border: none;
     }
     .dropdown {
      position: relative;
      display: inline-block;
     }
     .dropdown-content {
      position: absolute;
      background-color: #f1f1f1;
      min-width: 250px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
     }
     .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
     }
     .dropdown-content a:hover {background-color: #ddd;}
    	 .hide { display: none; } /* used in new version with JS */
    	/* original version without JS
     .dropdown:hover .dropdown-content {display: block;}
     .dropdown:hover .dropbtn {background-color: a1a1c1;}
    /* */
    /*
     Might be able to use both hover and click functions
     by leaving original CSS in and adding new JS version code.
    	 Un-tested:
     Might also be able to combine with separate 'media' setups
    */
    </style>
    	</head>
    <body>
    <div class="dropdown">
     <button class="dropbtn">Photo Galleries 1</button>
     <div class="dropdown-content hide">
      <a href="http://marleys2019.weebly.com/new-truck.html">Truck Fitout</a>
      <a href="http://marleys2019.weebly.com/2009-christmas.html">09 Xmas Party</a>
      <a href="http://marleys2019.weebly.com/40-years.html">40Yrs Surprise</a>
      <a href="http://marleys2019.weebly.com/hope-valley-opening.html">Hope Valley Opening</a>
     </div>
    </div>
    	<div class="dropdown">
     <button class="dropbtn">Photo Galleries 2</button>
     <div class="dropdown-content hide">
      <a href="http://marleys2019.weebly.com/new-truck.html">Truck Fitout</a>
      <a href="http://marleys2019.weebly.com/2009-christmas.html">09 Xmas Party</a>
      <a href="http://marleys2019.weebly.com/40-years.html">40Yrs Surprise</a>
      <a href="http://marleys2019.weebly.com/hope-valley-opening.html">Hope Valley Opening</a>
     </div>
    </div>
    	<script>
    function init() {
      const sel = document.querySelectorAll('.dropbtn');
      for ( let el of sel) {
        el.addEventListener('click',
           function () { el.nextElementSibling.classList.toggle('hide'); } );
      }
    } init();
    </script>
    	</body>
    </html>
    	

     

    • Thanks 1
  16. Kind of hard to tell what you are doing wrong when you provide only a portion of the overall code.

    Here are two different accordion menus.  The first allows multiple frames to be open at one time.
    The second does more of what you want by opening only one frame at a time.

    The code is mostly CSS driven.  I modified the code with one JS function because I wanted the single frame version to be closed after it was open, but if you dont' care then you can remove the JS (and associated DIV modification) code and it will work just fine.  See the reference to the original code versions.

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Accordion Displays </title>
    	<!-- Modified From: https://codepen.io/raubaca/pen/PZzpVe -->
    <style>
     body {
      color: #2c3e50;
      background: #ecf0f1;
     }
     h1 { text-align: center; }
     .half {
      float: left;
      width: 45%;
      padding: 0 1em;
     }
    	/* Acordeon styles */
     .tab {
      position: relative;
      margin-bottom: 1px;
      width: 100%;
      color: #fff;
      overflow: hidden;
     }
     input {
      position: absolute;
      opacity: 0;
      z-index: -1;
     }
     label {
      position: relative;
      display: block;
      padding: 0 0 0 1em;
      background: #16a085;
      font-weight: bold;
      line-height: 3;
      cursor: pointer;
     }
     .blue label { background: #2980b9; }
     .tab-content {
      max-height: 0;
      overflow: hidden;
      background: #1abc9c;
      -webkit-transition: max-height .35s;
      -o-transition: max-height .35s;
      transition: max-height .35s;
     }
     .blue .tab-content { background: #3498db; }
     .tab-content p { margin: 1em; }
    	/* :checked */
     input:checked ~ .tab-content { max-height: 10em; }
    	/* Icon */
     label::after {
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 3em;
      height: 3em;
      line-height: 3;
      text-align: center;
      -webkit-transition: all .35s;
      -o-transition: all .35s;
      transition: all .35s;
     }
     input[type=checkbox] + label::after { content: "+"; }
     input[type=radio] + label::after { content: "\25BC"; }
     input[type=checkbox]:checked + label::after { transform: rotate(315deg); }
     input[type=radio]:checked + label::after { transform: rotateX(180deg); }
    </style>
    	</head>
    <body>
    <div class="wrapper">
      <h1>Pure CSS Accordion</h1>
     
      <div class="half">
        <p>Open <strong>multiple</strong></p>
        <div class="tab">
          <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Label One</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
    	    <div class="tab">
          <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">Label Two</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
    	    <div class="tab">
          <input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">Label Three</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
      </div>
     
      <div class="half">
        <p>Open <strong>one</strong></p>
        <div class="tab blue">
          <input id="tab-four" type="radio" name="tabs2"> <label for="tab-four">Label One</label>
    <!--      <div class="tab-content"> -->
          <div class="tab-content" onclick="radioReset('tab-four')">  <!-- NOTE: special collapse of display -->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
    	    <div class="tab blue">
          <input id="tab-five" type="radio" name="tabs2"> <label for="tab-five">Label Two</label>
    <!--      <div class="tab-content"> -->
          <div class="tab-content" onclick="radioReset('tab-five')">  <!-- NOTE: special collapse of display -->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
    	    <div class="tab blue">
          <input id="tab-six" type="radio" name="tabs2"> <label for="tab-six">Label Three</label>
    <!--      <div class="tab-content">  -->
          <div class="tab-content" onclick="radioReset('tab-six')">  <!-- NOTE: special collapse of display -->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Tenetur, architecto, explicabo perferendis nostrum,
               maxime impedit atque odit sunt pariatur illo obcaecati soluta
               molestias iure facere dolorum adipisci eum? Saepe, itaque.
            </p>
          </div>
        </div>
    	  </div>
    	</div>
    	<script>
    // JS not used!!! (except for special case).
    function radioReset(info) {  // alert('info.checked: '+info.checked);  info.checked = false;
      document.getElementById(info).checked = false;  // special to collapse div
    }
    </script>
    	</body>
    </html>
    	

    Good Luck!

    :)

  17. Not sure I am understanding the question.

    The program appears to be doing exactly what you want. 

    There are random quotes displayed in a panel below the button to be clicked.  Appears to change when clicked.

    What actions do you want to be different?

     

×
×
  • Create New...