• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

167
Views
Changing a Squarespace button URL based on device

Trying to change the URL based on device for a Squarespace button. It's worth mentioning that the element is created dynamically.

I've gotten searching by class to work as I couldn't get search by id or the query selector to work. The problem now is that search by class generates a list of nodes and I can't seem to get a for loop to correctly select the href.

Might be some other issue I'm not aware of.

This is the code I've tried so far

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1634189249286_8011"><div class="sqs-block-content" id="yui_3_17_2_1_1634205387553_330">

<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small" id="yui_3_17_2_1_1634205387553_329">
    <a href=“http:/google.com” class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">Learn more</a>
</div>
</div></div>

The class of the first div is the one found by the search

 

 <script>

 let n = document.getElementsByClassName("sqs-block button-block sqs-block-button");

   for(var i=0; i < n.length; i++) 
   {
      n[i].addEventListener("click", function(e)
      {
        if(e.target && e.target.nodeName == "a") 
        {
          console.log("item clicked");
        }
      });
  }

</script>

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Check your navigator.userAgent to see if you are getting any value. Also, if your download button in loading dynamically, it will not be selected like this. Try console logging the download button before your if logic to see the value you get.

To target values created dynamically check Event Delegation: What is DOM Event delegation?

almost 3 years ago · Juan Pablo Isaza Report

0

Found a freelancer on Upwork to finish the task

< script src = "https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity = "sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin = "anonymous" > < /script> < script >
  var operatingsystem = [{
      name: 'iPhone',
      value: 'iPhone',
      version: 'OS'
    },
    {
      name: 'iPad',
      value: 'iPad',
      version: 'OS'
    },
    {
      name: 'Macintosh',
      value: 'Mac',
      version: 'OS X'
    },
  ];

var requestHeader = [
  navigator.platform,
  navigator.userAgent,
  navigator.appVersion,
  navigator.vendor,
  window.opera
];

function findDeviceOS(string, data) {
  var i = 0,
    j = 0,
    html = '',
    regex,
    regexv,
    match,
    matches,
    version;

  for (i = 0; i < data.length; i += 1) {
    regex = new RegExp(data[i].value, 'i');
    match = regex.test(string);
    if (match) {
      regexv = new RegExp(data[i].version + '[- /:;]([\d._]+)', 'i');
      matches = string.match(regexv);
      version = '';
      if (matches) {
        if (matches[1]) {
          matches = matches[1];
        }
      }
      if (matches) {
        matches = matches.split(/[._]+/);
        for (j = 0; j < matches.length; j += 1) {
          if (j === 0) {
            version += matches[j] + '.';
          } else {
            version += matches[j];
          }
        }
      } else {
        version = '0';
      }
      return {
        name: data[i].name,
        version: parseFloat(version)
      };
    }
  }
  return {
    name: 'unknown',
    version: 0
  };
}

var requestagent = requestHeader.join(' ');
var operatingsystem = this.findDeviceOS(requestagent, operatingsystem);

//unknown means user outside of apple device
btn_link = 'https://apps.apple.com/us/app/rna-translation/id1508192093?ls=1'
if (operatingsystem.name == 'unknown') {
  btn_link = 'https://android.com'
}
$(function() {
  $('#block-yui_3_17_2_1_1588401406921_37594 a').attr('href', btn_link);
}); </script>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error