function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rahul SharmaRahul Sharma 

javaScript ScaleImage function not working when showheader is set as false

Hello guys,

 

I'm facing with a weird problem,

I have a simple page to show a image using img tag, and i'm calling scaleImage javascript onload.

example:

<apex:page>
	<img id="imageId" src='http://freeimagesarchive.com/data/media/131/1_images.jpg' onload="javascript&colon;scaleImage(this,70,250);" /> 
</apex:page>

 but when i disable the header of the page using:

<apex:page showheader="false">
	<img id="imageId" src='http://freeimagesarchive.com/data/media/131/1_images.jpg' onload="javascript&colon;scaleImage(this,70,250);" /> 
</apex:page>

javascript&colon;scaleImage(this,70,250);

 Then its throwing error as : scaleImage is not defined

Please let me know if there's any workaround for this, i want to disable the page header and also use the ScaleImage function.

 

Thanks in advance!

Best Answer chosen by Admin (Salesforce Developers) 
Rahul SharmaRahul Sharma

Thanks guys for your help.

Got it solved, Actually scaleImage was salesforce function present in salesforce standard page.

This function is used to scale the image which we put as Logo in header section.

So thats why i was displaying error while using it when shoheader=false.

Cheers.

All Answers

J&A_DevJ&A_Dev

Hi,

 

I would suggest to turn on the Javascript console to see if there are any errors on your script first.

 

Also, where in your VF page do you declare your scaleImage() function? Make sure that you do so after your <img> tag (ideally, right before the </apex:page> tag).

 

Hope this helps.
Rahul SharmaRahul Sharma

Hello J&A_Dev,

I'm using firebug and also javascript console.

In both i am getting error which highlighted in red colours.

When i dont use showheader="false" attribute everything work fine also image scales as required.

FYI : scaleImage is inbuilt javascript function.

But when i use showheader="false", it doesn't recognizes scaleImage function.

I can hide the header of standard page using css page, but i still the look and feel of page is same as with showheader="false".

Actual syntax is : javascript colon scaleImage(); // colon in editor is replaced by &colon;

Is there any relation in between the function and standard salesforce header?

Anyways thanks.
J&A_DevJ&A_Dev

I think what is happening is that when you don't load the headers, your <img> tag is loading BEFORE your script. In that case, try to structure your page like:

 

<apex:page showHeader="false">
    <script>
        function resizeImage(imgW, imgH)
        {
            var imageObj = document.getElementById('imageId');
            imageObj.style.width = imgW;
            imageObj.style.height = imgH;
        }
    </script>
    <img id="imageId" src='{!$Resource.hilliana}' onload="resizeImage('400px', 'auto');" />
</apex:page>

Another option is to create a static resource for your JS script and then add an <apex:includeScript> tag:

 

<apex:page showHeader="false">
  <img id="imageId" src='{!$Resource.hilliana}' onload="resizeImage('400px', 'auto');" />
  <apex:includeScript id="jsScript" value="{!$Resource.testScript}"/>
</apex:page>

 Either one should work. Hope this helps.

 
Rahul SharmaRahul Sharma

hey, J&A_Dev,

your first soution is working but image size is not same as we get using scaleImage function.

is there any chance/method to replicate same behaviour.

Pardon me but still i'm not able to understand the issue exactly:

J&A_Dev wrote:

I think what is happening is that when you don't load the headers, your <img> tag is loading BEFORE your script. In that case 

 
J&A_DevJ&A_Dev

Can you post your VF page and the JS script? I'll take a peek at it then.
Rahul SharmaRahul Sharma

I uploaded the image with name hilliana and pasted your code:

apex:page showHeader="false">
    <script>
        function resizeImage(imgW, imgH)
        {
            var imageObj = document.getElementById('imageId');
            imageObj.style.width = imgW;
            imageObj.style.height = imgH;
        }
    </script>
    <img id="imageId" src='{!$Resource.hilliana}' onload="resizeImage('400px', 'auto');" />
</apex:page>

 
J&A_DevJ&A_Dev

And what does your scaleImage() function look like? You should be able to resize the image by modifying my resizeImage() function.
Rahul SharmaRahul Sharma

its a standard javascript function which scales the image without distorting the image, thats what i believe, not sure.
J&A_DevJ&A_Dev

Well, unless I see what your scaleImage() function looks like, I wouldn't know why the behavior is different. So, are you saying that if you call resizeImage like:

<img id="imageId" src="{!$Resource.hilliana}" onload="resizeImage('70px', '250px');" />

 you don't get the same effect as calling your function?

 

 
Rahul SharmaRahul Sharma

yes exactly, the size of image using both function doesn't match.

even tried your latest code.

Still wondering if we can replicate the function anyhow.

Thanks for your time!
J&A_DevJ&A_Dev

Well, as far as I know, there is no scaleImage() function that is standard. Are you sure you are not using a function from a JS lib (like jQuery)? If so, make sure to include that lib as well. But if you're not using any JS lib, then you have to first create the scaleImage() function (which is why you're getting the function undefined error).
Rahul SharmaRahul Sharma

Ok, thanks.

will check it and get back.
Rahul SharmaRahul Sharma

Thanks guys for your help.

Got it solved, Actually scaleImage was salesforce function present in salesforce standard page.

This function is used to scale the image which we put as Logo in header section.

So thats why i was displaying error while using it when shoheader=false.

Cheers.

This was selected as the best answer