Loading a webpage once the loading bar has completed

Is there a way to modify the JavaScript code for my progress bar that loads from 1 to 100 percent so that it automatically redirects to another page when reaching 100%? Here is the current JavaScript code:

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("mybar");
    var width = 1;
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
        // Add code to redirect to another page here
      } else {
        width++;
        elem.style.width = width + "%";
        elem.style.delay = "3s";

      }
    }
  }
}

Answer №1

Modify the window.location.href attribute within the condition "if (width >= 100)"

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("mybar");
    var width = 1;
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
        setTimeout(function () {window.location.href = 'http://www.google.com'}, 3000);
      } else {
        width++;
        elem.style.width = width + "%";
        elem.style.delay = "3s";

      }
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving information from an external local json file

I'm attempting to display an 'alert' box containing text retrieved from a JSON file. However, I'm facing issues in fetching data from the JSON file and the alert box is not being displayed. var thebook = JSON.parse(book); function s ...

Transforming text into visuals

My current project involves a web application that showcases the profiles of more than 600 individuals, each featuring a unique word cloud. These word clouds are generated using HTML. Recently, the client has asked for the same word clouds to be integrate ...

Transferring information to a controller using ajax in ASP.NET Core

I am encountering an issue with sending data to the controller through ajax. The value goes as "null". Can someone please assist me with this? Here are my HTML codes: <div class="modal fade" id="sagTikMenuKategoriGuncelleModal" data ...

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

In the realm of website design, the IE7 display

I am currently facing an issue with my gallery buttons when using IE7. The CSS code I have for the buttons is causing them to shift to the right hand side of the gallery, even though they work fine in other browsers. Here is the code: .prv_button{ flo ...

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

Combining Imported Models in Three.js: A Guide

I'm working on optimizing the draw calls in my THREE.js scene by reducing the amount of rendering required. I have a grid of large 32x32 tiles that are .gtlf models imported from the disk. Each tile has a model with just 8 vertices and a texture. Howe ...

Can the break statement be used in jQuery or JavaScript?

I created a function that picks a text based on the input string. If there is a match, it sets it as selected. Here is the function: function chooseDropdownText(dropdownId,selectedValue,hfId){ $('#'+dropdownId+' option').ea ...

Developing a webpage that navigates seamlessly without the hassle of constantly refreshing with

I am in the process of creating a website that is designed to run everything within the same file, but I am unsure about how to locate study materials for this project. For example: In a typical website scenario -> If I am on index.php and I click on ...

The application of CSS rule shadowing is not consistently enforced

Why does the text in the selected element not appear yellow like the "char_t" link above, even though they have the same class? It seems like it should be yellow based on the inspector, but it's not displaying as such on the actual page. This issue is ...

Tips on altering a predetermined input text value using JavaScript

I have a question about using JavaScript. I am currently developing a tax calculation system. function calculateTax(){ var invoiceValue = document.getElementById("invoicevalue"); var ppn = document.getElementById("ppn"); var pph = document.get ...

Challenges with splitting asynchronous code in NPM modules

Earlier, I posted a query on Stack Overflow I have recently established a local package within the main app's package.json: "contact-page": "file:local_modules/contact-page" The package.jsonmain and scripts sections for the contact module are confi ...

Establishing the Access-Control-Allow-Origin

I have a basic .NET web service: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; /// <summary> /// Summary description for WebService /// </summary> [WebService(Namespace = "http ...

The proper way to incorporate HTML within JSON in Django Templates for safe usage

What is the best way to securely display JSON data in a Django web application? In my Django server, I create JSON data and then display it in a Django template. Sometimes, this JSON data contains snippets of HTML. While this usually works fine, if the &l ...

Is there a way to update a .json value using commands in Discord?

As a beginner in coding, I have successfully created a Discord bot using Node.js that has the ability to modify the entire config.json file, start and stop the bot, and create instances. However, I am currently facing a challenge where I need to update a s ...

Is there a way to retrieve the name associated with a channel/server ID?

As I work on enhancing the console log for my discord bot, one of my objectives is to capture all the messages visible to the bot. Here's what I have done so far: client.on('message', message => { const User = client.users.cache.get(m ...

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

Advantages of using ConfigService instead of dotenv

What are the benefits and drawbacks of utilizing @NestJS/Config compared to using dotenv for retrieving environment variables? Although I can create a class to manage all envvars in both scenarios, is it necessary? I am aware that @NestJS/Config relies on ...

Move the element outside of the parent container

I am in the process of creating a collapsible sidebar using bootstrap, and I am attempting to have a submenu appear outside of the sidebar when it is toggled to a mini navigation. For example: When the window size is greater than 767 pixels and you click ...

Extract JSON content from an array's values containing underscores

I am currently working with an array of objects and need to implement a filter on it. The objects in the list contain an owner_id property within the JSON... Currently, I am looping through all the items in the array. However, I want to exclude those wher ...