CODEWITHSUNDEEP
htmlframeset
Gordon Thompson
Gordon Thompson

Reputation: 4834

HTML Frameset alignment

Say I have 3 frames in a frameset arranged in 3 rows. Frames 1 and 3 are from my site and frame 2 (the central one) is from an external website. Is there a cunning way to force the browser to centre align the data in frame 2?

I've found a small work-around which uses a frameset within a frameset which has 2 blank columns either side of the data but that means the scrollbars from frames 2 and 3 are out of alignment.

Any ideas?

Edit : The code I have currently is : 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server" />
<frameset rows="10%,65%,25%" border=0 frameborder="no">
    <frame name="nav" noresize scrolling="no" src='NavigationBar.aspx?NAVIGATION=<%=sDisplayNavigation %>'>
    <frameset cols="1*,1010px,1*">
        <frame name="lspace" scrolling="no" src="border.htm">
        <frame name= "main" scrolling="auto" src='<%=sMainTextURL%>#highlight'>
        <frame name="rspace" scrolling="no" src="border.htm">
    </frameset>
    <frame name="suggest" scrolling="yes" noresize src='<%=sSuggestURL%>'>
</frameset>
</html>

Upvotes: 1

Views: 4819

Answers (2)

Christopher M
Christopher M

Reputation: 11

If you use an absolute value rather than a percentile to define the size of a frame in conjunction with other frames using percentiles the frame with an absolute value will not resize with the browser window and the other frames/divs will.

<frameset rows="10%,65,25%" border=0 frameborder="no">

OR

<frameset rows="10%,65px,25%" border=0 frameborder="no">

The first line will use the default unit of measurement and the second line will use units of "pixels".

I have a code bit which I have solved this problem with:

<frameset rows="36px,80%,36px" frameborder=1 border=3>  
    <frame src="frame1.html" target="frame2.html" noresize>

    <frame name=frame2 src="index.html"> 
        
    <frame src="frame3.html" target="frame2.html" noresize>  
</frameset>

Frame 1 loads data from "frame1.html" and is used for a navigation menu at the top of the screen. Frame 1's unit of measurement is an absolute value of pixels and there for does not resize when the browser window or screen type does and the other frames will. (so far)

Frame 2 is the center "content" part of the page and does not load any data itself. Frame 2 gets its data inherently using the target="frame2.html" tags found on the link for the menus in frame 1 and 3.

for example:

<a  title="To Homepage" href="index.html" target="frame2" >Homepage</a>&nbsp;

this line when loaded from Frame1.html will reload the home page into frame2.

also this is a standard web site layout with the menu frame on the left side and applies the prelisted methods.

<frameset cols="140px,100%" frameborder=1 border=1>  
    <frame src="frame1.html" target="frame2.html" noresize>
    <frame name=frame2 src="index.html">    
</frameset>

C-ya

Upvotes: 1

Mnebuerquo
Mnebuerquo

Reputation: 5949

I think what you are looking for is a way to inject some CSS into the other frame, even though it comes from another site.

I think this will not be possible without a server side script to request the page and modify it.

Javascript has ways to modify other frames using window.frames[] and using DOM traversal just like for elements in the local frame. This will be problematic for you because of the "same-origin policy". This basically means that javascript in a frame loaded from example.com can not access the DOM in a frame loaded from foo.com. Even if you have similar domains, foo.example.com and bar.example.com, they are treated as separate domains in the browser so your javascript from one is not allowed to access the other.

This affects ajax calls using XMLHttpRequest as well. There are ways of reducing the impact of this, but I think you need to be able to run javascript on both sides of the line.

I recently tried something similar to what you are doing, where I wanted to embed one site in another, but the same-origin policy made it impractical.

The other way to do this is server-side instead of client-side. Create a php script which requests content from the other server on behalf of the client, and then serves it as if it was on your server all along. Then your javascript, now on the same server, can do what it will with that frame. If the other site uses a lot of cookies or ajax, this could be tricky, but your php won't have a same-origin policy to deal with.

Upvotes: 2

Related Questions