Alana

November 26, 2018

Thank you very much!

November 26, 2018

Hello!

I am looking for some assistance with my drop down panel.

When I try to add "<div id="panel"></div> to the "select to filter by type section", it does not toggle the panel at all.

Can you tell me what I am doing incorrectly?

http://jsfiddle.net/AlanaVibes/xNj9z/92/#&togetherjs=ROVpoPMv4L

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
    $( "input" ).checkboxradio();
} );
</script>

</head>
<body>
<div class="widget">
<h1>Our Manufacturers</h1>

<fieldset>
    <legend>Select a Territory: </legend>
    <label for="radio-1">All</label>
    <input type="radio" name="radio-1" id="radio-1">
    <label for="radio-2">North Texas</label>
    <input type="radio" name="radio-1" id="radio-2">
    <label for="radio-3">Oklahoma</label>
    <input type="radio" name="radio-1" id="radio-3">
    <label for="radio-4">Arkansas</label>
    <input type="radio" name="radio-1" id="radio-4">
</fieldset>

<script>
&(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

<style>
#panel, #flip {
    padding: 5px;
    text-align: left;
    background-color: white;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
<div id="flip"> <h2>Type of Material</h2></div>
<fieldset>

    <legend> Select to filter by Type </legend>
    <label for="checkbox-1">Wire & Cable</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="checkbox-2">Wire & Cable Accessories</label>
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
    <label for="checkbox-3">Conduit & Fittings</label>
    <input type="checkbox" name="checkbox-3" id="checkbox-3">
    <label for="checkbox-4">Wiring Devices</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-4">
    <label for="checkbox-5">Enclosures & Wireway</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-5">
    <label for="checkbox-6">Lighting</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-6">
    <label for="checkbox-7">Fuses</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-7">
    <label for="checkbox-8">Tools & Fasteners</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-8">
    <label for="checkbox-9">Motor Control</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-9">
    <label for="checkbox-10">Specialty</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-10">
    </fieldset>
</div>

</body>
</html>

November 19, 2018

How do I change the formatting of the drop down tab? I need each category to be shorter and stack nicer.

http://03f7e3d.netsolhost.com/wordpress1/manufacturers/

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background-color: #ffffff;
        padding: 14px;
        font-family: Garamond;
      }

/* Center website */

      .main {
        width: 1000px;
        margin: auto;
      }

      h1 {
        font-size: 40px;
        word-break: break-all;
      }

      .row {
        margin: 40px;
      }

/* Add padding BETWEEN each column */

      .row,
      .row>.column {
        padding: 16px;
      }

/* Create 5 equal columns that floats next to each other */

      .column {
        float: left;
        width: 20%;
        display: none;
      }

/* Clear floats after rows */

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

/* Content */

      .content {
        background-color: white;
        padding: 14px;
        width: 180px;
        height: 75px;
      }

/* The "show" class is added to the filtered elements */

      .show {
        display: block;
      }

/* Style the buttons */

      .btn {
        border: none;
        outline: none;
        padding: 4px;
        background-color: #ebebee;
        color: black;
        cursor: pointer;
        font-family: :times, sans-serif;
      }

      .btn:hover {
        background-color: #c6c6c6;
      }

      .btn.active {
        background-color: #848484;
        color: white;
      }

</style>
</head>

<body>

<div class="Main">

      <CENTER>
        <h1>Our Manufacturers</h1>
      </CENTER>
      <hr>

      <div id="myBtnContainer">
        <button class="btn active" onclick="filterSelection('ALL')">All</button>
        <button class="btn" onclick="filterSelection('NTX')"> North Texas</button>
        <button class="btn" onclick="filterSelection('OK')"> Oklahoma</button>
        <button class="btn" onclick="filterSelection('AR')"> Arkansas</button>

<html>

        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <style>
            .dropbtn {
              background-color: #ebebee;
              color: black;
              padding: 7px;
              font-size:14px;
              border: none;
            }

            .dropdown {
              position: relative;
              display: inline-block;
              text-align: left;
            }

            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #ebebee;
              min-width: 220px;
              z-index: 1;
            }

            .dropdown-content a {
              color: black;
              padding: 3px;
              text-decoration: none;
              display: block;
            }

            .dropdown-content a:hover {
              background-color: #ddd;
            }

            .dropdown:hover .dropdown-content {
              display: block;
            }

            .dropdown:hover .dropbtn {
              background-color: #ffff;
            }

</style>
</head>

        <div class="dropdown" id="dropdown">
          <button class=" dropbtn">…</button>
          <div class=" dropdown-content">
            <button class="btn" onclick="filterSelection('WC')"> Wire & Cable</button>
            <button class="btn" onclick="filterSelection('ACC')"> Wire & Cable Accessories</button>
            <button class="btn" onclick="filterSelection('MC')"> Motor Control</button>
            <button class="btn" onclick="filterSelection('WD')"> Wiring Devices</button>
             <button class="btn" onclick="filterSelection('CF')"> Conduit & Fittings</button>
           <button class="btn" onclick="filterSelection('FUS')"> Fuses</button>
           <button class="btn" onclick="filterSelection('TOOL')"> Tools & Fasteners</button>
            <button class="btn" onclick="filterSelection('EW')"> Enclosures & Wireway</button>
            <button class="btn" onclick="filterSelection('SPEC')"> Specialty</button>
          </div>
        </div>
      </div>
</body>

</html>

</div>

</body>

</html>

<!--Start TOA--!>

function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
      w3RemoveClass(x, "show");
      if (x.className.indexOf(c) > -1) w3AddClass(x, "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) == -1) {
        element.className += " " + arr2;
      }
    }
}

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) > -1) {
        arr1.splice(arr1.indexOf(arr2), 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.addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
}

var btnContainer = document.getElementById("dropdown");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
    btns.addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
}

</script>

</body>

</html>

November 8, 2018

Thank you.

I was able to fix by changing the parameters of the content.

}

/* Content */
.content {
    background-color: white;
    padding: 10px;
    width:160px;
    height:75px;
}

November 2, 2018

I was following the filtered photo gallery tutorial below:

https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

I have an issue with the photos bunching up on the right side & not shifting to a new column.

This is the HTML in the link below:

https://www.w3schools.com/code/tryit.asp?filename=FWU52Y6W22GU

What can I add to make sure the formatting is right?

Sign In

Alana

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by Alana

Drop Down Panel

Drop Down Panel

Filtered Table-Dropdown Option Formatting

Filtered Photo Gallery- Format Issue

Filtered Photo Gallery- Format Issue

Browse

Activity