We Keep Coding

set view position by element (javascript)

Is there any easy way how to set Y position of the screen by the element?
Tried to do with scrolling but didn't make wanted effect, so maybe setting screen view position would do the trick.
have a div with string:
Function is in use with elementor (wordpress) toggle tabs which generating anchor links for tabs and they making a trick which opens exact tab by link.
<script type="text/javascript">
jQuery(document).ready(function($){
setTimeout(function(){
var current = window.location.href;
var current = current.split('#tab');
if(current.length>1) {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-title[data-tab="'+current[1]+'"]').addClass('elementor-active');
$('.elementor-tab-content').hide();
$('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
}
}, 200);
$('.elementor-tab-title[data-tab]').click(function(){
var current_location = window.location.href;
current_location = current_location.split('#');
window.location = current_location[0]+'#tab'+$(this).attr('data-tab');
})
})
jQuery(document).ready(function ($) {
setTimeout(function () {
var current = window.location.href
var current = current.split('#tab')
if (current.length > 1) {
showAndScrollToTab($, current)
}
}, 200);
// change the browser url according to selected tab
$('.elementor-tab-title[data-tab]').click(function () {
var current_location = window.location.href;
current_location = current_location.split('#')
window.location = current_location[0] + '#tab' + $(this).attr('data-tab')
})
// activate tab also from anchor link in the same page
$('a').on('click', function () {
var anchorUrl = $(this).attr('href')
var anchor = anchorUrl.split('#tab')
if (anchor.length > 1) {
showAndScrollToTab($, anchor)
}
})
})
function showAndScrollToTab($, current) {
// adding class
$('.elementor-tab-title').removeClass('elementor-active')
$('.elementor-tab-title[data-tab="' + current[1] + '"]').addClass('elementor-active')
// scroll to
var customOffset = '20';
$([document.documentElement, document.body]).animate({
scrollTop: $('.elementor-tab-title[data-tab="' + current[1] + '"]').closest('.elementor-widget-container').offset().top - customOffset }, 1000)
}</script>
Html in use for toggle tab headings:
<div class="elementor-toggle-item">
<div id="elementor-tab-title-2287" class="elementor-tab-title elementor-active" data-tab="7" role="tab" aria-controls="elementor-tab-content-2287">
How to modify the function for making device screen view top is 40px to the .elementor-tab-title[data-tab="' + current[1] + '"] div? Is it possible to adjust offset from div element to top by device (mobile, tablet, desktop)?
Any other solutions are welcome how to do that!

Why wont this script work in Firefox?

I'm having this script, and it works fine in every browser except firefox.
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
window.onscroll = function () {
"use strict";
if (document.body.scrollTop > 7) {
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
The script doesn't seem to load at all. It's supposed to change the color of my header on scroll, and bring forth a 'back to top' button, but in firefox it does nothing. Any ideas on why this doesn't work?
I've tried updating browser to latest version, start in safe-mode without any add-ons.
Edit: I no longer have any errors in console on my site. The script still won't load, it seems like there is something in the script that firefox doesn't understand?

This code works in IE, Chrome and FF:
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
window.onscroll = function() {
"use strict";
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
if (y > 7) {
console.log('here 1')
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
console.log('here 2')
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
Fiddle: https://jsfiddle.net/zevane/zf8d4u36/
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

After trigger click using a hash in the URL the page needs to scroll to top

I am calling a page with a hash in the url so that when it is submitted in the browser the the element with the hash id is clicked. It works fine, but I need the page to immediately scroll to the top after the click. I have tried: $(window).scrollTop(0); but it only seems to work if the page is already loaded.
Here is the Javascript:
<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function()
{
if(window.location.hash)
{
$(thisHash).trigger('click');
}
});
</script>
When I have a url like http://www.example.com#part2 and run it in the browser the element with the hash #part2 is clicked correctly, but the page is scrolled to the element. I would like the page to be scrolled to the top of the page after the element is clicked.
Do you know a way to scroll to the top afterward or have the click "not scroll" to the element to start with?
I have tried the setTimeout function and $(window).scrollTop(0); but they don't seem to work after the click and the page load.
$(window).scrollTop(0); works when I manually run it in the console of chrome after the page is already loaded.
It seems like the $(window).scrollTop(0); gets ignored for some reason.

I think you want to do something like this check out this js fiddle
JSFiddle
code
function scrollnav(){
$('#nav a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, function () {
window.location.hash = target;
});
});
var aChildren = $("ul#nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
}
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var pos = $("a[href='" + theID + "']").parent();
if (windowPos >= divPos ) {
$("ul#nav li").removeClass("active");
$(pos).addClass("active");
var finder = $("ul#nav li.active").index();
size =$('ul#nav li').width();
var onclick = finder * size;
$('span').css('left', onclick + 'px');
}
}
}
$(window).scroll(function() {
scrollnav()
});
scroll top on page reload
Check JS fiddle here
code
$(window).load(function(){
//alert("scroll")
$('html, body').stop().animate({
'scrollTop': 0
}, 1000)
})

Try
window.scroll(0, 0); // X, Y
or
window.scrollBy(0, -document.body.scrollTop)

jQuery Scroll Current Position and Next-Prev Navigator

I need a bit of advice as I can't get my noob head around the following, please see this fiddle: http://jsfiddle.net/NtUpw/
The code works as intended, but when the current div offset goes > 41 and prev is hit, I'd like the page to return to the beginning of the current div, not to one before that. Any idea how can I add this condition?
I realise the current code isn't the cleanest (actually it's a combination of two fiddles), but I hope someone could take a look at it anyway. Thanks.
$('a.buttons').on('click', function (e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if (t === 'next' && $('.current').next('div.post').length > 0 ) {
var $next = $('.current').next('.post');
var top = $next.offset().top;
$('body').animate({
scrollTop: $('.current').next('div.post').offset().top - 40
});
} else if (t === 'prev' && $('.current').prev('div.post').length > 0 ) {
var $prev = $('.current').prev('.post');
var top = $prev.offset().top;
$('body').animate({
scrollTop: $('.current').prev('div.post').offset().top - 40
});
}
$(window).bind('scroll', function () {
$('.post').each(function () {
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 40) {
post.addClass('current');
post.prev().removeClass("current");
} else {
post.removeClass('current');
}
});
});

The prev action works by moving always the div to the previous; the solution is to check the current position of the navigator respect to the current div:
var $prev;
var top;
var firstElem = true;
if ($('.current').prev('div.post').length > 0) {
$prev = $('.current').prev('.post');
top = $prev.offset().top;
firstElem = false
}
var currTop = $('.current').offset().top;
var navBottom = $('.navigation').offset().top + 40;
if (currTop == navBottom && !firstElem) {
$('body,html').animate({
scrollTop: $('.current').prev('div.post').offset().top - 40
});
with this the navigator jumps to the previous div only if is not at the top of the current; alternatively jumps to the previous.
The firefox issue depends on how Firefox places the overflow, it places it at the html level not at body like other browsers.
To let it work you must define the scrolling action with:
$('body,html').animate({
});
Working fiddle: http://jsfiddle.net/IrvinDominin/2QYgR/3/

jquery code does not work fine with differents urls

I have this jquery code:
$(function(){
var $win = $(window);
var $nav = $('.subnav');
var navTop = $('.subnav').length && $('.subnav').offset().top - 38;
var isFixed = 0;
processScroll();
$win.on('scroll', processScroll);
function processScroll() {
console.log('test');
var i, scrollTop = $win.scrollTop();
if (scrollTop >= navTop && !isFixed) {
isFixed = 1;
$nav.addClass('subnav-fixed');
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0;
$nav.removeClass('subnav-fixed');
}
};
})
If I have this url for example:
http://mydomain.com/posts or http://mydomain.com or http://mydomain.com/post?utf8=✓&search=
the code does works fine, but if I have for example:
http://mydomain.com/post?utf8=✓&search=port or http://mydomain.com/post?utf8=✓&search=word
The code does not works fine...
Why if I pass a param for url with my search engine the code does not works fine?
Thank you very much!
Edited
I am using this sunspot solr for my as search engine
http://sunspot.github.com/

I found the fix in this question:
Replicating Bootstraps main nav and subnav
This is the code:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
Thank you