We Keep Coding

Caching problem with Firefox CSS set via javascript

I use a WordPress plugin to add via shortcodes one, two or three 'fontsampler' objects per specific page that each incorporate a text box and a font select box per fontsampler object. The JavaScript hides all select boxes via CSS except the last one.
In Chrome and Edge there is never any problem but in Firefox mostly all the select boxes show and sometimes just the last (F5 always shows all select boxes, ctrl F5 gives variable results).
The webserver also uses Litespeed cache and goes via Cloudfare CDN but I can't see this is relevant since only a Firefox issue.
NB I also tried the code and just the plugin on a vanilla wordpress test server (so no server caching) and didn't see the issue so I'm not sure how to proceed.
Here is the code if this helps:
jQuery(document).ready(function( $ ){
$("body").on("fontsampler.event.afterinit",".fontsampler-wrapper" , function () {
// ‘this’ is div.fontsampler-wrapper.initialized NB all 3x fontsamplers are initialised on first event but not drawn on page e.g. fontpickers (event fires up to three times)
//first count the number of fontsamplers on the page
var fsCount = $($(document).find(".fontsampler-interface")).length;
//check to see if last fontsampler has fully initialised (painted elements on page) else end event and wait for next
var fsStub=".fontsampler-id-";
var fsLast=fsStub+fsCount;
if ($($(document).find(fsLast)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0] !== undefined) {
var fontsampler2Exists = $(document).find(".fontsampler-id-2").val();
var fontsampler3Exists = $(document).find(".fontsampler-id-3").val();
if (fontsampler3Exists !== undefined) {
//Three lines
// $(fs).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
$($(document).find(fsStub+1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
$($(document).find(fsStub+2)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
}
else if (fontsampler2Exists !== undefined) {
// Two lines
$($(document).find(fsStub+1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
}
else {
// One line so don't hide any font picker
}
}

Javascript Loads but does not work in Magento 1.9

Just getting into Magento. I have added a menu and need it to work as it does in the Pen
http://s.codepen.io/WallyNally/debug/dWqGEp/yoMZEQWedYdk
Magento is loading the JS and CSS files as confirmed in sourcecode. The style displays properly. As a double check, in the JS file I have included var MyVariable = "Exists!";. Going to the console in the live dev page, I can type 'MyVariable' and its value is properly returned. There are no errors thrown or displayed.
However, the hover event does not exist. Namely the two mouseenter event triggers.
Here is a working excerpt of the desired javascript:
jQuery("#categories a").mouseenter(function() {
let subcateg = "sub-" + jQuery(this).attr("id");
let active = jQuery(".subcateg-active");
let current = jQuery("#" + subcateg);
if (active.length == 1) {
jQuery(active).toggleClass("subcateg-active").fadeOut(150, function(){
jQuery(current).toggleClass("subcateg-active").fadeIn(180);
});
} else if (active.length == 0){
jQuery(current).toggleClass("subcateg-active").fadeIn(180);
}
if (active.length > 1) {
jQuery(active).css("display", "none").removeClass("option-active");
jQuery(current).toggleClass("subcateg-active").fadeIn(120);
}
});
var MyVariable = "Exists!";
Here is the dev site (link will not be permanent, so an image is attached as well):
http://atlas3.netsos.com/
Any Magento savants know what went awry?

Now I think that there can be 2 reasons:
First: I don't see any category items, so, do you sure that ""#categories a" selector works (element with ID categories holds some link tags ?)?
Second: JS script, where you trying to hung events on some html elements, should be executed after element on which this event must be hunged will be added to document. So, try to execute your script after document loaded.
Example:
jQuery( document ).ready(function() {
// Here your JS code
});

How do I know when a new (Spry) accordion tab has been selected (similar to "on click")? I want to attach my own behaviors

I have an accordion set up to handle registration. I am wanting to validate the data entered on each panel when the user clicks on a different panel tab. I have a continue button on each panel, and am able to validate to my heart's content when the user uses that to go to the next panel.
My problem is that they can also click independently on the accordion tabs (and I want them to be able to skip around for editing purposes), but I would like to validate on those events too.
I've done a bunch of searching, but have not found a satisfactory answer. I am fairly new to Javascript and super-brand-new to jQuery, so please, if you have code snippets for me, be thorough in explaining them.
This should be a straightforward problem (similar to on-click, etc.). I'm quite surprised and frustrated that I haven't found an answer yet.
Edit:
Eric, I couldn't get this to work. Here is my version. I put it in the head section. I have some test code in there that has worked reliably for me in the past (changing the label on one of the tabs). I'm assuming this code has worked for you? Anyway, thanks for your help and I hope we've understood each other sufficiently.
// add capability to detect when accordion tab has been clicked
RegFormAccordion.addEventListener('click', function(e){
var btnElement;
(function findAccordionButton(el){
//e.target is the original element actually clicked on
//the event bubbles up to ancestor/parent nodes which is why you can listen at
//the container
if(!btnElement){ btnElement = e.target; }
else { btnElement = el; }
if(e.target.className !== 'accordionBtn')
{
findAccordionButton(btnElement.parentNode);
}
else
{
var curr_panel_index = RegFormAccordion.getCurrentPanelIndex();
document.getElementById("verify-reg-panel-label").innerHTML = "Index = " + curr_panel_index; // test code to see if it's even getting here
if (curr_panel_index == 1) // contact section
{
ValidateContact();
}
else if (curr_panel_index == 2) // payment section
{
ValidatePayment();
}
UpdateVerifyPanel(); // update contents of verification panel
}
})()
} );

Event delegation.
someAccordianContainer.addEventListener('click', function(e){
var btnElement;
(function findAccordionButton(el){
//e.target is the original element actually clicked on
//the event bubbles up to ancestor/parent nodes which is why you can listen at
//the container
if(!btnElement){ btnElement = e.target; }
else { btnElement = el; }
if(e.target.className !== 'accordionBtn'){
findAccordionButton(btnElement.parentNode);
}
else { doSomething(btnElement); }
})()
} );
You will have to normalize for IE<=8 however if you're supporting older browsers, since it uses a proprietary attachEvent method. Hit quirksmode.org for the details or just use something like jQuery or MooTools.

OK. I found the function that SpryAccordion.js uses to open a new panel and added my own code. Simple and elegant. It's not what I would normally do (usually I leave "libraries" alone). But if you make it editable without giving me another way to take needed control, then the hack is gonna happen.
If I need to use another accordion somewhere else on my website, I will have to double check that I have the correct accordion before invoking the hack. A trade-off I'm willing to make. It works perfectly now. Here is the code:
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
// Start Becca's code
var panelIndex = this.getPanelIndex(panelA);
if (panelIndex == 1) // contact info panel
{
if (ValidateContact())
UpdateVerifyPanel();
else
return null;
}
else if (panelIndex == 2) // payment info panel
{
if (ValidatePayment())
UpdateVerifyPanel();
else
return null;
}
// End Becca's code
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
...
...
...
};
Yes, all I wanted was the same control over the panel tabs as I have over my own user-defined buttons, to make sure I could both validate before moving on, and to update my verification screen after any edit the user makes, not just the ones where they happen to hit my continue button. I'm a happy camper. So glad I took a couple of days off.
I hope this helps someone get more control over their own accordions. So glad I don't have to do a crash-course on jQuery when all I want right now is to get my blasted website up.

Google related bar - how to keep from showing up on my website

A new "google related" bar shows up at the bottom of my website. It displays links to my competitors and other things like maps, etc. It is tied in with users using the google toolbar. If anyone has any ideas on how I can disable from displaying on my web side I would sure appreciate it.

Taken from http://harrybailey.com/2011/08/hide-google-related-bar-on-your-website-with-css/
Google inserts an iframe into your html with the class .grelated-iframe
So hiding it is as simple as including the following css:
iframe.grelated-iframe {
display: none;
}

Google removed div and frame names and put everything to important so original answer no longer works on my site. We need to wait for the iframe to be created and then hide it by classname. Couldn't get .delay to work, but this does...today anyway.
$(document).ready(function() {
setTimeout(function(){
$(‘.notranslate’).hide();},1000);
});

Following javascript code tries to find the google related iframe as soon as the window finishes loading. If found, it is made hidden, else an interval of one second is initialized, which checks for the specified iframe and makes it hidden as soon as it is found on page.
$(window).load(function (){
var giframe = null;
var giframecnt = 0;
var giframetmr = -1;
giframe = $("body > iframe.notranslate")[0];
if(giframe != null)
$(giframe).css("display", "none");
else
giframetmr = setInterval(function(){
giframe = $("body > iframe.notranslate")[0];
if(giframe != null) {
clearInterval(giframetmr);
$(giframe).css("display", "none");
} else if(giframecnt >= 20)
clearInterval(giframetmr);
else
giframecnt++;
}, 1000);});

Find the parent DIV element that contains the stuff in the bar. If it has an id or name attribute, and you can control the page CSS then simply add a rule for the element, i.e. if you see something like
<div id="footer-bar-div".....
then add a CSS rule
#footer-bar-div {display:none ! important}
This will not work if the bar is inside an iframe element, but even in that case you should be able to hide it using javascript, but you will need to find the name/id of the frame, i.e.:
var badFrame = document.getElementById('badFrameId').contentWindow;
badFrame.getElementById('footer-bar-div').style.display='none';
if the frame has a name, then instead you should access it with:
var badFrame = window.frames['badFrameName']
There is also a chance that the bar is generated on-the-fly using javascript. If it is added to the end of the page you can simply add a <noscript> tag at the end of your content - this will prevent the javascript from executing. This is an old trick so it might not always work.

How to get selection HTML and selection parent?

Several of years ago, I added "smart quoting" to a web forum. Basically, user selects a part in previous conversation and clicks a button to quote it. Script gets the HTML of the quote and goes up the DOM tree to figure out who said that.
I could only do it for IE, although I remember trying hard. But then, there was no stackoverflow.com and Firefox was not as mature. I guess that by now, doing it in Firefox is as easy. Here's the key part of the code.
range2Copy = frameDoc.selection.createRange();
html2Copy = range2Copy.htmlText;
el = range2Copy.parentElement();
// go up the HTML tree until post row node (id=postrowNNNN)
while (el.nodeName != 'BODY' &&
!el.id.match(/postrow/)) {
el = el.parentNode;
}
Element frameDoc contains the previous thread where user selects text. If it makes too little sense, see the whole code here. It is a plugin for FCKeditor.

OK, I tried to run your code in firefox and it didn't work, this is the modified version that worked:
var selection = window.getSelection();
var node = selection.anchorNode;
while (node.nodeName != 'BODY' && !node.id.match(/postrow/)){
node = node.parentNode;
}