Author: jonsan32

It's taken me months to figure out how to show/hide certain content by days throughout the year, but now I'm stuck because the code gets too big for any browser to handle once I add every day for the entire year within the script.

Is there a way I can simply substitute each video's code for that day within just one embedded element? Trying to embed and then hide 371 videos is just too much.

The URL strings I'd need to swap out each day look like this:
5BZsAW78ch8
jEyvsHcQcLw
fBHx90y2QFo
_JMkjM4THd4
v2kh3s8RgYw
uhrrTXo1uRo

And the iframe code is like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/v2kh3s8RgYw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The working code (for just 3 days) is as follows:

<script src="https://code.jquery.com/jquery-1.12.0.js"></script>

<div align="center" style="margin:50px;">
<div class="show"></div>
<div class="vid5"><iframe width="560" height="315" src="https://www.youtube.com/embed/v2kh3s8RgYw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="vid6"><iframe width="560" height="315" src="https://www.youtube.com/embed/uhrrTXo1uRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="vid7"><iframe width="560" height="315" src="https://www.youtube.com/embed/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>


</div>

<script>
function show_hide_me () {
  var myDate = new Date();
  var hour = myDate.getHours();
  var date = myDate.getDate();
  var month = myDate.getMonth();
  var minute = myDate.getMinutes()
if (month == 8 && date > 0 && date < 2){$('.vid5').show();$('.show').hide();} else {$('.vid5').hide();$('.show').show();}
if (month == 8 && date > 1 && date < 3){$('.vid6').show();$('.show').hide();} else {$('.vid6').hide();$('.show').show();}
if (month == 8 && date > 2 && date < 4){$('.vid7').show();$('.show').hide();} else {$('.vid7').hide();$('.show').show();}

 }
show_hide_me();
</script>

I'm hosting tounaments throughout the year, and have the price increasing each day. Code works, but I'mnot cure which elements to adjust to be able to display multiple prices adjusting simultaneously. I tried changing "rate" to "rate1" etc, but that wasn't enough... So I'm guessing variables within should be adjusted as well. Any help is appreciated. The page I'm working on is here: http://limitlesshoops.com/jamball.html -- The sinppet below is what I'm currently focused on. Thanks.

<div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
    <span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
    January 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>



<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
    <span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
    February 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>

I'm using the code below to get a random number of items from an array, but I'd like to just get 3-5 random numbers from the provide range to display. Right now, it either shows 1, all, or any amount in between. I'm also good with completely changing up my strategy, so any and all advice is welcome. Much appreciated.

<script type="text/javascript" src="https://fiftyallstars.com/Code/jquery-2.2.4.js"></script>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>

<script type="text/javascript">
$('div').filter(function(){
    return (Math.round(Math.random()) == 1);
}).css({display: 'none'});
</script>

I'm not good with math functions at all, but I've searched for a while and couldn't find anyone even touching on this subject.

I'd like to have the price of $900 slowly approach $1500 between the dates of April 1st and August 1st. That's about $5 per day, and the formula would be:

ROUND(1500 - (600 * ((DEADLINE - TODAY) / (DEADLINE - START)))

But how do I express that in terms of javascript and HTML so that I can write it out in a sentence like "Today you'll have to pay $920."

Thanks for any help you're able to provide.

This has been bugging me for quite some time, but I have this page (https://fiftyallstars.com/value.html)) that has 4 labels for 4 sliders. The problem is I can't make the labels line up correctly for both the desktop view AND the mobile view.

Do I have to fix this with two separate css files for both orientations, is it a absolute/relative positioning thing, or is it something else entirely? I know you can view the source on the site, but I'll put it below as well in case that's easier. Thanks a ton for your time.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta content='https://fiftyallstars.com/Images/priority.jpg' property='og:image'/>
<meta content='What are your priorities?' property='og:description'/>
<link href='https://fiftyallstars.com/Images/priority.jpg' rel='icon' type='image/x-icon'/>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://fiftyallstars.com/Images/Logo/50whiteonblack.jpg" />


<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

<style>
body{
    font-family:font-family: 'Oswald', sans-serif;
}
h1{
    color:red;
    font-size:40px;
    margin-bottom:10px;
    margin-left:-50px;
    font-variant:small-caps;
}
h2{
    color:red;
    font-size:15px;
    margin-bottom:10px;
    margin-left:-50px;
    font-variant:small-caps;
    width:400px;
    text-align:justify;
}
    input{
        margin-top:0px;
        border:none;
        font-size:25px;
        color:red;
        text-shadow:  2px 1px 3px black;
    }
    .slider{
        margin:30px 0px;
    }
</style>


<title>VALUE</title>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<html>
<center><h1>What are Your Priorities?</h1><table width="900" style="margin-top:10px;"><tr><td>
<table align="right" style="font-weight:bold; font-variant:small-caps; letter-spacing:1px; font-size:15px; padding:10px 0px 10px 35px; height:275px;"  border="0"><tr><td align="right" valign="top">Making Players Better</td></tr><tr><td align="right" valign="center">Winning Games</td></tr><tr><td align="right" valign="center">Making Money</td></tr><tr><td align="right" valign="bottom">Showcasing Talent</td></tr></table></td>
<td height="145" cellpadding="5">
<div id="app">
<div class="slider-container">
<div class="slider" v-for="option, index in Sliders">
<input type="range" :id="'slider'+index" :min="min" :max="max" v-model.number="Sliders[index]" @input="changeSlider(index)" step="0.01">
<input type="number" :value="Math.round(Sliders[index])" @change="changeBox(index, option, $event)">
</div>
</div>
</div>
</td></tr></table>
<h2>While there's nothing wrong with striving for all 4, one may efficiently maximize the potential gains in any one category by sacrificing the others.</h2>
</center>
</body>
</html>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-9bf952ccbbd13c245169a0a1190323a27ce073a3d304b8c0fdf421ab22794a58.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script id="rendered-js">
var app = new Vue({
  el: '#app',
  data: {
    max: 100,
    min: 0,
    selectedAnswer: [],
    Sliders: [25, 25, 25, 25] },

  computed: {},


  methods: {
    changeSlider(slider) {
      const sum = this.Sliders.reduce((sum, val) => sum + val, 0);
      const diff = sum - 100;
      let remainder = 0;
      let arr = [];

      for (let i in this.Sliders) {
        if (i != slider) {//don't modify the slider which is being dragged
          let val = this.Sliders[i] - diff / (this.Sliders.length - 1);
          if (val < 0) {
            remainder += val;
            val = 0;
          }
          this.$set(this.Sliders, i, val);

        }
      }

      if (remainder) {
        const filteredLength = this.Sliders.filter((val, key) => val > 0 && key != slider).length;
        for (let i in this.Sliders) {
          if (i != slider && this.Sliders[i] > 0) {
            this.$set(this.Sliders, i, this.Sliders[i] + remainder / filteredLength);
          }

        }

      }

      this.$emit('input', this.Sliders);

      //convert to rounded values
      for (let i in this.Sliders) {
        arr.push(Math.round(this.Sliders[i]));
        this.selectedAnswer = arr;
      }

    },
    changeBox(slider, value, e) {

      console.log(slider);
      console.log(value);
      console.log(e.target.value);

      this.Sliders[slider] = Math.round(e.target.value);
      this.changeSlider(slider);

      console.log(this.Sliders);


      /*
                                 const sum = this.questionData.options.reduce((sum, val) => sum + val, 0);
                                 const diff = sum - 100;
                                 let remainder = 0

                                 for(let i in this.questionData.options){
                                        if(i != box){ //don't modify the slider which is being dragged
                                        let val = this.questionData.options[i] - diff / (this.questionData.options.length - 1)
                                        if(val < 0){
                                            remainder += val
                                          val = 0
                                        }
                                        this.$set(this.questionData.options, i, val)
                                      }
                                 }      */
    } } });
//# sourceURL=pen.js
    </script>
</body>
</html>

I have 5 items listed within a 200x200 box, and would like for the details of the clicked item to appear as either an overlay that spans only that box or as a div that completely replaces the original 5 options. Kinda like an accordion menu, but with the nav menu items completely disappearing rather than just moving out of the way. To return to the original layout, I'd like a simple [x] as the close button.

I've searched everywhere for a tutorial, so I'm guessing maybe it's either not possible or a really bad idea. If the latter, let me know your thoughts as to why. Thanks a ton.

I'd like for my page (https://fiftyallstars.com/tour.html) to load, and for the TOUR to start automatically. Right now visitors must click a button with id "starttour"

Here's what I've added so far, but it doesn't do the trick:

<script>
 $(function () {
          window.onload = $('#starttour').click();
      });
</script>

<a class="start-tour" href="#" id="starttour"><span class="two skinny" style="margin:10px 5px; width:290px; font-weight:bold; letter-spacing:4px;"><i class="fa fa-photo animated faa-pulse faa-slow"></i> Take a Detailed Tour</span></a>

Thanks for any help whatsoever.

I'm trying to setup the links on this page: http://limitlesshoops.com/levels.html to lead to specific pages within this PDF: https://fiftyallstars.com/a2z.pdf --- I've found I can lead people to whatever page like this: https://fiftyallstars.com/a2z.pdf#page=7 but I'd like to lead them to a page based on Today's date. I've added a few example pages to the end of the PDF that have 12/01/19 etc. in the header section. I figure if the browser's "find" functionality can scroll to that page, then there should be some javascript that can do the same.

Any help would be awesome. Thanks!

Here are some helpful links I've found so far:

Appending the URL link with today's date: https://stackoverflow.com/questions/27728219/how-to-insert-todays-date-into-a-url

Leading to a specific destination within the PDF: https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html ---

Setting markers within the document that have the date instead: https://stackoverflow.com/questions/125632/is-it-possible-to-link-to-a-bookmark-within-a-pdf-using-url-parameters

A developer from India helped me create a pretty cool page, but he's since abadoned me with a few errors in his code. On my ROSTERS page for my basketball program, it's meant to display cells generated from this Google Spreadsheet. Only problem is it works for most grades, but 1st-8th aren't correctly referencing the right columns.

I don't know a ton about code, but everything looks like it matches up on the site.

These lines, for instance, are a part of the HTML that should display my spreadsheet's CENTRAL tab columns BG-BK

<li><a href="javascript:void(0)" target="_blank"><span style="float:left; color:#999999;">15 | <span id="3rd4th14">---</span></span> <span style="float:right; color:#999999;"><span id="3rd4thvalue14">---</span></span></a><div style="clear: both;"></div></li>

And these lines are the javascript that make it work.

 $('#3rd4th'+i).text(data[i][35]+' '+data[i][36]);
                     $('#3rd4thvalue'+i).text('|'+data[i][37]+' | '+data[i][38]+' | '+data[i][39]);

I figure since the same exact layout works for the other grades, this should easily follow suit. Fiddling with the numbers also produced nothing of worth.

Also of note is this problem started out with just one grade and has now spread to other grades over the course of a few months. I tried creating an entirely new document for it to reference, but the same error occurs. It's super slow loading, so I'd also be down to display the info via another avenue.

Any suggestions or fixes would be awesome. Thx.