so I have one script that scrolls the whole page smoothly. Nice script. It uses anchors to do this. So the NAvigation Menu basically says "ABOUT ME" or whatever, and when clicked the whole page scrolls to the ABOUT ME section. But what its programmed to do is when I click on an internal anchor link, it bring the browser view to the TOP, LEFT. which works fine, since I want to scroll the entire page.
BUT.
I am using another script that allows me to click an option on a menu, and a little window should pop up and give me the info. BUT instead, the whole page moves, thanks to the previous scrolling script, and puts the new pop TOP, LEFT.
Soooo? any ideas?
init: function () {
var lnks = document.getElementsByTagName('a');
for (var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
addEvent(lnk, 'click', HtinyScrolling.initScroll, false);
lnk.onclick = function () {
return false;
} // Safari
}
}
Rewrite the scrolling script so it does not affect the anchors in the menu. Without seeing any code it is difficult for me to say exactly what to change.
The best way to solve this would be to either make the scrolling script only affect anchors of a specific css class such as .scrollable, or alternatively make it not affect anchors with a specific class for example if the option menu has every option with class .option then disable your script for anchors with class .option. If I could see the relevant parts of your code I could help further
Related
I am trying to hide on section of my page to show a "loading" spinner. To do this, I just use jquery to add class "d-none" and remove class "d-none from whichever needs to be hidden/shown.
The function:
function toggleWaiting(divName, waiting) {
var $div = $("#" + divName);
if (waiting == true) {
$div.find(".divSpinner").removeClass("d-none");
$div.find(".divContent").addClass("d-none");
}
else {
$div.find(".divSpinner").addClass("d-none");
$div.find(".divContent").removeClass("d-none");
}
}
The function works perfectly when I am focused on the tab, or just when Chrome is opened with this tab as the current viewable one. However, when I go to another tab, and the function to toggle the hidden/shown is called, the content is visible but the spinner is as well.
I am mostly wondering if there is an issue with the way I am doing this, or if there is a gotcha with jQuery I didn't know about? The function does work if I am focused on the tab.
Edit: included full function
As an update, I still have no idea what the issue was. It wasn't present in firefox though, only chrome. My resolution was instead of ".addClass('d-none');" I did ".show()" and ".hide()".
I need to quickly select, copy and paste text (the content descriptors, specifically) from pages like this: https://www.esrb.org/search/?searchKeyword=&searchType=LatestRatings&timeFrame=PastWeek&pg=1&platform[]=All%20Platforms&rating[]=E&rating[]=E10%2B&rating[]=T&rating[]=M&rating[]=AO&descriptor[]=All%20Content
I can't easily select the text I want because the whole game box is a link and I guess click and dragging makes it think you are trying to drop a link somewhere. I need to do a lot of this, so going to each individual game page and grabbing the text there would be very cumbersome.
I tried blocking links to "https:www.esrb.org/ratings/" as detailed on this page: https://scottlilly.com/greasemonkey-block-links-to-annoying-websites/ but there was no change.
Array.prototype.forEach.call (linkList, function (link) {
if (link.hostname.includes("https://www.esrb.org/ratings/")
) {
//-- Block the link
link.href = "javascript:void(0)";
}
} );
Changing the URL does not make it not a link. However, in your case the link has no text and is overlayed over the box via CSS, so all you need is to hide it. I would use this function:
function setLinks(state) {
const links = document.querySelectorAll("#results .game>a");
for(const link of links) {
// false means hide, true means show
link.style.display = !!state ? "" : "none";
}
}
Call setLinks(false) to disable them and setLinks(true)` to activate them again. You could even make it controllable, for example only disable links if you're holding a key. This would disable the links when you hold S, as in select:
window.addEventListener("keydown", (e)=>{if(e.which==83)setLinks(false);});
window.addEventListener("keyup", (e)=>{if(e.which==83)setLinks(true);});
I integrated a menu based on https://www.codeply.com/go/T2mpwMOt60 into a website I'm building. Having used it during the build process there is one feature which I feel it misses.
Ideally I would like to have a menu item stay open when navigating to another page. So, looking at the sample menu, that would mean that if Item 3 was open, it should stay open when the page is reloaded, but close if another menu heading was clicked.
Given that every menu section starts with
<a href="#menu1"
<a href="#menu2"
etc, and when opened, the class changes from
class="list-group-item collapsed"
to
class="list-group-item"
I figured that the current menu state could be written to local storage and then read back in on page load to restore the previous state.
Does anyone know of examples that would point me in the right direction on coding this type of functionality?
I've just tried using the following script to save to localStorage
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
It doesn't reopen the menu, but I suspect that is due to what is getting put into local.storage
As an example, When I first click to open the 'customers' sub menu, it stores #menu5, which is the sub menu I would want to be reopened on reload, but when clicking any of the children inside that menu, the stored data will change to the url of the last clicked link.
Additional note, if I reload the page whilst #menu1, #menu2 etc is stored, then it loads with the menu displaying correctly. So it is purely a case of figuring out how to NOT store anything other than the initial #menu open.
The problem is with the objects you are referencing in the event handler.
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
On line 2, it shows that the function will trigger if an a tag is clicked. Try using something else such as button and use that as the link that opens the menus, rather than using the same tag as the one for the hyperlinks. If you can't get that to work then maybe try adding something like an OnMouseDown attribute to each menu-opening button.
Or try my current solution, which checks for a different attribute before saving. This is one that should work, as long as you give each menu-opening link the name here:
<script>
$(document).ready(function () {
$('a').click(function() {
if($(this).attr('name') == "menubtn"){
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
};
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
</script>
Test 1
Test 2
I wrote those modifications assuming that $ was already defined in your full project, if not then I'll leave it to you to work on that. Tell me if this works.
The solution I used for this is below.
$(document).ready(function () {
$('a').click(function() {
var menuNumber = $(this).attr('href').slice(0, -1);
//console.log(menuNumber);
if (menuNumber == '#menu') {
localStorage.setItem('collapseItem', $(this).attr('href'));
}
var menuHome = $(this).attr('href').slice(-9, -4);
//console.log(menuHome);
if (menuHome == 'index') {
localStorage.setItem('collapseItem', '');
}
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
localStorage.setItem('collapseItem', '');
})
})
I needed to be able to also clear localStorage if the Home link was clicked to prevent the menu from reopening on the last used submenu.
Also added is a check to clear the localStorage data if the arrow icon on the menu was used to close it.
Although it's unlikely that someone would close the accordion in this way and then refresh the page, I thought it better to be thorough.
I have a button on my index.html page like this:
About Us
and once the user has clicked this button and been moved to the About Us page, I want to position the scrollbar around 200px down from the top of the page. I saw a few questions on SO about how to move the page down using a jQuery plugin. However, I want to be able to first navigate to the new page, and then automatically scroll the page down for the user. My first thought was to have some jQuery that would just move the About Us page down on page-load. However, I only want the page to move down only when the link on my index page is clicked and not if a user navigates to the page from another way. Is this possible?
If you have an element on the about us page with an ID you can change your link to (note that the forward slash is not before the id).
<a href="about.html#ElementID"/>
and that will put the scroll point to the element with that ID. For example, this link will bring you back to this
This Link - https://stackoverflow.com/questions/28467667/how-can-i-change-the-scrollbar-location-once-a-link-is-clicked#answers
Will bring you to this page but set the scroll to the answers form.
If this isn't the method you want to use you can always try this Javascript
function ScrollPoint() {
var PageHeight=document.body.clientHeight;
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var a=params[i].split('=');
if (a[0] == 'scroll') {
// Add Validation the urlParam (0-9) only! Validation is good!
var urlParam= decodeURIComponent(a[1]);
var ScrollPoint=PageHeight-urlParam;
window.scroll(0, ScrollPoint);
}
}
}
window.onload=ScrollPoint;
You could set a parameter in the url /?scroll=200 and use javascript to check for a scoll= parameter, if the scroll param is set then this will scroll to that point.
I hope this helps, happy coding!
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';
}