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

    Scalable image menu not working with Javascript

    Hi,
    I'm probably doing something daft here, but I haven't been able to figure it out, so after 4hrs trying I'll try and explain...
    I'm trying to build a scalable image based menu for my front page, to direct my clients to various sites depending on their choice, up until now the image size has been fixed, which isn't so great for iPad's, iPhones....you catch my drift. So I've pretty much hacked my site and got the image scalable, but I'm struggling with the hit areas as they don't seem to be able to position themselves properly (left to right) despite lots of attempts to make them behave. I can manually line them up in css, but because it's a dynamically sized image that breaks everything on different size screens, so I'm having to take a crash course in Javascript.

    My test page is currently at http://www.purephotos.co.uk/test-menu/ and hopefully you will be able to see what I'm trying to do. The code that moves the hit areas around should all be visible in the source code view as I'm using Javascript in the page to do the work for me.

    Any help getting everything lined up would be hugely appreciated.

    Thanks in advance

  • #2
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Each image looks to be 166px in width.
    Code:
    #region1{
    left:0;
    }
    #region2{
    left:166;
    }
    ... & so on
    u get it?
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That won't work because the image is scalable so for you it's 166, for me it's 250 which would make the hit areas all wrong on my screen, the 'left' attribute has to be set onLoad so we know how big the image is and therefore how big the hit area needs to be. Hence the JavaScript.
    Thanks for trying!

  • #4
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Last edited by student101; 02-01-2013 at 12:40 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As I said....
    I can manually line them up in css, but because it's a dynamically sized image that breaks everything on different size screens
    So that's a hell of a lot of resolutions to cater for.... try it, resize your browser to any size and refresh, the image changes to match your browser size. It's not like there is a minimum size it can go. The maximum is easy though it's 900px wide and won't go bigger than that. But downsizing...it goes all the way. And I need maximum compatability, I'm not just setting this up for specific devices, it needs to work on any screen of any size! Hence the scalable image.
    Does anyone else have any ideas?
    Last edited by xanderwhite; 02-01-2013 at 09:33 AM.


  •  

    Posting Permissions

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