Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Why cant I center it??

    Hope someone can help PLEASE!!.... I have a flash website that I created, and it is centered horizontally and vertically. However when you want to view the website centered in your browser, you have to scroll down a little ways. What I am wondering, is there some code I could add that when you open the website in your browser, that the Browser Scrollbar Automatically scrolls down to the center of the page?? Thank you SO MUCH in advance!!!!!

  • #2
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Well your using Flash. I know that normally you could use anchors. But I don't use flash too much and when I do I don't use it to make websites so I can't really help you.

    Why do you have to center it vertically? Wouldn't it make it so much easier not to?

  • Users who have thanked CodeSpawn for this post:

    socc576453 (05-26-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well the site is done... it doesn't take up a whole browser window, and I have it centered horizontally and vertically in the browser. The problem is vertically, it is a little too long for most normal screen sizes. When you open the site in a normal screen, there is a little information at the bottom that you have to "scroll down" to see, and I am afraid if I cant center the vertical scroll bar, they will miss it.
    I am thinking about when I go to a website "huffingtonpost . com" and click on a story, and than hit the back browser button, it takes me directly to where i was on the webpage, not necessarily back to the top. That is what I want to happen at the start when people come to my website, to automatically start half way down the site.... hope that makes sense!?!?!

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Try this.

    For your body. What this will do is when your page is loaded it will load the JavaScript function botton();
    Code:
    <body onload="bottom();">
    You will need this javascript. Put it your <head>. What it will do is call the anchor. Make sure "index.html" is the page you want to put this on.
    Code:
    <script type="text/javascript">
    function goToAnchor() 
    {
      location.href = "index.html#anchor";
    }
    </script>
    Then place this anchor at the bottom of your page. Now your page will load where the anchor is placed. Try it at the bottom and move it if neccessary.
    Code:
    <a name="anchor"></a>

  • Users who have thanked CodeSpawn for this post:

    socc576453 (05-26-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Damn.... no luck with that... tried it a few different ways. Here is the link to my site if that helps. http://www.columnonedesigns.com I kept your coding on it in case you can check and see if I put it in the wrong spots? When you are viewing the site, and the intro starts, center that on your browser with the scroll bar, and leave it. That is how I want the website to start when people go to it.... if that helps? Thanks!!

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Well first off you said you left the code in there. But I am looking at the source to your site but do not see any code in there. Maybe you forgot to save it?

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Woops! Sorry... I forgot I changed it back and I didn't. Now it is saved, with the code you supplied. Any ideas?

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    ah well that might be partially my fault. Sorry lol

    Over here we call the js function bottom();
    Code:
    <body onload="bottom();">
    Here you can see that there is no function bottom(); to call. I named it gotoAnchor(); by mistake. Change this
    Code:
    <script type="text/javascript">
    function goToAnchor() 
    {
      location.href = "index.html#anchor";
    }
    </script>
    To
    Code:
    <script type="text/javascript">
    function bottom() 
    {
      location.href = "index.html#anchor";
    }
    </script>
    Then it can call the anchor like it was meant to
    Code:
    <a name="anchor"></a>







    I also noticed this.
    Code:
     --></script><body>
    <!-- START OF ACTIVEMETER CODE -->
    <script type="text/javascript" language="javascript">
    var __pid=41781;
    var __am_invisible=1;
    Code:
    </noscript>
    <!-- END OF ACTIVEMETER CODE -->
    <body onload="bottom();">
    <table style="width: 100%;">
    See that? You put in 2 body function. Get rid of the first one. Put all the js funtions in the head. Especially the bottom(); function.

    Your anchor. You can't put it at the bottom. It must go in the <body> tag. place it right before the </body> tag.

    Don't forget to rename index.html to the page you are using it on. If the page is index.html then it should be fine.

    Try it now.
    Last edited by CodeSpawn; 05-25-2009 at 08:12 PM.

  • Users who have thanked CodeSpawn for this post:

    socc576453 (05-26-2009)

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I think I have finally reached the hair pulling stage! Not to mention you must think I am a complete dork. I noticed I had some extra code from previous attempts to center it, so i took that stuff out too. Made all the changes you said... and now the browser scrolls all the way to the bottom!! LOL so it started all the way at the top, and now its all the way at the bottom.... just can't get it center... any other ideas? I hope you know how much I appreciate your help!!!! SERIOUSLY!!

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Yay progress.

    Now that we know it works.

    This is the anchor
    Code:
    <a name="anchor"></a>
    The page moves so that the top of the page is where the anchor was placed. Since we put it at the bottom it moves as far down as it goes. Try moving it around a little. Somewhere higher up so that it moves down just far enough to be in the center.




    While I'm at it I found some more errors in your source I though I might tell you about.

    1) You still have two <body> tags
    Code:
     
    <title>Column One Designs Site</title>
    <body onload="bottom();">
    <!-- START OF ACTIVEMETER CODE -->
    <script type="text/javascript" language="javascript">
    var __pid=41781;
    Code:
    </script>
    <body>
    <table style="width: 100%;">
    The problem is that you have this going on

    <body>
    </head>
    <javascript>
    <body>

    You also have two js ending tags.

    The ordering is completetly messed up.

    Try making it look more like this.
    Code:
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      <title>Column One Designs Site</title>
    <!-- START OF ACTIVEMETER CODE -->
    <script type="text/javascript" language="javascript">
    var __pid=41781;
    var __am_invisible=1;
    </script>
    <script type="text/javascript" language="javascript" src="http://www.activemeter.com/counter.js"></script>
    <noscript>
       <a href="http://www.activemeter.com/" target="_blank">
          <img  src="http://am1.activemeter.com/webtracker/track.html?method=track&pid=41781&java=0" alt="Free Web Counter" border="0">
       </a> 
    </noscript>
    <!-- END OF ACTIVEMETER CODE -->
    <script type="text/javascript">
    function bottom()  
    {
      location.href = "index.html#anchor";
    }
    </script>
    </head>
    <body onload="bottom();">
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td class="bg1">
          <table style="width: 766px; height: 740px;" align="center">
    That should work better.

    As for the anchor try starting out by putting the anchor tag here. Move it before or after a few lines.

    Here
    Code:
              </tr>
                  <a name="anchor"></a>
            </tbody>
          </table>
          </td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
    Or here

    Code:
          <table style="width: 766px; height: 740px;" align="center">
              <a name="anchor"></a>
            <tbody>
              <tr>
                <td width="766"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24" height="740" width="766"> <param name="movie" value="ColumnOneNoContact1.swf"> <param name="quality" value="high"> <param name="menu" value="false">
    <!--[if !IE]> <--> <object data="ColumnOneNoContact1.swf" type="application/x-shockwave-flash" height="740" width="766"> <param name="quality" value="high">
                <param name="menu" value="false"> <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"> FAIL
    (the browser should render some flash content, not this). </object>
    
    <!----><!--[endif]--> </object> </td>
    Just try out a few spots and tell me if it works.

  • Users who have thanked CodeSpawn for this post:

    socc576453 (05-26-2009)

  • #11
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I truly think it just doesn't like me!! So I made all of your suggested changes and if I even move the anchor up just one line, it moves the site almost all the way to the top... it seems like we either get the top, the bottom, or just a slight bit down from the top. I'm thinking that is because there is very little code on the site, since it is mostly flash? Check it out... I left the code on the site with the anchor at this point at the bottom
    Code:
       </tr>
      </tbody>
    <a name="anchor"></a>
    </table>
    </body>
    </html>
    Any other ideas?

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Well then it seems that this method will not work here....

    Lets try a different approach.

    I have tried this and it seems to work but you have to not mind change and you will have to do something different than centering the scrollbar. It is impossible to do that and if the anchor won't work than we must try this.

    You must edit the size of the flash thing. You probably already thought of this and maybe have a reason not to do so. All I am saying is that you have two options.

    1) Create a page with an enter button. When the button is pressed you link directly to the .swf file. I tried that but it doesn't look good. Your flash wasn't made to do that. Try it your self to see why. You can see stuff you shouldn't (off screen stuff).

    2) Resize it. Change it from pixels to 100% height. That way on every computer and browser it will be the same size. Try this and tell me what you think of this solution. Honestly these are your only two options.

  • Users who have thanked CodeSpawn for this post:

    socc576453 (05-26-2009)

  • #13
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Damn... Something told me it would be a quick fix... guess not! I have looked into both options... neither will result in the quality site I want. One thing I was wondering though, after looking at all of your "anchor" stuff, and this might sound REALLY stupid... Since the height of my site is 740px, is there a way to put an anchor at the 370px mark... because that is center?

  • #14
    New Coder
    Join Date
    Feb 2009
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Well. I doubt it. I tried looking it up it everything says that what you want is impossible....

    From what I see those are your only two options. 1 would be my favorite but unfortunetly doesn't work with what you made.

    Why don't you like 2? It seems to be perfect. It fits into the screen without all the problems of the scrollbar.









    Here look. This is all I could find. I found someone trying to do something like what you want to do. I think it's hard to understand.

    Anyway some solutions I found were like this.

    .....

    #topat150 {padding-top: 150px;}

    Then <a href="#topat150"> will jump your anchor to <a id="topat150"> to 150px down the page -- IF you are using Firefox or IE. (Amazing, something actually works in IE!)
    Like I said you can try it. But I tried it and it didn't work for me. (I stole your source and have been testing with it. )

    I also found this.

    Immediately after the banner, add your target anchor. The anchor must be a block element for the margin-top have any effect.

    <div id="banner">...</div>
    <a id="top"></a> <!-- cannot be the child of body use <p>
    and set font size and margins to zero
    in that case -->
    ===============
    #target {
    margin-top: 150px;
    display: block; /*not required if using <p>*/
    }

    If you use <p>, it should not be empty. An empty comment is good enough.<p id="top"><!----></p>

    cheers,

    gary

    That was also accepted as a solution. Try that as well.

    I found that here

    http://csscreator.com/node/32185

    In case you want to look through it yourself.

    Other than that it is impossible. Tell me if those solutions work. If not than I'm afraid resizing is your only option. But tell me why is option 2 bad?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •