1 Reply Latest reply on Dec 12, 2011 12:07 PM by Nancy OShea

    Simple JQuery Question ...

    bcounts Level 1

      I am writing some JQuery Code ... I am a bit novice with JQuery and need some help with what I am sure is a simple fix.

       

      I have 4 buttons that all load different content depending on the button clicked into an iFrame dynamically.

       

      Can you look at the code below and help me add a way to dynamically remove the iFrame from the ".slide" div when the Close Button is clicked ... this way the iFrame will be created fresh with the new content when another one of the buttons is clicked ... right now it will only show the content from the first button clicked because it is not unloading the data when the ".slide" div is closed (faded-out).

       

      Thanks in advance!

       

       

      $(document).ready(function() {
          $('.work1 a').click(function() {
              $('<iframe />', {
                  "name": "slide_frame",
                  "id": "slide_frame",
                  "src": "work1.html",
                  "scrolling": "no"
              }).css({
                  'height': '780px',
                  'width': '900px',
                  'border': 'none',
                  'overflow': 'hidden'
              }).appendTo('.slide');
              $('.slide').fadeIn();
          });
      });
      
      $(document).ready(function() {
          $('.work2 a').click(function() {
              $('<iframe />', {
                  "name": "slide_frame",
                  "id": "slide_frame",
                  "src": "work2.html",
                  "scrolling": "no"
              }).css({
                  'height': '780px',
                  'width': '900px',
                  'border': 'none',
                  'overflow': 'hidden'
              }).appendTo('.slide');
              $('.slide').fadeIn();
          });
      });
      
      $(document).ready(function() {
          $('.work3 a').click(function() {
              $('<iframe />', {
                  "name": "slide_frame",
                  "id": "slide_frame",
                  "src": "work3.html",
                  "scrolling": "no"
              }).css({
                  'height': '780px',
                  'width': '900px',
                  'border': 'none',
                  'overflow': 'hidden'
              }).appendTo('.slide');
              $('.slide').fadeIn();
          });
      });
      
      $(document).ready(function() {
          $('.work4 a').click(function() {
              $('<iframe />', {
                  "name": "slide_frame",
                  "id": "slide_frame",
                  "src": "work4.html",
                  "scrolling": "no"
              }).css({
                  'height': '780px',
                  'width': '900px',
                  'border': 'none',
                  'overflow': 'hidden'
              }).appendTo('.slide');
              $('.slide').fadeIn();
          });
      });
      
      $(document).ready(function() {
          $('.close').click(function() {
              $('.slide').fadeOut();
          });
      });