Contact person: Responsive Availability Checker & Brochure Integration

Phone:Show

Email:Show

Location: Parrish, United States

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"READ THIS CAREFULLY: READ THE PROJECT BEFORE YOU BID ON IT. WILL ONLY ACCEPT BIDS THAT READ THE MATERIAL AND CLEARLY STATE THE PROJECT GOAL AND HOW YOU WILL ACHIEVE THIS

IF YOUR BID IS AUTOMATED, IT WILL GO IN THE TRASH AUTOMATICALLY


Project: Responsive Placement of Availability Checker + Brochure Link in Breakdance (WordPress)

Overview:
I have a custom HTML block (an Availability Checker form with a brochure link) that needs to appear:

On desktop: at the top of the left-hand column.

On tablet & mobile: at the bottom of the main content area.

The checker should exist only once in the HTML (hidden in a “source” container) and be moved into the correct position at runtime using JavaScript.

What I Need:

Two placeholder <div> elements inserted into the Breakdance layout:

.availabilityaboveContentSpot → desktop position

.availabilityBelowContentSpot → mobile position

JavaScript that:

Detects screen size (desktop breakpoint = 1024px).

Moves the checker from its hidden source into the correct placeholder on load and on window resize.

Preserves form functionality (including year dropdown population).

Hidden “source” container in the site footer with:

id="availability-source"

Inner .availability-checker containing the form HTML and brochure link.

Thorough testing across desktop, tablet, and mobile in Breakdance preview and live site.

Deliverables:

Functional, tested code on my live site.

Clear instructions on how to add/remove the placeholders on other pages.

No duplicated forms in HTML—only one master instance moved dynamically.

Tech:

WordPress (Breakdance Builder)

Custom HTML, CSS, JavaScript

Must work without breaking Breakdance’s responsive controls.

BONUS: If you have a way to quick method make this appear on 200 pages" (client-provided description)