Jump to content

JMRKER

Members
  • Content Count

    143
  • Joined

  • Last visited

  • Days Won

    5

Everything 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. You're most welcome. Happy to help. Good Luck! BTW, welcome to the forums.
  3. You can use Shift-Enter to create a 2nd line within the paragraph area.
  4. Which post has the problem? I don't see it with my last suggested code. (Works OK using FF on 2020/7/3)
  5. Use the link to your common CSS style sheet: <link rel="stylesheet" href="common.css" media="screen"> BTW, welcome to the forums.
  6. 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>
  7. 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.
  8. 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>
  9. 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.
  10. Disable the element (button) in the submission portion of your code. Button will not be re-enabled until the page is reloaded after processing of the form.
  11. 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.
  12. What does your changed code look like? Just the modified versions.
  13. Do you have some sample code of your HTML to view?
  14. Where is the problem of "stretch on into infinity" occuring? You only have single #'s within the cells using the <p> tags (which wrap fine without the CSS overflow-wrap: break-word; code What does the desired output look like?
  15. 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.
  16. Welcome to the forum. You will not be able to accomplish what you want with JS alone. It provides local information only. You will need access to a server to save and retrieve the counts you desire.
  17. 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>
  18. 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>
  19. Do you have some example code or display of what you are trying to do? "To the right.." of what? Contents of data list as a list?
  20. 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.
  21. 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>
  22. 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>
  23. One line change in the CSS section .content { padding: 0 18px; display: block; /* changed from none; */ overflow: hidden; background-color: #f1f1f1; }
  24. JMRKER

    arrow to go to next page

    Show some of you code attempts. Much easier to discuss what you have done than what we can guess you might have done.
×
×
  • Create New...