X
Tippen Sie hierhin, um die Version dieser Website für Mobilgeräte aufzurufen.

Hilfeforum

Dieses Thema wurde geschlossen und archiviert. Bitte stellen Sie eine neue Frage, wenn Sie Hilfe benötigen.

javascript using class selectors opens new tab

Veröffentlicht

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
Angefügte Screenshots

Geändert am von cor-el

Ausgewählte Lösung

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

Diese Antwort im Kontext lesen 1

Mehr Details zum System

Anwendung

  • User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15

Weitere Informationen

jscher2000
  • Top 10 Contributor
8838 Lösungen 72234 Antworten
Veröffentlicht

Ausgewählte Lösung

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

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:''' <code>&lt;li> &nbsp;&nbsp;&lt;a target="_blank" href="javascript:TLSshowhide('adeleboag');">Boag, Adele&lt;/a> &lt;/li></code> '''EVOLUTION #1:''' <code>&lt;li> &nbsp;&nbsp;&lt;a href="javascript:void(0);" onclick="TLSshowhide('adeleboag');">Boag, Adele&lt;/a> &lt;/li></code> 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:''' <code>&lt;li onclick="TLSshowhide('adeleboag');">Boag, Adele&lt;/li></code> And to give people the visual cue that it's clickable, this CSS: <code>.btn-group .dropdown-menu li { &nbsp;&nbsp;cursor: pointer; }</code>

Fragesteller

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

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