Search code examples
javascriptjqueryfacebox

Edit already made html using javascript (facebox)


I am using facebox (you may know of it) and my script looks like

$.extend($.facebox, {
    settings: {
      opacity      : 0,
      overlay      : true,
      loadingImage : 'http://example.com/images/loading.gif',
      closeImage   : 'http://example.com/images/closelabel.gif',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \
              <td class="tl"/><td class="b"/><td class="tr"/> \
            </tr> \
            <tr> \
              <td class="b"/> \
              <td class="body"> \
                <div class="content"> \
                </div> \
                <div id="footer"> \
                <p class="left" id="changable"> \
                Footer \
                </p> \
                <p class="right"> \
                  <a href="#" class="close"> \
                    <img src="http://example.com/images/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </p> \
                </div> \
              </td> \
              <td class="b"/> \
            </tr> \
            <tr> \
              <td class="bl"/><td class="b"/><td class="br"/> \
            </tr> \
          </tbody> \
        </table> \
      </div> \
    </div>'
    },

and in the file, that is using text (remote html) I want to change the footer depending on the file. Multiple remote.html files will be open (share.php, warning.php) and I want to change the footer depending on those. Is there something I can do in this javascript, or is there something I can do within each of share.php and warning.php to grab the and set it's content to something new?

I tried:

$(function() {
        $("#changable").html('Hello');

    });  
$(function() {
        $("#changable").innerHTML = 'Hello';

    }); 
$(function() {
        $("#changable").text('Hello');

    }); 
$(function() {
        $(".left").html('Hello');

    }); 

(I have jquery installed) but nothing.

I'm new to javascript, and I know this is probably easy, but I can't get it working for the life of me.

Thanks in advance.


Solution

  • Jquery solution Try this...

    $(function() {
    //a tag id is anchor_id
    //p tag id is para_id        
    $("#para_id").html($('#anchor_id').attr('title'));
    
    });  
    

    Use the code

    $("#para_id").html($('#anchor_id').attr('title'));
    By trigerring an event. My sample code is here...

    $("#button_id").click(function(){
    $("#para_id").html($('#anchor_id').attr('title'));
    });