JavaScript Discussion Boards

Re: How can I minimize the entire browser?

Peter_in_278011-Jul-21 22:19

Peter_in_2780

11-Jul-21 22:19

Richard Deeming wrote:
immediately minimized your browser window to hide its nefarious activities!

... or set full screen (hiding the magic X) with an onanything() handler to restore itself...

Back in the day that caused quite a few heart attacks.

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

Re: How can I minimize the entire browser?

SeeSharp219-Jul-21 9:46

SeeSharp2

19-Jul-21 9:46

Why would you want to do this?

Want to achieve web page timing become focus execution

Member 1528061310-Jul-21 13:09

Member 15280613

10-Jul-21 13:09

[REPOST] Want to achieve web page timing become focus execution

Richard Deeming11-Jul-21 22:08

Richard Deeming

11-Jul-21 22:08

You have already posted this in the thread immediately below this one.

Do not repost your question. If you do not get a reply, that suggests either you haven't provided enough information, or nobody has a solution for you. Posting the same question again will simply annoy people, and could get you banned from the site.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Want to achieve web page timing become focus execution

Member 152806137-Jul-21 15:20

Member 15280613

7-Jul-21 15:20

How do I get my input box to persist after clicking Amend? (SOLVED)

samflex3-Jul-21 6:15

samflex

3-Jul-21 6:15

Greetings experts,

I have a two part question but first what I am trying to accomplish and what I have tried so far.

Currently, we have a button on our web page with an Amend. value.

When you click the Amend button, a textbox is displayed which allows users to enter whatever text they wish to enter.

If user changes his/her mind after clicking Amend, users can click Cancel to hide the textbox again.

This works well.

The original intent is to allow users to enter data as an amendment to existing data and submit to the database.

Here is the working code:

//JS
            $("#btconsultsup").click(function () {
              if ($(this).val().toLowerCase() == "amend") {
                  $.each($('.consultsup'), function(i, item){
                  $(this).show();
                });
                $(this).val("Cancel");
            } else {
                  $.each($('.consultsup'), function(i, item){
                  $(this).hide();
                });
                $(this).val("Amend");
            }
          });
          


//HTML
     <input id="btconsultsup" type="button" value="Amend" name="btconsultsup" />
    <div class="consultsup" style="display: none"><input class="shortCosts"  id="amendconSupportContractCosts" name="amendconSupportContractCosts" value=""/></div>

However, management has decided that once data is entered into this textbox, (A), once you click Amend button to display the textbox, then Cancel button should be hidden because they want the textbox to display permanently on the page even after the page is closed and reopened; and (B), data should displayed permanently on that textbox.

So, how do I hide the Cancel button so it will no longer be available to users to click on it to hide the textbox once it is already displayed?

Two, how do I ensure that once the Amend button is clicked and textbox is displayed, that it remains displayed even after the page is closed and reopened.

I had suggested to them that the best solution is to just add the textbox to the page without the need for Amend button but they refused.

Any suggestion is greatly appreaciated.

modified 5-Jul-21 9:49am.

Re: How do I get my input box to persist after clicking Amend?

Richard Deeming4-Jul-21 21:41

Richard Deeming

4-Jul-21 21:41

Assuming your server-side code outputs the stored value from the database in the textbox, then you simply need to test on page load whether the textbox is empty, and display it if it has a value.

JavaScript

$(function(){
    const displayShortCosts = function(){
        $(".consultsup").show();
        $("#btconsultsup").hide();
    });
    
    if ($("#amendconSupportContractCosts").val()) {
        displayShortCosts();
    }
    else {
        $("#btconsultsup").click(displayShortCosts);
    }
});

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

modified 5-Jul-21 9:39am.

Re: How do I get my input box to persist after clicking Amend?

samflex5-Jul-21 2:41

samflex

5-Jul-21 2:41

Hello Richard,

Thank you very much sir for your awesome response.

Just one follow up question.

So your solution and my JS would work together as shown below?

$(function(){
    const displayShortCosts = function(){
        $(".consultsup").show();
        $("#btconsultsup").hide();
    });
    
    if ($("#shortCosts").val()) {
        displayShortCosts();
    }
    else {
        $("#btconsultsup").click(displayShortCosts);
    }
});

 $("#btconsultsup").click(function () {
      if ($(this).val().toLowerCase() == "amend") {
	  $.each($('.consultsup'), function(i, item){
	  $(this).show();
	});
	$(this).val("Cancel");
    } else {
	  $.each($('.consultsup'), function(i, item){
	  $(this).hide();
	});
	$(this).val("Amend");
    }
  });

Re: How do I get my input box to persist after clicking Amend?

Richard Deeming5-Jul-21 2:47

Richard Deeming

5-Jul-21 2:47

You wouldn't need your script. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: How do I get my input box to persist after clicking Amend?

samflex5-Jul-21 3:24

samflex

5-Jul-21 3:24

Just a little confused by this:

if ($("#shortCosts").val()) {

I have it as a class in my HTML:

Re: How do I get my input box to persist after clicking Amend?

Richard Deeming5-Jul-21 3:39

Richard Deeming

5-Jul-21 3:39

Sorry, should be:

JavaScript

if ($("#amendconSupportContractCosts").val()) {

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: How do I get my input box to persist after clicking Amend?

samflex5-Jul-21 3:49

samflex

5-Jul-21 3:49

Perfect, perfect!!!

Thank you so much sir.

Incredible!

js problem

tkshitiz30-Jun-21 22:13

tkshitiz

30-Jun-21 22:13

program for consecutive characters which are same, omit one if consonents and do nothing if they are vowel in javascript

Re: js problem

Richard MacCutchan30-Jun-21 22:15

Richard MacCutchan

30-Jun-21 22:15

Sorry, this site does not provide code to order. Do yourself a favour and learn to do your own work. Start at: JavaScript Tutorial[^]

A button at html to trigger an autoplay audio at exact time

Member 1526543827-Jun-21 23:42

Member 15265438

27-Jun-21 23:42

hello! I’m a beginner on coding.

I have an javascript

setInterval(function()

ideally that will auto play a audio at an exact time. Now I want to use a html button to trigger the setInterval(function(). The timer works ok as I’ve tested by using an alert. Please advise if the below codes are ok to do an autoplay audio function?

thanks

the audio in HTML:

<div id="time"></div>
  <audio controls style="display: none;">
     <source src="audio.mp3" type="audio/mpeg" />
 </audio>

the javascript:

setInterval(function() {
    var d = new Date(),
        hours = d.getHours(),
        min = d.getMinutes(),
        sec = d.getSeconds();
    if (hours === 16 && min === 25 && sec === 01) {
        var audio = document.getElementsByTagName('audio')[0]
        audio.play()
        audio.style.display = 'block'
    }
}, 1000)

Re: A button at html to trigger an autoplay audio at exact time

Richard MacCutchan28-Jun-21 0:06

Richard MacCutchan

28-Jun-21 0:06

Member 15265438 wrote:
Please advise if the below codes are ok to do an autoplay audio function?

What happens when you try it?

Re: A button at html to trigger an autoplay audio at exact time

Member 1526543828-Jun-21 0:11

Member 15265438

28-Jun-21 0:11

it won’t auto-play the audio… I’ve ask someone else and said user need interact with the webpage first to play an auto-play action. So I wonder if I can use a button the trigger the javascript?

Re: A button at html to trigger an autoplay audio at exact time

Richard MacCutchan28-Jun-21 0:24

Richard MacCutchan

28-Jun-21 0:24

See HTML Audio[^].

Re: A button at html to trigger an autoplay audio at exact time

Richard Deeming28-Jun-21 4:06

Richard Deeming

28-Jun-21 4:06

Two obvious problems here:

1) Playing audio or video except as a direct result of user interaction is generally blocked. This includes playing the audio some time after the user has clicked a button - whilst some browsers might give you a small amount of leeway, playing audio minutes after the user clicked the button is likely to be blocked.

2) Javascript timers are not guaranteed to fire at a precise time. The setInterval callback will not be called more than once per second, but there is no guarantee that it will be called at least once per second. This is particularly problematic if your page is in the background, where the timer resolution will be decreased to conserve power.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: A button at html to trigger an autoplay audio at exact time

Member 1526543828-Jun-21 22:11

Member 15265438

28-Jun-21 22:11

thanks for the explaining.
So can you give any advise that would make it happen?
What I want to do sounds simple: when people go to the website and audio will auto-played at a specific time…
I understand browser will have restrictions on this but will there any ways could make it happen?
thanks

Re: A button at html to trigger an autoplay audio at exact time

Richard Deeming28-Jun-21 22:25

Richard Deeming

28-Jun-21 22:25

If you can convince the users to change their settings for your site to allow it to auto-play audio without user interaction, then you might be able to get close. You would need to change your test to see if the current time was greater than or equal to the desired time, rather than checking that it's precisely equal to the desired time. Once the desired time has passed, clear the timer to stop it from checking every second.

JavaScript

const playAudio = function(){
    const audio = document.querySelector("audio");
    audio.style.display = "block";
    audio.play();
};

const shouldPlayAudio = function(){
    const now = new Date();
    
    const h = now.getHours();
    if (h > 16) { return true; }
    if (h < 16) { return false; }
    
    const m = now.getMinutes();
    if (m > 25) { return true; }
    if (m < 25) { return false; }
    
    const s = now.getSeconds();
    return s >= 1;
};

let autoPlayTimer = null;

const playAtTime = function(){
    if (shouldPlayAudio()) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
        playAudio();
    }
};

autoPlayTimer = setInterval(playAtTime, 1000);

Demo[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

How to merge to javascripts to test in console?

ajaszin18-Jun-21 14:52

ajaszin

18-Jun-21 14:52

Hi,
I am new to js and might be a silly question. sorry for that as I started to learn JS.

I have made 2 scripts. 1 for autoclick buttons and another 1 for autoclick nextpage button.
How to merge both codes to one after one. also I need to set 5 seconds delay between both this scripts.

Script 1:

var buttons = document.getElementsByClassName('Polaris-Button');

    for(var i = 0; i <= buttons.length; i++)  
       buttons[i].click();

Script 2:

var btn = document.getElementsByClassName('ant-pagination-next');

    for(var s = 0; s <= btn.length; s++)  
       btn[s].click();

Thanks in advance.

Re: How to merge to javascripts to test in console?

Richard Deeming20-Jun-21 23:45

Richard Deeming

20-Jun-21 23:45

Try:

JavaScript

document.querySelectorAll(".Polaris-Button, .ant-pagination-next").forEach(btn => btn.click());

Document.querySelectorAll() - Web APIs | MDN[^]
NodeList.prototype.forEach() - Web APIs | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: How to merge to javascripts to test in console?

DerekT-P21-Jun-21 9:22

DerekT-P

21-Jun-21 9:22

Where there are multiple CSS selectors, in what order is the result list? (I know, I should experiment and find out!). But for the OP, I suspect this may not be the required solution, since he's wanting all the buttons of one class clicked before the other. Also, it doesn't include the 5 second delay he's after.

So: simply wrap the first block of code in a function ('ClickPolaris') and the second block in another function ('ClickPagination'). To run one, then the other, simply:

JavaScript

ClickPolaris();
ClickPagination();

To implement a five-second delay, you'll need a timer interval:

JavaScript

ClickPolaris();
setTimeout(function() {ClickPolaris();}, 5000);

Of course you can then refine it to use a single parameterised function, called twice with the different class names:

JavaScript

function ClickButtons(classname) {
  var buttons = document.getElementsByClassName(classname);
  for(var i = 0; i <= buttons.length; i++) { 
    buttons[i].click();
  }
}

ClickButtons('Polaris-Button');
setTimeout(function() {ClickButtons('ant-pagination-next');}, 5000);

and further simplify using Richard's suggested syntax:

JavaScript

function ClickButtons(classname) {
document.querySelectorAll(classname).forEach(btn => btn.click());
}

ClickButtons('.Polaris-Button');
setTimeout(function() {ClickButtons('.ant-pagination-next');}, 5000);

Note that in this syntax you need to include the . to indicate you're selecting by class name.

Re: How to merge to javascripts to test in console?

Richard Deeming21-Jun-21 21:49

Richard Deeming

21-Jun-21 21:49

DerekT-P wrote:
Where there are multiple CSS selectors, in what order is the result list?

The matching elements will be returned in document order:

Selectors API Level 1[^]:
The querySelectorAll() ... must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order.

So given:

HTML

<input id="btn1" type="submit" class="ant-pagination-next">
<button id="btn2" class="Polaris-Button"></button>
<button id="btn3" class="ant-pagination-next"></button>
<button id="btn4" class="Polaris-Button ant-pagination-next"></button>

then querySelectorAll(".Polaris-Button, .ant-pagination-next") will return [btn1, btn2, btn3, btn4].

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.