#Visualforce10 discussing

Example

<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>
The example above renders the following HTML:
<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>
Resource Example
<apex:image id="theImage" value="{!$Resource.myResourceImage}" width="200" height="200"/>
The example above renders the following HTML:
<img id="theImage" src="<generatedId>/myResourceImage" width="200" height="200"/>
Zip Resource Example
<apex:image url="{!URLFOR($Resource.TestZip, 'images/Bluehills.jpg')}" width="50" height="50" />
The example above renders the following HTML:
<id="theImage" src="[generatedId]/images/Bluehills.jpg" width="50" height="50"/>

Hi Pete,

Here are a few recommendations that might help resolve this issue:

1. Check URL Encoding: Ensure that the URL parameters are correctly encoded. Sometimes, special characters in URLs can cause unexpected behavior.
2. Verify X-Frame-Options: Ensure that the external site allows being displayed in an iframe. Some websites set the X-Frame-Options HTTP header to prevent being embedded in iframes. You can check this by inspecting the network requests in your browser's developer tools.
3. Use Apex:iframe: If you're not already using it, consider using the apex:iframe component instead of a standard iframe. This component is designed for embedding external content in Visualforce pages and might handle URL parameters better1.
4. Update Visualforce Page: Ensure that your Visualforce page is correctly configured to handle URL parameters. You might need to adjust the URL handling logic in your Visualforce page to ensure it correctly parses and redirects to the desired product page.
5. Test in Different Browsers: Sometimes, browser-specific behaviors can cause issues with iframes. Test the behavior in different browsers to see if the issue persists.

Hello, 

To stop the footer from repeating, you should

This works because the -fs-table-paginate property specifically forces <thead> and <tfoot> elements (which facets generate) to repeat on every page break; moving the data outside the table context ensures it only renders once at the very end of your data list.

To move your Visualforce (VF) page callouts to an **asynchronous** model, you must use **`@future(callout=true)`** Apex methods, as direct callouts from synchronous controller actions (like those choice advantage linked to `apex:actionFunction`) are forbidden. The overall architecture requires four steps: 1) The VF page's `apex:actionFunction` calls a new synchronous controller method (`DocumentCallDefaultAsync`). 2) This synchronous method immediately calls a separate static **`@future` method** (in a service class) to execute the actual external web service callout and stores the result (e.g., the JSON string) in a database record (like a custom status object). 3) The VF page uses an **`apex:actionPoller`** to periodically call a second synchronous controller method (`checkCalloutStatus`). 4) This status check method reads the database record; once it confirms the JSON result is present and the status is 'COMPLETE', the poller stops and the client-side JavaScript (e.g., `Tree1()`) renders the tree using the retrieved data.

Hello @Stephen A Amison @ E-ZPassFL

, 

You can add text-to-speech to your Visualforce page using the Web Speech API. Just include a JavaScript snippet that uses `speechSynthesis.speak()` to read content aloud. Ensure your markup is accessible and compliant with WCAG/508 standards for best results. 

Best Regards, 

Leah Santos 

Hello, 

This VF page structure incorporates all requirements: data table, checkbox, reset button, count display, and pagination controls. 

HTML 

<apex:page standardController="User" extensions="dataTableCon" sidebar="false"> 

    <apex:form > 

        <apex:pageMessages />  

        <apex:commandButton action="{!resetPasswords}" value="Reset Password" styleClass="btn btn-primary mb-3"/> 

        <div id="selectedCountDiv" style="font-weight: bold; margin-bottom: 10px;"> 

            {!selectedUserCount} item(s) selected | Showing:  

            {!((pageNumber - 1) * pageSize) + 1}-{!MIN(pageNumber * pageSize, totalUserCount)} of {!totalUserCount} items 

        </div> 

        <apex:pageBlock > 

            <apex:pageBlockTable value="{!wrappedUsers}" var="wUser" id="userTable"> 

                <apex:column headerValue="Select"> 

                    <apex:inputCheckbox value="{!wUser.isSelected}"> 

                        <apex:actionSupport event="onclick" reRender="selectedCountDiv"/>  

                    </apex:inputCheckbox> 

                </apex:column> 

                <apex:column headerValue="Name" value="{!

wUser.userRecord.Name

}"/> 

                <apex:column headerValue="Username" value="{!wUser.userRecord.Username}"/> 

                <apex:column headerValue="Email" value="{!wUser.userRecord.Email}"/> 

                <apex:column headerValue="Is Active" value="{!wUser.userRecord.IsActive}"/> 

            </apex:pageBlockTable> 

            <div style="text-align: center; padding-top: 10px;"> 

                <apex:commandButton action="{!previousPage}" value="Previous" rendered="{!hasPrevious}" reRender="userTable, selectedCountDiv" style="margin-right: 5px;"/> 

                Page: {!pageNumber} 

                <apex:commandButton action="{!nextPage}" value="Next" rendered="{!hasNext}" reRender="userTable, selectedCountDiv" style="margin-left: 5px;"/> 

            </div> 

        </apex:pageBlock> 

    </apex:form> 

</apex:page> 

Hello @Salesforce Newbee E-ZPass Illinois

, 

To show a spinner until your Apex class loads data, use <apex:actionStatus> with <apex:page>'s action attribute. Wrap your content in <apex:outputPanel> and bind it to the action status. Example:

<apex:actionStatus id="loadStatus">
  <facet name="start">
    <img src="/img/loading.gif" alt="Loading..." />
  </facet>
</apex:actionStatus>
<apex:outputPanel id="content" layout="block" rendered="{!NOT(ISNULL(data))}" >
  <!-- Your page content here -->
</apex:outputPanel>

Then link it to your action:

<apex:page controller="YourController" action="{!loadData}" >
  <apex:form>
    <apex:actionFunction name="loadData" action="{!loadData}" status="loadStatus" />
  </apex:form>
</apex:page>

This will show the spinner until loadData completes. 

Best Regards, 

Delia Guzman