I have implemented lightbox style overlays for my 'Read More' content on my website.
However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls.
Any assistance with resolving this problem would be greatly appreciated. Thank you!
If you're experiencing difficulties, it may be necessary to turn off scrollify while your lightbox is active.
You can find more information on this topic on the scrollify website.
Specifically, you will need to use the following:
$.scrollify.disable();
and
$.scrollify.enable();
In the version currently in use (I'm not aware of any other versions, as I haven't used the library before), there seems to be a bug with the disable() method:
$.scrollify.disable = function() {
disable = true;
};
The variable disable is not defined. To fix this, you should update this variable name to disabled. (Please check for any script updates before making this change manually.)
To achieve the desired outcome, you'll need to make some adjustments. Let's take the "READ JOB DESCRIPTION" button as an example. You have the following code for showing and hiding the lightbox:
// SERVICES 2 - OVERLAY - SHOW
$( "#srvcs2" ).click(function() {
$( "#services2-overlay" ).removeClass('animated fadeOutDown').css('left', '0').addClass('animated fadeInUp');
$( "#services2-overlay .container" ).css('opacity', '0').addClass('animated fadeInUp');
});
// SERVICES 2 - OVERLAY - HIDE
$( "#services2-overlay-close" ).click(function() {
$( "#services2-overlay" ).removeClass('animated fadeInUp').addClass('animated fadeOutDown');
$( "#services2-overlay .container" ).removeClass('animated fadeInUp');
});
You will need to insert the scrollify enable and disable code within these functions (and in all other event handlers), like so:
// SERVICES 2 - OVERLAY - SHOW
$( "#srvcs2" ).click(function() {
$.scrollify.disable();
$( "#services2-overlay" ).removeClass('animated fadeOutDown').css('left', '0').addClass('animated fadeInUp');
$( "#services2-overlay .container" ).css('opacity', '0').addClass('animated fadeInUp');
});
// SERVICES 2 - OVERLAY - HIDE
$( "#services2-overlay-close" ).click(function() {
$.scrollify.enable();
$( "#services2-overlay" ).removeClass('animated fadeInUp').addClass('animated fadeOutDown');
$( "#services2-overlay .container" ).removeClass('animated fadeInUp');
});
Note the inclusion of $.scrollify.disable(); and $.scrollify.enable();
This will deactivate scrollify when the lightbox is open and reactivate it once the lightbox is closed.
I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...
I have a PHP page named a.php that contains the following code: <ul class="dropdown-menu noclose"> This code functions correctly, preventing the drop-down menu from closing until the user clicks outside the box. However, when I load the entire a.p ...
My webpage is filled with knockout code, but I'm hoping to integrate a Vue.js component for a specific section. I attempted using controlsDescendantBindings on a surrounding tag for the Vue component, and it seems to be partially functional (I tried ...
Seeking to enhance my CSS skills, I've been faced with a challenging task recently. The objective is to create a full-screen background image with centered text overlay. However, the image appears larger than the screen itself. This is my current se ...
I have a unique counter that counts in currencies, such as Yen and Euro. Each number, as well as the currency sign and separator, are all displayed on the webpage using custom-designed icons. I utilize the display: flex; property in my container div and ap ...
Is there a way to output a list into x number of columns within a content div without specifying the exact amount of columns in CSS? I also want to include a heading at the top of each column: Firstname Lastname State Firstname Lastname State ...
I am working on a page that includes the following code snippet: <script> angular.module('myapp', []).controller('categoryCtrl', function($scope) { $scope.category = <? echo json_encode($myarr); ?>; $scope.subcatego ...
Can anyone confirm if they have encountered this issue before? I'm unsure how to elaborate further as it seems to be the only symptom. Additionally, it does not sync correctly in Internet Explorer. ...
I've implemented a modal window in front of my index page. When the model is valid, I redirect to the index view. However, when the model is not valid, I want it to stay on the modal. How can I achieve this? [HttpPost] [ValidateAntiForgeryToken] publ ...
As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...
This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...
Is there a method to manipulate the scrollbar within a div on a webpage? Specifically, I am attempting to automate scrolling up and down on an Instagram post like . However, since the scrollbar may be hidden using CSS properties, detecting it can be challe ...
As I was reviewing examples in an Angular JS book, I came across a concept that has left me puzzled. It involves the use of custom filters with ng-repeat. Below are the code snippets: <a ng-click="selectCategory()" class="btn btn-block btn-default btn- ...
I am facing an issue with Freemarker. I need to eliminate all the special characters from this sentence as well as from similar sentences in the future: BLA BLA RANDOM &, RANDOM BLA In particular, I want to remove the & character. The platform ...
import React, { useState } from "react"; import FileBase64 from "react-file-base64"; import { useDispatch } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import { TextField, Select, Input ...
I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . U ...
I'm currently working on designing a dark theme for my ionic application by watching this tutorial. It's been effective for most of the classes, however, I've encountered some CSS classes that only respond to overrides in app.scss. If I try ...
I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...
Could someone confirm if the syntax '>\0147' is correct? .blockquote p::before { content: '>\0147'; font-family: serif; font-size: 3em; line-height: 0; display: block; margin: 0 0 20px 0; } ...
I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...