X
Tik hier voor de mobiele versie van de website.

Ondersteuningsforum

Deze conversatie is gesloten en gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

javascript using class selectors opens new tab

Geplaatst

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
Gekoppelde schermafbeeldingen

Bewerkt door cor-el op

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

Dit antwoord in context lezen 1

Aanvullende systeemdetails

Toepassing

  • Useragent: 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

Meer informatie

jscher2000
  • Top 10 Contributor
8838 oplossingen 72245 antwoorden

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

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>

Vraageigenaar

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