We help IT Professionals succeed at work.

stationary page

zachvaldez
zachvaldez asked
on
How do you setup a page so that the header or title of page is freeze.The details of the page dynamically change but title freezed on its licTion
Comment
Watch Question

QPR

Commented:
Partial refresh of a page? = AJAX

Simplest way might be to use jquery to replace the contents of a div dynamically
http://docs.jquery.com/Tutorials

Maybe you are asking for ASP.NET master pages and the way of defining a layout with them.

Check this article:

http://www.asp.net/web-forms/tutorials/master-pages/creating-a-site-wide-layout-using-master-pages-cs

Author

Commented:
I crested a new masterpage and copied my aspx page into it.I had more problems getting errors inserting the existing pages to it.btw,the link does not open.
Now,however,the header in the masterpage that is in the aspx page doesn't stay stationary or fixed position. It isn't display when I navigate down aspx page.

Author

Commented:
Question,if I want a header displayed in evry page,the text should be coded in the header of masterpage right? and nor in the body section? I'm confused. Thnks
Ok, so what you want is to have the header fixed on top of the screen and that the scroll over the content will scroll only the content, maintaining your header on top of the screen.

To do this you can assign fixed positions and widths to your header container and to your content container on your master page, then assign a CSS style to your content container of overflow: auto, this will generate a scrollbar for this container when it's content is greater than the space it has reserved.

Author

Commented:
Here is site1.master- How can I center 'Merry Christmas' in the page?

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
     <link rel="Stylesheet" href="~/hdStylesheet.css" type="text/css"/>
    <asp:ContentPlaceHolder ID="head" runat="server">
   
 
 
   <h2>Merry Christmas</h2>


    </asp:ContentPlaceHolder>
   
   
</head>

<body>
    <form id="form1" runat="server">
    <div align="center">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
     
         </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>
Use this CSS styles:

<div id="merry">
  <h2>Merry Christmas</h2>
</div>
<div id="otherContent">
  <!-- Place here the rest of the content -->
</div>

#merry{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100px;
  text-align:center;
}

#otherContent {
  position:absolute;
  top:100px;
  left:0px;
  width:100%;
  height: //put here your content desired height on screen
  overflow:auto;
}

Author

Commented:
to where should I add the css for this? In the external link  css or in the master page?

Author

Commented:
IN the structure, there is a <head> and <body>.
What should I add on the body and how?
The html code, as it's always, should be inside the body. The css styles can be added on the stylesheet you use for your page or inside the page in a style tag, although I recommend to insert it inside the css.

Author

Commented:
I added it to the css link and it worked!thanks.
I have bunch of JavaScript in the page,can I add it to the masteroage instead and it would still work?
Yes, you can, however it's important to load javascript and css code only when it's needed. This way you'll reduce your page' s loading time.

Author

Commented:
How is that done / where will I store the ha script
I already have an external link for css. Can I create a link to a file to refernce to like the css script library?
javascript code can be stored on .js files and loaded on demand for a determinated page using a <script> tag on the <head> of that page:

<script src="pathToYourJsFile.js" type="text/javascript"></script>

On .NET masterpages layout usually a content space is reserved on the <head></head> of the master page and both, css and javascript files are loaded into that content space in each page depending on what is needed.

Of course, when a css file or a javascript library is going to be loaded in each page of your project you can load it directly on your master page.