Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By glenngv

Thread: Detect Resize - Glitching and need of refresh

  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Detect Resize - Glitching and need of refresh

    Live: Untitled Document

    Code:
    <script type="text/javascript">
    	var WindowWidth;
    	var WindowHeight;
    	var BodyImageHeight;
    	var htmlpadding;
    	
    	$(document).ready(function () {
    		
    		scrollCompensate = function () {
    			var inner = document.createElement('p');
    			inner.style.width = "100%";
    			inner.style.height = "200px";
    		
    			var outer = document.createElement('div');
    			outer.style.position = "absolute";
    			outer.style.top = "0px";
    			outer.style.left = "0px";
    			outer.style.visibility = "hidden";
    			outer.style.width = "200px";
    			outer.style.height = "150px";
    			outer.style.overflow = "hidden";
    			outer.appendChild(inner);
    		
    			document.body.appendChild(outer);
    			var w1 = inner.offsetWidth;
    			outer.style.overflow = 'scroll';
    			var w2 = inner.offsetWidth;
    			if (w1 == w2) w2 = outer.clientWidth;
    		
    			document.body.removeChild(outer);
    		
    			return (w1 - w2);
    		};
    		
    		var htmlpadding = scrollCompensate();
    
    		var WindowWidth = $(document).width() - htmlpadding;
    		var WindowHeight = $(document).height();
    		var BodyImageHeight = (WindowWidth * 1.4154).toFixed();
    		if(BodyImageHeight > WindowHeight) {
    			$('.test').css('min-height', BodyImageHeight + 'px');
    		}
    		else {
    			$('.test').css('background-image', 'none');
    		};
    	});
    	
    	
    	$(window).resize(function() {
    		
    		scrollCompensate = function () {
    			var inner = document.createElement('p');
    			inner.style.width = "100%";
    			inner.style.height = "200px";
    		
    			var outer = document.createElement('div');
    			outer.style.position = "absolute";
    			outer.style.top = "0px";
    			outer.style.left = "0px";
    			outer.style.visibility = "hidden";
    			outer.style.width = "200px";
    			outer.style.height = "150px";
    			outer.style.overflow = "hidden";
    			outer.appendChild(inner);
    		
    			document.body.appendChild(outer);
    			var w1 = inner.offsetWidth;
    			outer.style.overflow = 'scroll';
    			var w2 = inner.offsetWidth;
    			if (w1 == w2) w2 = outer.clientWidth;
    		
    			document.body.removeChild(outer);
    		
    			return (w1 - w2);
    		};
    		
    		var htmlpadding = scrollCompensate();
    
    		var WindowWidth = $(document).width() - htmlpadding;
    		var WindowHeight = $(document).height();
    		var BodyImageHeight = (WindowWidth * 1.4154).toFixed();
    		if(BodyImageHeight > WindowHeight) {
    			$('.test').css('min-height', BodyImageHeight + 'px');
    			$('.test').css('background-image', 'url(images/background.png)');
    			$('.test').css('background-size', 'cover');
    			$('.test').css('background-repeat', 'no-repeat');
    		}
    		else {
    			$('.test').css('background-image', 'none');
    		};
    	});
    
    
    </script>
    Okay, so what my code above does is;
    • Finds out the scrollbar width of device
    • Finds the window width minus scrollbar width
    • Scales the div accordinng to the image, above * scale of 1.4154
    • Sets the maximum height to the above.


    I'm trying to make it so that if .test height is not greater than the devices height, it does not show the image, instead a more mobile friendly version but for those on smart phones with flip tech built in, I need to make it so when it is flipped it shows. Works on my HTC One, friends iPhone but not on my other friends Windows phone without refresh and testing on the browser it glitches whlst resizing and certain parts need a refresh to show.

    Thank you for any help in advanced,
    Best Regards,
    Tim
    Last edited by MrTIMarshall; 04-14-2014 at 05:33 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by MrTIMarshall View Post
    testing on the browser it glitches whlst resizing and certain parts need a refresh to show.
    What you're doing on resize of the window is expensive. Resize event is triggerred multiple times as you resize the window. The solution is to debounce the resize event handler to have it executed only once for every x milliseconds.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    What you're doing on resize of the window is expensive. Resize event is triggerred multiple times as you resize the window. The solution is to debounce the resize event handler to have it executed only once for every x milliseconds.
    Thank you for your reply,

    Personally, not doubting you due to my lack of knowledge with JQuery, however without the IF-Else statement, everything works much smoother. I've uploaded a version to my serer here for you to see, maybe it's because I'm giving it more to do? Regardless, the outcome doesn't work and I'm not sure how to do what you have suggested. I'm just trying to avoid any white space at the bottom, that shows it is too small and a more mobile friendly version will show with a pop-up to say rotate your phone to view a better version or whatnot.

    Best Regards,
    Tim

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    I'm not trying to totally solve your issues. I'm just trying to make your code more efficient.

    Code:
    <script type="text/javascript">
    (function() {
        var WindowWidth,
            WindowHeight,
            BodyImageHeight,
            htmlpadding,
            scrollCompensate = function () {
                var inner = document.createElement('p');
                inner.style.width = "100%";
                inner.style.height = "200px";
            
                var outer = document.createElement('div');
                outer.style.position = "absolute";
                outer.style.top = "0px";
                outer.style.left = "0px";
                outer.style.visibility = "hidden";
                outer.style.width = "200px";
                outer.style.height = "150px";
                outer.style.overflow = "hidden";
                outer.appendChild(inner);
            
                document.body.appendChild(outer);
                var w1 = inner.offsetWidth;
                outer.style.overflow = 'scroll';
                var w2 = inner.offsetWidth;
                if (w1 == w2) w2 = outer.clientWidth;
            
                document.body.removeChild(outer);
            
                return (w1 - w2);
            },
            resizeHandler = function() {
                var htmlpadding = scrollCompensate(),
                    WindowWidth = $(document).width() - htmlpadding,
                    WindowHeight = $(document).height(),
                    BodyImageHeight = (WindowWidth * 1.4154).toFixed();
                    
                $('.test').css('min-height', BodyImageHeight + 'px');
            };
    
        //you may want to add this function globally to your site as you may need it on other pages too
        function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}
        
        $(document).ready(function () {
            $(window)
                .on('resize', debounce(resizeHandler, 250)) //test different rates and adjust accordingly
                .trigger('resize'); //execute on page load
        });
    
    })();
    </script>

  • Users who have thanked glenngv for this post:

    MrTIMarshall (04-14-2014)

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    I'm not trying to totally solve your issues. I'm just trying to make your code more efficient.

    Code:
    <script type="text/javascript">
    (function() {
        var WindowWidth,
            WindowHeight,
            BodyImageHeight,
            htmlpadding,
            scrollCompensate = function () {
                var inner = document.createElement('p');
                inner.style.width = "100%";
                inner.style.height = "200px";
            
                var outer = document.createElement('div');
                outer.style.position = "absolute";
                outer.style.top = "0px";
                outer.style.left = "0px";
                outer.style.visibility = "hidden";
                outer.style.width = "200px";
                outer.style.height = "150px";
                outer.style.overflow = "hidden";
                outer.appendChild(inner);
            
                document.body.appendChild(outer);
                var w1 = inner.offsetWidth;
                outer.style.overflow = 'scroll';
                var w2 = inner.offsetWidth;
                if (w1 == w2) w2 = outer.clientWidth;
            
                document.body.removeChild(outer);
            
                return (w1 - w2);
            },
            resizeHandler = function() {
                var htmlpadding = scrollCompensate(),
                    WindowWidth = $(document).width() - htmlpadding,
                    WindowHeight = $(document).height(),
                    BodyImageHeight = (WindowWidth * 1.4154).toFixed();
                    
                $('.test').css('min-height', BodyImageHeight + 'px');
            };
    
        //you may want to add this function globally to your site as you may need it on other pages too
        function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}
        
        $(document).ready(function () {
            $(window)
                .on('resize', debounce(resizeHandler, 250)) //test different rates and adjust accordingly
                .trigger('resize'); //execute on page load
        });
    
    })();
    </script>
    Thank you very much. Some things I don't understand, works perfect, not smooth on resize via testing on computer but that isn't needed and I presume you've implemented the timer thing you mentioned.

    Quote Originally Posted by glenngv View Post
    Code:
    //you may want to add this function globally to your site as you may need it on other pages too
        function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}
    I don't have a clue what the above means and the new programming I believe is currently beyond my level to be able to fix now :P

    Thanks a million


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •