CODEWITHSUNDEEP
jquerycsshyperlinkz-index
RB50
RB50

Reputation: 63

How to Get Links to Work with JavaScript-Generated Z-index

I am repurposing a codepen and I have run into an issue with the links inside of the dropdown boxes not working due to z-index that is being generated by the jQuery. The code in the original pen also does not work.

I understand z-index, but in this case, the jQuery code is applying a z-index of 10 to the containing element which is rendering the link behind it. The jQuery is also iterating the z-index each time the box is made visible (see code section).

The HTML and CSS are in the Codepens:

1) Original Codepen: https://codepen.io/candroo/pen/wKEwRL

2) My Codepen: https://codepen.io/Rburrage/pen/PooGKoM?editors=1100

I need assistance on this one, please...and thank you. I feel like I'm overlooking something very simple.

Here's what I have tried:

1) removing the jQuery z-index and adding it with CSS instead

2) removing all jQuery z-index references just to see if I can get the links to work

3) changing z-index on the link (.card-description a) to a higher number than all other z-indexes

4) reading all z-index issues on StackOverflow to see if I can figure it out


$jq(document).ready(function () {
  $jq(document).ready(function () {
    var zindex = 10;

    $jq("div.card").click(function (e) {
      e.preventDefault();

      var isShowing = false;

      if ($jq(this).hasClass("show")) {
        isShowing = true
      }

      if ($jq("div.cards").hasClass("showing")) {
        // a card is already in view
        $jq("div.card.show")
          .removeClass("show");

        if (isShowing) {
          // this card was showing - reset the grid
          $jq("div.cards")
            .removeClass("showing");
        } else {
          // this card isn't showing - get in with it
          $jq(this)
            .css({ zIndex: zindex })
            .addClass("show");

        }

        zindex++;

      } else {
        // no cards in view
        $jq("div.cards")
          .addClass("showing");
        $jq(this)
          .css({ zIndex: zindex })
          .addClass("show");

        zindex++;
      }

    });
  });
});

I'm not seeing any error messages in the console. For simplicity, I have changed all of the links to point to Google. The link seems clickable, yet when I click it -- the box collapses, but I am not taken to the desired URL.

Upvotes: 0

Views: 63

Answers (2)

RB50
RB50

Reputation: 63

I'm voting Osvaldo up because his post caused me to investigate prevenDefault() to the point where I discovered stopPropagation(). His comment helped me solve the issue.

I needed another function to target the link inside of the box (.card-description) and call stopPropagation on it. 

$jq(".card-description a").click(function (e) {
  e.stopPropagation();
});

This solved the issue. Thank you everyone!

Upvotes: 1

Osvaldo Correia
Osvaldo Correia

Reputation: 434

Try this:

$("div.card").click(function (e) {
  //e.preventDefault();

That line is active and if you remove it or commented it like in my example, it should make the urls work.

Not sure why it's uncommented or even there... maybe it was intended for the original example not having the urls working or might be something else I'm missing...

Upvotes: 0

Related Questions