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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Keeping something in place with x,y coordinates regardless of screen size

    Hi. I'm using HV Menu v5.5, a JavaScript vertical menu, in a website I'm redesigning. The website is 960 pixels wide, and I have it set so that it will always centered, regardless of screen size. The location of the menu is based on fixed x,y coordinates. It looks fine in the screen size I work in, but as suspected, the menu is too far to the left in larger screen sizes. Is there a way using JavaScript that I can keep the menu in the same place regardless the screen size or whether or not the browser is maximized?
    Thanks,
    Bruce

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    wouldn't it be better to center it using css?

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need below the upper right of the header, which is 960 pixels wide and centered.
    Bruce

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Right. Wouldn't it be better to center it using css?

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    take the position x y and make it into a % of the total screen width and Hieght
    using window.innerWidth, window.innerHeight
    should of used % instead of Absolute good luck fixing
    Code:
        // where x and y are the value of the Objs placing
          xpercent = (x/window.innerWidth)*100;
          ypercent = (y/window.innerWidth)*100;
          obj.style.left = xpercent+'%';
          obj.style.top = ypercent+'%';
    You will most likely have to apply % to all tags
    you could Run this and get it to show the values then you can apply the %'s to your css File
    Im only a Newb JavaScripter but Hope that helps.
    Last edited by BlakeE; 05-24-2012 at 09:57 AM.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    It would be better to centre it using CSS.

    Now that IE6 is dead there's no reason for using JavaScript just to put something in a fixed position on the screen since the CSS position:fixed can do it for everyone with CSS enabled (which is a much higher percentage of your visitors than have JavaScript enabled).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Centering won't work, as I've never seen a vertical menu centered in a page.

    Fixing it in the upper left of a specific div using css would be great. I thought I was pretty good with css and JavaScript, but I'm not to sure how to override the JavaScript code that tells where to place the menu.

    Bruce

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by bhomis View Post
    Centering won't work, as I've never seen a vertical menu centered in a page.
    wha? never mind. I see in the documentation these options:
    Code:
    var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
    var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
    no joy there?

  • #9
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, that doesn't do the trick. That aligns it to the overall left, center, or right of the page. StartLeft adjusts its position from there using the x coordinate. Being that the page is 960px wide, to me at least, it seem obvious to center it, and offset it -480. Unfortunately, it's not that precise, and there are some differences with screen size and browser size changes. Also, if the user maximizes the browser from whatever size it may originally be, the menu position doesn't adjust to the change.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems to me like the menu gets appended to the document.body at this line:
    Code:
    Location.document.body.appendChild(MmbrCntnr)
    so if you wanted to append it to something else that would be the place to do it.

    And then of course you will want to change accordingly all that code in there that is written to accommodate Netscape 4 users

  • #11
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't know how to do that and feeling stupid.


  •  

    Posting Permissions

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