Tips for designing a pre-selection process

Question

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page.

For instance, on the contact page, users would be prompted with a question like "Are you looking to reach out to us for a purchase or to speak with our customer service team". Based on their selection, they would then be directed to the corresponding contact form (one to email the customer service team and one for the purchasing team).

Although I am still relatively new to HTML/CSS/JavaScript, I believe that creating this feature may call for more advanced JavaScript skills.

javascript html css

Answer 1

Answer №1

To help you understand better, I can provide a basic example. However, I recommend getting some foundational training in front-end development first.

if (window.confirm('Would you like to load form A?')) {
  document.getElementById('a').style.display = 'block';
} else {
  document.getElementById('b').style.display = 'block';
}

https://jsfiddle.net/4PnGkQY3/2/

Answer 2

To help you understand better, I can provide a basic example. However, I recommend getting some foundational training in front-end development first.

if (window.confirm('Would you like to load form A?')) {
  document.getElementById('a').style.display = 'block';
} else {
  document.getElementById('b').style.display = 'block';
}

https://jsfiddle.net/4PnGkQY3/2/

Answer 3

Answer №2

It seems like adjusting the z-index values of the elements based on button clicks could solve your issue.

If you want to learn more about z-index, check out this resource here.

Alternatively, you can also use the display property.

For example:

function showPage(page) {
    if (page == "one") {
         document.getElementById("pageOne").style.display = "block"; // shows first page when called
    } else if (page == "two") {
         document.getElementById("pageTwo").style.display = "block"; // shows second page when called
    } else {
    window.alert("Error: Incorrect usage");
    }
    document.getElementById("originalPage").style.display = "none"; // hides main page
}

document.getElementById("buttonOne").addEventListener("click", function 
myFunction() {showPage("one");}); // shows first page and hides original when button one is clicked
document.getElementById("buttonTwo").addEventListener("click", function 
myFunction() {showPage("two");}); // shows second page and hides original when button two is clicked

#originalPage {
  background-color: black;
  width: 100px;
  height: 100px;
}
#pageOne, #pageTwo {
  display: none; /*Both #pageOne and #pageTwo should start as display: none;*/
  background-color: yellow;
  width: 100px;
  height: 100px;
}
#pageTwo {
  background-color: orange;
}

<div id="originalPage">
<button id="buttonOne">Page One</button>
<button id="buttonTwo">Page Two</button>
</div>
<div id="pageOne"></div>
<div id="pageTwo"></div>

<!--Content goes into each div accordingly-->

Answer 4

It seems like adjusting the z-index values of the elements based on button clicks could solve your issue.

If you want to learn more about z-index, check out this resource here.

Alternatively, you can also use the display property.

For example:

function showPage(page) {
    if (page == "one") {
         document.getElementById("pageOne").style.display = "block"; // shows first page when called
    } else if (page == "two") {
         document.getElementById("pageTwo").style.display = "block"; // shows second page when called
    } else {
    window.alert("Error: Incorrect usage");
    }
    document.getElementById("originalPage").style.display = "none"; // hides main page
}

document.getElementById("buttonOne").addEventListener("click", function 
myFunction() {showPage("one");}); // shows first page and hides original when button one is clicked
document.getElementById("buttonTwo").addEventListener("click", function 
myFunction() {showPage("two");}); // shows second page and hides original when button two is clicked

#originalPage {
  background-color: black;
  width: 100px;
  height: 100px;
}
#pageOne, #pageTwo {
  display: none; /*Both #pageOne and #pageTwo should start as display: none;*/
  background-color: yellow;
  width: 100px;
  height: 100px;
}
#pageTwo {
  background-color: orange;
}

<div id="originalPage">
<button id="buttonOne">Page One</button>
<button id="buttonTwo">Page Two</button>
</div>
<div id="pageOne"></div>
<div id="pageTwo"></div>

<!--Content goes into each div accordingly-->

Tips for designing a pre-selection process

Answer №1

Answer №2

Similar questions

The z-index property does not seem to be affecting the positioning of images and buttons

A design featuring a two-column layout, with one column remaining static while the other

"Using Sequelize's Op.and and Op.like operators led to an unexpected outcome of producing an empty

PhoneGap iOS application storing outdated information

How can I dynamically assign ng-model with a filter for a particular object in an array?

Discovering ways to determine if multiple strings are present within a single string using JavaScript

Create a specific website link for searching on YouTube

(Reactjs) Steps to automate submission of file upon selection

Personalized design created using v-for

What is the best way to attach functions to specific jQuery objects and exclude others?

Tips on validating ASP.NET gridview textbox with javascript during the update process:

Send an AJAX request to redirect to a different page on a PHP server

Utilizing the :after pseudo-element for placing text in a specific location

Having issues retrieving a JSON array in PHP with the json_decode function

What is the best way to address background-image overflow on a webpage?

Using functions as properties in React.js

How can I adjust the position of a circular progress bar using media queries?

When attempting to fetch JSON data using the Angular 2 `http.get()` method, the data returned is undefined and the component does not reflect any

What is the best way to retrieve the initial cell from a row that the user is currently hovering over?

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?