Is there a way to lock an image in place within a fancybox popup as I scroll within the popup?

I am working on a gallery that uses fancybox popup functionality. My goal is to display an image on the left side and accompanying text on the right side within the Fancybox Popup window. If the text happens to be too lengthy, I would like users to be able to scroll down to read it while keeping the image fixed in the top left corner of the fancybox.

I have experimented with using position:fixed and background-position:fixed, but encountered issues where part of the image gets hidden outside the boundaries of the fancybox due to fixed positioning being calculated from the viewpoint. The version of Fancybox I am using is 2.1.4. You can view my site here:

Does anyone know how I can achieve fixing the image on the left side inside a fancybox popup?

jquerycssfancyboxfancybox-2

Answer №1

When working with images, make sure the CSS position is set to relative. Keep in mind that the position status of the div above it matters. If you encounter any issues while debugging, check this setting for future reference.

.sticker {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

To create a scrolling text box, you can use:

div.item-page-contents {
    min-width: 100px;
    overflow: scroll;
}

This will add scroll bars to the text box, but you may need to adjust the size of the containing div to ensure proper fitting. To remove scroll bars, nest the text box div inside a smaller div with overflow: hidden to hide the bars but keep the scroll functionality.

The renders look great! Did you create them yourself?

EDIT: The fancy box feature includes an inline CSS rule that enables scrolling if content exceeds the box size. Carefully arrange elements to avoid this issue. Joomla or the fancy box plugin may offer options to disable this behavior, although I have not used them personally.

div.item-page-contents {
    width: 275px;
    float: right;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}

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

The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Having some trouble with this animation not working in Firefox. I'm triggering the animation using JavaScript after a delay like so: document.getElementById('my_id').style.webkitAnimationPlayState = "running"; I've also attempted: s ...

javascriptcssfirefoxanimationopacity

Unresponsive Ajax Calls in Laravel 5

I've been attempting to retrieve an Ajax response with Laravel 5, however, I'm encountering an issue. Here's the error that appears in the Chrome debugger: POST http://localhost:8000/getmsg 500 (Internal Server Error)send @ jquery.min.js:4a ...

phpjqueryajaxlaravel

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Is it possible to update HTML content using JavaScript or JQuery? https://i.sstatic.net/EWOXg.png I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery ...

javascripthtmljquery

When the screen size changes, the Bootstrap 4 h-100 column does not stack correctly

I've encountered an issue with Bootstrap 4 while utilizing the h-50 and h-100 helper classes along with rows incorporating columns of different breakpoints. Consider the following scenario : <style> html,body { height: 100%; } ...

htmlcsstwitter-bootstrapbootstrap-4

I utilized jQuery to specifically choose properties from a collection of objects

Suppose we have an array of objects like this var input = [ {title: 'one', code: '1', desc: 'sds'}, {title: 'two', code: '2', desc: 'wewe'}, {title: 'three', code: '3', ...

jqueryarraysobject

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

javascriptjqueryonclick

Utilizing the jQuery `.map()` function to generate objects within the mapping process

Greetings, I am currently in the process of developing a geocoder and I need to transmit a JSON map to the groovy backend. I am attempting to convert this unordered list structure: : http://jsfiddle.net/PJFVN/1/ <ul id="hiddenmap"> <li class=" ...

jqueryjsondictionaryreturn

Empty data in Laravel when using jQuery/AJAX

I'm currently working on enhancing my comment submission form to operate seamlessly without the need for a page refresh. I want the submitted comments to be dynamically appended into a specific div to display them instantly. Although the form successf ...

jqueryajaxlaravel

Is there a way for me to retrieve the specific comment ID that I am looking to respond to?

I have written the code below and I am looking to extract a specific ID to reply to a comment. Can someone please review the snippet below and provide guidance on the necessary steps to achieve this. .anc { cursor: pointer; } <script src="https://c ...

htmlcssbootstrap-4

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

What is causing the CSS loader to continue showing up even after all the items have finished loading?

I have been developing an innovative newspaper/blogging platform using CodeIgniter 3.1.8 and Twitter Bootstrap 4. Currently, my focus is on implementing the AJAX functionality to load more posts dynamically. The default setup paginates the posts, display ...

javascriptphpjqueryajaxcodeigniter

Error encountered while using the getJSON code syntax

Is there an issue with this code snippet? I am receiving a syntax error on line 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="http:/ ...

javascriptjquerygetjson

``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason. Here's the CSS related to this problem: .hiddenTextjob { display:none; ...

javascripthtmljquerycss

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

Having Trouble with Centering in Bootstrap 4

I'm a bit puzzled about how to center the h2 element. This is my first time using Bootstrap 4, transitioning from Bootstrap 3, so maybe there's a difference that I'm not aware of? Any guidance on this matter would be greatly appreciated. Tha ...

htmlcssbootstrap-4

Issues with the functionality of the shopping cart are causing a disruption

This is the coding for the online shopping cart: <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <title>Online Shopping Cart</title> <script src="jquery-3.1.1.min.js"></script> ...

javascriptjquery

Automatically switch to dark mode at specified times: A simple guide

Here is the current method for toggling themes: let themeToggler = document.getElementById('theme-toggler'); themeToggler.onclick = () => { themeToggler.classList.toggle('fa-sun'); if (themeToggler.classList.contains('f ...

javascripthtmljquerydarkmode

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Cross-reference each checkbox value with the corresponding input text ID. If the checkbox is checked, update the value of the input text with the

Is there a way to compare the values of multiple checkboxes in jQuery (with the same name and variable value) to the values of many input text fields (also with the same name and variable value)? And if a checkbox is checked, can we change the value of the ...

jquerycheckbox