So my website http://developed-web.com/ is starting to come together pretty good but I'm having this issue with everything that's not on-screen having to disappear when I take the window out of maximized mode.
This issue occurs in Google Chrome, Firefox and IE 10 too.
I'm not used to this kind of site structure so I don't wanna mess stuff up even more while trying to fix this. What could the issue be?
Thanks for taking a look :)
EDIT:
Go to the page in maximized window, and when you take it out of maximized (not minimize, just make it smaller) som content will disappear: http://gyazo.com/a5744085b32b1cf05acc4e1efa653da9
You should definitely familiarise yourself with the debugging tools in your browser. My preference is developer tools in Chrome (CMD+alt+i on a Mac, F12 on Windows). There's a great guide from Google here to get you started.
If you look at the console tab you'll see that your JavaScript is throwing an error in the resizePanel method when you resize the window on the home page.
If you look at the elements panel and resize the window you will see that something is setting the height of your mask element to the size of the window.
To fix both errors, try updating your code as follows:
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
// These lines are erroneously setting the height of the mask to the
// height of the window so when the user scrolls down, an area of
// unmasked content is visible.
//$('#wrapper, .item').css({width: width, height: height});
//$('#mask').css({width: mask_width, height: height});
// Try updating as follow as kpsuperplane has suggested
$('#wrapper, .item').css({width: width});
$('#mask').css({width: mask_width});
// This was throwing an error because no anchor elements have
// the selected class when the page is first hit
if ($('a.selected').length) {
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
}
Change
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
to
$('#wrapper, .item').css({width: width});
$('#mask').css({width: mask_width});
in your resizePanel() js function (it can be found in the script tag in the head if you look at source)
Somewhere javascript is adding a fixed height to your #wrapper when the window is resized, ill try and find out why this is happening to you.
---- i think this error is causing your problem
Uncaught TypeError: Cannot read property 'left' of undefined on line jquery.scrollTo.js:11
Its not just when you resize the window either it happens to me if i switch tabs
Related
I have an online magazine design, which shows each page of the magazine in a carousel.
The problem I have is that i want to make sure that the page is visible regardless of how a user resizes their browser.
I currently have the CSS as:
width:100%; height: auto; but the problem with this is that the height goes beyond the height of the viewport as the browser gets wider.
I want to make sure it's always visible - whether the viewport is landscape or portrait.
I'm assuming I need a touch of JS or Jquery perhaps, but this is something I have no idea how to do.
Can anyone help?
Thanks in advance!
Andy
function ResizeContent() {
$('MyElement').css('height', $(window).outerHeight() + 'px');
// or
$('MyElement').outerHeight($(window).outerHeight());
}
$(window).resize(function () {
ResizeContent();
});
ResizeContent();
Should do the trick...
UPDATE:
function ResizeContent() {
$('MyElement').css('max-height', $(window).outerHeight() + 'px');
$('MyElement').css('max-width', $(window).outerWidth() + 'px');
}
A Working Example
I am trying to determine the actual screen height in iOS.
On a short page. If I use the code below I get an incorrect size.
window.innerHeight
This will return 356 on my iPod touch. This is screen height - URL bar. If I add a CSS rule to the container of my page then it returns the correct number 416.
#container { min-height:600px; }
However, the problem with this solution is it adds a chunk of blank space at the bottom of some pages.
I have tried to fix this by doing the following.
$('#container ').css('height', '800px');
window.scrollTo(0, 1);
$('#container ').css({
'height' : window.innerHeight + 'px'
});
This doesn't work. It doesn't influence the page height at all and I am not sure why. Has anyone solved this problem before?
The window.screen object should contain what you're looking for
window.screen.height
I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have used this function before and have never seen it fail, but for some reason it will return the same value as the document height. I have the test page here: bangstyle.com/test-images
I have coded the alert to display at page load, and also whenever the user scrolls 500px below the top:
function scroller() {
if($(window).scrollTop() > 500){
delay(function(){ //200ms wait
pagecounter++;
sideshow();
alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());
return false;
}, 200 );
}
}
I tried posting this before but I deleted it as I didn't get a solution. I hope it is ok to post a link to my test page. BTW I have tested this on Mac Safari and Mac FF. I have run this same code on other pages and it works fine. I feel there must be something in the dom of this page that causes JS to fail, but no idea what that would be.
Look at your HTML souce code.
The first line should be <!DOCTYPE html> and you have <style> tag instead.
So it seems that your document is running in Quirks Mode and jQuery can't calculate correct window dimensions.
//works in chrome
$(window).bind('scroll', function(ev){
//get the viewport height. i.e. this is the viewable browser window height
var clientHeight = document.body.clientHeight,
//height of the window/document. $(window).height() and $(document).height() also return this value.
windowHeight = $(this).outerHeight(),
//current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
scrollY = $(this).scrollTop();
if( windowHeight - clientHeight === scrollY ){
console.log('bottom');
}
});
I had the same problem.
I've found some things:
1) the problem happens when you try to get the actual height before document is completed rendered;
2) the problem happens in google chrome when you does not use corret DOCTYPE (mentioned above)
3) it always happens in google chrome even after the document is rendered completly.
For google chrome, I've found a workaround here: get-document-height-cross-browser
I'm using this solution only for google chrome and it resolved my problem, I expect helps someone that still have the problem.
This is an old question but I recently struggled with not getting the correct window height in IE10 by a few pixels.
I discovered that IE10 applies a 75% zoom by default and that screws the window and document measurements.
So, if you're getting wrong width or height, make sure zoom is set to 100%.
Did some looking around and stumbled upon this, don't know if it helps but it's worth bringing up.
why is $(window).height() so wrong?
Since jquery (and dom in general) is not calculating sizes correctly in quirksmode, two solutions:
Add doctype html at the top of your page (like mentioned in "correct" answer), or
Use window.innerHeight, window.innerWidth if first option is not an option.
Hope it helps.
I moved my scripts from to footer and that resolved it for me.
how can you set the body width in px in javascript?
has to work in chrome, ff and our beloved ie
edit:
it has to be used when a dialog box pops up and the horisontal scrollbar is hidden.. then I have to compensate for the missing 16px.. else the whole site is moving slightly to the right
maybe you have better solution to the problem? I don't know :)
document.body.style.width = '800px';
[Edit]
If you need to adjust from the existing width, per your edit, you could do something like this:
var adjustBodyWidth = function(nPixels) {
var m, w = document.body.style.width || document.body.clientWidth;
if (m=w.match(/^(\d+)px$/)) {
document.body.style.width = (Number(m[1]) + nPixels) + 'px';
}
};
If the problem is the scroll bar coming up and disappearing depending on the page's contents, I would consider forcing the page to display a (disabled) scroll bar even when there's nothing to scroll. This can be done through CSS:
body { overflow-y: scroll }
it works in all major browsers. It doesn't in IE, but that doesn't matter because IE shows the desired behaviour automatically.
I am developing a modal dialog as a part of a web application. There is one thing that's been of a puzzle to me. Please watch a movie clip that I just uploded at http://inter.freetzi.com/example/. I feel strongly that I have to accompany my question with a video because this is the case when it's better to see once, than to hear 100 times.
(It could be vertical scrolling, or both vertical and horizontal at the same time. But I am using horizontal scrolling in my example, so watch for it.)
Here's about my question:
Width of the transparent mask affects the width of the page itself. But in Opera, for exemple, every time the window gets resized, the page gets width that is at most close to 'true'. While in IE, once the transparent mask has affected the width, afterwards the page remembers it and stays with it. What is the problem and how to settle it? How to make IE behave the way Opera does?
In my project, I do the following:
//curViewpointW and curViewpointH are current width and height of the viewpoint (current is meant to be the moment of the resize event)
oMask.style.width = curViewpointW + 'px';
oMask.style.height = curViewpointH + 'px';
var pageWH = getPageWH(); //getPageWH() is a function that gets current width and height of the page (with scrolling if there is any)
var curPageW = pageWH[0];
var curPageH = pageWH[1];
if (curPageW > curViewpointW) {
oMask.style.width = curPageW + 'px';
}
if (curPageH > curViewpointH) {
oMask.style.height = curPageH + 'px';
}
But IE ignores that somehow...
P.S. It's jQuery in my example, so many of you may have used its dialog before.
Have you looked into setting an onresize event handler that will adjust your mask dimensions when the window is resized? If you are using Prototype, you can set up such a handler unobtrusively like this:
Event.observe(document.onresize ? document : window, "resize", function() {//dostuff});
courtesy of the Roberto Cosenza blog