Jump to content

JMRKER

Members
 View Profile  See their activity

  • Posts

    194

  • Joined

  • Last visited

  • Days Won

    5

 Content Type 

Posts posted by JMRKER

    Showing / hiding a different set of fields depending on selection from a dropdown

    in JavaScript

    Posted

    On 11/17/2021 at 12:42 PM, Ingolme said:

    What you need to do is hide all of the fields except for the one that you want visible. To be able to loop through all of the fields it would be good to give them a class name.

    I recommend keeping the Javascript separated from the HTML by removing the onchange attributes and using Javascript's addEventListener() method.

    This updated HTML structure will help:

    ...

     

    Except for a couple of typos:
    change 'window.addEventListenr("DOMContentLoaded", function() {' to 'window.addEventListener("DOMContentLoaded", function() {'

    and '"Website_" : "websiteOption" to "Website_" : "webOption"

     

    How to change Home Page

    in HTML/XHTML

    Posted

    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.

     

    Adding Filter buttons to a table

    in HTML/XHTML

    Posted · Edited by JMRKER
    Added example

    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>

     

    How to replace text

    in CSS

    Posted

    On 3/25/2021 at 10:56 AM, newcoder1010 said:

    Hello, 

    
<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="All" selected="selected">- Any -</option><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>

    How to replace the first option "--Any --" by "-- type --"?

    Thank you!

    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>

     

    Processing multiple selects

    in JavaScript

    Posted

    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>

     

    How to change the CSS?

    in CSS

    Posted

    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?

    HTML > CSS

    in CSS

    Posted

    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.

     

    How to Run a Method Stored In a Variable

    in JavaScript

    Posted · Edited by JMRKER

    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.

    How to center a list

    in HTML/XHTML

    Posted

    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>

     

×
×
  • Create New...