IDX Broker provides areas for adding custom CSS, but sometimes styling alone is not enough. When you need more advanced customization, JavaScript can be used to dynamically modify page content and behavior.

JavaScript is a high-level, dynamic, interpreted programming language that can modify existing content, create new content, and interact directly with the page structure rendered in the browser.

While CSS styles existing elements, JavaScript can add, remove, or rewrite them entirely.

JavaScript has become one of the most widely used web development languages. At a previous WordPress “State of the Word” presentation, Matt Mullenweg summarized the future direction of development with a simple message:

“Learn JavaScript.”

Important Notes

Before using custom JavaScript on IDX Broker pages, keep the following in mind:

• Do not modify required IDX Broker or MLS-provided content unless explicitly allowed.
• You are fully responsible for ensuring compliance with MLS rules and regulations.
• IDX Broker cannot provide support for custom JavaScript implementations.
• If you need scripting assistance, please use the developer forums.

What Is the DOM?

DOM stands for:

Document Object Model

When a browser loads a webpage, the HTML source is parsed and converted into the DOM.

The DOM represents the page structure as interpreted by the browser.

JavaScript does not modify the original HTML source code directly. Instead, it manipulates the DOM after the page has loaded.

Where Can JavaScript Be Added?

JavaScript can be added in several locations within IDX Broker, including:

• Wrappers
• Sub Headers

Both locations load on IDX Broker pages.

For this example, JavaScript will be added to the Sub Header area so the script only runs on IDX Broker pages.

In the IDX Broker Dashboard:

1. Locate the HTML button in the top-right corner.
2. Open the Sub Header editor.
3. Add your JavaScript code there.

Basic DOM Manipulation Example

In this example, JavaScript will rewrite text above a simple form.

Step 1: Add Script Tags

Just like CSS uses <style> tags, JavaScript uses <script> tags.

<script>
</script>

Step 2: Create a Variable

Variables are declared using the var keyword.

Example of an empty variable:

var dom_el = "";

Step 3: Select an Element by ID

To manipulate an element, JavaScript first needs to locate it within the DOM.

Example:

var dom_el = document.getElementById('cta');

Explanation:

• document references the page DOM
• getElementById() selects a specific element
• 'cta' is the ID of the element being targeted

Step 4: Rewrite the Content

Once the element has been selected, its contents can be replaced using innerHTML.

Example:

dom_el.innerHTML = "Your new custom text here";

Complete Example

<script>

var dom_el = document.getElementById('cta');

dom_el.innerHTML = "Your new custom text here";

</script>

When the page loads, the existing content inside the element with the ID cta will be replaced.

What JavaScript Can Do

Using JavaScript, you can:

• Modify existing elements
• Add new elements
• Remove elements
• Change text dynamically
• Adjust styling
• Create interactive functionality
• Rewrite portions of the DOM after page load

This makes JavaScript one of the most powerful customization tools available for IDX Broker pages.

MLS Compliance Reminder

If your script changes or hides MLS-provided data, you should first verify that the modification complies with your MLS rules and regulations.

IDX Broker does not support custom scripting implementations or MLS compliance validation for custom code.