0
257
ViewsHow to change 1 CSS line after a new page within my website opens after clicking a link?
I would like to change 1 CSS line when you click a link in the website and a new page opens. I want to create a ‘order form’ link on a page, which goes to another page and then the order form should open up by changing the display to block of the div that contains the order form.
Is this possible, perhaps with Javascript? I have too little knowledge of Javascript therefore I am asking it here.
Thank you.
Best, Silvan
UPDATE: Additional Javascript Click which doesn’t work probably since I’m already using !important on the Display: block.
$('.close-icon-form').click(function() {
$('#order-form').css({
'display': 'none'
});
$('#order-form').attr('style', 'display: none !important');
});
UPDATE: I have tried what @Simp4Code said but that does nothing. See screenshots for what I have done. This seems like a solid solution but so far no succes :(
2 answers
Answer question0
So in JavaScript I'd recommend doing this with cookies.
- Check if the cookie exists, if it does then the body will get a class of
.orderFormVisible
// Regular Expression to check for existence of cookie
if (document.cookie.match(/^(.*;)?\s*orderForm\s*=\s*[^;]+(.*)?$/)) {
// If cookie exists add class to <body>
document.body.classList.add('orderFormVisible');
};
- Add click event listener to the button to set the cookie
// Get the button by ID
const orderButton = document.getElementById('orderButton');
// Check if button exists before adding click listener
orderButton && orderButton( 'click', function(e) {
// When button is clicked add a cookie
// You can set max-age (in seconds) for the cookie lifespan
// So that the cookie will clear itself shortly after navigating
document.cookie = 'orderForm=Visible; max-age=10;';
// To clear cookie manually remove max-age and add path
/* document.cookie = 'orderForm=Visible; Path=/;'; */
});
2A. [optional] Manually clear the cookie
// Get the button by ID
const closeButton = document.getElementById('closeButton');
// Check if button exists before adding click listener
closeButton && closeButton( 'click', function(e) {
// When button is clicked delete cookie
document.cookie = 'orderForm=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT';
});
- Use CSS to display the form, something like this
.orderFormVisible #orderForm { display: block; opacity: 1 }
I would recommend you do a bit of reading up about this, here's a useful MDN link where they go into details about security and a cookie max age and so on
0
You can add a query param when redirecting to new page for ex -
window.open('http://www.yourwebsite.com?redirect=true','_blank')
Then you can check if "redirect" query param is present if it is you can handle accordingly.