Develop Reference

How to make scrollbar to see full content in below case?

see demo url of the framework i'm using: http://alvarotrigo.com/fullPage/examples/navigationH.html#secondPage
However,using almost same kind of code from above,
when I try to achieve below effect in which title text is excluded from slider. (title text to be static, and content is sliding)
jsfiddle url: http://jsfiddle.net/097wvnot/8/
I can't scroll to see all the content; what's the best code to achieve this effect?
if i want to use the top framework, must i do a lot of hack into its core functions?
if not hacking the top animation framework , what are other recommendations to this effect

Use an absolute positioned element for your title. Fullpage.js calculates the height of your content inside the slide elements. (as they are suppose to be full height...).
If you place anything outside any slide, it would have to be absoluted positioned.
Take a look at the solution I propose: http://jsfiddle.net/097wvnot/11/
I added the following style to your title:
#demo{
position:absolute;
top:50px;
margin: 0;
left:0;
right:0;
text-align:center;
}

It looks like the plugin is calculating the height of the fp-scrollable incorrectly. At least for your use case. I was able to get it looking good by just manually adjusting the fp-scrollable's height attribute to a smaller amount (obviously that is not a long term fix, just something I was doing for testing). I'm not sure if the calculating takes into account your font size, and things like that, so that might effect it.
If you want to hack on the plugin, generally the place you need to make your changes is fairly restricted, and wouldn't be too bad. From the github page. https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js
All you need to do is fix the value being placed into the scrollHeight variable. I'm not sure exactly what it's not accounting for in the scroll height calculation (the scrollHeight needs to be smaller in your case, it's too big), but I think that's an exercise you can try your hand at first :) I've got to get to bed z.z
You also may need to mess with the calculation for the contentHeight, since ostensibly you'll be shrinking the scrollHeight, and the script only puts the scroll bar on there if the content is bigger than the scroll.
function createSlimScrolling(element){
//needed to make `scrollHeight` work under Opera 12
element.css('overflow', 'hidden');
//in case element is a slide
var section = element.closest('.fp-section');
var scrollable = element.find('.fp-scrollable');
//if there was scroll, the contentHeight will be the one in the scrollable section
if(scrollable.length){
var contentHeight = scrollable.get(0).scrollHeight;
}else{
var contentHeight = element.get(0).scrollHeight;
if(options.verticalCentered){
contentHeight = element.find('.fp-tableCell').get(0).scrollHeight;
}
}
var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top'));
//needs scroll?
if ( contentHeight > scrollHeight) {
//was there already an scroll ? Updating it
if(scrollable.length){
scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
}
//creating the scrolling
else{
if(options.verticalCentered){
element.find('.fp-tableCell').wrapInner('<div class="fp-scrollable" />');
}else{
element.wrapInner('<div class="fp-scrollable" />');
}
element.find('.fp-scrollable').slimScroll({
allowPageScroll: true,
height: scrollHeight + 'px',
size: '10px',
alwaysVisible: true
});
}
}
//removing the scrolling when it is not necessary anymore
else{
removeSlimScroll(element);
}
//undo
element.css('overflow', '');
}

detecting how much of a div is beyond window height

I have a fixed div that I want to sit on top of a number of background images. The issue is that if this fixed div is taller than the window, it wont scroll, meaning content is lost. I've tried using max-height: 100% and y-overflow:scroll; but no luck.
I have figured a workaround using the following javascript:
<script>
$(window).scroll(function(){
var css = {};
if ($(window).scrollTop() > 120){
css = { top:'0'};
}
else {
css = {top:'120'};
}
$('#writtenContent').animate(css,{duration:200,queue:false});
});
</script>
Which moves it up, but this is not ideal for a number of reasons. Id like to either be able to know how much of the div is hidden, and then move up that amount, or have the fixed div scrollable. Ideally either of these should only happen if necessary i.e. if the div fits in the window, then no action taken.
Any ideas would be great!
===============UPDATE=================
Hi guys - here is a quick jsfiddle showing the type of thing. Its a stripped down version, but shows the problem Im having. If the window is resized to be smaller than the content holding div, we loose it.

Ok well first off, you said that it's a fixed div, which generally means position:fixed but then you say position:relative? What do those refer to? But it really should be scrolling. You said you tried y-overflow but of course that won't work. It's overflow-y with the y after. Try that again and see if it works. If it doesn't work then you will need to post all of the relevant code and styles so we can see what is going on.
Also it's somewhat hackish but try using max-height: with varying percentages less than 100% to see if it works even a little bit correctly.

If I'm understanding you correctly, this will work for you.
var win = window,
$writtenContent = $('#writtenContent'),
$writtenContentPosition;
function windowScrollMagic(){
$writtenContentPosition = $writtenContent.offset().top; // get elements distance from top
// if you've scrolled farther than the elements position:
if (win.scrollY > $writtenContentPosition) {
// do something, like animating $writtenContent to the win.scrollY coordinate
}
}
$(document).ready(function(){
$(win).scroll(){
windowScrollMagic();
});
});
Update in response to example jsfiddle:
var $win = $(window),
$winHeight,
$writtenContent = $('#writtenContent'),
$writtenContentPosition,
$writtenContentHeight,
$writtenContentBottomEdgePosition,
heightDifference;
function calculateHeights() {
$winHeight = $win.height();
$writtenContentPosition = $writtenContent.offset().top;
$writtenContentHeight = $writtenContent.height();
$writtenContentBottomEdgePosition = $writtenContentPosition + $writtenContentHeight;
heightDifference = $winHeight - $writtenContentBottomEdgePosition;
}
function windowResizeMagic() {
calculateHeights();
if (heightDifference < 0) {
$('#alert').html('Written Content is off screen by ' + heightDifference + 'px');
} else {
$('#alert').html('Written Content is not off screen');
}
}
$(document).ready(function(){
calculateHeights();
$win.resize(function(){
windowResizeMagic();
});
});

Background/content bottom half disappears when resizing/maximizing window

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

Use Javascript to create a space at the bottom of page for toolbar widget

I am creating a toolbar widget that is loaded via an external javascript file. The toolbar floats at the bottom of the screen, which works fine, but the content at the bottom of the screen gets covered up (as seen in Figure A). Figure B is my goal.
The toolbar should always be visible, fixed to the bottom of the screen. If scrolling is needed on the page, the content will flow under it until it is all visible when scrolled all the way to the bottom, so that nothing gets covered up on any length page.
My first thought was to set a bottom margin of 30px (toolbar height), but since most of the websites this is designed for are setup to use the full screen (with body height set to 100%), this won't always work. Decreasing the body scrollHeight by 30px fixes this issue, but only if scrolling isn't required on the page (which sometimes is).
JSFiddle example: http://jsfiddle.net/ZbMDr/1/

Does this example work for you? http://limpid.nl/lab/css/fixed/footer

So here's a somewhat hacky solution I've come up with, that seems to work so far (I haven't done extensive testing yet). If anyone has a cleaner way of accomplishing this it would be interesting.
var bodyCH = document.body.clientHeight,
bodySH = document.body.scrollHeight;
/* insert the toolbar here */
if (bodyCH === bodySH) {
document.body.style.height = parseInt(bodySH, 10) - 30 + 'px';
} else {
var spacer = document.createElement('div');
spacer.style.height = '30px';
document.body.appendChild(spacer);
}

A bit of problem with implementing a modal dialog

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