This is the code that ended up finally working…. kinda the same idea as the code I was thinking of in my brain in my last post but executed kinda funny… its a pretty rad way though to show a flash portfolio as you can reload a single DIV tags content without reloading the rest of the site… This is a neat trick I think I’m going to use a lot in the future in terms of layout… there is a lot of things that come from this and I feel like there is something in this for a lot of design applications on sites that depend on GUI and loading a lot of content at once just to sort of pace things out so the first load you make when pulling up the site initially doesn’t choke your browser… this breaks the site up into smaller easier to swallow bits and reloads content when you return to it so you can see a animation again or something like that without reloading the entire site…
first the drop menu links for the work that is flash… notice I put a function in there to happen onclick
<li><a href=”#box4″ onclick=”changeWork1()“>work1</a></li>
second the javascript you make the function that is performed onclick
<script type=”text/javascript”>
function changeWork1(){
document.getElementById(‘work1‘).innerHTML = ‘<iframe src=”workbook/mike/mike.html” width=”1100″ height=”900″ frameborder=”0″ scrolling=”no”></iframe>‘;
}
</script>
last you set up your div with the same iframe but you just stick in a dummy site that says something like unloaded or something or even nothing at all but just to keep you from having it say site not found… the idea is for this thing thought to be simple and small so the rest of the mega huge site can load up and to maintain the same amount of space so the div won’t be bothered…. I also discovered when you change the HTML content of the div this way you actually loose your scrollbar on the div so this method is for divs that don’t scroll… you can however load an iframe that scrolls …
<div id=”work1” >
<iframe src=”unloaded.html” width=”1100″ height=”900″ frameborder=”0″ scrolling=”no”></iframe>
</div>