I faced such a scrolling problem: At the bottom of the page there is a news block with pagination and page reload. Above is the standard menu. How to correctly implement: if a user in ons pagination clicks on another page, he remains in the same scrolling (i.e. at the bottom of the page). I did it like this:
<script>
$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function () {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
</script>
But if the user who is at the bottom of the page clicks on any menu item at the top, he should, after loading, be on a new page at the top of the page, but of course he rolls down with this script. I put the event onclick Top, but how to do it only after reloading on a new page? Maybe my decision is wrong and there are other options. Thanks for any help !!
Related
I have a single page website. If click one of the navbar tabs, lets say 'contact us' the site will scroll down to the contact section. The problem is, if I refresh the site now it will automatically scroll down to the contact section each time. I want the site to scroll to the top of the page every time I refresh. The reason this is happening is because the address bar is changed to ...index.html#contact-area.
I tried the code below but the site gets caught in an infinite refresh loop.
<script>
window.location.replace("index.html");
</script>
I also tried the following but it doesn't work. It starts to scroll up then stops.
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
One option is to attach an event listener to the anchor instead, and instead of changing the page hash, call scrollIntoView on the #contact-area:
anchor.addEventListener('e', (e) => {
e.preventDefault(); // don't change page hash (unless JS disabled...)
document.querySelector('#contact-area').scrollIntoView();
});
This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)
Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here
using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});
I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!
Firstly: I ma very new in jQuery and web front-end.
Problem:
I have a test site
Steps to see the problem:
Click on [UploadTest]
Click on any pic in gallery to see an overlay
Click on browser's Back button
Now I see main page with the overlay.
Question is how to hide overlay when I leave the gallery page by Back button?
Sometime othe overlay is hidden but when I go on gallery page again it is visible.
How to hide it automatically?
Thanks.
UPDATE: Sorry, I can not post sources because I do not know where is problem. Please if you have a minute look inside sources in browser.
$(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
$("#galleryOverlay").css('display', 'none')
});
}
});
I've just found this basic JavaScript for what I need for a collapsible menu. Is there away to have it so the hidden content doesn't load up first?
I have it appearing on page load in the css for accessibility if a visitor is visiting with JavaScript turned off, but I would like this code on page load to not show the hidden menu.
Also, is there away to animate it to so it looks nicer when it collapses and expands?
function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'none')?'block': 'none';
}