Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Hierdie gesprek is gesluit en in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

javascript using class selectors opens new tab

  • 2 antwoorde
  • 1 het hierdie probleem
  • 1 view
  • Laaste antwoord deur 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

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: <pre><nowiki> 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'; } }</nowiki></pre> 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
Aangehegde skermkiekies

Gewysig op deur cor-el

Gekose oplossing

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

Lees dié antwoord in konteks 👍 1

All Replies (2)

more options

Gekose oplossing

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