Solved

Help please...iframes and resize

Posted on 2004-08-04
25
750 Views
Last Modified: 2008-02-26
OK, I looked through over a dozen solutions on this site...and a whole dya on google...nothing seems to work for me :( This is what I got:

<iframe id="listFrame" width="100%" src="MeetingList.aspx" name="listingFrame" class="listing"
height="90%" frameborder="0" framemargin="0" runat="server"></iframe>
<br>
<br>
<span class="detailsCloser" id="closer"><a href="#" onClick="maximizeDetailsPane();"><img src="images/icon_uparrow_16.gif" border="0" id="uparrow" alt="Maximize"></a>
<a href="#" onClick="openDetailsPane();"><img src="images/icon_downarrow_16.gif" border="0" id="downarrow" alt="Minimize"></a>
<a href="#" onClick="closeDetailsPane();"><img src="images/icon_x_16.gif" border="0" alt="Close"></a>&nbsp; </span>
<iframe width="100%" height="0" marginwidth="0" frameborder="0" marginHeight="0" scrolling="auto"
      class="details" id="frameDetails" name="frameDetails" runat="server"></iframe>

The important part of the html above is the iframes (two of them)...basically it is like a master/detail page where you click on the first iframe, and something shows below based off that. I just found out that I must give the top iframe draggable capability....like a regular frame (I must use an iframe though). Basically, I have to emulate the regular frameset where you have a "bar/border" that you can hold onto and drag.

I have tried to put the iframe in a div, I have tried to put frames within the iframe and around the iframe, I have tried to create a 'splitter control'...nothing works.

Does anyone have a solution???

Thanks!
-Joe
0
Comment
Question by:glsac
  • 15
  • 3
  • 3
  • +2
25 Comments
 
LVL 9

Author Comment

by:glsac
Comment Utility
If you get the answer, 1000 points your way..just post here as well:

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21082941.html
0
 
LVL 6

Expert Comment

by:viola123
Comment Utility
           <table height="100%" width="100%">
                  <tr>
                        <td>
                              <iframe id="listFrame" name="listingFrame" height="90%" width="100%" src="http://www.cnn.com"></iframe>
                        </td>
                  </tr>
                  <tr>
                        <td>
                              <iframe id="frameDetails" name="frameDetails" width="100%" height="100%" src="http://www.talman.com.au"></iframe>
                        </td>
                  </tr>
            </table>
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
Sorry...that does not help me at all :(
0
 
LVL 1

Expert Comment

by:jonnyfb
Comment Utility
The src of listFrame should be a page which links to other pages with details yeah?
But you want the detail pages to be in frame details yeah?

So you need to do a link like this:
<a href="detailpage.htm" target="frameDetails">Link to detailpage.htm in frameDetails</a>

All you have to do is add    target="frameDetails"    in the <a> tag to make the page appear in frameDetails!
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
err...ok let me try this again :)

I don't have a problem with frames...I need support to DRAG an iframe like a regular frame :) I need to emulate a regular frameset in an iframe.

-Joe
0
 
LVL 1

Expert Comment

by:jonnyfb
Comment Utility
You mean you want a frame with other frames inside?
0
 
LVL 1

Expert Comment

by:jonnyfb
Comment Utility
I do not think you can create a 'drag n drop' interface with javascript.
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
No...I mean I want to have two iframes:

iframe1
----splitter  ---> something here I can hold onto and drag down and up like a regular frame
iframe2
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
http://www.xulplanet.com/tutorials/xultu/splitter.html

something like that which only works for mozilla...arghhh
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
You already mentioned your solution:
1.) Put one IFRAME on the main page, like this:
<iframe src="splitter.htm" height="100%" width="100%"></iframe>

2.) Use two frames inside that one iframe. Here the splitter.htm:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<FRAMESET rows="50%,50%">
      <FRAME SRC="mail_mailbox.html?mail_view=1&msgNo=16329" id="mailbox" NAME="mailbox" scrollbar="yes" frameborder="0">
      <FRAME SRC="mail_preview.html" NAME="preview" id="preview" scrolling="yes" frameborder="0" style="border-top:5px solid #CCCCCC">
</FRAMESET>
</HEAD>
</HTML>


The upper example is from my last free mail provider.

0
 
LVL 9

Author Comment

by:glsac
Comment Utility
Zvonko-

That does not work..tried that already...
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Why not?
It worked in my test.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 9

Author Comment

by:glsac
Comment Utility
Maybe I am misunderstanding you....

I have 2 iframes...no frames at all (yet)...I need the top iframe to mimic a real frame. I would liek to wrap it in something, but it does not seem to recognize that.
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
Your solution was just the opposite I believe of what I need :) I need  frame around iframes, not an iframe around a frame...but then again I have been trying to get this for a while...so everything looks confusing to me now.
0
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
Comment Utility
I've modified my drag and drop scripts to create an example with two iFrames being resized after holding the mouse down on a bar that placed inbetween the two:
http://www.windgazer.nl/eexchange/Q_21082938.html

If this is more or less what you want we could from this into a more bugfree version. (Currently moving to fast will prevent the onmousemove handler from firing on the body, releasing the mouse in one of the frames is even worst as than the resize handler gets stuck and can no longer be release).

Hope this helps :)

  Martin
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
I am gonna take a look now.
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
document.getElementById("listFrame").style.height = (this.startHeight + (mouse.y - this.startY)) + "px";

This keep sgiving me an error so I can't really test it...but I think you know what I need :)
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
I think the error is related to the fact that if you lose focus on the grey bar...for example if you click on the grey bar and just drag up, but your mouse is no longer on the bar it gets messed up :)

Is there a way that you dont have to have your mouse always on that bar?

Thanks!
-Joe
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
"If this is more or less what you want we could from this into a more bugfree version. (Currently moving to fast will prevent the onmousemove handler from firing on the body, releasing the mouse in one of the frames is even worst as than the resize handler gets stuck and can no longer be release)."

I should have read this...yea this is what I need :) but as you said it has some issues...
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
Strange that I tried adding what you had to my site...and it had no effect for somea reason...I see the bar, i hover it has the ? icon...but won't move for some reason...
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
Did you add all the Javascripts and check out the body's onload function, that's what's initialising the whole functionality :) To prevent eronous events firing while the page is still loading and all...
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
ahhh I missed that...now at least something is happining..I am getting object required:

document.getElementById("listFrame").style.height = (this.startHeight + (mouse.y - this.startY)) + "px";

My guess is because of the layout of the page...let me explain:

I have default.aspx...this is default page and has a placeholder in it
I have meetinglist.ascx (like an include file in asp)
I then have the details pane

I think it is not finding it in the default page...how do I fix that javascript?

BTW thanks!
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
The id attribute of the iframes is extremely important, that's the hooks for the javascripts. If you don't have the two iframes named 'listFrame' and 'frameDetails' teh script will throw some errors. I'm trying to get it to work with a bit more leniency.
0
 
LVL 9

Author Comment

by:glsac
Comment Utility
yea..they are names that way....but ot just does not find it for some reason
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now