iFrame communicating with buttons

Question

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.

So far I can do both but I cannot think of a way to make them communicate with each other.

For example, layout 1, 2, 3, 4 are different .html files so when the user clicks one, the chosen layout is displayed.

Exactly the same for the colors accept for each color there is 4 layout variations. This is where I am stuck.

I need a way that when a color is selected, then a layout, the layout is always that same color until it is changed.

This is the code I have so far.


    
    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";}

<body>
    <button type="button" onclick="changeSize()" width="20"><i class="icon-desktop icon-2x" style="color:#333;"></i></button>
    <button type="button" onclick="changeSize2()" width="20" style="background-color:#f2f2f2;border: 1px solid #d1d1d1;"><i class="icon-mobile-phone icon-2x" style="color:#333;"></i></button>
    &nbsp;
    <br />
    <br />
    <iframe id="myframe" src="layout1/orange/index.html" height="500" width="700">
    <p>Your browser does not support iframes.</p>
    </iframe>
    <br><br>

<h4>Layout</h4>
<input class="button2" type="button" onclick="changeLayout()" value="1">
<input class="button2" type="button" onclick="changeLayout2()" value="2">
<input class="button2" type="button" onclick="changeLayout3()" value="3">
<input class="button2" type="button" onclick="changeLayout4()" value="4">

<br />
<br />

<h4>Colors</h4>
<input class="button2" type="button" onclick="changeColorOrange()" value="Orange">
<input class="button2" type="button" onclick="changeColorGreen()" value="Green">
<input class="button2" type="button" onclick="changeColorRed()" value="Red">
<input class="button2" type="button" onclick="changeColorBlue()" value="Blue">
<input class="button2" type="button" onclick="changeColorPink()" value="Pink">

Can anyone point me in the right direction with this?

Thank you inadvanced.

EDIT - 6:55pm UK

Latest code,

<script>
// 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;
}


</script>

<body>


<iframe id="myframe2" height="500" width="720" style="margin:0 auto; display:block;">
<p>Your browser does not support iframes.</p>
</iframe>

<input class="button2" type="button" onclick="frameChanger('layout2','orange');">
<input class="button2" type="button" onclick="frameChanger('layout1','red');">

</body>

So the four layouts are all in a single iFrame? Or each in their own? How complex are these layouts? Just some colored boxes? There could be a much simpler solution. — DevlshOne
The best would be to have classes changing the colours and sizes. — Sergio
There is a single iframe, and when a button is clicked, it changes it to the html file. Hope this helps. The layouts differ slightly, they are tables that are in different layouts with different images. — user282076
I think your main problem is trying to access the HTML in the frame without going straight to the frame first. window.frames documentation. Then, as Sergio said, you can start making changes to class names and altering colors and whatnot on the fly. — DevlshOne

jonaz jonaz · Accepted Answer · 2013-08-25T16:14:53

You can assign a variable for layout and another for color. Then construct the src based on that. For simplicity, instead of having lots of functions for handling each situation, you can have one function that accepts parameters for handling different scenarios.

Like so:

// set the default layout and color
window._layout = "layout1";
window._color = "orange";

// this function makes changes
function frameChanger(layout,color) {
    layout = layout || window._layout;
    color = color || window._color;
    var frame = document.getElementById("myframe");
    frame.src = layout + "/" + color + "/index.html";
    window._layout = layout;
    window._color = color;
}

// change to red like this
frameChanger("","red");

// change to layout 3 like this:
frameChanger("layout3","");

// change to layout 2 with blue color like this:
frameChanger("layout2","blue");

iFrame communicating with buttons

2 Answers