File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Control Image Size Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Control Image Size" Watch "Control Image Size" New topic
Author

Control Image Size

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
I need help with controling image size. I am using IE8

my jsp form has a div tag. I use jquery.load to load the div tag with a form that has my image code.

parent form code:


css code:


image form code:

css code for image:


The image stays the same size, larger than div tag dims.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

What is the <html> tag doing there?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Also, applying CSS to the div will not affect the image inside the div. Apply the CSS to the image, not the div.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:What is the <html> tag doing there?


This is a jsp file.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

So?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:Also, applying CSS to the div will not affect the image inside the div. Apply the CSS to the image, not the div.


In the last code snipit I amm applying css to the image I thought.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:So?


This is where I fall very short on knowledge of all this. I was under the impression that a 'web page' needed html tags.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

No. An HTML page needs HTML tags. What comes out of a JSP is any text you want (including an HTML page, or in this case, an HTML fragment). JSP could care less what's in the template text. It could be HTML, it could be Swahili, it could be Klingon, or it could be gibberish entered by your pet iguana. JSP does not care.

So all you are doing with those extraneous <html> tags, that you are shoving into a div, is creating invalid HTML.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:No. An HTML page needs HTML tags. What comes out of a JSP is any text you want (including an HTML page, or in this case, an HTML fragment). JSP could care less what's in the template text. It could be HTML, it could be Swahili, it could be Klingon, or it could be gibberish entered by your pet iguana. JSP does not care.

So all you are doing with those extraneous <html> tags, that you are shoving into a div, is creating invalid HTML.


Thanks for the lesson. Any more you can share about the image not scaling?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Did you fix the CSS selector?
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 297
    
    5

Class and ID Selectors


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:Did you fix the CSS selector?


If you mean did I change the css code to #ifsimagefileDisplay instead of img.ifsimagefileDisplay so it would be consistent with the img tag that has id="", I have but still it is not scaling.

What is confusing is that if I put the width and height attributes directly in the img tag it works fine.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Please repost an SSCCE with the corrected code. It still seems as if your CSS is not being applied.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:Please repost an SSCCE with the corrected code. It still seems as if your CSS is not being applied.


I got this to work. I took out the max-width:

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Steve Dyke wrote:
Bear Bibeault wrote:Please repost an SSCCE with the corrected code. It still seems as if your CSS is not being applied.


I got this to work. I took out the max-width:



This is not working as expected.

I upload an image(larger than container), load the div tag with the image and all is fine, the image is scaled down to fit. However, if I descide to upload another image that is larger than container(replace the current one - only one image per container), do a load on the div tag, the div tag grows horozontally. If I upload am image that is smaller than the container, load the div tag the horozontal shrinks back to normal.

I hope this makes sense to some one.

One more strange behavior is the div will not reload is the image is larger than the container but will ig image is smaller than container.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Sounds like what you are replacing the original fragment with does not match the selector. I still don't even know what the selector is being applied to since you refuse to follow my suggestion for an SSCCE.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:Sounds like what you are replacing the original fragment with does not match the selector. I still don't even know what the selector is being applied to since you refuse to follow my suggestion for an SSCCE.


I am not refusing to follow your suggestion it is just this part of the application is complicated. I can show the peices but I am not sure how to get them to work by them selves out side of the app.

I know you might not be happy with what I am sending but it is all I know to do.

The parent form is broken up into many div tags.

The image div tag gets loaded with this code:


Quad3 Form:


Javascript for refresh function:


Image Display Servlet:



Image Form


CSS code:

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

It sounds to me like you are making this way more complicated than it needs to be. Why the reload at all? If you just want to swap out the image, why not simply change the src attribute?

And why all the complicated CSS on the div that contains the image rather than applying it to the image tag?

And yeah, that's way too much code to wade through, and full of server-side markup which isn't all that useful. Surely you can come up with an example that just contains the portions that shows the image that you want to update? At worse case, show the relevant CSS, and the DOM fragment that's affected before and after the load.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:It sounds to me like you are making this way more complicated than it needs to be. Why the reload at all? If you just want to swap out the image, why not simply change the src attribute?

And why all the complicated CSS on the div that contains the image rather than applying it to the image tag?

And yeah, that's way too much code to wade through, and full of server-side markup which isn't all that useful. Surely you can come up with an example that just contains the portions that shows the image that you want to update? At worse case, show the relevant CSS, and the DOM fragment that's affected before and after the load.


I will see what I can do but I am pretty sure the div container is being resized to fit the image size then the image is being scaled down per the CSS.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:It sounds to me like you are making this way more complicated than it needs to be. Why the reload at all? If you just want to swap out the image, why not simply change the src attribute?



Just changing the src is not enough is it? Wont the page have to be reloaded to have any affect?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Steve Dyke wrote:Wont the page have to be reloaded to have any affect?


Of course not. Why would I suggest that if it would not work? If you change the value of src, the image will update to reflect the new image.

Steve Dyke wrote:I will see what I can do but I am pretty sure the div container is being resized to fit the image size then the image is being scaled down per the CSS.

Again, why? If your intent is to resize the image, resize the image.

You are making this all much more complicated than it needs to be.

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Okay, I have rearranged the div tags and got it to work without changing the container width. But still one other problem. If I load the image tag with an image larger than the container works perfectly. However, If I try to change the image with another image that is larger than the container the display still shows the initial image. But if I load an image smaller than the container the displayed image changes accordingly.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
I have done further testing and discovered that if I set the src of the image to empty string(''), a separate function, before I refresh the image it changes and displays fine. However, if I put the empty string inline with the refresh code it still does not work. So it must be a form loading or timing issue.

Example that works:



Does Not Work:

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
As I suspected if I put a settimeout for a half second before load it works perfectly.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Why are you setting src to the empty string?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1490
    
    1
Bear Bibeault wrote:Why are you setting src to the empty string?



That was just one of the things I tried in my attempt to get to the solution. It is nolonger necessary if I just delay the refresh a split second.

Thanks for all your help. Just remember Bear not all of us are as proficient in this as you are. That is why I need your help so much.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Using a delay is a sign that something is still not right. Again, if all you want to do is replace the image, you should be able to just swap out the src attribute and get the desired effect.

So what am I missing? What else are you trying to do other than swap out the image?
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 297
    
    5

Instead of having a timeout, you probably just want to listen to the load event on the image element after you change the src. Though given how massively complicated you've made this apparently simple task, it might not be as easy as all that.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Control Image Size