The following JavaScript helpers are provided to help fine-tune the displays of widgets.
These widget helpers are all JavaScript and so must be added as code to the pages. Make sure that you place the helper correctly on the page as loading BEFORE or AFTER the widget loads is a vital part of the way they work.
- Display Widgets in Tabs
- Display a Map in a Tab
- Dedicate a Webpage to a Single User
Display Widgets in Tabs
This is a general solution approach that applies to the Gallery or List widgets (see below for map). You may need to modify the JavaScript to suit your own environment and timings.
Without this helper, the Widgets will not re-size the gallery items when the tab is opened after the page load.
When a tabbed section is selected, this ensures that the Widget is correctly formatted and displayed.
The general approach is to execute JavaScript when a tab is selected, to force a resize typically using the onclick().
However, there are multiple ways to do this depending on your own environment, for example:
- Apply to a tab's "onclick" function
- Apply when any tab is clicked.
See the generic examples below.
Instructions
Place JavaScript in the bottom of the webpage - typically in the page 'footer'.
Example-1
In this example, the JavaScript targets the click action on any tab in the tab wrapper ID.
Replace [tab-header-class] with the class of the wrapper containing the clickable tabs.
For example: mbbQuery(".fl-tabs-label").
<script>
mbbQuery("[tab-header-class]").click(function(){
mbbQuery(window).resize();
});
</script>
Example-2
In this example, the JavaScript targets the click action on any tab in the tab wrapper ID. The timings may need fine-tuning.
<script>
mbbQuery('[role="tab"]').on('click',function(){
setTimeout(function(){mbbQuery(window).resize();},50);
setTimeout(function(){mbbQuery(window).resize();},200)
});
</script>
Display Map in Tabs
This applies to any widget that displays the map. Without this helper, the map will not load when the tab is opened after the page load.
When a tabbed section is selected, ensure that the map is shown.
Instructions
Copy the code below and paste above the widget shortcode in the tab.
<script>
mbbQuery(".bfg-interactive-map").data("interactiveMap").refreshMap();
</script>
Dedicate a Webpage to a Single User
Force widgets on a webpage to associate with a specific team member
- Show this User as the agent to contact on the Property Details
- Assign leads from this page to the User
Instructions
Copy the code below and add to the bottom of the webpage - typically in the page 'footer'.
Options
- Replace [user-key-here] with the User's Buying Buddy api-key.
<script>
jQuery(document).on("mbb-widgets-loaded", function() {
MBB.data.mbbagent = "[user-key-here]";
MBB.cookie("mbbagent", "[user-key-here]" ,{ path: "/" });
mbbQuery.ajaxSetup({ data: MBB.data });
});
</script>