?
Solved

Help please...iframes and resize

Posted on 2004-08-04
25
Medium Priority
?
768 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 3
  • 3
  • +2
25 Comments
 
LVL 9

Author Comment

by:glsac
ID: 11723134
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
ID: 11723254
           <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
ID: 11724106
Sorry...that does not help me at all :(
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 1

Expert Comment

by:jonnyfb
ID: 11724259
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
ID: 11724273
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
ID: 11724282
You mean you want a frame with other frames inside?
0
 
LVL 1

Expert Comment

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

Author Comment

by:glsac
ID: 11724357
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
ID: 11724361
http://www.xulplanet.com/tutorials/xultu/splitter.html

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

Expert Comment

by:Zvonko
ID: 11724856
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
ID: 11725337
Zvonko-

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

Expert Comment

by:Zvonko
ID: 11725348
Why not?
It worked in my test.
0
 
LVL 9

Author Comment

by:glsac
ID: 11725475
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
ID: 11725506
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 1500 total points
ID: 11725654
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
ID: 11725706
I am gonna take a look now.
0
 
LVL 9

Author Comment

by:glsac
ID: 11725739
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
ID: 11725778
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
ID: 11725866
"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
ID: 11726034
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
ID: 11726372
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
ID: 11726500
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
ID: 11726662
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
ID: 11726675
yea..they are names that way....but ot just does not find it for some reason
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

762 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