Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users can simply manually scroll down as well.

My main question is: Is there a way to ensure that the rest of the page only becomes visible once the user has clicked on that button, essentially forcing them to activate the automated scrolling before gaining access to the remainder of the site?

This same functionality is also desired for the next button labeled "act on this message."

Any assistance or guidance on achieving this would be greatly appreciated.

Below is a snippet of the code:

<body>
    (Code Snippet)
</body>

In summary, my goal is to reveal the banner section along with the "act..." button upon clicking the "proceed...." button. Subsequently, after pressing the "act..." button, I aim to display the entire content of the site.

I have managed to partially address this issue, but I am encountering difficulties with scrolling after the second click. To view the current state, please visit www.fenrak.com. Your input and support in resolving this matter would be highly valued.

javascriptjqueryhtmlcssshow-hide

Answer №1

To prevent overflow, apply the overflow:hidden style to the body element. You can remove this style using Javascript by clicking a button.

[Update] See an example below:

In your CSS file:

body{
  overflow:hidden;
}

In your JavaScript file (using jQuery):

$(document).ready(function(){
  $("#BUTTON_ID").click(function(){
    $("body").css("overflow", "visible");
  });
});

(Note: This code has not been tested yet)

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

Using node.js with express to send data stored in a variable to the browser instead of displaying it in the

I'm currently getting the hang of node.js. It's pretty straightforward to use res.send and output some basic "hello world" text, but how can I pass variables to the browser instead of just to the console? Here is a snippet of code: var Tester = ...

javascriptnode.jsexpress

Assign the private members of the class to the arguments of the constructor

class Bar { #one #two #three #four #five #six #seven #eight #nine #ten #eleven #twelve #thirteen #fourteen #fifteen #sixteen constructor( one, two, three, four, five, six, seven, eight, ...

javascripttypescriptes6-class

Set the first link in a menu to be highlighted as active using jquery

In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link ...

jqueryhtmlcss

Differences Between 'this' and 'self' in Classes

I am currently working with ES6 Classes and I'm struggling to grasp why I am able to access the this variable within one of the methods. //CODE class Form{ constructor(){ var self = this; } assemble(){ log(self); ...

javascriptes6-class

The function jQuery(" ").datepicker({ }) does not function correctly in Internet Explorer versions 7 and 8

Having Trouble with Datepicker jQuery(function() { jQuery("#fromDatepicker").datepicker({ changeMonth : true, changeYear : true, dateFormat: 'mm/dd/yy' }); }); jQuery(function() { ...

jquery-uijqueryjquery-selectors

Numerous options available in a dropdown menu

I have a Dropdown menu that offers various functions. "Update" option redirects to a page for updating information "Export Form" option redirects to a page for exporting the form Although the current code allows these actions, I am facing an issue with ...

javascriptphphtml

A step-by-step guide on adding a table with colored icons (red, green, and blue) to an HTML page using jQuery

I'm working on a project that requires designing an HTML page with three tables containing images, along with a compare button. Initially, only two tables are visible upon page load, but when the user clicks the compare button, the third table should ...

jqueryhtmlcss

Is there a way to display session messages in a CakePHP .ctp file?

There is a button on a view page that requires validation to check the type of user clicking it. We want to restrict certain users from clicking this button and making changes. To achieve this, we are checking the session ID at the time of button click. If ...

javascriptphpjquerysessioncakephp

The onClick event handler fails to trigger in React

Original Source: https://gist.github.com/Schachte/a95efbf7be0c4524d1e9ac2d7e12161c An onClick event is attached to a button. It used to work with an old modal but now, with a new modal, it does not trigger. The problematic line seems to be: <button cla ...

javascriptreactjs

How can we dynamically navigate to the next line within the Material UI DataGrid component when space is limited?

Currently, I am working with the datagrid component from material ui. I have retrieved some data from a database and am attempting to pass it to the datagrid component. However, I have noticed that certain fields contain long strings which do not fully app ...

javascriptreactjsmaterial-ui

Attempting to dynamically update the image source from an array when a click event occurs in a React component

Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click? For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow s ...

javascripthtmlcssarraysreactjs

CodeIgniter's feature of a dynamically dependent dropdown list

I am facing an issue with implementing three Dynamic Dependent Dropdown Lists in Codeigniter:- The first dropdown represents company names Based on the company selected, I aim to display that particular company's managers in another dropdown The thir ...

phpjqueryajaxcodeigniterdropdown

How to use jQuery to set a background image using CSS

I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet: $(document).ready(function () { $(".VociMenuSportG").each(function () { ...

javascriptjqueryhtmlcss

"Efficient Implementation: Expo React Native Utilizes Custom Font Loading One Time Only

Hello everyone, I'm a newcomer here and I'm currently using Expo to build a react native app. My goal is to implement custom fonts in my project. I've gone through the documentation which can be found here. However, I'm facing an issue ...

javascriptreactjsreact-nativeexpo

What is the method for sending one URL as a parameter within another URL?

When I try to access the route /new/:url with a request like /new/https://www.google.com, the response is Cannot GET /new/https://www.google.com. What I actually want to receive is the string https://www.google.com. I came across an answer on URL compone ...

javascriptnode.jsexpressurl

Suggestions for relocating this function call from my HTML code

I have been working on updating a javascript function that currently uses an inline event handler to a more modern approach. My goal is to eliminate the unattractive event handler from the actual HTML code and instead place it in a separate modular javascr ...

javascriptjqueryregexforms

The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

As I work on developing a basic invoice generator application, I encounter an issue with overflowing content in the "notes" section when passing data through props from the App.js file. Instead of wrapping the text, it overflows its container. import "./Ap ...

javascripthtmlcssreactjsbootstrap-4

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

photos arranged in rows rather than a single row

Looking for help with arranging the remaining photos in the second row? Check out this example image link. I'm struggling to organize a row of overflow images within the "small-img-row" division. This row is located under the main image in col-2. H ...

htmlcssflexbox

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...

csspseudo-element