Can anyone help me figure out how to achieve a similar effect as seen on this website:
I'm not looking to replicate the entire site, just interested in recreating the onClick image event where clicking an image resizes the scrollbar to match the height of the overlay image.
If anyone has any tips or suggestions on how I can accomplish this using jquery, please let me know! Thanks in advance.
When a modal is opened, a specific class is added to the body element
.modal-open {
overflow: hidden;
position: relative;
}
This causes all images behind the modal to be concealed, as the scrollbar adjusts to fit the modal content.
Within the modal layer, another class is applied:
.modal-scrollable {
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
Notice that the overflow property is set to auto, which means scrollbars will appear when necessary on this layer.
Here is the code I promised to share with you.
JQuery:
$('.item').on('click','img', function(){
$this = $(this);
$('body').addClass('modal_open');
$('#overlay').fadeIn();
$('#img_zoom').html('new and bigger image tag').fadeIn();
});
CSS:
#overlay{z-index: 1; position: fixed; height: 100%; width:100%; background: rgba(255,255,255,0.3); display:none;}
#img_zoom{position: fixed; z-index: 2; box-shadow: 0 0 5px #000; display:none; bottom: 0; left: 0; overflow: auto; right: 0; top: 0;}
.modal_open {overflow: hidden; position: relative; }
.modal_scrollable {bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }
A big thank you to ComputerArts
Working on a web app that features a tools sidebar with a fixed width requirement amidst fluid content. Explored using flexbox to achieve this, but encountered an issue where the main box only takes the height of the viewport instead of the entire site&ap ...
A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...
I am attempting to delete an HTML element using JQuery like this $('#' + divId + ' .settings_class').remove('.print_settings'); This code does not result in an error or remove the specified html element, however, the selecto ...
When a link is clicked, I have an animation that enlarges a div and fades out using jQuery. At the same time the link is clicked, a redirect is triggered by submitting a form to ensure speed. The redirect cannot be placed in the success function of jQuery& ...
I am a beginner in Laravel and I'm looking to include edit and show buttons in the Controller using my controller below <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use DB; class LiveSearch extends Contr ...
I am a beginner with Selenium using Python. Despite conducting some research, I am still confused about the usage of find_elements_by_class_name as it doesn't seem to be working properly, as illustrated in the image attached. When I use items = brows ...
I am facing an issue in my Angular2 application where I am trying to display an image in Uint8Array format. The problem arises when the image size exceeds ~300Kb, resulting in a 'Maximum Call Stack Exceeded' error. Currently, I have been able to ...
I have been attempting to align the triangle over the edge of the table cell on both ends. However, part of the triangle is being hidden. I have tried using z-index, but it doesn't seem to have any effect. Can anyone provide insight into what might be ...
Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...
Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...
I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...
Can someone help me with this HTML markup and JavaScript code? <tr> <td> <a href="javascript:void(0)" class="slideNextSlidable">Click Here</a> </td> </tr> <tr class="slidable"> <td> ...
I currently have an HTML form using the post method. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript& ...
I am new to AJAX and attempting to make my first AJAX call. Here is the code I have so far: $.get( "validate.php", { 'userinput':'x'}, function(response) { if( response.status ) alert( "Matches found" ); else alert( "No matches ...
I have noticed that the CSS file is not being cached in the Chrome browser. My application is created using Angular-CLI and all the necessary cache-control headers are set, with an Expires header of 5 minutes: Accept-Ranges:bytes Cache-Control:max-age=600 ...
My Dilemma { "rowId": "1", "product_name": [ "Item A", "Item B", "Item C", "Item D", "Item E" ], "product_tag": [ "123456", "234567", "345678", "456789", "5678 ...
I am working on a project where I have an input text field that retrieves data from a database using a combination of JavaScript and PHP. get.html is responsible for fetching the data through JavaScript. function showUser(str) { if (str == "") { ...
I'm currently developing a form to allow users to create a login username and password. Once the account creation is successful, I want the user to be directed to the actual LOGIN form. To manage this process, I've implemented various checks usi ...
I've been working on developing a chatbot app that utilizes a REST API to stream content. While the functionality of the app is running smoothly, I have encountered an issue with the scroll to bottom feature. Instead of automatically scrolling to disp ...
Please check out this link .wrapper { width: 200px; height: 200px; padding: 10px; border: 1px solid #888; overflow: auto; } .scale { width: 400px; height: 300px; background-color: red; transform: scale(0.4); transform-origin: 0 0; transitio ...