Apex Code Development You need to sign in to do that
Don't have an account?
MATTYBME Dynamically changing an image size depending on PC screen resolution?
I have uploaded an image (image to fill the top bar of a Customer Portal page) into SF Documents, which has obviously a height and width. I have another SF Document that is a simple HTML <img src> tag referencing the image. I have placed this HTML into the Header of a Customer Portal setup.
What I am getting is depending on the screen resolution that image either fills the top bar of the Customer Portal page just fine or is two small (Image width is cut off) or is too long (browser window then requires horizontal scrolling to view the entire image). Is there a way to make sure this image dynaically resizes based on the screen resolution?
Any help would be most appreciated.
Intially I thought that this was a browser issue between SF Standard Pages and VF Pages, which there still is, http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=14629#M14629
I haven't myself seen any built in Sales Force functionality to do this.
I know through java script you can find current screen resolution, window/portal size etc. This http://www.csbsupport.com/faq/id220.htm might not answer all of your questions but should get you started.
Generally though issues like your header one are dealt with by having an image that is say 600 width and then using a background color on a table or something to fill in the rest of the width.
Stretching or shrinking the image will make it look bad anyway.
Sorry those were the only ideas I had.
Ok so outside of Salesfoce the image changes size based on screen resolution using the JavaScript. Works great!
But inside Salesforce when I now log into the Portal I just see the top image and no portal. I know it must be because of the location.href. How do I need to change this to point to the image? My HTML doc below sits inside the Customer Portal Header on setup.
<script> <!-- if (screen.width<=640) location.href="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000s8xP&oid=00D3000000000yM&lastMod=1247154721000"; else if (screen.width<=800) location.href="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000s8xK&oid=00D3000000000yM&lastMod=1247154664000"; else if (screen.width<=1024) location.href="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000s8xF&oid=00D3000000000yM&lastMod=1247154592000"; else if (screen.width<=1280) location.href="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000rogZ&oid=00D3000000000yM&lastMod=1247154505000"; else location.href="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000rnGN&oid=00D3000000000yM&lastMod=1247154430000"; //--> </script>
Err I don't think you are using location.href correctly.
My understanding is that is for reading or setting the current page location.
http://www.w3schools.com/htmldom/prop_loc_href.asp
Doing that with the value you have in your code would be causing the page to redirect (fairly sure) to the value you have set.
Which since this appears to be the header image would explain why it's taking you to the page.
What I would imagine you would have to do is that in your java script instead of setting the location you would want to set the src value of the header image.
It doesn't appear that that the header image has an Id (least not in our site) so not sure how you would do this.
All of this thougth is probably wandering into the land of things not to do.