Member Avatar for prathameshz

i had developed the site http://www.wooadvertising.in/ . this is the horizontal scrolling website. normaly the website is work properly but when i resize the window all the content in the site mixedup.. what i do to solve this problem.. plz check this site by resizing the window. can any one help me to solve this problem???

  • 3 Contributors
  • 4 Replies
  • 113 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Short summary tied to the thread: correctly pointed out visible scrollbars on resize, and traced the runtime problem back to the scrolling plugin calculating an invalid size. The root cause is almost always that the script reads a width/position before the layout has its final values (images not loaded, element hidden, floated parents collapsed, or margins/borders not accounted for). The steps below show how to find the bad value and make the layout resilient to window resizes.

Quick checks to run in the browser console

console.log($('#mask').is(':visible'), $('#mask').width(), $('#mask').outerWidth(true));
console.log(document.getElementById('mask').getBoundingClientRect());

If any of those return 0 or NaN when the plugin runs, the plugin will compute bad targets. Confirm whether initialization happens on DOM ready (fast) versus window load (after images).

Practical fixes to apply

  • Initialize/refresh the scroller only after the page is fully laid out (use $(window).on('load', ...)) or after images have finished loading.
  • Recalculate all widths on resize and re-init or call the plugin refresh method if it offers one. Example pattern:
    
function initScroller(){
var w = $(window).width();
$('.page').css('width', w);
$('#wrapper').width($('.page').length * w);
// reinitialize or refresh your scroll plugin here
}

$(window).on('load', initScroller);
$(window).on('resize', debounce(initScroller, 150));

function debounce(fn, ms){
var t;
return function(){ clearTimeout(t); t = setTimeout(fn, ms); };
}



CSS and other gotchas
- Give the mask/pages explicit sizing and overflow rules (`overflow:hidden`, `box-sizing:border-box`) and use a clearfix or overflow on parents so floats do not collapse.  
- Use `outerWidth(true)` when summing widths if margins matter.  
- Ensure a standards DOCTYPE to avoid quirks-mode layout differences (IE can behave differently with scrollbars).

Caution: avoid hacking plugin internals unless you understand the math; it is safer to ensure the DOM has correct computed sizes and to reinitialize or refresh the plugin after recalculation.

Recommended Answers

All 4 Replies

Member Avatar for Kraai

Hi

The site does not display the same accross platforms. In IE it is also messed-up. I see that when you resize, there are scroll bars. You might want to change the script to remove those, and see what happens.

Member Avatar for prathameshz

ok... thanks

Member Avatar for Arkinder

Accidental post - will correct in a moment.

Edited by Arkinder because: n/a
Member Avatar for Arkinder

It's a jQuery error that is returning a width of 0 for your division with the id "mask". The error is in this line of code var val = targ[pos]; . The JavaScript file is jquery.scrollTo.js - here is the full if else statement with the error.

if( settings.over[pos] )
                        // Scroll to a fraction of its width/height
                        attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
                }else{ 
                    var val = targ[pos];
                    // Handle percentage values
                    attr[key] = val.slice && val.slice(-1) == '%' ? 
                        parseFloat(val) / 100 * max
                        : val;
                }

I do not know jQuery, but I'm sure someone in the JavaScript section of the forums can help you.


Regards, Arkinder

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.