We Keep Coding

window.load and document.load in firefox and chrome

Hi i have big problem with
$(window).load(function() { // this not working in chrome
and
$(document).load(function() { // this not working in firefox
if i use the first it will not be fired in chrome
if i use the second it will not be fired in firefox
How to fix that ?
im trying to do the scroll the page like that
<script type="text/javascript">
$(document).load(function() {
$("html, body ").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
// some othe code here which doesnt affect anything just to show that im using document ready here
});
</script>
If someone wonder , im also changing this $(window).height() in the code to document
EDIT
$(document).load(function() {
$("html, body , #mydiv1,#mydiv2").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
var $window = $(document),
$stickyEl = $('#listholder'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
scroll("#mydiv1,#mydiv2");
});

jquery waypoints and .scroll() conflict

Here's my JS code:
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var opacity = ((height - scrollTop) / height);
var scale = ((height - (scrollTop/10)) / height);
console.log(opacity);
if(opacity>=0.05){
$.each(links, function( i, link ) {
$(link).css({
'opacity': opacity,
});
})} else {
$(link).css({
'opacity': 0.05
});
}
if(scale>=0.9){
$('#index').css({
'transform': 'scale('+scale+')'
});
} else {
$('#index').css({
'transform': 'scale(0.9)'
});
}
});
$( document ).ready(function() {
$('#aboutContent').waypoint(function(direction) {
alert('hit!');
});
});
The .scroll() function works exactly as I want it but the waypoint doesn't at all. If however, I remove the .scroll() function the waypoint works as it should. Can anyone spot what could be causing the issue? I can't find any know conflicts between .scroll() and waypoints. Here's a JSFiddle: https://jsfiddle.net/zocdvefx/ If you remove the .scroll() function the waypoint should work.
Thanks!
Jamie

In your fiddle the issue is in this if-else block:
if (opacity >= 0.05) {
$.each(links, function(i, link) {
$(link).css({
'opacity': opacity,
});
})
} else {
$(link).css({ // <-- link is no longer in scope and is undefined
'opacity': 0.05
});
}
Changing link to links in the line I highlighted above will resolve your issue.
For future reference always check your browser's developer console (usually F12) when you're running into an issue. As soon as I opened it in your jsfiddle it immediately started telling me what the issue was: ReferenceError: link is not defined.

Bootstrap accordion scroll to top of active panel heading

I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.
This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel "heading" (as opposed to the top of panel content area) being visible at the top of the screen?
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset)$('html,body').scrollTop(offset.top); }); });
Let me know if I should be sharing the bootstrap accordion html as well.

I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-title a').offset().top -20
}, 500);
}
});
});

This is to target the specific .panel-heading clicked as per James Wilson's comment on the accepted answer.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
All I changed from gigelsmith's accepted answer is 'var offset' and the scrollTop's target.

I couldn't get the answer above to work, perhaps I'm missing something but I can't see how the scrollTop line above relates to the currently opened accordion item so used the following code instead. Hope it helps someone else:
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
}, 500);
}
});
});

Always animate looks a bit too much so this is my version to only do the job when heading is over the visible part.
(note that I use a data-accordion-focus to apply the fix)
$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
var visibleTop = $(window).scrollTop();
if (headingTop < visibleTop) {
$('html,body').animate({
scrollTop: headingTop
}, 500);
}
});

By using .panel-default as selector of .on(), you can scroll to the active panel.
$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});

Scroll when div content is outside viewport

I've got a simple piece of code like this
http://jsfiddle.net/QTa2c/
and all I want is, when user click on some of the last elements in list to show the content,
$('a.showMeThis').click(function() {
$(this).next('.content').slideToggle('fast', function() {
// there's go all the magic
});
});
and it goes outside the viewport (partly or completely) - scroll of the height of div, so he can see all of the content.
I was looking a lot for some logic for this, playing around with position().top, window.innerHeight and more, but it never goes in the way I want…
Hope you guys will help me, take care and have a nice day!

Use .animate() and .offset()
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
$('html,body').animate({
scrollTop: $this.offset().top
}, 'slow');
});
});
Fiddle Demo
Updated after OP's comment
Updated Fiddle Demo
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
if ($this.position()) {
if ($this.position().top + $this.height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight)) {
$('html,body').animate({
scrollTop: $this.position().top - (window.innerHeight || document.documentElement.clientHeight) + $this.height() + 15 + $this.next('.content').height()
}, 100);
}
}
});
});

With condition it looks like this: http://jsfiddle.net/QTa2c/1/
if ($(this).parent().offset().top + $(this).height() > window.innerHeight + $(window).scrollTop())
{
var a = $(this)
$('html,body').animate({scrollTop: $(a).parent().offset().top})
}
I think, this code is enough to understand the logic =)
UPD: note, that you should insert return false; into .click event to prevent jumping to # anchor.

center on resize too

This works:
$.fn.center = function () {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this
};
$('#container').center();
.. but the element stays in the same position if the window is resized, how do I center it with the resize too?
Thanks

You would need to execute that code in the window resize event. But, if the browser is resized this event fires huge! So it's in general a good idea to create a little "balancer".
$(window).bind('resize', function() {
var that = this;
if(!('balancer' in that) ) {
that.balancer = setTimeout(function() {
$('#container').center();
delete that.balancer;
}, 200);
}
});
This will absorb the many events that are fired when resizing the browser window. In fact, it only calls the .center() at a maximum of 200ms. You probably should even increase that value and cache the node reference to the #container element.

EDIT::
giving percentage to top and left can put at center. but this bad ... really really bad.
$.fn.center = function () {
$(this).css({'position': 'absolute',
'top': '40%',
'left': '40%'
});
};
$(function (){
$('#container').center();
})
On jsfiddle.