if the overlay is visible (the element is set to display: block), then move the element underneath downwards

I have incorporated a sizable overlay on my website, utilizing popify.js. This overlay is triggered by a click function that essentially toggles between 'display:block;' and 'display:none;', creating a simple show/hide effect. However, I am encountering an issue where the content below the overlay is being obscured. Since the page is long vertically, I am attempting to implement a condition that will reposition the overlapped element beneath the overlay by adding a margin-top of 300px.

However, if the

.sDetails2

class is no longer set to display: block; then the margin-top: 300px; should be removed.

The following element needs to be adjusted:

.verticallparallaxwrapper section.content-guide { 
        margin-top: 300px; // add this if .sDetails2 is set to display: block
}
javascriptjquerycss

Answer №1

It seems like using jQuery's .slideToggle() function might be a good solution for your needs. Have you considered implementing something similar to this example on jsfiddle?

JavaScript

$('#whatevertriggerspopup').on('click', function() {
    $('#thepopup').slideToggle();
});

Update:

To address the issue with margin:

CSS

.toggle-margin {
  margin-top: 300px;
}

JavaScript

$('#whatevertriggerspopup').on('click', function() {
    $('#thepopup').slideToggle();
    $('#thethingbelowthepopup').toggleClass('.toggle-margin');
});

Answer №2

When it comes to manipulating styles without jQuery, there's a limitation with this straightforward approach—it only functions as intended when directly modifying the inline style attribute:

style="display:block;"

This method falls short when attempting to change the display property through a CSS class and its associated rules.

var myOverlay = document.getElementsByClassName('sDetals2')[0];
var movingElement = document.getElementsByClassName('content-guide')[0];
var displayCheck = myOverlay.style.display;

if(displayCheck == 'block'){
   movingElement.style.margin = '300px 0 0 0';
}
else{
   movingElement.style.margin = '0';
}

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

Utilizing component state or props within Redux mapDispatchToProps operations

As a newcomer to Redux/React, I am still grappling with the concept of dispatch in the Redux environment. Currently, my approach to issuing Redux actions within components involves directly calling the dispatch() function from my component props: const ma ...

javascriptreactjsreduxreact-redux

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

htmlcssreactjsflexbox

Could the Redux store be used to access the state related to specific review comments?

I have a react class component that includes state variables. class NewComponent extends Component { state = { modalIsOpen: false, aa: true, bb: false, cc: false, dd: false, ee: 1, dd: [], cc: [], ff: [], gg: [], ...

javascriptreactjsreduxreact-state-management

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

cssless

Display an element exclusively for mobile users

I am trying to display a text element only when a link is clicked in the mobile view. I suspect there might be a syntax error in this code, but I can't pinpoint where it is. $("#Link1").click( function() { if($(window).width() > 800 ) { $("#T ...

jqueryhtmlcss

Transfer information from an Express route to a function exported from a Node module

I'm new to using node.js and I've been told that I need to use middleware, but I'm having trouble understanding its purpose and the proper way to implement it. I have data that is being sent from my view to an express route. ROUTE - route.j ...

javascriptnode.jsangularjsexpress

PHP/Web Script Security Measures

Searching for ways to safeguard a PHP and javascript script to maintain ownership and sell it as my own creation. Curious about different methods for protecting the script post-sale. Is there a way to prevent buyers from distributing it as their own? Con ...

phpjavascriptcopy-protection

What could be causing my divs to not properly handle overflow with the overflow-y scroll property?

I'm struggling with making my sidebar and content area responsive in terms of height. I want them to adjust to fill the screen appropriately, rather than having a fixed height. The issue arises when I have varying content heights, such as when a page ...

htmlcssbootstrap-5

Exploring the ‘ref’ feature in React alongside Material-UI

In my attempt to access input data through React's "ref" attribute on a TextField in Material-UI, I've encountered some difficulties. It doesn't seem straightforward to achieve this using the 'inputRef' or 'inputProps' me ...

javascriptreactjsmaterial-ui

Efficiently perform complex nested grouping using the powerful array

Hi, I'm currently facing difficulties while attempting to utilize the array.reduce() function in order to achieve correct grouping for a specific scenario: Here is my original array: { { descriptionFunction: "Change", processDate: "201 ...

javascriptnode.js

Attempting deletion with Node.js's Mongoose Framework

Having some trouble with the following code snippet. It doesn't seem to be functioning correctly and is resulting in a 404 error. Any insights on how to troubleshoot this issue? app.delete("/tm/v1/tasks", (req,res) => { Task.findOneAndDelete ...

javascriptnode.jsexpressmongoose

React: Update the hidden input's value to reflect the total number of spans clicked

I have a component called Rating that displays a star rating like this: var Rating = React.createClass({ render: function () { return ( <div className="rate-line"> <div className="rate-title">{this.props ...

javascriptjqueryreactjs

Issue with displaying Bootstrap Modal in fullscreen mode

Utilizing Bootstrap Modal for quick news pop-ups has been a challenge. Currently, the issue is that when clicking on a link, it only displays a small box instead of fullscreen. My question simply put: Is there a way to append the width and height propert ...

htmlcsstwitter-bootstrapbootstrap-modal

Help needed with debugging CSS for IE6 >_<

I have been working on the following website: www.darksnippets.com While the design looks good on Firefox and Chrome, it appears terrible on IE6. For example, on the home page and other pages like , the width is too wide in IE6. I've been unable to ...

cssinternet-explorer-6

Creating multiple React applications using shared configuration files: A step-by-step guide

I am in the process of developing a React app, and my goal is to create multiple React apps that share the same configurations - including modules and configuration files like tailwind.config.cjs. How can I modify my environment to achieve this? My plan i ...

javascriptreactjstailwind-cssviteconfig

Preventing users from selecting past dates in HTML input date field

I need help with disabling past dates in an HTML date input field. Even though I am able to restrict selecting past dates on the date picker, I can still save data if I manually type in a previous date (e.g., 12/08/2020). $(document).ready(function() { ...

javascripthtmljquerydate

Tips for creating inline links

Data is taken from a table using $number and printed as follows: echo "<div class='pagination'><a href='page_pagination.php?number=". $number ."' > ". $number ." </a></div>"; The output does not display in one ...

phphtmlcss

What is the best way to include attributes in an HTML element?

I've been researching how to dynamically add attributes to an HTML tag using jQuery. Consider the following initial HTML code: <input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: lin ...

javascriptjqueryhtml

Placing the cursor on a newly created element is ineffective when the innerHtml is empty

https://codesandbox.io/s/nameless-feather-duk25?fontsize=14&hidenavigation=1&theme=dark In the code example above, I am trying to make a certain feature work. The concept is as follows: there is a contentEditable div element where text can be type ...

javascriptreactjscontenteditable

Choosing between classes and styles for styling components in ReactJS

Can you explain why the call to the classes object works in the code below, rather than to the styles object defined as a const at the beginning? For instance, take a look at this demo: className={classes.button} The above line functions correctly. Howe ...

javascriptcssreactjsclassmaterial-ui