Web Analytics Made Easy -
StatCounter Ughhh, problem with iFrames - CodingForum

Announcement

Collapse
No announcement yet.

Ughhh, problem with iFrames

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Ughhh, problem with iFrames

    Hey guys, hope you can help with this:...
    I WANT to use an iFrame in my site to load the main content into the GUI page. I have this set up fine, with my menu loading in the correct html using 'target' into the iframe.

    But what I want now is to have the inital state of the iFrame at height="0"
    Then on subsequent pages I want the height to change, so for instance when you click on the about link, the iFrame changes to 400px. When contact is selected it changes to 200px etc...

    This has to also work within minimal of SAFARI, Firefox and IE. On PC+OSX.

    Hope someone can shine a huge spotlight on this problem, it's now 4am and I'm resorting to begging for help! Goodnight
    Niietzshe

  • #2
    Hmm a simple search would have gotten the answer you needed. http://www.codingforum.net/showthread.php?t=62354
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Thank you for your Reply.
      I had already seen this tutorial on how to do dynamic iFrame sizing.
      But there is a problem with it, at least in Safari as I see it.
      The script will lengthen the iFrame to the size of the content perfectly if the content being loaded in is bigger than the current.
      But if the content of the page you are loading in is smaller than what is currently there, the content loads, but the iFrame does not shrink back to fit it.

      That is why I was asking if there was a way to specify hight of each link.
      Although if there is an addon to this script which could scale if back down again, then that would be great!

      Again, thanks for the Reply,
      If there is any more info you can give me on this situation, it would be very much apreciated. I feel like i'm nearing the end of the tunnel now (but probably just getting my feet wet :P)
      Later
      Niietzshe

      Comment


      • #4
        Code:
        document.getElementById('main').height='500'
        where 'main' is the id of the iframe. This works in IE6 and FF. I have no Mac to test on but it should work there also. You can use this as part of a function or as a mouse event associated with the link. This also works:
        Code:
        document.getElementById('main').setAttribute('height', '400', 0)
        - John

        Comment


        • #5
          .....
          Last edited by Johnny Lang; Aug 1, 2005, 10:55 AM.
          www.javascript-demos.com

          Comment


          • #6
            I am at the end of my erm... do I have wits???
            None of the things you have presented have worked, unfortunatly.
            I have included a stripped down (understatement) version of my code for you to gander over. It works fine in Firefox, however the initial state of height="0+ doesn't. it doesn't work at all in IE (supprise supprise) and in safari it works, but it only expands, it doesn't shrink...

            If there is a possibility that this might work pleas tell me, even if you don't know how, I can at least keep looking, otherwise I'm resorting to other methods

            Thanks for any further help, you've been great so far!!!
            Niietzshe

            Code:
            	<head>
            		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
            		<title>Welcome to JellyFire.com</title>
            
            		<script type="text/javascript">  
            		<!-- 
            		function resize_iframe(){ 
            		document.getElementById("content").height=null // required for Moz, value can be "", null, or integer 
            		document.getElementById("content").height=window.frames["content"].document.body.scrollHeight 
            		}  
            		// --> 
            		</script>  
            	
            	</head>
            
            
            
            	<body>
            		<a onclick="document.getElementById('content').src='pages/about.html" href="pages/about.html" target="content">About</a>
            		<a onclick="document.getElementById('content').src='pages/about.html" href="pages/pictures.html" target="content">Pictures</a>
            		<a onclick="document.getElementById('content').src='pages/about.html" href="pages/animation.html" target="content">Animation</a>
            		<a onclick="document.getElementById('content').src='pages/about.html" href="pages/contact.html" target="content">Contact</a>
            <br>
            	<iframe id="content" name="content" width="568" height="0" frameborder="0" onload=resize_iframe();></iframe>
            </body>
            
            </html>

            Comment


            • #7
              Originally posted by niietzshe
              Code:
              <a onclick="document.getElementById('content').src='pages/about.html" href="pages/about.html" target="content">About</a>
              The above is invalid and makes no attempt at utilizing the script in the head. Try this without the head script:
              Code:
              <a onclick="document.getElementById('content').src='pages/about.html';document.getElementById('content').width='400';document.getElementById('content').heigh[COLOR=Black]t[/COLOR]='500';return false;" href="pages/about.html" target="content">About</a>
              <br><iframe id="content" name="content" width="568" height="0" frameborder="0"></iframe>
              Last edited by jscheuer1; Aug 1, 2005, 02:47 PM.
              - John

              Comment

              Working...
              X