#1
  1. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,406
    Rep Power
    24

    Hide 1 DIV, show the next...


    Now, this seems odd. I have the basic setup below. An ajax call is made via a click on the Delete, it runs and returns successfully. The javascript successfully removes and adds a class to the TD.

    And, now for the issue... However I define the 2 classes in my CSS, I can never seem to get the second DIV to exist. If I make both CSS notes refer to the first, it disappears, and reappears just fine. But if I try and make the .appear relate to the second DIV, it will never show.

    I have left all showing just to make sure all intended items are returned from the AJAX call and placed correctly, and they do. Tis simply the first DIV disappears fine, and the second never appears...

    Code:
    <TD>  <-- Classes are added to this just fine...
      <DIV> <-- This disappears just fine (And re-appears when testing fine)
        (Image)(Edit link)(Delete link)
      </DIV>
      <DIV style="display: none;">  <-- Never appears..
        You're image has successfully been deleted!
      </DIV>
    </TD>
    Both of these are added to the TD:
    Code:
    .disappear > div:first-child {
      display: none;
    }
    .appear > div:nth-child(2) {
      display: inline-block;
    }
    I've tried a handful of different things, but can only seem to affect the first DIV, and never the second...
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    932
    Rep Power
    279
    your inline style on the 2nd DIV will take precedence over any other css rules for it.
    so, you will need to use javascript/jquery to change the display:none to display:inline-block to hide/show
    or remove that display:none completely and just use your 2 classes to hide/show by using jquery with removeClass() and addClass()

    Comments on this post

    • Will-O-The-Wisp agrees
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,406
    Rep Power
    24
    Thank you very much. This did it. ^_^

    HTML:
    Code:
    <TD class="thumb">  <-- Class now defines what shows...
      <DIV>
        (Image)(Edit link)(Delete link)
      </DIV>
      <DIV>  <-- Removed the in-line style
        You're image has successfully been deleted!
      </DIV>
    </TD>
    CSS:
    Code:
    .thumb > div:first-child {
      display: inline-block;
    }
    .thumb > div:nth-child(2) {
      display: none;
    }
    .delete > div:first-child {
      display: none;
    }
    .delete > div:nth-child(2) {
      display: inline-block;
    }
    JavaScript:
    Code:
    $('#gallery .remove').click(function(){
      if (window.confirm("This will permanently delete your picture from the gallery...")) {
        ajaxCall('gallery','remove',$(this).attr('imgid')); 
        $(this).closest('td').removeClass('thumb');
      }
    });
    function ajaxCall(mod, action, id) {
      $.ajax({
        url: './includes/ajax.php?mod='+mod+'&action='+action+'&id='+id,
        type: 'GET',
        dataType: 'json',
        success: function(data, textStatus, xhr) {
          $('#'+data[1]).closest('td').addClass('delete');
          $('#'+data[1]).html(data[0]);
        },
        error: function(xhr, textStatus, errorThrown) {
          $('#'+data[1]).closest('td').addClass('delete');
          $('#'+data[1]).html(textStatus);
        }
      });
    }
    Last edited by Triple_Nothing; April 29th, 2015 at 09:16 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo