views:

90

answers:

1

After reading through nearly 100 posts on this site trying to find someone that asked something similar to what I needed I gave up and decided to just ask myself. Forgive the rest of this post as it will probably sound stupid to experts.. but here goes

I am trying to set up a sort of "live demo" for css styles that I create. The idea is to have a static page with about a 100px height header with a drop down list of all the styles. The user will select a style name from the list and it will load that style in an iframe that occupies the rest of the viewport (/styles/xx/index.html).

In addition to a drop-down list, I wanted to list some data about each style like author, download link, support, etc.

Originally I thought about just including an .xml file inside each of the style folders but I can't figure out how to pull that data from within the iframe, out to the parent.

I've drawn a mockup up what I'm trying to achieve to make my limited explaining skills bearable http://www.kanestyles.com/example.jpg

The text in red is what I wanted to be updated each time a different style is selected from the drop down list.

I should also note that I'm not dead-set on anything unlike most of the people I've been reading here. I mean I don't absolutely have to have it a certain way and I am completely open to suggestions on how to show users live demos of css templates quickly.

Thanks in advance for any help!

A: 
  1. How about not using an XML file, but a JavaScript file that will push the info actively into its parent?

    parent.document.getElementById("author").innerHTML = "John Steinbeck"; parent.document.getElementById("rating").innerHTML = "5 out of 10";

or 2. How about not using an XML file, but a JavaScript file containing a function:

getinfo = function() { return  {'Author':'John Steinbeck','Rating' : '5 out of 10' ... } }

you could then access the array from the parent element, and get the data directly.

There are prettier ways to layout both ideas, of course. But to show the basic idea.

Pekka