Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

Question

Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

I am trying to create an image hover effect, but I am encountering an issue. When I hover over certain images, unwanted scrollbars appear, and I would like to find a way to prevent this from happening. It seems to be related to the viewport and calculations, but I am unsure of the solution.

Check out an example here

View the JSBin code here

Here is the code snippet I am working with:

$('.simplehover').each(function(){
    var $this = $(this);        
    var isrc = $this[0].src, dv = null;
                        
    $this.mouseenter(function(e){
        dv = $('<div />')
            .attr('class', '__shidivbox__')
            .css({
                display: 'none',
                zIndex : 9999,
                position: 'absolute',
                top: e.pageY + 20,
                left: e.pageX + 20
            })
            .html('<img alt="" src="' + isrc + '" />')
            .appendTo(document.body);           
        dv.fadeIn('fast');
    })
    .mouseleave(function(){
        dv.fadeOut('fast');
    });         

});

Can someone please assist me in positioning the hovered image in a way that prevents scrollbars from appearing? (Unless the image size is exceptionally large)

I want to display the original image on zoom without causing scrollbars to show as much as possible.

Please note: I intend to convert this into a jQuery plugin, so I cannot require users of the plugin to set overflow to hidden. The solution should involve properties like viewport, left, top, scroll width, height, window width/height for future incorporation.

Update:

I have made some progress with this solution:

Check it out here

However, it still feels like a hacky fix and not entirely perfect. I am seeking a better algorithm or solution. There are hover plugins that handle this elegantly, but due to my limited expertise, I am struggling. For example, the Hover Zoom Chrome Plugin does an excellent job of positioning hovered images based on their size.

javascript jquery css

Answer 1

Answer №1

Here's an example:

html{overflow-x:hidden;}
html{overflow-y:hidden;}

To implement this on your website, simply add these CSS definitions and you're good to go.

Update for Resizing: This code handles resizing and positioning images when hovered, both horizontally and vertically. Regardless of where the image appears, it will always be displayed in full without being cut off. If you have more thumbnails than can fit on the page, scrollbars will appear even before the hover images show up.

Final Working Update: While focusing on hiding scrollbars, it's important to consider that if there are more thumbnails than the viewport can display, scrollbars will appear anyway. Therefore, when calculating the position of the hover image, not only the resize but also the scrollTop position must be taken into account! Check out the final JSBin here, where all images are resized and displayed in full regardless of scrollTop and viewport size.

$this.mouseenter(function () {

    // Code for resizing and positioning images

});

Answer 2

Here's an example:

html{overflow-x:hidden;}
html{overflow-y:hidden;}

To implement this on your website, simply add these CSS definitions and you're good to go.

Update for Resizing: This code handles resizing and positioning images when hovered, both horizontally and vertically. Regardless of where the image appears, it will always be displayed in full without being cut off. If you have more thumbnails than can fit on the page, scrollbars will appear even before the hover images show up.

Final Working Update: While focusing on hiding scrollbars, it's important to consider that if there are more thumbnails than the viewport can display, scrollbars will appear anyway. Therefore, when calculating the position of the hover image, not only the resize but also the scrollTop position must be taken into account! Check out the final JSBin here, where all images are resized and displayed in full regardless of scrollTop and viewport size.

$this.mouseenter(function () {

    // Code for resizing and positioning images

});

Answer 3

Answer №2

To adjust the position of the image, consider the available width: http://example.com/adjust-image

This demonstration considers the space available for positioning the image (such as the window width minus the image width). Additionally, I have enhanced the event order, ensuring the popup div only fades in after the image has fully loaded.

Answer 4

To adjust the position of the image, consider the available width: http://example.com/adjust-image

This demonstration considers the space available for positioning the image (such as the window width minus the image width). Additionally, I have enhanced the event order, ensuring the popup div only fades in after the image has fully loaded.

Answer 5

Answer №3

Here is my responsive image adaptation script (JSBin DEMO)

$('.simplehover').each(function(){
        var $this = $(this);

        // Confirm that the element is an image
        if (! $this.is('img')) return false;

        var isrc = $this[0].src, dv = null;

        if (! isrc) return false;

        $this.mouseenter(function(e){
            // Get mouse position
            var initXPos = e.pageX;
            var initYPos = e.pageY+20-$(window).scrollTop();
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            // Load the original image
            var $img = $('<img/>');
            $img.on('load',function(eload) {
                var widthImage = this.width;
                var heightImage = this.height;
                // Set inline style to get sizes later
                $(this).css('width',widthImage);
                $(this).css('height',heightImage);
                var ratio = widthImage/heightImage;

                var finalXPos = initXPos+widthImage>windowWidth? windowWidth-widthImage-5 : initXPos;
                var finalYPos = initYPos;

                var img = this;


                // Resize image if bigger than window
                if(finalXPos<0)  {
                    finalXPos = 0;
                    $img.css('width', windowWidth-10);
                    $img.css('height',(windowWidth-10)/ratio);
                }

                // Handle overflow on Y axis

                if(finalYPos+getSize($img,'height')>windowHeight) {

                    // Determine whether to show on top or bottom
                    var showOnTop = (windowHeight-initYPos-10)<windowHeight/2;
                    if(showOnTop) {
                        if(initYPos<getSize($img,'height')) {
                            $img.height(initYPos-30);
                            $img.width(getSize($img,'height')*ratio);
                        }
                        finalYPos = 0;
                        finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;

                    }else {
                        // Show on bottom
                        if(windowHeight-initYPos<getSize($img,'height')) {
                            $img.height(windowHeight-initYPos-10);
                            $img.width(getSize($img,'height')*ratio);

                        }
                        finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;
                    }
                }
                dv = $('<div />')
                .attr('class', '__shidivbox__')
                .css({
                    display: 'none',
                    zIndex : 9999,
                    position: 'absolute',
                    MozBorderRadius : '5px',
                    WebkitBorderRadius : '5px',
                    borderRadius : '5px',
                    top: finalYPos+$(window).scrollTop(),
                    left: finalXPos
                }).append($img)
                .appendTo(document.body);           
            dv.fadeIn('fast');
            });
            // Load the original image
            $img.attr("src",$this.attr("src"));

            function getSize($el,widthOrHeight) {
                return +$el.css(widthOrHeight).replace("px","");
            }
        })
        .mouseleave(function(){
            dv.fadeOut('fast');
        });         

    });

This script adjusts images to fit the window size and position them correctly on the x-axis if necessary.

Answer 6

Here is my responsive image adaptation script (JSBin DEMO)

$('.simplehover').each(function(){
        var $this = $(this);

        // Confirm that the element is an image
        if (! $this.is('img')) return false;

        var isrc = $this[0].src, dv = null;

        if (! isrc) return false;

        $this.mouseenter(function(e){
            // Get mouse position
            var initXPos = e.pageX;
            var initYPos = e.pageY+20-$(window).scrollTop();
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            // Load the original image
            var $img = $('<img/>');
            $img.on('load',function(eload) {
                var widthImage = this.width;
                var heightImage = this.height;
                // Set inline style to get sizes later
                $(this).css('width',widthImage);
                $(this).css('height',heightImage);
                var ratio = widthImage/heightImage;

                var finalXPos = initXPos+widthImage>windowWidth? windowWidth-widthImage-5 : initXPos;
                var finalYPos = initYPos;

                var img = this;


                // Resize image if bigger than window
                if(finalXPos<0)  {
                    finalXPos = 0;
                    $img.css('width', windowWidth-10);
                    $img.css('height',(windowWidth-10)/ratio);
                }

                // Handle overflow on Y axis

                if(finalYPos+getSize($img,'height')>windowHeight) {

                    // Determine whether to show on top or bottom
                    var showOnTop = (windowHeight-initYPos-10)<windowHeight/2;
                    if(showOnTop) {
                        if(initYPos<getSize($img,'height')) {
                            $img.height(initYPos-30);
                            $img.width(getSize($img,'height')*ratio);
                        }
                        finalYPos = 0;
                        finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;

                    }else {
                        // Show on bottom
                        if(windowHeight-initYPos<getSize($img,'height')) {
                            $img.height(windowHeight-initYPos-10);
                            $img.width(getSize($img,'height')*ratio);

                        }
                        finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;
                    }
                }
                dv = $('<div />')
                .attr('class', '__shidivbox__')
                .css({
                    display: 'none',
                    zIndex : 9999,
                    position: 'absolute',
                    MozBorderRadius : '5px',
                    WebkitBorderRadius : '5px',
                    borderRadius : '5px',
                    top: finalYPos+$(window).scrollTop(),
                    left: finalXPos
                }).append($img)
                .appendTo(document.body);           
            dv.fadeIn('fast');
            });
            // Load the original image
            $img.attr("src",$this.attr("src"));

            function getSize($el,widthOrHeight) {
                return +$el.css(widthOrHeight).replace("px","");
            }
        })
        .mouseleave(function(){
            dv.fadeOut('fast');
        });         

    });

This script adjusts images to fit the window size and position them correctly on the x-axis if necessary.

Answer 7

Answer №4

Hey there! Let's dive into something exciting. Check out my response. I've been observing this for a few days and thought I'd join in too. The following code ensures that the images hover within the viewport. In case the image width exceeds the display space, the image will be resized accordingly (Feel free to disable this feature by commenting out the code section related to resizing).

var $document = $(document);
$('.simplehover').each(function(){
    var $this = $(this);
    // Confirm if the element is actually an image
    if (! $this.is('img')) return false;

    var isrc = $this[0].src, ibox = null;

    if (! isrc) return false;
    ibox = $('<img />')
            .attr('class', 'simpleimagehover__shidivbox__')
            .css({
                display: 'none',
                zIndex : 99,
                MozBoxShadow: '0 0 1em #000', 
                WebkitBoxShadow: '0 0 1em #000',
                boxShadow: '0 0 1em #000',
                position: 'absolute',
                MozBorderRadius : '10px',
                WebkitBorderRadius : '10px',
                borderRadius : '10px'
            })
            .attr('src', isrc)
            .appendTo(document.body);          

    $this.bind('mouseenter mousemove', function(e) {
        $('.simpleimagehover__shidivbox__').hide();

        var left = e.pageX + 5, 
            top = e.pageY + 5,
            ww = window.innerWidth,
            wh = window.innerHeight,
            w = ibox.width(),
            h = ibox.height(),
            overflowedW = 0,
            overflowedH = 0;

        // Calculate to show element without exceeding viewport
        // Code for resizing image if it overflows
        // Other functionality goes here

    }); 

    // More event bindings and functionalities here

});

While my solution isn't flawless, you may discover some helpful insights regarding viewport determination. Additionally, consider optimizing the code for performance. Since this is a plugin under development, ensure it runs efficiently before releasing it to the public. The key is to keep it fast and responsive.

Answer 8

Hey there! Let's dive into something exciting. Check out my response. I've been observing this for a few days and thought I'd join in too. The following code ensures that the images hover within the viewport. In case the image width exceeds the display space, the image will be resized accordingly (Feel free to disable this feature by commenting out the code section related to resizing).

var $document = $(document);
$('.simplehover').each(function(){
    var $this = $(this);
    // Confirm if the element is actually an image
    if (! $this.is('img')) return false;

    var isrc = $this[0].src, ibox = null;

    if (! isrc) return false;
    ibox = $('<img />')
            .attr('class', 'simpleimagehover__shidivbox__')
            .css({
                display: 'none',
                zIndex : 99,
                MozBoxShadow: '0 0 1em #000', 
                WebkitBoxShadow: '0 0 1em #000',
                boxShadow: '0 0 1em #000',
                position: 'absolute',
                MozBorderRadius : '10px',
                WebkitBorderRadius : '10px',
                borderRadius : '10px'
            })
            .attr('src', isrc)
            .appendTo(document.body);          

    $this.bind('mouseenter mousemove', function(e) {
        $('.simpleimagehover__shidivbox__').hide();

        var left = e.pageX + 5, 
            top = e.pageY + 5,
            ww = window.innerWidth,
            wh = window.innerHeight,
            w = ibox.width(),
            h = ibox.height(),
            overflowedW = 0,
            overflowedH = 0;

        // Calculate to show element without exceeding viewport
        // Code for resizing image if it overflows
        // Other functionality goes here

    }); 

    // More event bindings and functionalities here

});

While my solution isn't flawless, you may discover some helpful insights regarding viewport determination. Additionally, consider optimizing the code for performance. Since this is a plugin under development, ensure it runs efficiently before releasing it to the public. The key is to keep it fast and responsive.

Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

Update:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Touch interaction operates differently than mouse movement

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

CSS slider thumb with visible track behind it

I'm curious about which datatype is best to showcase dates in the Jquery Datatable plugin

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Unable to implement new ecmascript decorators within typescript version 2.4.2

Blurring a section of a circular image using a combination of CSS and JavaScript

The AJAX request is not executing the xmlhttp.open method for running the script

Personalize the material design datatable checkbox option

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

Utilizing jQuery to send data to a PHP script

Customize border color for a single cell in a table using Bootstrap 4

Ways to position two images in the center

Tips for making a horizontal grid layout with three items in each row

Minify and group options available for asset managers specifically designed for traditional HTML websites

Create an HTML div element that spans the full width of the

Choosing elements in jQuery

Implementing a callback function in Vue js 2 for handling dispatched actions within a component

Removing the column name from a JSON return in C# involves using a variety of techniques

What is the best way to assign a value to the param tag of an applet using JavaScript variables