Search Support

Lolu chungechunge lwavalwa lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

javascript using class selectors opens new tab

  • 2 uphendule
  • 1 inale nkinga
  • 47 views
  • Igcine ukuphendulwa ngu bobjtls

more options

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

Ama-screenshot ananyekiwe

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

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; }

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (2)

more options

Isisombululo Esikhethiwe

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; }

more options

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