How to translate from jquery to pure javascript this finsweet hack #4 for webflow

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How to clear user uploaded images if the limit of files exceeded in jquery

  I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:

  $("#myfile").on("change", function() {
      if ($("#myfile")[0].files.length > 4) {
          alert("You can select only 4 images");
      } 
  });

  <input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">

  This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.

  Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?
• Some iphone device not able play audio browser jquery

  My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,

   <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script>   
  
  let autoplay = true;
      let soundID;
      var sound = new Howl({
          src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'],
          autoplay: autoplay,
          loop: true,
      });
  
      soundID = sound.play();
  
• Whenever I try to add email on mysql server. My page is not responding. why?

  I am a little bit confused. see the code below.

  $('#submit').click(function() {
      $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/
      $.ajax({
          url: "save.php",
          /* Here data store on mysql server without email and response to welcome.php. */
          type: "POST",
          /* if i want to add proper email format then data store in mysql but not response on welcome.php. */
          data: $('#senddata').serialize(),
          success: function(r) {
              alert("ok");
              $('#senddata').trigger('reset');
              window.location = 'welcome.php'; /*This is welcome page*/
          }
      })
  })
  

  I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.

  <?php
  include('./config.php');
  print_r($_POST);
      $name=$_POST['name'];
      $email=mysqli_real_escape_string($con,$_POST['email']);
      $pwd=$_POST['password'];
      $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip'];
      $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')";
      print_r($insertdata);
      if(mysqli_query($con,$insertdata)){
          echo "data added";
      }else{
          echo "not added";
      }
  
  ?>
  

  Note: if I put my button <button class="btn btn-primary" id="submit">sign up</button> outside form then everting is right.
• Typo3 frontend-page shows section names

  Section Messages

  I have trouble with my frontend Typo3 Site, because it shows the names of the sections. I don't know how to remove this alerts... Thanks for help.

  UPDATE: I had changed the ERROR outputs from true to false. Clearing the Caches didn't affect anything, so I deleted all temp files and now it works.
• svelte recursively create treeview from unknown object

  I am coding some kind of primitive CMS just for editing, updating and adding new strings of an app. the strings are all stored in a database and each of them have a special key (representing the folderstructure of the project "shared.atoms.copie...") for referencing from the sourcecode to the database. the editing stuff and so on is already coded, but now i need to provide the user some kind of navigation and the possibility to see a preview of the page, which is being edited, by clicking (for example) a node of the navigation

  for that i want to build a treeview of the already from all keys built object which looks like the following:

  tree: {
    common: {
      date: [{
        lang: "en", 
        key: "common.date", 
        version: 1, 
        value: "Date"
      },
      block: {
        lang: "en", 
        key: "common.block", 
        version: 3, 
        value: "Block"
      }]
    },
    shared: {
      atoms: {
        copyClipboard: {
          copiedToClipboard: [{
             lang: "en", 
             key: "shared.atoms.copyClipboard.copiedToClipboad", 
             version: 3, 
             value: "Copied to Clipboard!"
          }]
        }
      }
    }
  }
  

  in javascript i got this solution what does give me a tree, when i use {@html htmlTree}:

  function buildHtmlTree(treeNode) {
    let objKeys = Object.keys(treeNode);
    if (objKeys.length == 0) {
      return;
    }
    for (let key of objKeys) {
      let currentNode = treeNode[key];
      htmlTree += `
        <ul class="ml-2 mb-4">
          <span>
            ${key}
          </span>
        `;
      if (Array.isArray(currentNode)) {
        // is leaf
        for (let currentLanguage of currentNode) {
          htmlTree += `
            <li class="ml-2">
              ${currentLanguage.lang}: ${currentLanguage.value}
            </li>
            `;
        }
      } else {
        // is branch
        buildHtmlTree(currentNode);
      }
      htmlTree += `</ul>`;
    }
  }
  
  buildHtmlTree(tree);
  

  now i am trying to make it the svelte-way, but i'm stuck at this ... i think i just made an infinite-loop.

  <script>
    let svelteTree = Object.keys(tree);
  </script>
  
  <section>
    {#each svelteTree as key}
      <ul class="ml-2 mb-4">
        <span>{key}</span>
        {#if Array.isArray(svelteTree[key])}
          {#each svelteTree[key] as currentLanguageSvelte}
            {currentLanguageSvelte.lang}: {currentLanguageSvelte.value}
          {/each}
        {:else}
          <svelte:self svelteTree={svelteTree[key]} />
        {/if}
      </ul>
    {/each}
  </section>
  
• Can we have Page Builder capabilities with Headless CMS or I need Hybrid CMS?

  I have heard a lot of Pros about headless CMS, but 1 of teh biggest advantage we are seeing with our existing CMS is that content authors can easily create/structure the pages. They can choose where on the Page to place the Carousel banner or Teasers content etc. they can shuffle the coponents the way they want & front end engine can render the Page in the same order.

  Do we lose this capability with Headless CMS, what I have understood from headless CMS (Contentful, Adobe Experience Manager etc.) will allow creating the components but the entire rendering part needs to be managed by the front end application.

  Wondering, if I need the hybrid approach or am I missing anything in understading the headless capabilities because with this limitation, I see that front end would need a lot of tagging to be done by the authors to decide which component to place at whihc level while rendering the page.

  Also, do we lose drag & drop, WYSWYG features completely with headless CMS or can still be achieved?

  Thanks
• Rotate and translate image from center to all directions one by one in ios swift

  I am trying to make a demo of animation for learning but i am having issue regarding coordinate system of apple and how does it work when trying for animations. The issue is i have 6 static images stacked upon each other as pile of playing cards and have 6 empty views in all directions which is of same height and width as the pile cards height width. Now how do i rotate and translate card 6 to bottomleft then card 5 to topleft then card 4 to top center card3 to topright then card 2 to bottom right and card1 to bottom center i.e more like a playing card distribution animation

  setup for my storyboard:
• Which one should be used in React, l10n or i18n?

  I have a webpage in React and I wanted to use l10n (localization) but only find information about i18n (internationalization), so I don't know if l10n exists for React or if I'm forced to use i18n.
• How to translate standard buttons in Qt?

  I have a problem with translate standard buttons in QMessageBox. If I check the language, the buttons are translated very well, but if I don't check the language, the buttons are not translated. How can I get translated buttons without checking the language every time when I need to show QMessageBox?

  #include "application.h"
  #include "main_window.h"
  
  #include <QTranslator>
  #include <qlibraryinfo.h>
  
  int main( int argc, char *argv[] )
  {
    Application application( argc, argv );
  
    QString language = app()->settings().value("language").toString();
  
    if (language == "Russian") // Here I check the language
    {
      QTranslator translator_ru;
      
      if (translator_ru.load(QString("translations/qtbase_ru.qm")))
        application.installTranslator(&translator_ru);    
  
      if (QMessageBox::question(0, "Delete?", "First test") == QMessageBox::Yes) {} // In this message, the standard buttons are in Russian   
    }
  
    if (QMessageBox::question(0, "Delete?", "Second test") == QMessageBox::Yes) {} // In this message, the standard buttons are in English
  
    MainWindow window;
    window.show();
    return application.exec();
  }
  
• Tab system that needs to add/remove tabs. Need help to update the index when adding new tabs?

  I've been working on this for sometime but can't find a solution that works. Any help is hugely appreciated!

  Working: You're able to click next to go to each tab, by default only 5 are shown.

  Not working: If you click next until you get to services and then choose "full head of highlights" 2 more tabs are added in (with "detach()") - when next is clicked it adds 2 tabs and updates the number 4/7, but the index doesn't update and I get this error:

  Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
  

  I think this error relates to the index being incorrect - basically I need to add something to update the index if a colour is checked. I've tried to do this in many different ways but it's not working.

  Dev website: #

  Webflow || [];
  Webflow.push(function () {
      // For any tab-prev and tab-next clicks
      $(".booking_component").on("click", ".tab-prev, .tab-next", function () {
          // Get direction
          var direction = $(this).hasClass("tab-prev") ? -1 : 1;
          // Get the tab links
          var tablinks = $(this).parent().find(".w-tab-menu");
          // Get index of current tab link, add direction
          var index = tablinks.find(".w--current").index() + direction;
  
          // If array out of bounds, click on the first
          index = index >= tablinks.children().length ? 0 : index;
          console.log("step index = " + index);
  
          var bookingStep = $("#stepNumber");
          var tabNumber = index + 1 + "/" + tablinks.children().length;
  
          if (index === 0) {
              bookingStep.text(tabNumber);
              $(".booking-nav-btn.prev").css("visibility", "hidden");
          }
          if (index === 1) {
              bookingStep.text(tabNumber);
              $(".booking-nav-btn.prev").css("visibility", "visible");
              $(".booking-nav-btn.prev").removeClass("hidden");
          }
          if (index === 2) {
              bookingStep.text(tabNumber);
          }
          if (index === 3) {
              bookingStep.text(tabNumber);
              if (colorOption == true) {
                  //updateIndex;
              }
          }
          if (index === 4) {
              bookingStep.text(tabNumber);
              if (colorOption == true) {
                  //updateIndex;
              }
          }
          if (index === 5) {
              bookingStep.text(tabNumber);
          }
          if (index === 6) {
              bookingStep.text(tabNumber);
          }
          // Update tabs by triggering a "tap" event on the corresponding slide button
          // if ($("[name='Colour']").is(":checked")) {
          //  // Check colour options
          //  index = 2;
          // }
          tablinks.find(".w-tab-link").eq(index).trigger("click");
      });
      // End click handler
  });
  

  });
• How to make a multilingual script work in a shopping cart

  I’m developing an ecommerce website and I’m looking to make a multi language experience. I duplicated almost all pages except product page and checkout page.

  This tutorial works perfectly except for the cart. As you can see, the text doesn’t change according to the language and stay like that : [[fr]] xxxx [[en]] xxx Does someone have an idea to solve my issue?

  https://preview.webflow.com/preview/ikinesis-test?utm_medium=preview_link&utm_source=designer&utm_content=ikinesis-test&preview=142bb9a901b87c8b6cf91e26da18a063&pageId=6266e55a7a346139817247c6&workflow=preview

  Thank you !!

  Here the code implemented :

  In the header :

  <script>
  window.onload = function() {
      var anchors = document.getElementsByTagName('*');
      for(var i = 0; i < anchors.length; i++) {
          var anchor = anchors[i];
          anchor.onclick = function() {
              code = this.getAttribute('whenClick');
              eval(code);   
          }
      }
  }
  

  Before the /body tag :

  var DEAFULT_LANG = "fr";
  var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
  var isStorageEnabled = ! (typeof localStorage == 'undefined');
  var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEAFULT_LANG).substr(0,2);
  
  var getLangParam = function(){
      var arr = /lang=([a-z]{2})/g.exec(location.search);
      return arr ? arr[1] : null;
  }
  
  var getLangFromStorage = function(){
      return isStorageEnabled ? localStorage.getItem('lang') : undefined;
  }
  
  var setLang = function(lang){
      user_lang = lang;
      if(isStorageEnabled){
          localStorage.setItem('lang', user_lang);
      }
      applyLang();
  }
  
  var applyLang = function(){
      globalDict.forEach(function(v){
          $(v.elm).html(v.dict[user_lang]);
      });
  }
  
  function textNodesUnder(el){
    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_ALL,null,false);
    while(n=walk.nextNode()){
        a.push(n);
    }
    return a;
  }
  
  var globalDict = [];
  
  $(function(){
      
      user_lang = getLangParam() || getLangFromStorage() || user_lang;
  
      if(isStorageEnabled){
          localStorage.setItem('lang', user_lang);
      }
  
      // bugfix for IE11
      // if multilingual sentence is divided into sevaral text node, restore original text node
      $("*").each(function(i,v){
          if(LANG_REG_EXP.test($(this).text().replace(/\n/g,"")) && $(this).html().indexOf("<") == -1){
              $(this).text($(this).text().replace(/\n/g,""));
          }
          var $v = $("#" + $(this).attr("id"));
          if($v.length > 0 && LANG_REG_EXP.test($v.text().replace(/\n/g,"")) && $v.html().indexOf("<") == -1){
              $v.text($v.text().replace(/\n/g,""));
          }
      })
      
      textNodesUnder(document).filter(function(v){
          return LANG_REG_EXP.test(v.nodeValue);
      }).forEach(function(v,i){
          var dict = {};
          var arr;
          while((arr = LANG_REG_EXP.exec(v.nodeValue)) != null){
              dict[arr[1]] = arr[2];
          }
          globalDict.push({elm:$(v).parent()[0], dict:dict});        
      });
      applyLang();
  });
  </script>
  
  <!-- Language: French -->
  <script>
      $(".french *:not(ul)").html(function(i,v) {
      return "[[fr]]" + v + "[[en]]  <b></b>";});
  </script>
  
  <!-- Language: English -->
  <script>
      $(".english *:not(ul)").html(function(i,v) {
      return "[[en]]" + v + "[[fr]]  <b></b>";});
  </script>
  
  <style>
     ul{
      list-style:none;
     }
  </style>
  
• Producing an anaglyph effect on Webflow

  So I've been into anaglyphs for a few weeks now, and I want to implement a feature just like Stack Overflow did for April Fools 2022 (aka. Filters). I have made a button for toggling the effect, but cannot find a way to add an onClick Event to enable or disable the 3D effect. Help would be greatly appreciated with the JavaScript portion and the actual 3D feature.

  I wanted to find a drag-and-drop website builder for my Raspberry Pi Apache2 webserver, and I found Webflow. I've created the pages for it, but have very little HTML experience and no JavaScript or CSS experience. Here is the code I have for the anaglpyph:

  .someClass {
  color:rgba(0,255,255,0.5);
  text-shadow: rgba(255,0,0,0.5) -1.5px 0px 0px;
  padding-left:4px;
  

  }

  If you want to take a look at the website, here is the link: Webflow View-Only Link