?
Solved

scale images depending on browser window size?

Posted on 2011-03-16
10
Medium Priority
?
572 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

770 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