Jump to content

Flowing frame


Guest FirefoxRocks
 Share

Recommended Posts

Guest FirefoxRocks

I want to know how to make a flowing frame to show content. What I mean by frame is that it is a box with HTML content in it, not separate pages.An example can be found at --- Note: Please use Internet Explorer to look at this page!!! ---http://runonce.msn.com/runonce2.aspxClick on Choose settings and you will see that the arrows advanced through the bottom frame in a swift way that is visually pleasing.The code is written for IE, I want to know if it is possible to make this compatible with all browsers.

Link to comment
Share on other sites

I just want to say that I find it amusing that the MSN page looks better in Firefox then it does in IE6.There's not really anything on that page that is IE-only in terms of what you're talking about. There is a series of divs in the HTML code that the arrow buttons toggle the visibility of. The divs are all positioned in the same location and pressing the next button just makes one turn off and another one turn on. There's actually not that much that's very complex about that, check the source code. The "Choose Your Settings" "button" is a div that looks like this:

<div tabindex="6" accesskey="Y" onkeypress="java script:choosebuttonenter()" onfocusin="java script:choosebuttonover()"				onfocusout="java script:choosebuttonout()" id="choosebutton" class="button" onmouseout="java script:choosebuttonout()"				onclick="java script:callSettings()" onmouseover="java script:choosebuttonover()"				title='Choose your settings'>				Choose your settings			</div>

So clicking on it runs the callSettings function, which is just this:

function callSettings(){	document.getElementById("allContent").style.display ="none";	document.getElementById("settings").style.display ="block";	if (!RunOnceFlag )	{		dcsMultiTrack('DCS.dcsuri','/firstrun/page2','WT.ti','First Run: Page 2');	}	else	{		dcsMultiTrack('DCS.dcsuri','/secondrun/page2','WT.ti','Second Run: Page 2');	}}

The first 2 lines are the only important parts for your purposes, it's just turning one layer off and another one on. The layers are just sitting in the HTML code, here is the one for the cleartype settings:

					<!-- cleartype -->					<div class="setting" id="cleartypeSetting" style="display: none;">						<div id="leftarrow1" class="leftarrowdvcls" style="display: inline-block">							<img tabindex="0" accesskey="," onkeypress="java script:leftarrowenter()" onfocusin="java script:rightarrowhover()"								onfocusout="java script:rightarrowhout()" class="leftarrowcls" src="images/left_arrow.png"								onclick="java script:navClearprevious();" onmouseover="java script:rightarrowhover();"								onmouseout="java script:rightarrowhout();" id="leftarrowimg1" />						</div>						<div id="cleartypeIcon">							<img alt='ClearType icon' src="images/a_icon.png"								border="0" /></div>						<div id="cleartypecontent">							<div class="settingsContentHeader">								ClearType								<span class="settingsContentHeader1of2">									®								</span><span class="settingsContentHeader2of2">									makes Web text easier to read.								</span>							</div>							<div class="cleartypetextDiv">									Use the <a href="http://go.microsoft.com/fwlink/?LinkId=75312" target="_new">	ClearType tuner</a> to maximize text visibility on your monitor.  							</div>							<div class="Chkcleartypetext">								<input id="chkCleartype" type="checkbox" onclick="ShowClearTypeWarning()" checked="checked" />								<label for="chkCleartype">									Activate ClearType.								</label>							</div>							<div id="clearTypeWarning" style="visibility: hidden">								Click "Save your settings" below and restart Internet Explorer for this setting to take effect.							</div>						</div>						<div id="Div4" class="rightarrowdvcls" style="display: inline-block">							<img tabindex="0" accesskey="." onkeypress="java script:rightcleararrowenter();" onfocusin="java script:rightarrowhover();"								onfocusout="java script:rightarrowhout()" id="rightarrow2" class="rightarrowcls"								src="images/right_arrow.png" onclick="java script:navClear();" onmouseover="java script:rightarrowhover();"								onmouseout="java script:rightarrowhout();" />						</div>					</div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...