I use the slice() function to load more items in the catalog. When I click on an item detail and want to return to the previous page by clicking the Back button in the browser, only the first 15 items are displayed. Is it possible for the page to load at the last position and the user not have to scroll through the items again?
$(function () {
$(".content-inner-wrapper").slice(0, 15).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".content-inner-wrapper:hidden").slice(0, 15).slideDown();
if ($(".content-inner-wrapper:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Thanks for the advice.
Related
I'm using this script to automatically open specific tabs in an elementor toggle widget on page load using media strings.
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let toggletitles = $('.elementor-toggle-item .elementor-tab-title');
let strings = ['?technical',
'?configuration',
'?safety',
'?cycle-life',
'?discharge',
'?charging',
'?environmental',
'?mechanical'
];
strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
toggletitles.eq(i).click();
$('html, body').animate({
scrollTop: toggletitles.eq(i).offset().top - 100
},'slow');
} } );
}); }, 1200); });
</script>
So if I were to enter the url https://electrovolt.com/prislogic-4s1p-120-ah/?safety it would load the page with the safety tab open. The problem is that when you load that link, it automatically scrolls down to that section of the page. I'd like to make sure that the link opens at the top of the page and stays there until the user scrolls down. Any ideas?
The following line is what is causing the browser page to animate a "scroll down" effect to where the widget is on the page:
$('html, body').animate({
scrollTop: toggletitles.eq(i).offset().top - 100
},'slow');
If you remove that line, your page should no longer scroll down.
I have the following code:
<script type="text/discourse-plugin" version="0.8.13">
$(document).ready(function() {
if ($('#daily-check-in').length) {
$('#daily-check-in').attr("href", settings.daily_check_in_url);
$('#daily-check-in').text(settings.daily_check_in_text);
}
if ($('#current-user').length) {
var image_bell = 'https://cdn.ramseysolutions.net/church/fpu/images/icon-bell.svg';
$('#current-user').find('img')[0].setAttribute('src', image_bell);
}
setTimeout(function() {
$('#js_fpu_global_nav > ul').css('transition', 'margin 0.4s').delay(1000);
}, 2000);
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is("#js_fpu_global_nav > ul") === false) {
$('#js_fpu_global_nav > ul').removeClass('open-top-nav');
}
});
});
</script>
The important part is:
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
For now, when I move between pages in dynamic way, it keeps the menu open. I would like to close it every time user clicked on some other place of the page (not in the menu box) or if he moved to a different page (even if its from one of the links from this menu page).
I'm familiar with Vanilla JS addEventListener but I'm not sure how to use it here or if its the right approach. The desired output is to close the menu every time user clicks on something else. Other code could be found on Github (link).
I'm using Twitter Bootstrap's treeview plugin to generate a table of contents. The links I have for each node has the location of where the HTML is located and the anchor tag to go to. I parse this and load the HTML in a DIV on the current page and then scroll to the anchor tag. This works fine using the code below, but when I collapse or expand the nodes, it stops loading the HTML in the DIV and opens the page directly, basically ignoring the click event I have on the anchor tag. Any idea why that click event would not be triggered?
I have the following code to listen to buttons I have to expand or collapse the whole tree as follows:
var $treeview = $('#treeview');
$("#expand").click(function (e) {
e.preventDefault();
$treeview.treeview('expandAll', { silent: true });
});
$("#collapse").click(function (e) {
e.preventDefault();
$treeview.treeview('collapseAll', { silent: true });
});
I set silent to true to suppress events but then my listener for anchor tags with hrefs in them will no longer get called. Everything works as expected otherwise so I'm unsure why these event calls cause this problem. And unfortunately, I can't use the nodeSelected event because subsequent clicks on the anchor tags cause the other HTML page to load, which is undesired; it needs to remain on the current page so the following code is the only way I was able to achieve that.
$("a[href*='#']").click(function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.hash;
var location = this.href.match(/[^#]*/g)[0];
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
return false;
});
Maybe you can do like this
$("body").on("click", "#expand", function (e) {
e.preventDefault();
$treeview.treeview('expandAll', { silent: true });
});
$("body").on("click", "#collapse", function (e) {
e.preventDefault();
$treeview.treeview('collapseAll', { silent: true });
});
And
$("body").on("click", "a[href*='#']",function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.hash;
var location = this.href.match(/[^#]*/g)[0];
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
return false;
});
I have the following anchor tag in my HTML that I use to load contents from that HTML location into a contents div on the current page. This anchor tag is part of Bootstrap treeview plugin I use for generating a table of contents:
1.1 Overview
In my JavaScript, I have the following code I use to listen for two events. One for the anchor tag so that I disable the default behavior and the other to process the anchor tag and load the contents and scroll to the anchor as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
});
// Add smooth scrolling to all links inside a navbar
$treeview.on('nodeSelected', function (e, data) {
e.preventDefault();
if (data && data.href !== "") {
// Split location and hash
var hash = data.href.match(/[#].*/g)[0];
var location = data.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
});
What I am seeing is that the first time a click a node in my TOC, it loads the HTML into the contents div as expected but the second time I click it, it loads the HTML page that is referenced in the anchor tag despite my efforts to track if I previously loaded it as I do with the conditional logic above. I also notice that on the subsequent click, the anchor selector is not being called.
Any idea how I can accomplish having the TOC initially load the HTML from another page into the current page and then on subsequent calls just scroll to the anchor location (ie., chapter)?
Combining the two functions and returning false appears to work as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.href.match(/[#].*/g)[0];
var location = this.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
return false;
});
Here is example which shows content of different div on when button is clicked.
Fidddle: http://jsfiddle.net/teddyrised/NHtvM/15/
Rather then div, I want to display the content of different page when link is clicked.
There must not appear scroll bar.
Header and footer should remain fixed. how to do this?
JS:
$(function () {
// Scroll to function
function scrollTo(ele) {
$("html, body").animate({
scrollTop: $(ele).offset().top - $("header").outerHeight()
});
}
// Detect location hash
if (window.location.hash) {
scrollTo(window.location.hash);
}
// Detect click event
$("header a[href^='#']").click(function (e) {
var target = $(this).attr("href");
scrollTo(target);
e.preventDefault();
});
});
If content is loaded you can hide-show what you need. If by page you mean a external page you can call the resource with a ajax call:
$.ajax({
url: "http://fiddle.jshell.net/user/login/",
context: document.body
}).done(function(data) {
target.html(data);
scrollTo(target);
});
http://jsfiddle.net/2LCM4/