Solved

scale images depending on browser window size?

Posted on 2011-03-16
10
558 Views
Last Modified: 2012-05-11
Hi, wondering if anyone has any advice for me.

I'm wondering how to get my image menu on the left  to scale larger or smaller depending on the browser window?

Here is my link:
http://marataber.com/jeffery/FStestgalleriascale3.htm

here's my attempt modifying the css:
http://marataber.com/jeffery/FStestgalleriascale-scalemenu.htm

it scales but it looks really messed up!
Want it to look like the first link but just have it scale.

Can anyone see what I am doing wrong? I feel as if I'm on the right track I just don't know where to take it from here.

many thanks in advance for any help!
0
Comment
Question by:spider2222
  • 6
  • 3
10 Comments
 

Author Comment

by:spider2222
ID: 35152958
please anyone? thank you.
0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 250 total points
ID: 35155207

Are you after something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26892059.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$( function() {

  var imageHeight = $("#scale-me").height();
  var imageWidth = $("#scale-me").width();
  var initialHeight = $(window).height();

  $(window).resize(function() {
    var scale = $(window).height() / initialHeight;
    $("#scale-me").css( { height: imageHeight * scale, width: imageWidth * scale } );
  });

});

</script>
<style>
html,body { height: 100%; margin: 0px; text-align:center; } 
#scale-me { height: 66%; width: 66%; } 
</style>
</head>
<body>

<h1>Try resizing the Browser Window</h1>

<img id="scale-me" src="http://filedb.experts-exchange.com/incoming/2011/01_w06/t402937/world-map.jpg" />

</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35156241
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:spider2222
ID: 35156381
Thank you both for responding I really appreciate it. I will check out those links and the posted code!
I had done a search before posting my question but didn't' find what I was looking for I didn't see these posts in the search results.
many thanks yous.
0
 

Author Comment

by:spider2222
ID: 35157271
Hi again,
I tried the above code and while it worked for one of the images it distorts it vertically and makes the words shorter.
And for the other menu items displays it smaller and also distorts it but doesn't scale.
I also lose my image rollovers where the text turns grey in the process.
Hmm..

I look at the links above and tried those solutions for just a single image on a plain ol html doc and they worked as described but in my case it doesn't seem to have the same effect so I'm wondering where I am going wrong?

I'm trying to learn js and css but this is currently stumping me!

my new attempt:

http://marataber.com/jeffery/FStestgalleriascale-scalemenu.htm


How can I scale it proportionally, while keeping my image rollovers?
many thanks for anyones suggestions!

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 35167868
What about flash ? You don't want to use it ?

What is the problem with the code provide by @Proculopsis ?

if you replace :

  var imageHeight = $("#scale-me").height();
  var imageWidth = $("#scale-me").width();

by (use a class instead the ID attribute, ID must be unique) :

  var imageHeight = $(".scale-me:eq(0)").height();
  var imageWidth = $(".scale-me:eq(0)").width();

it should work (here again I assumue you're using the class attribute) :

$(".scale-me").css( { height: imageHeight * scale, width: imageWidth * scale } );

0
 

Author Comment

by:spider2222
ID: 35168754
Hi Leakim971,
Thanks for responding!
Yeah this is for a friend and they don't want to use flash. For this instance though I agree it would make life easier.

I'm sure the above code was fine and I was interpreting it wrong somehow.
Ah I see, use a class, ok that actually worked. Awesome.

However, It behaves a little funky though, it distorts resulting in the text haven't a condensed effect and disables my drop menu in firefox which is another javascript effect.

Is there a way I can avoid the distortion and maintain the proportions of the image so it doesn't go wonky?

If you have time at all can you take a look at my link and tell me if you reproduce that problem?
I am using safari on a mac and also firefox.

It may just be I have too many scripts going at once and I don't have the expertise to troubleshoot why one would cause the other to behave weirdly.

anyway if you have an suggestions I'd be most grateful.
thanks a lot!
Mara

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35169142
>Is there a way I can avoid the distortion and maintain the proportions of the image so it doesn't go wonky?

To maintain aspect ration set only one of the img attribute
$(".scale-me").css( { width: imageWidth * scale } );

Open in new window

0
 

Author Comment

by:spider2222
ID: 35171894
Thank you Leakim that totally worked. awesome.

Only thing now, in firefox it disables my drop down menu item.
I only have one, under "About" if you click on it in safari the submenus drop, in firefox it has no effect.
It used to work, but now since I applied this scaling its become disabled.
Is it because I am calling up too many javascript effects on the page?
1 for my rollovers
1 for the drop down menu
1 for the scaling
and 1 for the gallery slideshow

If you have time and do you have any suggestions for me?
thank you very much!
0
 

Author Closing Comment

by:spider2222
ID: 35171896
Thank you to both, I am so grateful for your help on this.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question