Solved

scale images depending on browser window size?

Posted on 2011-03-16
10
563 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

730 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