#StackBounty: #jquery #html #css #placeholder #bootstrap-select Style bootstrap-select "placeholder" differently

Bounty: 50

I have successfully managed to apply a different style to my normal select elements if the selected option is the first one (the placeholder) with jQuery like so :


        $(document).ready
        (
            function () 
            {
                $('select').each(function (index, value)
                {
                    if($(this).val()==="")
                    { 
                        $(this).css('font-style', 'italic');
                        $(this).css('color', '#636c72');
                        $(this).children().css('font-style', 'normal');   
                    }
                    else
                    {
                        $(this).css('font-style', 'normal');
                        $(this).css('color', 'black');
                        $(this).children().css('font-style', 'normal');    
                    }
                });
            }
        );
    

However, some of my forms are using the bootstrap-select component due to the sheer amount of entries they contain (can be thousands) and the necessity of having a way to narrow down the entries with text searches. Those components produce MUCH more complicated HTML and the above code does not work at all.

I am trying to find a way to apply the same logic as with my normal selects : style the input in italic and with a different color if the option selected is the first one. Here is an example of such select :

<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                                            onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                                            <option value="">Search Med</option>
                                            <option th:each="med : ${meds}" th:value="${med.id}" 
                                                th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                                                </option>
                                        </select>

Has anyone ever been able to achieve this?


Get this bounty!!!

#StackBounty: #javascript #html #css #ecmascript-6 #calculator Class Activity Calculator

Bounty: 50

Introduction

Class Activity Calculator is an online application to calculate the students’ class activity grades. The class activity grade (CA) is calculated based on the marks a student gets during the term. Here’s a sample grade sheet we use in class:

enter image description here

Please review the code and provide feedback.

Source

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Calculate the class activity grades of the ILI students.">
  <title>Class Activity Calculator</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <img src="logo.png" alt="Logo">
    <h1>Class Activity Calculator</h1>
  </header>
  <nav>
    <a href="index.html" id="current">Adults: Old</a>
    <a href="adults-new.html">Adults: New</a>
    <a href="young-adults.html">Young Adults</a>
    <a href="kids.html">Kids</a>
  </nav>
  <main>
    <form autocomplete="off">
      <fieldset data-weight="4">
        <legend>Listening & Speaking</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      <fieldset data-weight="3">
        <legend>Reading</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      <fieldset data-weight="1">
        <legend>Writing</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      
</form> </main> <footer> Share on <a href="https://t.me/share/url?url=https%3A%2F%2Fclassactivitycalculator.github.io%2F&text=Class%20Activity%20Calculator%3A%20Calculate%20the%20class%20activity%20grades%20of%20the%20ILI%20students." title="Telegram: Share Web Page">Telegram</a> | <a href="https://www.facebook.com/dialog/share?app_id=2194746457255787&href=https%3A%2F%2Fclassactivitycalculator.github.io%2F" title="Post to Facebook">Facebook</a> <address><a href="https://t.me/MortezaMirmojarabian" title="Telegram: Contact @MortezaMirmojarabian" rel="author">Give feedback</a></address> </footer> function setOutputValues() { var totalWeightedAverage = 0; var totalWeight = 0; var fieldsets = form.querySelectorAll('fieldset'); for (var fieldset of fieldsets) { var average = averageInputValues(fieldset); var fieldsetOutput = fieldset.querySelector('output'); if (average == undefined) { fieldsetOutput.value = 'You may only enter 0 to 100.'; } else if (isNaN(average)) { fieldsetOutput.value = 'Please enter a grade.'; } else { fieldsetOutput.value = 'avg: ' + average.toFixed(1); } totalWeightedAverage += average * fieldset.dataset.weight; totalWeight += Number(fieldset.dataset.weight); } var classActivity = totalWeightedAverage / totalWeight; var divOutput = form.querySelector('div output'); if (isNaN(classActivity)) { divOutput.value = ''; } else { divOutput.value = 'CA: ' + classActivity.toFixed(1); } } http://global.js </body> </html>

style.css

html,
body {
  margin: 0;
  padding: 0;
}

header {
  padding: 16px 0;
  text-align: center;
  background: linear-gradient(#999, #333);
}

img {
  width: 36px;
  height: 36px;
  vertical-align: bottom;
}

h1 {
  font-size: 1.125rem;
  font-family: 'Times New Roman';
  color: #FFF;
  text-shadow: 0 3px #000;
  letter-spacing: 1px;
}

nav {
  display: flex;
  justify-content: center;
  background: #333;
  border-top: 2px solid;
}

a {
  color: #FFF;
}

nav a {
  padding: 12px 6px;
  font: bold 0.75rem Verdana;
  text-decoration: none;
}

nav a:not(:last-child) {
  margin-right: 2px;
}

nav a:hover,
nav a:focus,
#current {
  outline: 0;
  border-top: 2px solid;
  margin-top: -2px;
}

main,
div {
  display: flex;
}

form {
  margin: 32px auto;
}

fieldset {
  margin: 0 0 16px;
  padding: 12px 12px 0;
  border: 1px solid #CCC;
  background: linear-gradient(#FFF, #CCC);
}

legend,
input,
output,
button {
  font-family: Arial;
}

legend,
button {
  color: #333;
}

legend {
  padding: 0 4px;
  font-size: 0.875rem;
}

input,
button,
div output {
  font-size: 0.833rem;
}

input {
  width: 4em;
}

input:invalid {
  outline: 1px solid red;
}

output {
  color: #C00;
}

fieldset output {
  display: block;
  margin: 8px 0 8px 6px;
  font-size: 0.75rem;
}

fieldset output::after {
  content: "0A0";
}
/* a placeholder */

div output {
  margin: auto auto auto 6px;
}

footer {
  padding: 12px;
  background: #333;
  font: 0.75rem Arial;
  color: #FFF;
}

address {
  float: right;
}

global.js

var form = document.querySelector('form');

function averageInputValues(fieldset) {
  var totalValue = 0;
  var totalNumber = 0;
  var inputs = fieldset.querySelectorAll('input');
  for (var input of inputs) {
    if (!input.validity.valid) {
      return;
    }
    totalValue += Number(input.value);
    totalNumber += Boolean(input.value);
  }
  return totalValue / totalNumber;
}

form.querySelector('[type="button"]').addEventListener('click', setOutputValues);

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if (input.value) {
      return true;
    }
  }
}

form.querySelector('[type="reset"]').addEventListener('click', function(event) {
  if (detectChange() && !confirm('Your changes will be lost.nAre you sure you want to reset?')) {
    event.preventDefault();
  }
});

window.addEventListener('beforeunload', function(event) {
  if (detectChange()) {
    event.returnValue = 'Your changes may be lost.';
  }
});


Get this bounty!!!

#StackBounty: #css #twitter-bootstrap #razor #mobile Bootstrap Btn Classes Not Working on Mobile

Bounty: 50

For some reason, I can’t get mobile to stop applying its default styling and respect the bootstrap css (v3.4.1). Below is my html:

 
</div>

My BundleConfig rendered in _Layout.cshtml

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css"));
        }

How it should look:

How it should look

How it looks on two different gen iPhones (5s, 6):

enter image description here

What the internet keeps telling me should work, but I’m having no luck:

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Any suggestions appreciated


Get this bounty!!!

#StackBounty: #javascript #html #css #calculator Class Activity Calculator

Bounty: 50

Introduction

Class Activity Calculator is an online application to calculate the students’ class activity grades. The class activity grade (CA) is calculated based on the marks a student gets during the term. Here’s a sample grade sheet we use in class:

enter image description here

Please review the code and provide feedback.

Source

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Calculate the class activity grades of the ILI students.">
  <title>Class Activity Calculator</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <img src="logo.png" alt="Logo">
    <h1>Class Activity Calculator</h1>
  </header>
  <nav>
    <a href="index.html" id="current">Adults: Old</a>
    <a href="adults-new.html">Adults: New</a>
    <a href="young-adults.html">Young Adults</a>
    <a href="kids.html">Kids</a>
  </nav>
  <main>
    <form autocomplete="off">
      <fieldset data-weight="4">
        <legend>Listening & Speaking</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      <fieldset data-weight="3">
        <legend>Reading</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      <fieldset data-weight="1">
        <legend>Writing</legend>
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <input type="number" step="any" min="0" max="100">
        <output></output>
      </fieldset>
      
</form> </main> <footer> Share on <a href="https://t.me/share/url?url=https%3A%2F%2Fclassactivitycalculator.github.io%2F&text=Class%20Activity%20Calculator%3A%20Calculate%20the%20class%20activity%20grades%20of%20the%20ILI%20students." title="Telegram: Share Web Page">Telegram</a> | <a href="https://www.facebook.com/dialog/share?app_id=2194746457255787&href=https%3A%2F%2Fclassactivitycalculator.github.io%2F" title="Post to Facebook">Facebook</a> <address><a href="https://t.me/MortezaMirmojarabian" title="Telegram: Contact @MortezaMirmojarabian" rel="author">Give feedback</a></address> </footer> function setOutputValues() { var totalWeightedAverage = 0; var totalWeight = 0; var fieldsets = form.querySelectorAll('fieldset'); for (var fieldset of fieldsets) { var average = averageInputValues(fieldset); var fieldsetOutput = fieldset.querySelector('output'); if (average == undefined) { fieldsetOutput.value = 'You may only enter 0 to 100.'; } else if (isNaN(average)) { fieldsetOutput.value = 'Please enter a grade.'; } else { fieldsetOutput.value = 'avg: ' + average.toFixed(1); } totalWeightedAverage += average * fieldset.dataset.weight; totalWeight += Number(fieldset.dataset.weight); } var classActivity = totalWeightedAverage / totalWeight; var divOutput = form.querySelector('div output'); if (isNaN(classActivity)) { divOutput.value = ''; } else { divOutput.value = 'CA: ' + classActivity.toFixed(1); } } http://global.js </body> </html>

style.css

html,
body {
  margin: 0;
  padding: 0;
}

header {
  padding: 16px 0;
  text-align: center;
  background: linear-gradient(#999, #333);
}

img {
  width: 36px;
  height: 36px;
  vertical-align: bottom;
}

h1 {
  font-size: 1.125rem;
  font-family: 'Times New Roman';
  color: #FFF;
  text-shadow: 0 3px #000;
  letter-spacing: 1px;
}

nav {
  display: flex;
  justify-content: center;
  background: #333;
  border-top: 2px solid;
}

a {
  color: #FFF;
}

nav a {
  padding: 12px 6px;
  font: bold 0.75rem Verdana;
  text-decoration: none;
}

nav a:not(:last-child) {
  margin-right: 2px;
}

nav a:hover,
nav a:focus,
#current {
  outline: 0;
  border-top: 2px solid;
  margin-top: -2px;
}

main,
div {
  display: flex;
}

form {
  margin: 32px auto;
}

fieldset {
  margin: 0 0 16px;
  padding: 12px 12px 0;
  border: 1px solid #CCC;
  background: linear-gradient(#FFF, #CCC);
}

legend,
input,
output,
button {
  font-family: Arial;
}

legend,
button {
  color: #333;
}

legend {
  padding: 0 4px;
  font-size: 0.875rem;
}

input,
button,
div output {
  font-size: 0.833rem;
}

input {
  width: 4em;
}

input:invalid {
  outline: 1px solid red;
}

output {
  color: #C00;
}

fieldset output {
  display: block;
  margin: 8px 0 8px 6px;
  font-size: 0.75rem;
}

fieldset output::after {
  content: "0A0";
}
/* a placeholder */

div output {
  margin: auto auto auto 6px;
}

footer {
  padding: 12px;
  background: #333;
  font: 0.75rem Arial;
  color: #FFF;
}

address {
  float: right;
}

global.js

var form = document.querySelector('form');

function averageInputValues(fieldset) {
  var totalValue = 0;
  var totalNumber = 0;
  var inputs = fieldset.querySelectorAll('input');
  for (var input of inputs) {
    if (!input.validity.valid) {
      return;
    }
    totalValue += Number(input.value);
    totalNumber += Boolean(input.value);
  }
  return totalValue / totalNumber;
}

form.querySelector('[type="button"]').addEventListener('click', setOutputValues);

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if (input.value) {
      return true;
    }
  }
}

form.querySelector('[type="reset"]').addEventListener('click', function(event) {
  if (detectChange() && !confirm('Your changes will be lost.nAre you sure you want to reset?')) {
    event.preventDefault();
  }
});

window.addEventListener('beforeunload', function(event) {
  if (detectChange()) {
    event.returnValue = 'Your changes may be lost.';
  }
});


Get this bounty!!!

#StackBounty: #html #css #google-chrome #fonts #preload Chrome unused preload warning for an icon font that is used

Bounty: 50

I have an icon font that I preload in Chrome with

<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

and reference later in my CSS with

@font-face {
  font-family: "IconFont";
  src: url(/static/media/IconFont.d9fff078.eot);
  src: url(/static/media/IconFont.d9fff078.eot#iefix)
      format("embedded-opentype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.c8a8e064.woff) format("woff"),
    url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
  font-weight: normal;
  font-style: normal;
}

Within one second of the page loading I use Unicode code point U+E95B with my icon font.

I still get a warning from Chrome, though, that says:

The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.

How do I get rid of this warning?


Get this bounty!!!

#StackBounty: #javascript #css #reactjs Buggy slider – how make my slider well fit the component inside?

Bounty: 100

I would create a slider like the MacDonalds one:

the objective is that my slider fit the contained element, then when I click the right or left button that my slider go on one side or another, and come back to other boundary if the user has reach one or other boundary side.

The problem is that my slider is fully inconsistent, it doesn”t responses to the event triggering correctly and the management of the state seems very buggy also, so I m wondering how improve my application,

My slider fails to have a fluent behavior, here the demo –beware the script buggs on my browser using StackOverflow but JSFiddle succeeds to read the script well:

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”true”>

<

div class=”snippet-code”>

let scopeProps= 5 

class App extends React.Component{

  state={
    // number of items in he slider
    totalSliderItem:0,
    // deplacement range to handle the sliding => default to scopeProps
    moveRange: scopeProps,
    // range of sliderView => default to scopeProps
    boxScope:scopeProps,

    // unitWidth of each box item => scopeProps/ number of item desired inside a box view
    unitWidth:0,

    // number of item outside box view localize at the right of box
    outsideBoxRight:0,
    // number of item outside box view localize at the left of box
    outsideBoxLeft:0


  } 

  componentDidMount(){
    // set CSS variable 
    // § call body variable     
    let root= document.body;

    // § update css variable --slider-container-scope
    root.style.setProperty('--slider-container-scope', scopeProps);
   
    // § update css variable CSS variable --unit-width
    // call metacontainer ref
    let SliderMetaContainer= this.refs.sliderMetaContainer
    // get metacontainer width
    let metaContainerWidth=SliderMetaContainer.getBoundingClientRect().width
    let unitWidth= metaContainerWidth/scopeProps
    root.style.setProperty('--unit-width', unitWidth + "px") ;

    // set number of items contained in slider
    let sliderContainer= this.refs.sliderContainer
    let sliderContainerLength= sliderContainer.childElementCount
    console.log("sliderContainerRef length: ", sliderContainerLength);

    // initial number of items localized outside box view == all box overcosm slider scope
    let outsideBoxRight=sliderContainerLength-scopeProps

    // initialize state after componentDidMount
    this.setState({
      totalSliderItem:sliderContainerLength,
      outsideBoxRight,
      unitWidth
    })
  }

  // when user click a button to move => handleSlideMove()
  handleSlideMove=(direction)=>{
    console.log("window: ", window)

  
    console.log("in handleSlideMove")

    // appreciate number of item outsideBox depending of direction targeted
    let outsideBoxUnit= direction==="left" ? -(this.state["outsideBoxLeft"]) : this.state["outsideBoxRight"];

    // direction => if(outsideBox(direction)<=0 ==> call boundary 
    if(outsideBoxUnit <= 0){ 
        // go to other boundary  
        let boundaryRange = this.state.totalSliderItem - this.state.boxScope; 
        this.boundaryMove(boundaryRange, direction)
    }
    // else make a move further in the slider
    else this.furtherMove(outsideBoxUnit, direction)
  }

    boundaryMove=(boundaryRange, direction)=>{
      console.log("in boundaryMove")
      // each category has a specific unitWidth
      let unitWidth=this.state.unitWidth 
      let boxScope=this.state.boxScope

      // set other boundary range
      let moveRange= boundaryRange
      let move=   unitWidth * moveRange
      // console.log("unitWidth, boxScope, outsideBoxUnit: ", unitWidth, boxScope, outsideBoxUnit);

      // set movement range
      // let move= outsideBoxUnit < boxScope?   unitWidth * outsideBoxUnit: unitWidth * boxScope  
      
      // console.log("move: ", move);

      // handle movement direction
      if(direction==="left") move= -move 

      console.log("move value: ", move)
      // trigger movement
      document.body.style.setProperty('--item-left', move + "px");  

      this.updateItemRepartition(moveRange)
    }

    furtherMove=(outsideBoxUnit, direction)=>{
      console.log("in furtherMove")
      // each category has a specific unitWidth
      let unitWidth=this.state.unitWidth 
      console.log("line 109, unitWidth: ", unitWidth)

      let boxScope=this.state.boxScope    
      let move  
      


      let moveRange = outsideBoxUnit < boxScope?    outsideBoxUnit: boxScope
      // handle movement direction
      move=   unitWidth * moveRange   

      // if(direction==="left") move=move      


      console.log("outsideBoxUnit line 104: ", outsideBoxUnit)
      console.log("move value: ", move)
      // trigger movement
      document.body.style.setProperty('--item-left', move + "px");

      this.updateItemRepartition(moveRange, direction)
    }

  // update how many items are outside the box view from each side
  updateItemRepartition=(moveRange, direction)=>{ 
    // get boxScope
    let boxScope=this.state.boxScope 
    // appreciate if the number to use for update should be boxScope _ outsideBox
    let range= moveRange < boxScope? moveRange : boxScope

    // update outsideBox value according to movement direction
    this.setState( currentState =>{ 
        // move to left => increase right outsideBoxItem _ decrease left outsideBoxItem
        let updateBoxRight= direction === "left" ?  
            currentState.outsideBoxRight + range
                :
            currentState.outsideBoxRight - range
        // move to righ => increase left outsideBoxItem _ decrease right outsideBoxItem
        let updateBoxLeft= direction !== "left" ?  
            currentState.outsideBoxLeft + range
                :
            currentState.outsideBoxLeft - range

        // debugging => appreciate number to evaluate if update would be relevant
        console.log(
            "currentState.outsideBoxLeft, currentState.outsideBoxRight, range: ",
            currentState.outsideBoxLeft, currentState.outsideBoxRight, range
        )

        // update component state
        return ({
            outsideBoxRight:updateBoxRight,
            outsideBoxLeft:updateBoxLeft
        })
    })
  }


  render(){

    return (
      
Awesome containers here!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</div> </div> <button onClick={() => this.handleSlideMove("right")} > move right </button> </div> ) }; } ReactDOM.render(<App />, document.querySelector("#app"))
:root{
  --slider-container-scope: 0; 
  --unit-width: 0;
  --item-left:0;
}

.page {
  text-align: center; 
  display:flex; 
  width:100%;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}  

.slider_metacontainer{
  width: 400px;

  background: #444;
  
  display: flex;
  overflow: auto;
  margin: 10vh 0;
}

.slider_container{
  position:relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  left:var(--item-left);
  transition: left 0.5s ease-out;
}

.slider_item{
  width: var(--unit-width);
  height:25vh;
}

.slider_item:nth-child(3n-2) { background-color: #EF5350; }
.slider_item:nth-child(3n-1) { background-color: #2E7D32; }
.slider_item:nth-child(3n) { background-color: #03A9A4; }
https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js