multiple p5 sketches on a single page within Tabs

aperritano

Hi, I'm trying embedded multiple p5 sketches within a single page but within tabs created by divs. I've tried to use the iframe tag with no success.

any suggestions? is this even the right way to go about this?

    <div class="tab_wrap">
    </div>
    <div class="tabs">
        <ul>
            <li><a name="tab" id="tab_1" href="javascript:void(0)" onClick="tabs(1)" class="active">TOTAL DISTANCE TRAVELED</a></li>
            <li><a name="tab" id="tab_2" href="javascript:void(0)" onClick="tabs(2)">Recent</a></li>
        </ul>
    </div>
    <div name="tab_content" id="tab_content_1" class="tab_content active">
        <ul>
            <li><iframe> src="barChart.js"  width="600px" height="400px"></iframe></</li>
        </ul>
    </div>

blindfish

Is the typo on your iframe in your original source? You have:

<iframe> src=... >

But it should be:

<iframe src=... >

There are documented issues with running multiple p5 sketches on the same page directly which iframes should resolve. Also consider that any script implementation on your tabs could lead to unpredictable behaviour depending on how it works. The iframe approach should mitigate against this too...

Edit: I also just spotted (a bit slow today!) that the src of your iframe is a script and not an html file. It should be an html file; which should pull in all script dependencies. So first load the separate page to check it works; then add it as the src to your iframe and do this for each page you want add.