#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40

    Find div in iframe (same domain), click event.


    I want to expand a div with an iframe in it, when i click on a button within the iframe.

    This is what i tried, but didn't work.


    Code:
    <div id="block" style="width:420px;height:280px;">
    <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </div>
    
    
    <script>
    $("#myframe").contents().find(".button-block").click(function(){
        $("#block").animate({height:'600', width:'900'})
    });
    </script>
    This is the button inside the iframe I click on:
    Code:
     
    <div class="button-block">
                    <button type="button" id="search-btn">Search</button>
    </div>
    woozy.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    what you are saying is targetting the parent frame from within the iframe code, it's another approach from what i tried in my first post - unfortunately this doesn't work either. Tried the following 3 variants.

    Attempt #1:
    Parent page:
    Code:
    <div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>
    Iframe source page:
    Code:
    <div class="button-block">
    <button type="button" id="search-btn">Search</button> </div>
    
    <script>
    $("#search-btn").click(function(){
        parent.top.$(“#block”).animate({height:'600', width:'900'})
    });
    </script>

    Attempt #2 (only difference with #1 is im calling the div class around the button instead of the button ID)
    Parent page:
    Code:
    <div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>
    Iframe source page:
    Code:
    <div class="button-block">
    <button type="button" id="search-btn">Search</button> </div>
    
    <script>
    $(".button-block").click(function(){
        parent.top.$(“#block”).animate({height:'600', width:'900'})
    });
    </script>

    Attempt #3:
    Parent page:
    Code:
    <div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>
    Iframe source page:
    Code:
    <div class="button-block">
    <button type="button" id="search-btn">Search</button> </div>
    
    <script>
    $("#search-btn").click(function(){
        $(“#block”, window.parent.document).animate({height:'600', width:'900'})
    });
    </script>
    woozy.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    Try this:

    Code:
    <script>
    $("#search-btn", top.document).click(function(){
        $(“#block”).animate({height:'600', width:'900'})
    });
    </script>
    Or this:

    Code:
    <script>
    $("#search-btn", parent.document.body).click(function(){
        $(“#block”).animate({height:'600', width:'900'})
    });
    </script>
    I think, one of these should work.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    Thanks for the suggestions but both these codes also failed to make it work.

    Weird because i'm calling the jquery script from both pages (iframe page and parent page) so that's also not the problem.

    I can't think of anything why it just doesn't work.
    woozy.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    Are you getting any type of error, from your browser's console log?

    You might could also try window.parent or parent.document.
    Last edited by web_loone08; January 9th, 2013 at 06:15 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    doesnt work with your additional suggestions.

    I never used a console log. Will look into it. In the meantime any other suggestions are welcome.
    woozy.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    maybe there's a server setting that needs to be changed?
    woozy.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    I wouldn't think it would be a server issue, because this is a client side scripting. If anything..., it's a XSS issue (browser security); that's why I was asking if you seen any errors, in your console. You might want to search the jQuery Forum. I seen a few posting about this matter, on there. One of the post mentioned using bind(); to grant iframe child/parent access.

    Additional Note: I did think of one issue, that maybe causing this; especially if your trying to get your code to work in IE. It is possible..., that this is a P3P issue. If it is..., you will need to use a P3P Header; at the top of your pages. I have had to do this before, but I was using an iframe page; from a different domain (on a page, from within my domain).
    Last edited by web_loone08; January 10th, 2013 at 01:18 PM.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    picked this up again, and i think you're on the right track with bind.
    also thanks for suggesting the jquery forum, i found some interesting info about this.
    Here's some good info on it: http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

    I've also read in other threads that a custom events are best for this. I don't really know how to do this, since i've just learned about jquery, but will try some things.

    About the IE thing, im using firefox so i dont think this is it.
    woozy.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    115
    Rep Power
    40
    thanks for pointing me in the right direction! it works now. Read alot and this is what made it work.

    Parent page:
    Code:
    <script>
    $(document).bind('newExpandDiv', function(e) {
    	$("#block").animate({height:'600', width:'900'})
    });
    </script>
    Iframe page:
    Code:
    <script>
    $("#search-btn").click(function(){ 
    	parent.$(parent.document).trigger("newExpandDiv");
    });
    </script>
    woozy.
  22. #12
  23. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    Cool, I am glad you got it working and hopefully this thread will help people, with this issue, in the future.

IMN logo majestic logo threadwatch logo seochat tools logo