Category: javascript

Using lightGallery and would like to implement one inline gallery with a before/after slider on each image.
Both are working fine using them independently: BeerSlider and lightGallery.

Is there somebody wo got this working?
I tried several ways already without success.
One of my attempt was to add the BeerSlider classes as a caption and append them to the lg-item element:

  // photo before after
  const beforeAfterContainer = document.getElementById("before-after");
  const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
    container: beforeAfterContainer,
    dynamic: true,
    appendSubHtmlTo: ".lg-inner",
    dynamicEl: [
      {
        src: "https://loremflickr.com/640/480?random=1",
        thumb: "https://loremflickr.com/320/240?random=1",
        subHtml: `<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
            <img src="https://loremflickr.com/640/480?random=1" />
            <div class="beer-reveal" data-beer-label="after">
                <img src="https://loremflickr.com/640/480?random=2" />
            </div>
                </div>`,
      }
     //....
    ],
  });
  beforeAfterInlineGallery.openGallery();

  $("#beer-slider").each(function (index, el) {
    $(el).BeerSlider({ start: $(el).data("beer-start") });
  });

Thats not working at all. Additionally I tried to use the lightGallery selector to get the Beer Slider reveal image ignored by lightGallery. But this is not working at all, as one instance destroys the others (as far as I understand those scripts correctly).

Any ideas how to get both working together?
I really don’t need to use BeerSlider – if somebody got any other before/after plugin working with lightGallery I can switch to it.

Thanks Guys!

im a simple user (reseller) and i got a b2b api key with some sample code. I want to list all the products from a company. I have a website (simple bootstrap3 (html,css)), not webshop. I just want to list on a page.

The Sample Code:

https://api.wycena.keno-energy.com,
POST: {
    "apikey": "A5TTRfG453d24F",
    "method": "GetProductsList",
    "parameters": [
            {
                "ShowGroups": "1",
                "ShowIndex": "1"
            }
    ]
}

I want to write out: GetProductInfo ; GetProductList ; GetProductsWarranty.

How can i get these? thank you for helping. I have wampserver, js.node and sublime text.

API DOCU: https://api.wycena.keno-energy.com/Dokumentacj_en.html

I have a Javascript object with a few sections; namely, banking,fitment,personal_info,vehicle.

The object is structured as follows:

{
  banking: {
    account_number: null,
    account_type: null,
    bank_name: null,
    debit_day: null
  },
  fitment: {
    date: null,
    terms: null
  },
  personal_info: {
    email: null,
    IDNumber: null,
    mobile: null,
    name: null,
    residential_address: null,
    surname: null,
    title: null,
    work_address: null,
    work_tel: null
  },
  vehicle: {
    brand: null,
    colour: null,
    model: null,
    registration: null,
    vin: null,
    year: null
  }
}

By default, all values within the object and its “nested sections” have a value of null.

I’m trying to figure out a way to categorize the sections into 3 different categories, namely:
empty, partial and complete.

“empty” being a case that all values within a section are set as null.

“partial” being that some values within a section have been set (not all null)

“complete” being that no values within a section are set to null. All have values.

My first attempt was with utilizing the Underscore library with _.some(), however I can’t seem to wrap my head around catering for all 3 category scenarios.

Some help and guidance will be much appreciated.

Thanks!

I am very new to webapp with appscript. I have the below code. It will filter out the google sheet data with the session.user’s name only and show as a table in html page. once the user double clicks a cell it will open a new form. I want to autofill this form page with the row they have double clicked on.

My code works fine with generating the table, double clicking and opening data. but it does not get the values autofiilled

function doGet(e) {
  Logger.log( Utilities.jsonStringify(e) );
  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('homePage').evaluate();
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}


function getScriptUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}


function getData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var data = sheet.getDataRange().getValues();
  var headerRow = data.shift(); // remove the header row from the data array
  var filteredData = [headerRow]; // add the header row to the filtered data array
  for (var i = 0; i < data.length; i++) {
    var row = data[i];
    if (row[6].indexOf(Session.getActiveUser().getEmail()) != -1) {
      filteredData.push(row);
    }
  }
  return filteredData;
}


function fillForm(values){

  var list = getData();
  var newItem = list.filter(v=> v[0] == values); 
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  sheet.getRange("k1").setValue(values);
  var uid = sheet.getRange("k1").getValue();
  console.log("gf"+ values);
   return values;
 
}

Html code for displaying table

<!DOCTYPE html>
<html>
  <head>
  
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <base target="_top">
<script>
    function addthisre(values)
    {
     
      google.script.run.addrec(values);
    }
    </script>


  </head>
  <!-- Add a link to the local Style Sheet for further control over the layout-->
    <?!= HtmlService.createHtmlOutputFromFile('DisplayContentCSS').getContent(); ?>
  
  <body>



    <h1>Contents</h1>
    <table border="1" cellpadding="5px" id="myTable" >
    <?var tableData = getData();?>
    <?for(var i = 0; i < tableData.length; i++) { ?>
      <?if(i == 0) { ?>
        <tr >
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <th><?= tableData[i][j] ?></th>
        <? } ?>
        </tr>
      <? } else { ?>
        <tr >
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td><?= tableData[i][j] ?></td>
        <? } ?>
        </tr>
      <? } ?>
    <? } ?>
    </table>


   


<div class="container">
        <button id="btn" >
            <p id="btnText" onclick="sendsheetmail()">Send Mail</p>
            <div class="check-box">
                <svg viewBox="0 0 50 50">
                    <path fill="transparent" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
                </svg>
            </div>
        </button>
    </div>
    <script type="text/javascript">
        const btn = document.querySelector("#btn");
        const btnText = document.querySelector("#btnText");

        btn.onclick = () => {
            btnText.innerHTML = "Success!!";
            btn.classList.add("active");
        };
    </script>
</body>





  </body>
  <?var url = getScriptUrl();?>
  <script>
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('dblclick', function(event) {
      var cells = event.currentTarget.getElementsByTagName('td');
       console.log(cells);
      var values = [];
      for (var j = 0; j < 12; j++) {
        values.push(cells[j].textContent);
        
          
window.open('<?=url?>?page=editForm','_top');
      }
      google.script.run.fillForm(values);
      
      console.log(values); // Output the row values to the console


    });
  }
</script>
</html>

html content for new form..

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function addEditedRow()
    {
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      var email = document.getElementById("email").value;
      var place = document.getElementById("place").value;
      google.script.run.AddRecord(firstname, lastname ,place, email);
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
      document.getElementById("email").value = '';
   document.getElementById("place").value = '';
    }
   
</script>


  </head>
  <!-- Add a link to the local Style Sheet for further control over the layout-->
    <?!= HtmlService.createHtmlOutputFromFile('editFormCSS').getContent(); ?>
  <body>

   

     <? var rowvalues = fillForm(); ?>





      <div class="form">
      <div class="title">Welcome</div>
      <div class="subtitle">Subtitle Goes Here</div>


      
      <div class="input-container ic1">
        <input id="team" class="input" type="text" placeholder=" "  value="<? rowvalues ?>"  readonly  />
        <div class="cut"></div>

        <label for="team" class="placeholder">Team</label>
      </div>
      <div class="input-container ic2">
        <input id="lastname" class="input" type="text" placeholder=" " />
        <div class="cut"></div>
        <label for="lastname" class="placeholder">Last name</label>
      </div>
       
      <div class="input-container ic2">
        <input id="email" class="input" type="text" placeholder=" " />
        <div class="cut cut-short"></div>
        <label for="email" class="placeholder">Email</label>
      </div>
      <input type="button" class="submit" value="Add" onclick="addEditedRow()" />
    </div>





  </body>



</html>

I am trying to create a button in Javascript that will link me to a dm in Slack with a specific user. I am just learning about API and GET methods and cannot figure out how to find the Slack UserID from a known Username.

Here is the button I am trying to create. But I am unable to find the UserID using the UserName.

//Have UserName
var = userName

// Get UserID using UserName
let btn = document.createElement("button")
    btn.innerHTML = "Slack Button"

//Button redirecting to Slack DM with specific user
btn.onclick = function(){
        window.open((slackUrlLink).append(UserID));
}

I have a sidebar made with MUI. One of the sidebar options is feedback. I want to use the Jira Issue Collector on this feedback option, but I have not been able to get the script to work with the ListItem.

The Script and ListItem:

<script type="text/javascript" src="link" ></script>

<ListItem
    button
    // component="a"
    // href="#"
    // target="_blank"
>
    <Typography className={classes.closedTxt} hidden={open}>
        Feedback
    </Typography>
</ListItem>

I would like to provide a custom component when editing/displaying data the storybook example is here. However this prop muiTableBodyCellEditTextFieldProps does not allow me to render a custom component nor is it flexible enough to take “any component” I feed into it.

   <MaterialReactTable
      columns={[
        {
          header: 'First Name',
          accessorKey: 'firstName',
        },
        {
          header: 'State',
          accessorKey: 'state',
          muiTableBodyCellEditTextFieldProps: () => ({
            children: usStates.map((state) => (
              <MenuItem key={state} value={state}>
                {state}
              </MenuItem>
            )),
            select: true,
          }),
        },
      ]}
      data={tableData}
      enableRowActions
      enableEditing
      muiTableBodyCellEditTextFieldProps={{ variant: 'outlined' }}
      onEditingRowSave={handleSaveRow}
    />

I am trying to add some user authentication to a web application I have. When the user clicks the loadorder button a prompt should show up and request a password. I am getting the employeeNumber from the load order button and comparing it with Sql database.

Public Shared Function SfGetUserPassword(ByVal UserID As String) As System.Data.DataTable

        Dim Database As New ACGCommon.Database(System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ConnectionString)
        Database.AddParameter("@UserID", UserID)
        Return Database.GetDataSet("data", "gcshopfloor_SfGetEmployeePassword").Tables(0)

    End Function

This calls my stored procedure in SQL

 Private Function CheckPassword(employeeNumber As String, password As String) As Boolean
        Dim dt As DataTable = Users.SfGetUserPassword(tbEmployeeNumber.Text.Trim)
        For Each row As DataRow In dt.Rows
            If row("UserId").ToString() = employeeNumber AndAlso row("SfUserPassword").ToString() = password Then
                ' EmployeeNumber and password match, return true
                Return True
            End If
        Next
        ' EmployeeNumber and/or password do not match, return false
        Return False
    End Function
    '*********************************************************************************
    '
    '*********************************************************************************
    Private Sub btnSubmitPassword_Click(sender As Object, e As EventArgs) Handles btnSubmitPassword.Click
        Dim employeeNumber As String = Request.QueryString("tbemployeeNumber")
        Dim password As String = Request.QueryString("SfUserPassword")
        Dim isPasswordCorrect As Boolean = CheckPassword(employeeNumber, password) ' implement your password check logic here
        Response.Write(isPasswordCorrect.ToString().ToLower()) ' send the password check result back to the client-side code
    End Sub

This is my password check and submit password button. This will take the SfUserpassword and employee number checking it in the database and return true or false.

My Javascript is what I need help on. When the btnLoadOrder button is clicked I want the password prompt to appear. Correct password can move on and incorrect, keep trying. If the user leaves the page and comes back, I also want to prompt for the password as well. Currently I can’t get the javascript to get the password value and pass it back to the server side. Any thoughts?

<script type="text/javascript">
const loadOrderButton = document.getElementById("<%= btnLoadOrder.ClientID %>");
loadOrderButton.addEventListener("click", (event) => {
    const employeeNumber = document.getElementById("<%= tbEmployeeNumber.ClientID %>").value;
    console.log(employeeNumber); // you can do something with the employeeNumber value here
    event.preventDefault(); // prevent the default behavior of the button
    document.getElementById("passwordPanel").style.display = "block";

    const submitPasswordButton = document.getElementById("<%= btnSubmitPassword.ClientID %>");
    submitPasswordButton.addEventListener("click", (event) => {
    const password = document.getElementById("<%= SfUserPassword.ClientID %>").value;
    console.log(SfUserPassword)


      const xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
              const response = this.responseText;
              if (response === "true") {
                  // password is correct, do something here
                  console.log("Password is correct!");
              } else {
                  // password is incorrect, show error message
                  document.getElementById("<%= lblPasswordError.ClientID %>").innerHTML = "Incorrect password";
                document.getElementById("<%= lblPasswordError.ClientID %>").style.display = "block";
              }
          }
      };
      xmlhttp.open("GET", "ShopFloorEntryNew.aspx.vb?UserID=" + employeeNumber + "&password=" + password, true);
      xmlhttp.send();

  });
});
</script>

I have this code to generate a /draggable/ css box:

<div id="container">
  <div id="box">
<style>
#box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
</style>
<script>
window.onload = function() {
  // find the element that you want to drag.
  var box = document.getElementById('box');
  /* listen to the touchMove event,
  every time it fires, grab the location
  of touch and assign it to box */
  box.addEventListener('touchmove', function(e) {
    // grab the location of touch
    var touchLocation = e.targetTouches[0];
    // assign box new coordinates based on the touch.
    box.style.left = touchLocation.pageX + 'px';
    box.style.top = touchLocation.pageY + 'px';
  })
  /* record the position of the touch
  when released using touchend event.
  This will be the drop position. */
  box.addEventListener('touchend', function(e) {
    // current box position.
    var x = parseInt(box.style.left);
    var y = parseInt(box.style.top);
  })
}
</script>

I would like to add an html code

<iframe src="https://alceawisteria.codeberg.page/Diarykeepers_Homepage/stash/webamp.html" frameBorder="no" width=500px height=250></iframe>

into the draggable box.

(but putting it inside the ‘box div’ will just not render it.)
Is there anything I need to heed specifically to make this work ?

I have some js code, which is doing what I want, but I can’t figure out why. Can someone please point me to some resource that explains the JS rules for when variable values are determined? Also, can anyone tell me a simple way to peek under the hood and see the process for myself?

Here is the code:

<!DOCTYPE html>
<html>
<body>
<div id="demo">OUTPUT GOES HERE</div>
<div id="demsTest1">Test 1</div>
<div id="demsTest2">Test 2</div>
<div id="demsTest3">Test 3</div>
<div id="demsTest4">Test 4</div>

<script>

var testVar = 2;

function addLstn(i) {
    document.getElementById("demsTest" + i).addEventListener("click", function(){ 
    document.getElementById("demo").innerHTML += "<br>i = " + i; 
    /*i has the value it held when the event listener was added,
    apparently because this value is substituted, and 
    the variable no longer exists*/
    
    /*the direct substitution in the previous line, 
     is the bit I want to peek at - 
     where would I find the newly substituted line 
     " ... += "<br>i = " + 1/2/3/4 etc??*/
    
    
    testVar = testVar*i; //testVar updates, apparently because it is declared outside the function
    document.getElementById("demo").innerHTML += "; testVar = " + testVar;
    }); 
}

for (i=1; i<5;i++) {addLstn(i);}

</script>
</body>
</html>

I tried this, and got what I expected, but I can’t explain it

I am trying to create an if statement where the script checks if an element exists, hides it, and if it has hidden it, a dataLayer event is sent. If not, another event is sent.

However, I cannot seem to get a basic if statement functioning. What could be wrong with my code?

Only vanilla JS is possible.

function hideElement() {
if (element.classList.contains(some-element-class)) {
  while (elements.length > 0) elements[0].remove();
// so this is where I would add some dataLayer push event "element shown"
}
else {
  console.log(computer says no)
// so this is where I would add some dataLayer push event "element not shown"
}}

This however does work on its own, but I would like to add the event as well:

const elements = document.getElementsByClassName("some-element-class");
while (elements.length > 0) elements[0].remove();

so I have this array of objects, I want to style only a specific word like the date 2014 in short story object.
Im rendering this array in jsx

id:1,
        img: coderIMG ,
        BlogTitle:"My first encounter with web development in 2014",
        shortStory:`back in late 2014 when i was 15 years old , i was passionate about ....`,

I want to create a React app where the user can create a dynamic array of omponents called Object, and each of those objects has it’s own array that can contain more objects. The arrays are stored in the state of the components. But when I try to send the finished array to another component, only the upper-most layer of objects is in that array. Is there an issue with my method of storing the objects? I have noticed that no state of the objects is contained in the sent array.

class CreateMappingPage extends React.Component {
constructor(props) {
    super(props);
    this.handleList = this.handleList.bind(this)
    this.handleValue = this.handleValue.bind(this)
    this.state = {
        mappingArray: [],
        currentKey: 0,
    };
}

handleList() {
    let key = this.state.currentKey.toString()
    this.setState({mappingArray: [
        ...this.state.mappingArray,
        <Object key={key} Id={this.state.currentKey} type="Liste"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
    console.log(this.state.mappingArray)
};

handleValue() {
    let key = this.state.currentKey.toString()
    this.setState({mappingArray: [
        ...this.state.mappingArray,
        <Object key={key} Id={this.state.currentKey} type="Wert"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
};

render() {
    return (
    <Popup className='CreatePage' trigger={<button className='AddButtons'>Add Mapping</button>} position="right center" modal nested>
        <div>
            <h1>Mapping erstellen</h1>
                <div>
                    <AddingPopup handleList={this.handleList.bind(this)}
                    handleValue={this.handleValue.bind(this)} />
                    {this.state.mappingArray}
                <button className='SmallButton' onClick={() => 
     this.props.updateMapping(this.state.mappingArray)}>Speichern</button>
                </div>
        </div>
    </Popup>
    )
}

}

This is the top-level component that stores the entire array in the mappingArray state. Objects can be added into it with the which receives the handleList() and handleValue() methods in it’s props. It will send it’s array on with the updateMapping prop.

class Object extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        listArray: [],
        name: "",
        type: this.props.type,
        currentKey: this.props.Id
    };
}

handleList() {
    let key = this.state.currentKey.toString()
    this.setState({listArray: [
        ...this.state.listArray,
        <Object key={key} Id={this.state.currentKey} type="Liste"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
    console.log(this.state.listArray)
};

handleValue() {
    let key = this.state.currentKey.toString()
    this.setState({listArray: [
        ...this.state.listArray,
        <Object key={key} Id={this.state.currentKey} type="Wert"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
};

updateName = (evt) => {
    this.setState({name: evt.target.value.substr(0, 100)})
}

render() {
    return(      
        <div>
            <div>Typ: {this.state.type}</div>
            <TextField id ="outlined-basic" label="Name" variant="outlined" value={this.state.name} onChange={this.updateName} />
            <AddingPopup handleList={this.handleList.bind(this)}
                handleValue={this.handleValue.bind(this)} />
            {this.state.listArray.length === 0 ? <MappingButton /> : null}
            <div className='InputLevelSub'>
                {this.state.listArray}
            </div>
        </div>
    )
}

This is the object that can be added to the mappingArray state of the above component and it works on much the same way, it has an array into which objects can be inserted in the same way.

updateHeaderMapping(array) {
    console.log(array)
    this.setState({headerMapping: array})
}

     <CreateMappingPage updateMapping = {this.updateHeaderMapping}/>

I then want to sent the mappingArray stored in the CreateMappingPage to another component that then stores it in the state headerMapping.

But the console output of the finished array shows that each of the objects only saved it’s props but not it’s state, only the top level of objects remain.

<template>
    <div class="carousel">
        
        <slot></slot>
         <button @click="index++">Next</button>
    </div>

</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';

const slots = useSlots()
const index = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotElements.length} elements.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

I’m trying to create carousel based on slots. Thanks to the previous person on stack overflow, he helped me to figured out how to extract array of slots. Now, I’m dealing with another issue. In order to create carousel, I have to somehow change index of element in the array, so I can move to the next slide of my carousel. Later I have to inject it to my slide component to let V-show render current slot that is 0 by default. But index’s value is changed by v-on directive that changes index, so it selects the next or previous slot in the array. I know that I’ve chosen a complex subject in vue but I don’t want to use simpler version of carousel based on images’ array because I can’t add another component inside this one.

It turned out that I cannot simply by changing index arr[index] select the next object in the array.

First of all, I don’t know javascript or any other scripting or programming language. Sorry about that.

However, a few weeks ago I discovered somewhere a line that would let you change the way YouTube handles different playback speeds when you typed it on the console. By default YouTube uses some kind of time-stretch algorithm that keeps the pitch same but you obviously get lots of artifacts especially when slowing down the audio.

The command changed it to function like variable speed tape machine – you slow down the audio, the pitch goes down but there are no nasty artifacts. Speed up and the pitch goes higher. That is more musical way to slow or speed up audio and it was quite fun to listen songs at slower or faster speed and hear what they sound like without the need to record them with Audacity and then doing it there or in a DAW.

The problem is that I have forgotten what the line was.

document.getElementsBy????? something something

I thought I wrote it down somewhere but apparently not. Can’t even remember where I discovered it. I have tried to Google it but so far I have had no luck.

Thank you in advance!