Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

scale images depending on browser window size?

Posted on 2011-03-16
10
Medium Priority
?
577 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 1000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 1000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

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 describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

604 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