We Keep Coding

Scroll Handling with Javascript

I am new to web programming and I stumbled on something strange while working on my website. I use Wordpress but here I had to dive in the Javascript code to get it done.
What I want to achieve is the following:
I want people to get to see the header of my website when they arrive but not be bothered by it once they read stuff on my site.
What I figured out is that I want the website to scroll down if a) people are at the top of the site and b) if they click on a menu link. When people are already on the site and click on a menu item to change pages, I would like to maintain the scroll position of where they were before.
I tried two versions:
This one works like a charm except that the function executes on each reload of the site
var scroll_position = localStorage.getItem('scroll_position');
var header_height = document.getElementById('masthead').offsetHeight;
var menubar_height = document.getElementById('top-bar').offsetHeight;
var page_height = header_height - menubar_height;
jQuery(function () {
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
But as I wanted to execute the function only on clicking one of the menu items, I tried:
jQuery("#top-menu ul li a").click(function(){
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
and suddenly the scroll_position variable doesn't change value as before...
I spend the whole day trying to figure this out and I would appreciate very much if someone out there could tell me what I'm doing wrong!
Thanks in advance.

According to the code you gave us, try this
jQuery(function () {
var header_height = document.getElementById('masthead').offsetHeight;
var menubar_height = document.getElementById('top-bar').offsetHeight;
var page_height = header_height - menubar_height;
jQuery("#top-menu ul li a").click(function(e){
e.preventDefault();
var scroll_position = localStorage.getItem('scroll_position');
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
});
I'm assumig that header_height, menubar_height and page_height can't get altered once the page is loaded, thats why we init them on the page load, not on the click.
Hope it's gonna help you

Vertical scroll bug in Google Chrome

jsFiddle
Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?

With jquery you can disable the overflow when mouse is over the child div.
This way works on Firefox 24 for Mint, and Chromium 28...
http://jsfiddle.net/JcUxs/2/
$('.child').on('mouseover',function(){
$(this).parent().addClass('fixoverflow');
});
$('.child').on('mouseleave',function(){
$(this).parent().removeClass('fixoverflow');
});
css:
.fixoverflow{
overflow: hidden
}

I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):
I used flag variable to keep the scroller position.
I used jquery and I noticed just now from the comments that you asked for pure javascript.
Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.
Just confirm that it's good enough for you and i'll translate it.
JavscriptCode:
var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;
$(".child").on('mousewheel', function (event) {
clearTimeout(stopWheelTimer);
event.stopPropagation();
isCanceled = true;
currentPos = $(".parent").scrollTop();
stopWheelTimer = setTimeout(function(){
isCanceled = false;
}, 250);
});
$(".parent").on('mousewheel', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
$(".parent").on('scroll', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
Working Example:
jsFiddle

Jquery/Javascript not working on Firefox. Why?

I just found out that my script is working fine in Chrome, but not in FireFox - and I can't figure out why.
This is the site in development: www.fireflycovers.com
The script should execute when one of the round green buttons is clicked. (scrolls the window to the next container)
The script looks like this at the moment:
$('.scroll').css('display' , 'block');
$('.scroll').on('click', function(e) {
var container = $(this).parent();
// Scans if last container in group
while (document != container[0] &&
container.find('~.col, ~:has(.col)').length == 0) {
// If so, search siblings of parent instead
var container = container.parent(),
nextdiv = container.nextAll('.col, :has(.col)').first();
}
// Back to first .col (when no next .col)
if (nextdiv.length == 0) {
nextdiv = $(document).find('.col:first')
};
// Animates scrolling to new position
$('body').animate({scrollTop:nextdiv.offset().top}, 1000);
return false;
});
});

Did you try debugging at all? As in, putting console.log statements throughout your method to see what the values of things are at certain times and watching it execute? Anyway, does using this help at all?
$('body,html').animate({scrollTop:nextdiv.offset().top}, 1000);
Verified from Animate scrollTop not working in firefox
You need html because firefox behaves differently when it comes to overflow.

jQuery script not working on IE correctly

I have a strange issue with Internet Explorer, i wrote a navigation code and it's working perfectly on Chrome and FF, and it's half working in IE (Don't know how). So here is my issue
When i hover on the link is opens a mega menu down and remove the border-right of the current anchor and the previous one. (See picture below)
And this is how is looks when i hover on the link (I managed to make it work on all browsers: Chrome, FF, Safari and IE 6-9
The issue comes here when i hover out of the link, if i hover up, the borders will come back without any issues but when i hover out downward, the border-right of the previous link doesn't come back (See below pic)
I will include the third picture on a comment as i can't post more than 2 links.
This is the code i wrote in jQuery
$(".menu li").hover(
function () {
var result = $(this).index();
var item = $('a.mainnav')[result - 1];
$(this).addClass("hover");
$(this).find('a.mainnav').css('border-right','none');
$(this).parent().find(item).css('border-right','none');
},
function () {
var result = $(this).index();
var item = $('a.mainnav')[result - 1];
$(this).removeClass("hover");
$(this).find('a.mainnav').css('border-right','1px solid #000');
$(this).parent().find(item).css('border-right','1px solid #000');
}
);
anyone know why this issue is happening?
p.s. Sorry that i can't post the pictures directly because i'm new.

I refactored your code somewhat. When leaving hover state; Is it okay for you to remove border-right style from all a.mainnav elements? They will go back to your CSS definition.
$(".menu li").hover(
function () {
var item = $('a.mainnav')[$(this).index() - 1];
$(this).addClass("hover");
$(this).find('a.mainnav').css('border-right','none');
item.css('border-right','none');
},
function () {
$(this).removeClass("hover");
$(item).find('a.mainnav').css('border-right','');
}
);

silentScroll will be undone after page is loaded

After my jQuery mobile site is loaded, I like to scroll to the position of a div. Works using this code
function changeViewport(){
var errorMsg = $('.dataerror').first();
if(errorMsg != null) {
var newPosition = errorMsg.offset();
$.mobile.silentScroll(newPosition.top);
}
}
I call the function on $(document).ready, but after calling the function and silentScroll to the position it seems the framework autoscroll back to the top of the page... Anyone know how to prevent this behaviour? (I also tried events pageinit, pageshow...)
Do I have to overwrite a function or trigger another event? Any help or suggestion is welcome :)
cheers.

After struggling with this myself, I seem to have found the cause as well as a workaround. It appears that the animation used in changePage is taking precidence over the silent scroll. You can read more about this here. On the same page, the comments also begin to discuss different events, such as pagebeforeshow or pageaftershow - unfortunately these yielded no results for me.
The workaround I have found was to wrap the .silentScroll in a timeout of a half a second. It looks a bit choppy, but it seems to be working for me. Hope this helps.
Try This:
function changeViewport(){
var errorMsg = $('.dataerror').first();
if(errorMsg != null) {
var newPosition = errorMsg.offset();
setTimeout(function(){$.mobile.silentScroll(newPosition.top)}, 500);
}
}