Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 773
  • Last Modified:

Help please...iframes and resize

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
glsac
Asked:
glsac
  • 15
  • 3
  • 3
  • +2
1 Solution
 
glsacAuthor Commented:
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
 
viola123Commented:
           <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
 
glsacAuthor Commented:
Sorry...that does not help me at all :(
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jonnyfbCommented:
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
 
glsacAuthor Commented:
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
 
jonnyfbCommented:
You mean you want a frame with other frames inside?
0
 
jonnyfbCommented:
I do not think you can create a 'drag n drop' interface with javascript.
0
 
glsacAuthor Commented:
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
 
glsacAuthor Commented:
http://www.xulplanet.com/tutorials/xultu/splitter.html

something like that which only works for mozilla...arghhh
0
 
ZvonkoSystems architectCommented:
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
 
glsacAuthor Commented:
Zvonko-

That does not work..tried that already...
0
 
ZvonkoSystems architectCommented:
Why not?
It worked in my test.
0
 
glsacAuthor Commented:
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
 
glsacAuthor Commented:
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
 
mreuringCommented:
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
 
glsacAuthor Commented:
I am gonna take a look now.
0
 
glsacAuthor Commented:
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
 
glsacAuthor Commented:
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
 
glsacAuthor Commented:
"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
 
glsacAuthor Commented:
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
 
mreuringCommented:
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
 
glsacAuthor Commented:
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
 
mreuringCommented:
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
 
glsacAuthor Commented:
yea..they are names that way....but ot just does not find it for some reason
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 15
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now