/    Sign up×
Community /Pin to ProfileBookmark

browser size ==> image sizes

Copy linkTweet thisAlerts:
Jun 10.2004

Hi
I am a newbie to javascript. I am trying to link together two pieces of code so that I can resize my images depending upon browser resolution. I have a feeling this can’t be done.

One piece of code resides right after the BODY tag and accesses the window object to identify the inner window height and width.

The other piece of code recides within the HEAD tag and reduces the images.

I think I am looking for a global parameter that can be viewed by both scripts. Is this possible???

Thnks

Kikilo?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@96turnerriJun 10.2004 — what about in the body

[code=php]
<script type="text/javascript">
if(screen.width == "1024") {
document.write("<img src=foo.gif width=300 height=300 alt=''");
} else {
document.write("<img src=foo.gif width=200 height=300 alt=''");
}
[/code]

if you require more screen resolutions just do some more else if statements
Copy linkTweet thisAlerts:
@KorJun 11.2004 — 
  • 1. If you intend to have a liquid design you better use attributes


    • document.body.clientWidth

    document.body.clientHeight

    as size basis for future calculation

    Thus, if you want to have your object half of client's inner space size

    document.getElementById{'theid').style.height=document.body.clientHeight/2;

    document.getElementById{'theid').style.width=document.body.clientWidth/2;

  • 2. If you want to size an element according to the resolution (unchangeable if window is resizen you may use other attributes


    • screen.availWidth

    screen.availHeight

    Note: you may use those attributes not only for size values but for position of the objects on the page.

    Anyway, the main ideea is to avoid multiple rezolution detect function, as it is intricate and, after all, who knows which resolutions will be available in 2-3-6 years... Using proportional values from document.body or screen sizes is the safest and the better way, I reckon...
    Copy linkTweet thisAlerts:
    @kikiloauthorJun 14.2004 — Hi

    Thanks for the replies - I will try using the byElement call. Is that WC3 compliant?

    kikilo

    ?
    Copy linkTweet thisAlerts:
    @96turnerriJun 14.2004 — its DOM compliant, not W3C
    ×

    Success!

    Help @kikilo spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...