Jump to content

JMRKER

Members
  • Posts

    193
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by JMRKER

  1. I am unaware of the editor program you seem to be using. I use a regular text editor to create the HTML file. I test the file contents with any browser. I run the scripts on my local computer before I put them "live" on the internet. You might be best advised to follow one of the many tutorials that create HTML/CSS/JS programs found on the web.
  2. Create a new "temporary" home page to practice. When it all looks good to you, copy contents to index.htm and it will replace live version.
  3. JMRKER

    w3.css

    Several questions: 1. What site? 2. Which tag? 3. Guide about what? Any code available?
  4. Does it need to be a "real" table or something that looks like a table? What would the contents of the rows (?) look like? <!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> Filtered Displays </title> <!-- From: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements --> <style> .filterDiv { background-color: #2196F3; color: #ffffff; width: 300px; line-height: 25px; text-align: center; margin: 2px; display: none; } .show { display: block; } .container { margin-top: 20px; overflow: hidden; } /* Style the buttons */ .btn { border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer; } .btn:hover { background-color: #ddd; } .btn.active { background-color: #666; color: white; } </style> <body> <h2>Filter DIV Elements</h2> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('cars')"> Cars</button> <button class="btn" onclick="filterSelection('animals')"> Animals</button> <button class="btn" onclick="filterSelection('fruits')"> Fruits</button> <button class="btn" onclick="filterSelection('colors')"> Colors</button> </div> <div class="container"> <div class="filterDiv cars">BMW</div> <div class="filterDiv colors fruits">Orange</div> <div class="filterDiv cars">Volvo</div> <div class="filterDiv colors">Red</div> <div class="filterDiv cars animals">Mustang</div> <div class="filterDiv colors">Blue</div> <div class="filterDiv animals">Cat</div> <div class="filterDiv animals">Dog</div> <div class="filterDiv fruits">Melon</div> <div class="filterDiv fruits animals">Kiwi</div> <div class="filterDiv fruits">Banana</div> <div class="filterDiv fruits">Lemon</div> <div class="filterDiv animals">Cow</div> </div> <script> filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("filterDiv"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html>
  5. Without anymore information given <select data-drupal-selector="edit-field-property-type-value" class="form-select form-control" id="edit-field-property-type-value" name="field_property_type_value"> <option value="Apartment">Apartment</option> <option value="Duplex">Multi-Stories Home</option> <option value="Single Home">Single Home</option> <option value="Town Home">Town Home</option> </select>
  6. Have you found/looked at https://www.w3schools.com/w3css/defaulT.asp ?
  7. <a href='https://w3schools.invisionzone.com/topic/62700-how-to-combine-two-attributes/' title='Link to this question'> W3Schools </a>
  8. See if you can modify this to your needs: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- From: https://w3schools.invisionzone.com/topic/62669-processing-multiple-selects/ --> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/dunes.css" media="screen" /> </head> <body onload="ShowAdvancedQueryWindow()"> <div id="mainBody" > </div> <script type="text/javascript"> function DoCustomSearch(){ var values = []; n = document.getElementById("fieldNames"); for (let i=0; i<n.options.length; i++) { if (n[i].selected) { values.push(n[i].value || n[i].text); } } alert("selected fieldNames are\n"+values.join('\n')); } function ShowAdvancedQueryWindow(){ var s = "<select id='fieldNames' name='fieldNames' size='10' multiple >"; s += "<option value='recNo'>Record Number</option>"; s += "<option value='oName'>Listing Name</option>"; s += "<option value='stNumber'>Street Number</option>"; s += "<option value='stName'>Street Name</option>"; s += "<option value='telno'>Telephone number</option>"; s += "<option value='email'>email</option>"; s += "<option value='showTel'>Show Telno</option>"; s += "<option value='showEmail'>Show email</option>"; s += "<option value='blastEmail'>BlastEmail</option>"; s += "<option value='password'>Password</option>"; s += "</select>" s += "<button type=button onclick='DoCustomSearch()'>Do Search</button>"; document.getElementById('mainBody').innerHTML = s; } </script> </body> </html>
  9. I don't know about the rest of the members, but I'm not much of a mind reader. Even if you are a beginner, we still need to see some code that you are referencing. What code are you trying to remove and what are you trying to change?
  10. This is got to be the most confusing set of questions/responses I have ever seen on this forum.
  11. Why not design the login so that when the user enters the correct information, they are directed to the secured site?
  12. Show what you have attempted so far. Best way to get help is to make an attempt. BTW, welcome to the forums. :)
  13. Difficult to comment on code that cannot be seen. How does your code modifications differ from working "Page Link"? Where are you adding the 2nd & 3rd menus? BTW, welcome to the forums.
  14. Assuming you mean horizontal space (not vertical) add this to the .next CSS information margin-left: 5em;
  15. I don't see the problem. It appears to be working correctly. Add an alert(text) at the end to see results. What do you expect to see differently?
  16. What is the question? What do you want it to do? What is the "previous date" referring to in the title of your question? What browser are you using?
  17. JMRKER

    HTML > CSS

    I don't think you have given enough information to help. You show the errors, mostly on 3 lines of your code, but you don't show the code we could comment upon. What do you mean by responsive table? Show fewer rows when resized? Where is break point determined? Have you considered using a flexbox or grid layout yet instead of a table for the responsive layout? Are the cells only images or do they also contain text? BTW, welcome to the forums.
  18. I not sure why you would want to do this 🤔, but this might meet your needs. [code] <script> var x = 'String to be changed.'; // initialize variable const m = new Map(); m.set('uc',x.toUpperCase()); m.set('lc',x.toLowerCase()); var str = x+'\n'+m.get('uc')+'\n'+m.get('lc'); alert(str); // Change variable contents x = 'Some new string'; alert(x+'\n'+m.get('uc')+'\n'+m.get('lc')); </script> [/code] It uses the Map() function to create objects to manipulate your variable. BTW, welcome to the forums.
  19. What does your code look like? This works as expected for me. <!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> Test Page </title> <!-- From: https://w3schools.invisionzone.com/topic/62126-how-to-center-a-list/ --> <style> ul { text-align: center; } </style> </head><body> <ul> <li> Coffee </li> <li> Tea </li> <li> Milk </li> </ul> </body></html>
  20. Your question is unclear to me. Can you indicate where the "checked numbers" are that won't display? What line(s)?
  21. Another site solved my query. See: https://www.webdeveloper.com/d/391499-vertical-gap-between-div-vs-pre-using-css-grid-why Turns out I needed to override a default setting I had no idea existed. Add to <style> section the following: .grid pre { margin: 0; }
  22. The only intended difference between the grid displays in the following are the use of DIV versus PRE tags. I don't understand why there is a large vertical gap between the displays. Not a major problem, just would like to know why the difference or where it is coming from. <!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>css Simple Grid compare</title> <!-- From: https://medium.com/better-programming/make-a-responsive-grid-with-only-3-lines-of-css-5e2f3837ccc see also: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ see also: https://gridbyexample.com/examples/example37/ see also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout --> <style> .grid { display: grid; /* auto-fill is the same */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 4px; } .Ditem { border: 1px solid blue; } .Pitem { border: 1px solid blue; white-space: pre-wrap; } </style> </head><body> <h2>Grid - DIV</h2> <div class="grid"> <div class="Ditem">Product 1 <br> This contains a longer number of words within the item. </div> <div class="Ditem">Product 2</div> <div class="Ditem">Product 3</div> <div class="Ditem">Product 4</div> <div class="Ditem">Product 5</div> <div class="Ditem">Product 6</div> <div class="Ditem">Product 7 - no vertical gap!</div> </div> <h2>Grid - PRE</h2> <div class="grid"> <pre class="Pitem">Product A <br> This contains a longer number of words within the item. </pre> <pre class="Pitem">Product B</pre> <pre class="Pitem">Product C</pre> <pre class="Pitem">Product D</pre> <pre class="Ditem">Product E</pre> <pre class="Ditem">Product F</pre> <pre class="Pitem">Product G - why such a large vertical gap?</pre> </div> </body></html>
×
×
  • Create New...