Advanced Search

Results 1 to 5 of 5

Thread: Calling a function in Iframe from main page help please!

  1. #1
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Calling a function in Iframe from main page help please!

    Ok so I have a few questions here. I want my function to work inside the Iframe, but I want to call it from outside the Iframe, the main page. The iframe is going to be doing the same jquery function as the inframe only I want them to go in different directions (scrolling). The trigger for the function of the jquery on the main page is on click of the link. I want the jquery function inide the iframe to trigger on the same click(the click of the link on the main page)

    Here is my code:

    Main Page Code:

    Code:
    <iframe style="position:absolute; width:25%; height:1000%; z-index: 80; FILTER: chroma (color=FFFFFF)" src="extra.html" frameborder="0" id="section" class="nav">
        
       
        <script type="text/javascript">	
    	
    	function putme() {
    	 window.frames['section'].putme();
    	}
         
    			$(function() {
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
                        
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 7500,'easeInOutExpo');
    					
    					event.preventDefault();
                    });
                });
    			 
            </script>
    
        
        </iframe>

    Here is the page being loaded into the Iframe code:

    Code:
     <script type="text/javascript">
        
        function putme() {
        window.frames['section'].putme();
    	}
        
        $(function() {
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
                        
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 7500,'easeInOutExpo');
    					
    					event.preventDefault();
                    });
                });
        
        
        </script>
    Last edited by jscheuer1; 12-14-2011 at 01:10 AM. Reason: Format

  2. #2
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I can post my test page if needed

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default

    There are security reasons that sometimes it won't work. If you're using the same domain, then it will probably be possible. I'm not sure what's specifically wrong here, but check the domains first.

    Another detail is that "www.yoursite.com" and "yoursite.com" are actually different domains (subdomains), so you need to make sure they match.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jul 2011
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    They are in the same domain name.

    I am just in the local testing phases so I am using extra.html instead of www.mydomainname.com/extra.html, but I will make sure to fix it once I upload to the server.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,708
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Anything in the red area is ignored by browsers which support iframe:

    Code:
    <iframe src="whatever" other attributes and/or style>
    RED ZONE
    </iframe>
    So, from your first post:

    Code:
    <iframe style="position:absolute; width:25%; height:1000%; z-index: 80; FILTER: chroma (color=FFFFFF)" src="extra.html" frameborder="0" id="section" class="nav">
        
       
        <script type="text/javascript">	
    	
    	function putme() {
    	 window.frames['section'].putme();
    	}
         
    			$(function() {
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
                        
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 7500,'easeInOutExpo');
    					
    					event.preventDefault();
                    });
                });
    			 
            </script>
    
        
        </iframe>
    All that (red) is ignored. If you want it to do anything at all, it must be outside the iframe tag. There could also be other problems.


    If you want more help - please define what you want your function to do and when, and please provide a link to your page.
    Last edited by jscheuer1; 12-14-2011 at 02:24 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •