title: iFrame communicating with buttons
body: <p>I am trying to have a preview window on a website in which the user can click different buttons to change the layout and color. I also have code in here to change the width.</p>
  
  <p>So far I can do both but I cannot think of a way to make them communicate with each other.</p>
  
  <p>For example, layout 1, 2, 3, 4 are different .html files so when the user clicks one, the chosen layout is displayed.</p>
  
  <p>Exactly the same for the colors accept for each color there is 4 layout variations. This is where I am stuck.</p>
  
  <p>I need a way that when a color is selected, then a layout, the layout is always that same color until it is changed.</p>
  
  <p>This is the code I have so far.</p>
  
  <pre>
  
      
      function changeSize()
      {document.getElementById("myframe").height="500";
      document.getElementById("myframe").width="700";}
  
      function changeSize2()
      {document.getElementById("myframe").height="500";
      document.getElementById("myframe").width="340";}
  
      function changeLayout()
      {document.getElementById("myframe").src="layout1/orange/index.html";}
      function changeLayout2()
      {document.getElementById("myframe").src="layout2/orange/index.html";}
      function changeLayout3()
      {document.getElementById("myframe").src="layout3/orange/index.html";}
      function changeLayout4()
      {document.getElementById("myframe").src="layout4/orange/index.html";}
  
      function changeColorOrange()
      {document.getElementById("myframe").src="layout1/orange/index.html";}
      function changeColorGreen()
      {document.getElementById("myframe").src="layout1/green/index.html";}
      function changeColorRed()
      {document.getElementById("myframe").src="layout1/red/index.html";}
      function changeColorBlue()
      {document.getElementById("myframe").src="layout1/blue/index.html";}
      function changeColorPink()
      {document.getElementById("myframe").src="layout1/pink/index.html";}
      
      
  
  </pre>
  
  <pre><code>&lt;body&gt;
      &lt;button type="button" onclick="changeSize()" width="20"&gt;&lt;i class="icon-desktop icon-2x" style="color:#333;"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button type="button" onclick="changeSize2()" width="20" style="background-color:#f2f2f2;border: 1px solid #d1d1d1;"&gt;&lt;i class="icon-mobile-phone icon-2x" style="color:#333;"&gt;&lt;/i&gt;&lt;/button&gt;
      &amp;nbsp;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;iframe id="myframe" src="layout1/orange/index.html" height="500" width="700"&gt;
      &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
      &lt;/iframe&gt;
      &lt;br&gt;&lt;br&gt;
  
  &lt;h4&gt;Layout&lt;/h4&gt;
  &lt;input class="button2" type="button" onclick="changeLayout()" value="1"&gt;
  &lt;input class="button2" type="button" onclick="changeLayout2()" value="2"&gt;
  &lt;input class="button2" type="button" onclick="changeLayout3()" value="3"&gt;
  &lt;input class="button2" type="button" onclick="changeLayout4()" value="4"&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;h4&gt;Colors&lt;/h4&gt;
  &lt;input class="button2" type="button" onclick="changeColorOrange()" value="Orange"&gt;
  &lt;input class="button2" type="button" onclick="changeColorGreen()" value="Green"&gt;
  &lt;input class="button2" type="button" onclick="changeColorRed()" value="Red"&gt;
  &lt;input class="button2" type="button" onclick="changeColorBlue()" value="Blue"&gt;
  &lt;input class="button2" type="button" onclick="changeColorPink()" value="Pink"&gt;
  </code></pre>
  
  <p>Can anyone point me in the right direction with this?</p>
  
  <p>Thank you inadvanced.</p>
  
  <p>EDIT - 6:55pm UK</p>
  
  <p>Latest code,</p>
  
  <pre><code>&lt;script&gt;
  // set the default layout and color
  window._layout = "layout1";
  window._color = "red";
  
  // this function makes changes
  function frameChanger(layout,color) {
      layout = layout || window._layout;
      color = color || window._color;
      var frame = document.getElementById("myframe2");
      frame.src = "http://mydomain.com/templates/" + layout + "/" + color + "/index.html";
      window._layout = layout;
      window._color = color;
  }
  
  
  &lt;/script&gt;
  
  &lt;body&gt;
  
  
  &lt;iframe id="myframe2" height="500" width="720" style="margin:0 auto; display:block;"&gt;
  &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
  &lt;/iframe&gt;
  
  &lt;input class="button2" type="button" onclick="frameChanger('layout2','orange');"&gt;
  &lt;input class="button2" type="button" onclick="frameChanger('layout1','red');"&gt;
  
  &lt;/body&gt;
  </code></pre>