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
cor-el দ্বারা পরিমিত
সমাধান চয়ন করুন
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)
চয়ন করা সমাধান
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