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

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2

    Show div of another page in fancy box


    I was just wondering if there is a way to show a specific div from another page in an iframe inside of fancybox or something when clicking a link. The iframe would only show the contents of the div from the other page, no other content shown from the other page. I have this set up so far,

    index.php
    Code:
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".fancybox").fancybox();
    		
    		$(".newWindow").fancybox({
    			scrolling: 'auto',
    			width: '800',
    			height: '600',
    			type: 'iframe',
    			
    			fitToView: false,
    			autoSize: false
    		});
    		
    	});
    </script>
    
    <body>
    <a class="newWindow" href="newpage.php#otherDiv" target="_blank">Click here</a>
    </body>
    newpage.php
    Code:
    <div id="header"></div><br>
    <div id="otherDiv">stuff in here</div><br>
    <div id="footer"></div>
    So the Fancybox code I have above isn't working the way I'd like it to because the iframe shows the whole new page instead of just the div contents.
    Last edited by andy1212; July 9th, 2013 at 11:56 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    According to this you should be able request the page using jQuery ajax and use the dataFilter option to obtain the specific div that you want, something like:
    Code:
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
    		
                $(".newWindow").fancybox({
                    scrolling: 'auto',
                    width: '800',
                    height: '600',
                    fitToView: false,
                    autoSize: false,
    	
                    'type': 'ajax',
                    'ajax': {
                        dataFilter: function(data) {
                            return $(data).find('#otherDiv')[0];
                    }
                }
            });
        });
    </script>
    
    <body>
    <a class="newWindow" href="newpage.php" target="_blank">Click here</a>
    </body>

    Comments on this post

    • Winters agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    Worked like a charm! I was trying the code before and getting a syntax error but in you example you had another curly bracket that I was missing which was throwing the code off. Thanks a lot!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    Good to hear that it worked for you!

IMN logo majestic logo threadwatch logo seochat tools logo