Results 1 to 7 of 7

Thread: Resolution Detect with graphics work around

  1. #1
    Join Date
    Sep 2005

    Resolution Detect with graphics work around

    I have a client who can't get past the idea that resolutions vary on computers; he sees a sample of his web site on my laptop and can't get past the "blank" space on the right-- I built the samples with a common resolution in mind, basically a static site that visitors will move through fairly quickly, but my laptop was set for a much higher res at the time I brought up the sample--

    Aside from the fact that I changed the res on my laptop and it still didn't appear "right" to him, he now wants the site to be resolution sensitive. (Don't even talk to this guy about the need for "alternate navigation" in case the "slick" javaScript menu fails in someone's browser, he'll have nothing of it).

    But I've got an issue here; the graphic header that he insists on is a set size which is hampering me-- sure I could build duplicate pages for redirection per resolution, but that's insanity!

    I've considered using a frames solution, but this is a business site and I have concerns about direct linking off of search engines as well as other frame issues.

    What the hell do I do on this? I'm familiar enough with PHP to suspect that my solution may lie there. I need some advice or direction on this issue.

    How do I create a liquid site that has a fixed width graphic header on EVERY PAGE without using frames(I can't talk this guy out of this crazy stuff; he just refuses to listen; I'm getting him to sign waiver after waiver and I don't think I'll use this site in a portfolio at all) ?

  2. #2
    Join Date
    Jul 2005

  3. #3
    Join Date
    Sep 2005
    I realize PHP won't detect the resolution and that a JavaScript will need to do that, but once the resolution is detected can a PHP script be used to call the appropriate graphic for the resultion detected?

  4. #4
    Join Date
    Jul 2005
    I think it's a bad idea, but yes you could do that.

    The problem is doing that for the first page that the user visits on the site during any session.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  5. #5
    Join Date
    Apr 2005
    Bathurst, NSW, Australia

  6. #6
    Join Date
    Jan 2005
    San Diego, CA
    CSS cannot detect the user's resolution. JavaScript can with: screen.width and screen.height.

    Resolutions takes some serious pratice learning to deal with. The best page I've ever made so far, that works with all resoltutions, uses % measuements in all my widths and heights through out the page so my content resizes with the screen. % mesausements are based on the browser window size not your resolution. Thus, if you resize your browser window to tinne-tiny, when using % measurements, everything in the page will shrink with it -- even though you haven't changed your screen resoltuion. And vice-versa -- if you expand your browser window, all the % content grows with the page.

    It won't happen if you went one step futher by putting your body content into a DIV/container that has a set width and height in pixels.

    The last step is using JavaScript to detect the user's resolution and resizing the DIV's/container's width and height, in pixels, to the correct resolution. If JavaScript preforms this resize too late into the page load, it looks very unprofessional how the page "grows" before your very eyes. It's best to use a SCRIPT tag and a NOSCRIPT tag to initial the DIV to the correct size on the spot. If the user has JavaScript enabled the contents in the NOSCRIPT tag are overlooked by the browser and JavaScript will then detect the user's resolution and write a DIV with the a height and width in Pixels based on the user's resolution. Usually you just set the DIV to the resolution. If JavaScript is not enabled the SCRIPT tag is overlooked by the browser and the NOSCRIPT tag is used.

    Then, since everything contained within the DIV will be in % measurements, all of the tags/elements will "grow" or "shrink" to the appropiate size.

    In the future, I am thinking about making a JavaScript or Perl program that will accept either an uploaded HTML file or entered content through a textarea and it will change all your PX measurements into % measurements -- based on the browser window size you tell the program along with it. Then you'd have all your sizes in % simple as that. (not to mention MM, PT to PX convertions etc -- which would be done first to get those to % as well)
    Last edited by Ultimater; 09-05-2005 at 09:37 AM.

  7. #7
    Join Date
    Jul 2005
    It's true that CSS can't detect the screen's resolution, however, CSS can be used to make fluid width layouts.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11641 seconds
  • Memory Usage 2,911KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates