Solved

scale images depending on browser window size?

Posted on 2011-03-16
10
547 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to dynamically set the form action using jQuery.

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now