Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating(?) Frame/Box 1

Status
Not open for further replies.
NuadaOLyr

NuadaOLyr

Programmer
Sep 5, 2006
3
GB
I am not sure if this is the correct forum - An I offend thee... forgive.

(To anyone who has not glanced at my profile, Iam a retired professional SQL programmer, but an absolute beginner at DHTML/Javascript)

I webmaster a website at:
and I have a need.

Firstly, the above URL directs you to the site under development; normally it runs under index.html(of course). index.html DOES exist, but it blocks people off from the rest of the site for the moment.

Secondly, most of the updated website IS working, but coding is not yet complete, so beware the occasional glitch :-(

Now to my need...

You will see a "tabled" title at the top of every page with the coat of arms of cornwall at the left and the flag on the right. This title scrolls off the page as a user scrolls down. If the title remained the same I could put it in the header frame but of course it is page specific and changes with every menu switch. What I would like to do is float/lock/position this in place and allow the rest of the page to scroll off as normal.

Has anyone any ideas... I am stuck!


Best regards,
Brian Timmins
 
Sort by date Sort by votes
Hi there Brian...

There are lots of ways to do this... but I would suggest trying just plain old CSS to do the trick in the first instance. It's certainly a quick win for modern compliant browsers.

Add this class definition to your stylesheet (or the top of the page in the <style> block):
Code: 
.fixedclass {
	position:fixed;
}
Then apply this class to the element(s) you need to remain fixed (usually just the enclosing element). Eg:
Code: 
<div class="otherclass [COLOR=red]fixedclass[/color]">Your text<img src="...." alt="logo"/></div>
Now... position:fixed is supported by Safari, Firefox and Opera... it's just IE 6 that doesn't support it... but there are ways to "shoe-horn" IE into submission (again using just CSS) - here is a link to how this is done:
One important thing to note is that IE 7 will be supporting this property.

Anyway, hope this gets you started.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Hi Jeff,

My heart leaped, but unfortunately this CSS solution did not work.

I put the .fixedclass snippet in my CSS file and the other code at the top of my body, firstly EXACTLY as you sent it, then tried modifying the table class (which in afterthought is probably stupid). Fiddled around for a while but could not get it to work :-(

Here follows the code at the top of the body...

Code: 
  <body bgcolor="#630606">

	<a href="[URL unfurl="true"]http://www.auditmypc.com/freescan/antispam.html"[/URL] target="_blank"><font size="1" color="#630606">Foil Spam</a>

    <noscript>
      <div class="warning">
        <div class="ctrl">
		    You will not be able to use most of the features of the Cornwall Folk Festival
		    website because JavaScript has been turned off in your browser.<br/>
		    Please search your browser's Help to find out how to turn JavaScript back on.
        </div>
      </div>
    </noscript>

    [COLOR=green]<!--<div class="otherclass fixedclass">-->[/color]

    <table class="otherclass fixedclass" border="2" cellpadding="0" cellspacing="0" width="95%" align="center" summary="Title">
      <tr height="30">
        <td width="90" bgcolor="#B63B3B">
          <img alt="Image" src="/images/graphics/cornwall_cofa.jpg" height="50" width="75" hspace="10" vspace="10" />
        </td>
        <th valign="top" bgcolor="#B63B3B" align="center">
          <br /><br /><br />
            <font face = "arial,helvetica" size = "6" color = "#ffffff">35th CORNWALL FOLK FESTIVAL</font>
        </th>
        <td width="90" bgcolor="#B63B3B">
          <img alt="Image" src="/images/graphics/piran.gif" height="50" width="75" hspace="10" />
        </td>
      </tr>
    <img src="...." alt="logo"/>
    </table>

		[COLOR=green]<!--<img src="...." alt="logo"/></div>-->[/color]


Best regards,
Brian Timmins
 
Upvote 0 Downvote
just a guess here but shouldn't this be ...
Code: 
<div class="fixedclass">
or if there is a class you are using named 'otherclass' should there be a comma between them i.e.
Code: 
<div class="otherclass[b],[/b] fixedclass">

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
lol : ok my bad ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Hi Jeff,

I tried it in Firefox1.5.0.6, Netscape 8.1, IE 6.029, and Opera 9.01.

The result was the same... the part that I wished to remain just scrolled off with the rest of the page.


Best regards,
Brian Timmins
 
Upvote 0 Downvote
My 2cents:

1) Use a Frame. The coat of arms and other title information goes on page1.html, the rest of the text in page2.html. The frame then loads page1.html into one part of the frame and page2.html into the other. Read htmlgoodies.com for more info.

2) Use an IFrame. The IFrame wraps the part I refered to as "the rest of the text" and creates a scrolling region in the center of the page. You can also move "the rest of the text" to a different file. I suspect there's a piece on IFrames at htmlgoodies.com, but I've never read it.

Neither is a JScript solutions, but either should do the trick.

You could probably use JScript to get the screen size and set the size of the IFrame that way. Otherwise you have to have multiple versions of the page with the IFrame on it for each different screen size...

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
168
chikwendu
chikwendu
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
219
Pudsters
Pudsters
Krus1972
  • Locked
  • Question
On-Click Form Input Box Scrolling
Replies
4
Views
149
Krus1972
Krus1972
javierdlm001
  • Locked
  • Question
Rookie question: About JS Frameworks and Libraries, use'em all, or stick to one? 1
Replies
2
Views
124
javierdlm001
javierdlm001
Krus1972
  • Locked
  • Question
Specifying Which Option Tag is Selected Within a Drop-Down Box
Replies
4
Views
165
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top