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'm having issues sending multiple user-input files via ajax to server-side PHP. I am using a FormData() object to send the files, and when I try to access them using $_FILES in PHP, it gives me an "unidentified index" error for the file object key in ...
I am utilizing Angular along with the camera plugin in Capacitor to locally save images on both desktop and tablets. I aim to utilize the CameraSource to directly access the camera or open the gallery for files without displaying a prompt. This is how my ...
I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...
Currently, I am working on developing a jquery slider that showcases rounded images. Below is the HTML code: jQuery(document).ready(function($) { var $lis = $('ul').find('li'), length = $lis.length; $lis.each(function( ...
I am working on a project where I have a div containing an unordered list that moves to the left when you click on an LI item. <div id="products"> <ul> <li><a href="">Product 1</a></li> <li><a href="">Produc ...
I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...
Can a two-column layout be created where one column has a minimum width value? Take a look at the following code: #container { width: 100%; max-width: 1200px; min-width: 960px; height: 600px; margin: 0 auto; } #sidebar { float: left; ...
I'm attempting to implement the code below on my React Native iOS device: import { Buffer } from "buffer"; const buf = Buffer.alloc(8) buf.writeBigUInt64BE(BigInt(123), 0) const value = buf.readBigUInt64BE(0) console.log(value) However, I&a ...
I work with NodeJs, Express, and Handlebars. The main file for my server is named app.js const express = require('express'); const exphbs = require('express-handlebars'); const app = express(); app.engine('handlebars', ex ...
I am encountering difficulties utilizing the context API to globally pass a state in my app's layout. Here is the code for the Layout component: import { useState, useEffect, createContext } from 'react' import useAPIStore from "../store/sto ...
Initializing CKEditor in the following manner: function init() { $( ".ckeditor" ).ckeditor( { format_tags: 'h3;p', toolbar: [ [ "Source", "-", "Bold", "Italic" ], [ "Link", "Unlink" ], [ "Blockquote", "F ...
In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...
Is there a way to pass the value of coins, or even better, currency to my callback function so I can freely use the parsed JSON data in other functions? function fetchJSON(path, callback) { var jsonReq = new XMLHttpRequest(); jsonReq.onreadystatechang ...
Is there a way to embed an entire external website onto another site, without scroll bars or borders? I attempted this method but the entire page did not load, and there were still scroll bars and borders present. <!DOCTYPE HTML> <html> <b ...
web page layout <!DOCTYPE html> <html lang="en"> <head> <title>Student Information</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshe ...
My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...
How can I make VuetifyJS advanced slots work seamlessly with the Google Places API? Currently, some addresses appear in the autocomplete dropdown only after clearing the input text by clicking the "x" icon in the form field. To see the problem in action, ...
I recently created a basic HTML document using the HtmlAgilityPack, which includes an embedded image in base64 format. Dim myDocument As New HtmlDocument() Dim pageContent As String = "<!DOCTYPE html> <html> <body> <img src=""data:im ...
My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...
check out this plunker link. HTML: <body ng-app="app"> <h1>selectable</h1> <selectable text="link1" status="true"></selectable> <selectable text="link2" status="false"></selectable> <p> ...