Develop Reference

Overflow Scroll box moves divs left and right

I am not an advanced coder and I am struggling with making these two overflow boxes move the div lines left and right, I tried with using this existing code: http://jsfiddle.net/pWUDJ/275/
$(window).scroll(function() {
$("div#mydiv").css({
"right": $(window).scrollTop() + "px"
}).text("hello:"+$(window).scrollTop());
});
My code Is —  http://jsfiddle.net/millington/6v1fc7bj/
$(window).scroll(function() {
$("div#l2").css({
"right": $("#leftscr").scrollTop() + "px"
}).text("left&right:"+$("#leftscr").scrollTop());
});
Please Help If you can ! :D

Try this :
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
var scroll = (1- (div_offset - window_scroll)/div_offset) * 100;
if(scroll < 100) {
$("div#l2").css({
"left": scroll + "%"
}).text("left&right:"+scroll + "%");
}
});
http://jsfiddle.net/6v1fc7bj/1/
if required in px
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
if(window_scroll < div_offset) {
$("div#l2").css({
"left": window_scroll + "px"
}).text("left&right:"+window_scroll + "px");
}
});
http://jsfiddle.net/6v1fc7bj/2/

Custom Javascript not working in Chrome

Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.
The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.
This is the code:
$(document).ready(function() {
var windowheight = $(window).height();
var identheight = $(".ident").height();
var sidebarheight = $(".sidebar").height();
var mainheight = $(".main").height();
var pos = $(window).scrollTop();
var diff = (((sidebarheight + 20) + identheight) - windowheight);
var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
var max = (mainheight + 30);
contentScroll();
$(window).resize(function(){
windowheight = $(window).height();
identheight = $(".ident").height();
sidebarheight = $(".sidebar").height();
mainheight = $(".main").height();
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
$(window).scroll(function (){
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
if (diff < identheight) {
if (pos >= identheight) {
$('.sidebar').css({
'margin-top' : (pos - identheight) + 'px'
});
}
} else {
if (pos >= diff && cur <= max) {
$('.sidebar').css({
'margin-top' : (pos - diff) + 'px'
});
}
if (pos <= diff) {
$('.sidebar').css({
'margin-top' : '0px'
});
}
}
}
}
});
I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.
Probably something about chrome reading syntax different.
If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.
This is the mock-website in question: http://klok-bremen.de/fff/

Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.

Jquery $(document.body).height() is not same when viewport height is added with the window scrollTop position, at the end of document

How is the document height is smaller than the window scroll top value + the viewport height, when I scrolled down to the end of document. Should not they be the same? I am struggling with this for last couple of hours but still not getting the hang of it.
$(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
$(window).scroll(function(){
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
if(scrollPos > appearh){
addWin = parseFloat(dh - vph);
$('#trends').removeClass('hidetrends',2000).addClass('showtrends',2000);
/*console.log( dh + '>' + scrollPos + ';' + addWin );
if(scrollPos >= 1672){
$('#trends').css('position', 'relative');
}else if(scrollPos <= 1672){
$('#trends').css('position', 'fixed');
}*/
}else{
$('#trends').removeClass('showtrends',2000).addClass('hidetrends',2000);
}
});
});
window.onresize = function(event) {
resizeDiv(vpw, vph, appearh);
}
function resizeDiv(vpw, vph, appearh) {
$("#full-width").css({"height": vph + "px"});
}

Try this:
$(window).scroll(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
....
The reasoning behind this is I think it'd be wise to actually set your variables as you scroll

Viewport height and .css()

What I'm trying to achieve is to get the browser's viewport height and add it to several classes of my css. So far I have this:
Get viewport height:
var width = $(window).width();
var height = $(window).height();
Add to css
$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});
Sample:
It would be really great if someone could provide some working piece of code here. My coding skills are very limited.

Your code looks about right to me, except you have to do the math outside of the string literals, and because you're using classes, you need a class selector (e.g., ".divOne", not "divOne"), e.g.:
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});
You probably also want to give divs two through four height, because otherwise they'll only be as tall as their content. And you need to be certain that the script operating on the divs is after the divs in the markup, so that they exist when the code runs. (Or use jQuery's ready event, but there's no need for that if you control where the script tags go.)
Here's an example that adds heights, etc.: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
<div class="divOne">divOne</div>
<div class="divTwo">divTwo</div>
<div class="divThree">divThree</div>
<div class="divFour">divFour</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({
"top": height + "px",
"height": "200px"
});
$('.divThree').css({
"top": (height + 200) + "px",
"height": "200px"
});
$('.divTwo').css({
"top": (height + 400) + "px",
"height": "200px"
});
</script>
</body>
</html>

$('.divOne').css({
"height": $(window).height()
})
Try that... Remember the . Before divOne

Is that what you're asking for?
var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height": height+"px"});
$('.divTwo').css({"top": height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top": height + 400});

Choose whichever suits you the best. I suggest pure JavaScript with variables.
// NO VARIABLES
// pure JavaScript
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 200 + "px";
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 400 + "px";
// jQuery
$("#divOne").style.height = $(window).height();
$("#divTwo").style.height = $(window).height();
$("#divThree").style.height = parseFloat($(window).height()) + 200 + "px";
$("#divFour").style.height = parseFloat($(window).height()) + 200 + "px";
// WITH VARIBLES
// pure JavaScript <-- SUGGESTED
var viewportHeight = parseFloat(document.documentElement.clientHeight);
document.getElementById("divOne").style.height = viewportHeight + "px";
document.getElementById("divTwo").style.height = viewportHeight + "px";
document.getElementById("divThree").style.height =
viewportHeight + 200 + "px";
document.getElementById("divFour").style.height =
viewportHeight + 400 + "px";
// jQuery
var viewportHeight = parseFloat($(window).height());
$("#divOne").style.height = viewportHeight + "px";
$("#divTwo").style.height = viewportHeight + "px";
$("#divThree").style.height = viewportHeight + 200 + "px";
$("#divFour").style.height = viewportHeight + 400 + "px";

How do I add fade in effect when I click expand on this script?

I found this content expand/collapse jQuery plugin. I want to add fade-in effect to this plugin when I click on the EXPAND button.
How do I do this?
$(document).ready(function () {
var maxlines = 15;
var lineheight = 15; // line height in 'px'
var maxheight = (maxlines * lineheight);
var allowedExtraLines = 3;
var showText = "EXPAND";
var hideText = "CLOSE";
$('.ranking').each(function () {
var text = $(this);
if (text.height() > maxheight + allowedExtraLines * lineheight) {
text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
var link = $('' + showText + '');
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
//$(this).remove();
$(this).html(hideText);
text.css('height', 'auto');
}
});
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
}
});
});

within the link.click function, you can do
text.animate({ opacity: 1.00 }, 600);
i think it'd go after text.css('height', 'auto'); in the else block. you'll probably have to reset the opacity to 0 somehow in the if block too.
for reference: http://api.jquery.com/animate/
edit: better yet, http://api.jquery.com/fadeIn/
so
text.fadeIn();