File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Control Image Size

 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What is the <html> tag doing there?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:What is the <html> tag doing there?


This is a jsp file.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So?
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Did you fix the CSS selector?
 
Rob Crowther
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please repost an SSCCE with the corrected code. It still seems as if your CSS is not being applied.
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
As I suspected if I put a settimeout for a half second before load it works perfectly.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why are you setting src to the empty string?
 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 297
5
Android Fedora Firefox Browser
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic