javascript using class selectors opens new tab
I have a page using javascript to filter div's depending on a selection criteria. On Safari and Chrome, the filtering works just fine. Bit onFirefox (the latest version) instead of seeing the filtered list I see a new tab, titled About:
The attached images show the sequence, screen1 and then screen2 then screen3. I should see screen1 with a subset of the divs in the scrolling section.
The javascript is:
function TLSshowhide(tlsclassname) {
/* first, hide all responsive div's */
var y = window.frames['theinterviewsdataframe'];
var z = y.document.getElementById('theinterviewsdata');
var x = z.getElementsByClassName('responsive');
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
/* then, show the responsive div's with the selected classname */
x = z.getElementsByClassName(tlsclassname);
for (i = 0; i < x.length; i++) {
x[i].style.display = 'initial';
}
}
/* When the user clicks on the artist button, show all responsive div's */
function showArtist() {
/* when showing the artists, show all responsive div's */
var y = window.frames['theinterviewsdataframe'];
var z = y.document.getElementById('theinterviewsdata');
var x = z.getElementsByClassName('responsive');
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'initial';
}
}
You can see this in action for yourself by going to http://cultconv.com/CultConv20181030/theinterviews.html and clicking the By Artist button
The list of DIV's being displayed is found in http://cultconv.com/CultConv20181030/theinterviewsdata.html
All help appreciated.
bobj
Modified by cor-el
Chosen solution
Hi bobj, why do the links have target="_blank"? That normally directs links to a new tab.
As long as you have flexibility to change these links, I would suggest this format:
CURRENT:
<li>
<a target="_blank" href="javascript:TLSshowhide('adeleboag');">Boag, Adele</a>
</li>
EVOLUTION #1:
<li>
<a href="javascript:void(0);" onclick="TLSshowhide('adeleboag');">Boag, Adele</a>
</li>
href="javascript:void(0);" kills the link functionality so there's no accidental navigation after the script runs.
But since you have no fallback behavior for the link, you could go to this:
EVOLUTION #2:
<li onclick="TLSshowhide('adeleboag');">Boag, Adele</li>
And to give people the visual cue that it's clickable, this CSS:
.btn-group .dropdown-menu li {
cursor: pointer;
}
All Replies (2)
Chosen Solution
Hi bobj, why do the links have target="_blank"? That normally directs links to a new tab.
As long as you have flexibility to change these links, I would suggest this format:
CURRENT:
<li>
<a target="_blank" href="javascript:TLSshowhide('adeleboag');">Boag, Adele</a>
</li>
EVOLUTION #1:
<li>
<a href="javascript:void(0);" onclick="TLSshowhide('adeleboag');">Boag, Adele</a>
</li>
href="javascript:void(0);" kills the link functionality so there's no accidental navigation after the script runs.
But since you have no fallback behavior for the link, you could go to this:
EVOLUTION #2:
<li onclick="TLSshowhide('adeleboag');">Boag, Adele</li>
And to give people the visual cue that it's clickable, this CSS:
.btn-group .dropdown-menu li {
cursor: pointer;
}
jscher2000, thank you for your reply. The target=_blank was the problem. I can not see why I didn't pick this up, it was based on code I copied from somewhere else but I didn't spot the target property.
Thank you, you have saved my bacon or tofu if you are vegan
bobj