Jump to content

JMRKER

Members
  • Posts

    194
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by JMRKER

  1. You have so many DIVs, so the question becomes:  Which 2 DIVs are you trying to place side-by-side.
    Difficult to tell from your zipped code.

    Then the question becomes: Why are you doing it that way?
    It would be much easier to use a Flexbox or Grid layout
    which can be made responsive very easily with CSS media settings.

     

  2. 2 hours ago, dsonesuk said:

    You will have problem with date values less than 10, see first example for fix

     

    Which post has the problem?  I don't see it with my last suggested code. (Works OK using FF on 2020/7/3)

  3. Try this:

    <!DOCTYPE html><html lang="en"><head><title> Test Page </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
    <style>
     #Peanuts { font-size: 2em; }
    </style>
    </head>
    <body>
    <a id="Peanuts" href="" target='_blank'>Todays's Peanut Strip</a>
    <script>
    function init() {
      var tday = new Date();
      var link = 'https://www.gocomics.com/peanuts/'
               + tday.getFullYear()+'/'+(tday.getMonth()+1)+'/'+tday.getDate();
      document.getElementById('Peanuts').href = link;
    } init();
    </script>
    </body>
    </html>

     

    • Like 1
  4. 22 hours ago, Antioch Tech said:

    Thank you for the attempt, but this does not do what I need.  I need the link today to point to today's strip.  Tomorrow the link will point to tomorrow's strip.  Each day the link would point to the strip for that day.  Not  a list of dates to choose from, but the strip for today's date.

    How many days are to be included into the past?

    Would be difficult to point to tomorrow's strip until that day has been posted.

  5. Here's a start.  I would recommend making the drop-down a dynamic list for the last 30 (?) days
    from the current date using the Date() object.

        <select id='Peanuts'>
          <option value=""> Select </option>
          <option value="Choose date"> Choose date </option>
          <option value="2020/06/30"> 2020/06/30 </option>
          <option value="2020/06/29"> 2020/06/29 </option>
          <option value="2020/06/28"> 2020/06/28 </option>
          <option value="2020/06/27"> 2020/06/27 </option>
          <option value="2020/06/26"> 2020/06/26 </option>
        </select>  
        <script>
        console.clear();
        function Cartoon() {
          document.location.href
           = `https://www.gocomics.com/peanuts/${document.getElementById('Peanuts').value}`;
        }
        function init() {
          document.getElementById('Peanuts').addEventListener('change', Cartoon ) 
        } init();
        </script>

     

  6. 18 hours ago, vmars316 said:

    Ah...What a relief , Thank You Very Much :)

    Doesn't make much sense to me.

    If you continue to hold the '1' key down (a long time),
    it jumps to a second line and then continues behind the right table display
    until it come out on the far right.  Then both tables shift to the right.

    But if it fulfills your design desires, so be it.

  7. 1 hour ago, vmars316 said:

    @vmars316 If you mean hold down the key constantly for the whole time, then what you see is exactly what should happen.
    If you put only 1 space in that long line, the table will go back to its' normal size.  If you want a line of unbroken letters that long
    you will need to redesign your table displays.

    Something to consider would be to limit the line length input so that input could not extend past the original table size.

    Or keep your long lines (if that is truly necessary) but look into the CSS element control of overflow: hidden

    Or possibly add a CSS scroll function to your table display.

    Personally, I never enter a line of 1's that long unless I have fallen asleep at the keyboard. :)

     

     

    • Confused 1
  8. I know nothing about PHP, but since you say you have solved the 1st part of your question with it,
    why not just go with it and create a 'grouped' drop-down selection list.  For example:

    <!DOCTYPE html><html lang="en"><head><title> Test Page </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <!-- https://w3schools.invisionzone.com/topic/61714-how-keep-selected-value-in-dropdown/ -->
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
    </head><body>
    
    <form name="passa" id="passa" >
    
    <select class=''>
     <option value="">Choose</option>
     <optgroup label="Volvo">
      <option value="V70"> V70 </option>
      <option value="XC60"> XC60 </option>
      <option value="XC90"> XC90 </option>
     </optgroup>
     <optgroup label="Volkswagen">
      <option value="Golf"> Golf </option>
      <option value="Polo"> Polo </option>
      <option value="Scirocco"> Scirocco </option>
      <option value="Touareg"> Touareg </option>
     </optgroup>
     <optgroup label="BMW">
      <option value="M6"> M6 </option>
      <option value="X5"> X5 </option>
      <option value="Z3"> Z3 </option>
     </optgroup>
    </select>
    
    <input type="submit" name="azione"   id="azione"  value="Submit">
    </form> 
    
    </body></html>

    Easier to maintain than separate lists to match each car group.

    Note: Not tested with your specific PHP code.

     

  9. Replies may be scarce because we don't understand the request.

    Are you trying to parse the first selections into a second dropdown list?
    Are you trying to save the 1st and 2nd selections to a local server using the PHP somehow?
    Are you trying to retrieve the previous selections of a session on a session on a later day?

    Count me confused.

     

  10. Playing around with your layout using a 'grid' display.  (Just for fun and my own learning/practice) :)
    It does not currently have a 'hamburger' icon changes, but you could see how it could be added easily.

    I removed all of the 'w3-css' stuff and put in some sample commands with colors.
    Should be much smaller and faster to load.  Color backgrounds inserted for design layout only.
    The color stuff along with changes for font-size and font-families are an easy modification.


    Let me know your thoughts.  If interested in continuing, I'll look into the 'hamburger' requirements.
    Feel free to totally ignore the suggested layout, but it should be much easier to maintain.

    <!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> Flex Menu </title>
    <!-- For: https://w3schools.invisionzone.com/topic/61593-from-buttons-with-text-to-burger/ -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
     .container { border: 1px solid black; }
     .containerTop {
        display:grid;
        grid-template-columns:1fr 4fr; 
     }
     .containerMiddle {
        display:grid;
        grid-template-columns:1fr; 
        background-color: #ccc;
     }
     .containerBottom {
        display:grid;
        grid-template-columns:1fr; 
        background-color: cyan;
     }
     hr { margin: 0 2%; font-weight: bold; }
     ul {
        list-style-type: none; cursor: pointer;
        margin: 0.25em 0.25em; padding: 0.25em 0.25em;
     }
     li { display: inline-block; font-size: 1.5em; }  /* default is vertical display */
    
     #logo {
        min-height: 5em; min-width: 250px;
        background-color: yellow;
     }
     #nav1 {
        min-height: 5em; text-align: right;
        background-color: tan;
     }
     #nav1 a:hover { background: lime; }
     #main { height: 20em; }
     footer { text-align: center; font-size: 1.2em; }
    
    /* adjust widths as needed */
     @media (max-width:40em) {
        .containerTop { grid-template-columns:1fr 3fr; }
     }
     @media (max-width:20em) {
        .containerTop { grid-template-columns:1fr 1fr; }
        li { display: block; }  /* default is vertical display */
     }
    /* */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="containerTop">
       <div id="logo">
         <img id="logo" src="img/logo_w_250.png" alt="Logo 250px wide"></img>
       </div>
       <div id="nav1">
         <ul> 
           <li> <a href="home"><span id="icon" class="fa fa-home"></span> Home</a> </li>
           <li> <a href="products"><span id="icon" class="fa fa-bolt"></span> Products</a> </li>
           <li> <a href="downloads"><span id="icon" class="fa fa-download"></span> Downloads</a> </li>
           <li> <a href="signin><span id="icon" class="fa fa-sign-in"></span> Sign in</a> </li>
           <li> <a href="contact"><span id="icon" class="fa fa-envelope"></span> Contact</a> </li>
         </ul>
       </div>
     </div>
    
     <div class="containerMiddle">
       <hr>
       <div id="main">
         <h1> Hello World! </h1>
       </div>
     </div>
    
     <div class="containerBottom">
       <hr>
       <footer>
         <h6>© 2020 Testing-testing Systems</h6>
       </footer>
      </div>
    </div>
    </body>
    </html>

     

  11. Hello and welcome to the forums.

    I have corrected some of your code to address items #1 and #4 above. 
    The changes are primarily in the <style> section which can be linked to an external file if desired

    I think the dependence on the w3- css is a major part of your problem
    as it contains LOTS of commands that may override many of the settings you wish to change.

    I haven't figured out the problem #2, but I suspect it has something to do the with width settings
    when the hamburger menu is to be executed.  I gave up because I got tired of looking at the w3-css interactions.

    My personal suggestion would be to look into a 'grid' or 'flex' presentation and replace a majority of the w3-stuff.
    If you combine it with some css 'media' settings for when the changes occur, it might be able to solve the #3 problem.

    Here is what I have changed so far... (I also changed your indentation as it was too wide for me to follow easily)
    Look at the differences from your code to see where the effects are implemented.

    <!DOCTYPE html><html lang="en"><head>
    <title> Test Page </title>
    <title>Testing-testing</title>
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    
    <!-- For: https://w3schools.invisionzone.com/topic/61593-from-buttons-with-text-to-burger/ -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="css/styles3.css">
    </head>
    
    <style>
     #logo { padding-bottom: 3px;; }
     #topImage { max-width:980px; }
     #nav1 { max-width:944px; }
     #nav1 a:hover { background-color: yellow; }
     #nav2 { max-width:500px; }
     #behind { margin:100px; }
     footer { max-width:944px; }
     .w3-button:hover { color: magenta !important; background-color:yellow !important; }
    </style>
    
    <!-- BACKGROUND -->
    <body class="w3-content w3-dark-grey" >
    
    <!-- HOLDER -->
    <div class="w3-black" style="max-width: 1024px">
    
    <!-- NAVIGATION -->
      <div class="w3-top">
    
    <!-- TOP IMAGE -->
        <div class="w3-display-container">
          <img id="topImage" src="img/bg_header1536_3_2.jpg" alt="Header image">
        </div> 
    <!-- BAR -->
        <nav class="w3-container">
          <div class="w3-bar w3-border-bottom" style="max-width:944px">
            <img id="logo" src="img/logo_w_250.png" alt="Logo 250px wide"></img>
          <span>
            <div id="nav1" class="w3-right"> 
              <a href="home" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-home"></span> Home</a>
              <a href="products" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-bolt"></span> Products</a>
              <a href="downloads" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-download"></span> Downloads</a>
              <a href="signin" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-sign-in"></span> Sign in</a>
              <a href="contact" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-envelope"></span> Contact</a>
            </div>
    
    <!--    <div id="nav2" class="w3-right"> 
              <a href="home" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-home"></span> </a>
              <a href="products" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-bolt"></span> </a>
              <a href="downloads" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-download"></span> </a>
              <a href="signin" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-sign-in"></span> </a>
              <a href="contact" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-envelope"></span> </a> 
            </div>
    -->   
    <!-- BURGER -->
            <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-medium w3-hide-large" onclick="myFunction()"></a>
          </span>
        </div>
        <div id="burger" class="w3-bar-block w3-black w3-right w3-hide w3-hide-large">
          <a href="home" class="w3-bar-item w3-dark-grey w3-button">Home</a>  
          <a href="products" class="w3-bar-item w3-dark-grey w3-button">Products</a>
          <a href="downloads" class="w3-bar-item w3-dark-grey w3-button">Downloads</a>
          <a href="signin" class="w3-bar-item w3-dark-grey w3-button">Sign in</a>
          <a href="contact" class="w3-bar-item w3-dark-grey w3-button">Contact</a>
        </div>
        </nav>
      </div>    
            
    <!-- EMPTY BAR BEHIND NAVIGATION -->
      <div id="behind" class="w3-bar">
      </div>
               
    <!-- SECTION 1 -->
      <div class="section">
        <div class="w3-container">
          <h1>Hello World!</h1>
        </div>
      </div>
    
    <!-- FOOTER -->
     <footer class="w3-margin w3-center w3-border-top">
       <h6>© 2020 Testing-testing Systems</h6>
     </footer>
    </div>
    
    <!--
    <script>
      function myFunction() {
        var x = document.getElementById("nav2");
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else { 
          x.className = x.className.replace("w3-show", "");
        }
      }
    </script>
    -->    
    <script>
      function myFunction() {
        var x = document.getElementById("burger");
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else { 
          x.className = x.className.replace("w3-show", "");
        }
      }
    </script>
    
    </body>
    </html>

     

  12. Here's something you might be able to modify to your specific needs:

    <!DOCTYPE html><html lang="en"><head><title> Ian's Converter </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    <!-- From: https://w3schools.invisionzone.com/topic/61432-quantity-converter-problem/ -->
    
    <style>
     .container {
       display: grid;
       grid-template-columns: auto auto;
       padding: 10px;
       width: 30em;
     }
     .item { border: 1px solid rgba(0, 0, 0, 0.8); }
    
     body { background-color: lightBlue; }
     h1 {
       font-size: 50px;
       text-align: center;
     }
     h2 { font-size: 30px; }
    
     fieldset { width: 30em; }
     #calculate { font-size: 25px; }
     button, label { cursor: pointer; }
     textarea { height: 10em; width: 40em; }
    </head><body>
    </style>
    
    <h1> Ian's Quantity Converter </h1>
    
    <h2> People to Serve </h2>
     <div class="container">
       <div class="item"> <div><input id="orginal" value="2" size="4" placeholder="Ingredient">
                               <label for="original"> Orginal No. of People </label></div>
       </div>
       <div class="item"> <div><input id="current" value="4" size="4">
                               <label for="current"> Current No. of People </label></div>
       </div>
     </div>
     <br>
    
    <fieldset><legend> Ingredients and Quantity </legend>
     <div id="stuff" class="container">
      <input class="item" value="" value="" size="30" placeholder="Ingredient"> 
      <input class="item" value="" value="" size="5" placeholder="Quantity"> 
     </div>
    
     <p> <button id="addStuff"> Add Stuff </button>
    </fieldset>
    
    <p> <button id="calculate"> Calculate Amounts </button>
    
    <h2> Results </h2>
    <textarea id="results" readonly></textarea>
    
    <script>
    (function (d) {
      console.clear();
    
      function calculateResult() {
        d.getElementById('results').value 
          = `${'Ingredients'.padEnd(40,' ')} : Quantity\n`;
    
        var sel = d.querySelectorAll('#stuff input'),
            serving, actualServing;
        for (let i=0; i<sel.length; i=i+2) {
          serving = sel[i+1].value / orginal.value
          actualServing = serving * current.value
        
          d.getElementById('results').value 
            += `${sel[i].value.padEnd(40,' ')} : ${actualServing}\n`;
        }
      }
    
      function addElement(tagName, elClass='', idName='', info='', parent=document.body) {
        var tag = d.createElement(tagName);
        var txt = d.createTextNode(info);
        tag.appendChild(txt);
        if (idName != '') { tag.setAttribute('id', idName); }
        if (elClass != '') { tag.setAttribute('class', elClass); }
        parent.appendChild(tag);
        return tag;
      }
    
    /* addInput(
                tagType='text|button|checkbox|radio',
                idName='|ID|name', 
                info='',
                parent=document.body
                action=null|function
               )
    */
    
      function addInput(tagType='text', elClass='', idName='', info='', parent=document.body, action=null) {
        var tag = d.createElement('input');
        tag.setAttribute('type', tagType);
        if (tagType == 'radio') { tag.setAttribute("name", idName); }
                           else { tag.setAttribute("id", idName); }
        tag.setAttribute('placeholder', info);
        tag.setAttribute('value', '');
        if (elClass != '') { tag.setAttribute('class', elClass); }
        if (typeof action == 'function') 
          tag.addEventListener('click', action); // element function when clicked
        parent.appendChild(tag);
        return tag;
      }
    
      function btnClear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
    
      var addStuff = function() {
    //              tag,  class,id,info,parent [,action]
        addInput('input','item','','Ingredient',d.getElementById('stuff'));
        addInput('input','item','','Quantity',d.getElementById('stuff'));
      }
      d.getElementById('addStuff').addEventListener('click', addStuff);
    
      d.getElementById('calculate').addEventListener('click', calculateResult);
    
    })(document)
    </script>
    
    </body></html>
    

    Possible modifications if desired:
    1. Remove line of "Ingredients | Quantity" if added in error or just clear contents of last entry
    2. Skip "Results" display line if "Ingredient" is blank
    3. Change "Results" display to a <OL> list display
    4. Alter "Quantity" values to limit to 2 or less decimals if math converts to weird fraction.

    Good Luck!

    BTW, welcome to the forums. :)

     

  13. OK.

     <script>
    let x = [
      ['a','b','c'],
      ['d','e','f'],
      ['g','h','i']
    ];
    
    console.clear();
    console.log('Original: ',JSON.stringify(x));
    
    var str = '';
    for (var i=0; i<x.length; i++) { str += x[i].join('')+' '; }
    console.log(str);
    
    </script> 

     

  14. Another approach if the browsers you want to use can handle it:

    <script>
    let x = [
      ['a','b','c'],
      ['d','e','f'],
      ['g','h','i']
    ];

    console.clear();
    console.log('Original: ',JSON.stringify(x));

    var xx = x.join(',');
    console.log('String: ', xx);

    console.log('Stringify: ', ...JSON.stringify(xx));

    </script>

     

×
×
  • Create New...