Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWeb Content Preparation

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Div Content Replication

At a book sales page (EVO), the "buy" links are at the end of the sales content — where they should be. Generally, people would read through the material before deciding to buy.

However, some people may arrive at the page ready to buy right away.

Instead of cluttering the top of the sales content with "buy" links and perhaps turning people away, a "Tap for 'buy' links" link was published.

Tapping that link replaces it with a copy of the "buy" links already published below the sales content.

The functionality was quickly implemented. And I thought you might be interested in how it's done.

In essence, the content within the div that contains "Tap for 'buy' links" is entirely replaced with the content of the "buy" links div below the sales content. The replacement is copy, not a move. The original "buy" links remain at the end of the sales content.

A live demonstration of how it works can be obtained with a tap at the EVO book sales page.

3 Parts

The three parts of this system are:

  1. The source div, a div with content that is subject to copying.

    Here is example code:

    <div id="source-id">
    Content may be copied into the destination div.
    </div>
    

    The source-id id value of the div will be used by the JavaScript to identify where to copy content from.

    The content may be whatever you wish.

  2. The destination div, a div with a link that, when tapped, is replaced with a copy of the content in the source div.

    Here is example code:

    <div id="destination-id">
    <a href="javascript:CopyContentFromSourceToDestination('source-id','destination-id')">
    Tap for other content
    </a>
    </div>
    

    The destination-id id value of the div is used by the JavaScript to identify where to publish the content copied from from the source-id div.

    The link calls the JavaScript CopyContentFromSourceToDestination() function with the id value of the source div and the id value of the destination div.

    The link text may be whatever you wish. Tapping the link causes the copying.

  3. The JavaScript that does the copying.

    Here is the JavaScript:

    <script>
    function CopyContentFromSourceToDestination(from,to)
    {
       document.getElementById(to).innerHTML = document.getElementById(from).innerHTML;
    }
    </script>
    

    There is no customization here. Put the JavaScript on the page anywhere that JavaScript can run. Immediately above the cancel </body> tag can work.

Installing and Testing

All 3 parts of the system need to be on the same page.

It doesn't matter where they are are, so long as they are within the BODY area of the page.

Place them on a test page and see how they work. Then, when you are satisfied, the system is available and ready for you to use as appropriate for your web pages.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC