We Keep Coding

JQuery Offset issue when div position is fixed

I have a website which has a page layout and style something like mentioned in this JsFiddle
Now Using JQuery when I click on the button, content is being displayed properly as shown below:
But when I first scroll the page and then click the button, content is not displaying properly as shown:
Can you please guide me to handle this situation ?
I have used below jQuery for this. But it seems offset or position is not working
$('#btn').click(function(){
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 20 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});

You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed, you need to switch it in javascript to static.
The thing you are looking for is simply display:table ...
$('#btn').click(function(){
$('.control-container').css({'display': 'table','position': 'static'});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none','position': 'fixed'});
});
Check out this JSFiddle
But if you really need a solution with position:fixed based on button position, you should try this way:
$('#btn').click(function(){
var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
$('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none'});
});
Check out second JSFiddle

There is no need to specifically mention position property here.
Also remove the closing a tag and replace it with </button>
Currently container is occupying full width ,but that can also be set
$('#btn').click(function() {
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 30 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function() {
$('.control-container').css('display', 'none');
});
.header {
background-color: maroon;
color: #fafafa;
height: 60px;
position: fixed;
width: 100%;
text-align: center;
line-height: 19px;
font-size: 25px;
z-index: 2;
padding: 0px;
margin: 0px;
top: 0;
}
.content {
background-color: #fff;
border: 1px solid #999;
padding: 5px;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: 60px;
}
.control-container {
width: auto;
background-color: red;
#position: fixed;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
Header
</div>
<div style="clear:both">
</div>
<div class="content">
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="btn">Click Me</button>
<div class="control-container" style="display:none;">
Keep me exactly underneath 'Click Me' when Page is scrolled.
</div>
</div>
</div>

CSS position fixed property positions an element referencing view's/body's dimension.
If you have access of modifying CSS, then just remove the position: fixed; property from .control-container.
If you don't have access, then using script add position: static !important property to .control-container.
$('.control-container').css('cssText', 'position: static !important');
Modified JSFiddle

boostrap fix full width element with content aligned

I have a div which becomes fixed when it is scrolled to. I would like this div to go full width when it is in it's fixed state. I have done this by setting width: 100% to the div in question. The problem is I would like the content of the div to still line up with the content of the page, instead of going to the left. I would like to be able to do this without changing the current html markup.
Example: Full width when scrolled to and in fixed state.
Fiddle: https://jsfiddle.net/DTcHh/19335/
Example: If I add padding left to bring the content inwards this works. The problem is the padding left could be any number -is there a way of reliably working this out?
Fiddle: https://jsfiddle.net/DTcHh/19337/
CSS:
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Jquery:
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});

Add an extra .container div inside the #myDiv and adjust the padding as and when the fixing takes place.
<div id="myDivWrapper">
<div id="myDiv">
<div class="container">
<p>
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>
</div>
#myDiv .container {
padding: 0;
}
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#myDiv.fixed .container {
padding: 0 15px;
}
This can probably be tidied up a little but I think you get the idea.
JSfiddle

Don't write left:0
enter link description here
#myDiv.fixed {
position: fixed;
bottom: 0;
width: 100%;
}

You simply need to calculate the measurement between the content and the window edge and then apply this as left padding when required.
var measure = ($(window).width() - ($('#myDiv').offset().left + $('#myDiv').width()));
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed').css('padding-left', 0);
} else if (initSet) {
$("#myDiv").addClass('fixed').css('padding-left', measure+'px');
}
});
DEmo Fiddle https://jsfiddle.net/DTcHh/19338/
EDIT: If editing the markup is an option i'd recommend #Paulie_D 's approach. You don't need to add another container though - simply add a class to your existing markup.
Demo Fiddle https://jsfiddle.net/DTcHh/19340/
<div id="myDivWrapper">
<div id="myDiv">
<p class="container">
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>

Since all your paragraphs are inside a container class, you can also add this class to your fixed paragraph as well.
$("#myDiv").removeClass('fixed');
$("#myDiv p").removeClass('container');
...
$("#myDiv").addClass('fixed');
$("#myDiv p").addClass('container');
Further more, you will need to tell #myDivto go full width:
#myDiv.fixed {
position: fixed;
bottom: 0;
left:0;
right:0;
}
See working example here.

Scroll a div when focused on an internal div

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.

I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>

you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed

Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?

I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.

Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.

The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.

Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

Graying whole page to focus on DIV

I have a JSP, that includes 3 more JSPs. On click of a button on one of these included JSPs, I need to gray the whole window content. How this can be done? I was trying to append a child(image) to the parent window but its not working.

You need to add a <div class="glasspane"> to the <body> element, having the following style:
.glasspane {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.2;
}
Of course, this <div> element should be removed when appropriate.

Here is some jQuery I've used for a similar purpose:
$('body')
.prepend('<div class="veil"> </div>')
.children('.veil')
.css({ position:'fixed' ,top:'0' ,left:'0' ,width:'100%' ,height:'100%'
,opacity:'0.5' ,backgroundColor:'gray' ,zIndex:7 })
;

jQuery fadeIn fadeOut background problem

When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox).
I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.
My script:
jQuery(document).ready(function($) {
$(".second_element").hide();
$(".container").each(function () {
$(this).mouseover(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeIn(250, 'linear');
});
$(this).mouseout(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeOut(100, 'linear');
});
});
});
CSS:
.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}
.first_element {
height: 200px;
width: 219px;
}
.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}
And for clarity, this a HTML example
<td class="container">
<div id="first_element">...</div>
<div id="second_element">...</div>
</td>
My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container

This is shorter, and also, for first run, it is better that hide target by fadeOut() instead of hide()
$(".caption").fadeOut(1);
$(".container").each(function() {
$(this).mouseover(function() {
$(".caption", this).stop().fadeIn(250);
});
$(this).mouseout(function() {
$(".caption", this).stop().fadeOut(250);
});
});

Complementing the last comments; I got it. I tried it in several ways, and also with the caption to position: absolute, but instead I had to set the first element to position: absolute... now it works (however not with fading, but this is fine). I thank you very much for all your help and support!