1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with Child Window

Discussion in 'JavaScript' started by ssimon171078, Apr 13, 2015.

0
  1. #1
    i write css generator in javascript how can change this code that generator css will be in child window and in parent window will only result of css generator ?
    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
     <link href="styles.css" type="text/css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script>
       var w1,w2;
        var ls = 0;
        var wd = 0;
        var st = "none";
        var cl = "black";
     var params="height=300, width=300, left=550, top=150";
     $(document).ready(function(){
            $("#but1").click(function(){
                newText();
            })
        });
        function newText(){
        $("#testedText").text("ABCDE");
        }
        $(document).ready(function(){
            $("#but2").click(function(){
                openWin1(1);
            })
        });
       function openWin1(x){
            w1=window.open("","",params);
            w1.document.open();
            if (x==1){
            var txt = '<html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body>'+
                    '<form>' +
                    'Letter-spacing: <input id="space" type="range" min="0" max="100" value="'+ls+'" oninput="window.opener.changeLS();"><br><br>' +
                    '<input type="button" value="Close" onclick="javascript:window.close();"></form></body></html>';
                  
                    w1.document.write(txt);
                    }
            else {
            var txt2='<html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body>'+
                    '<form>' +
                   'Width: <input id="wid" type="range" min="0" max="100" value="'+wd+'" oninput="window.opener.changeBorder()"><br><br>' +
                    'Colour: <input type="color" id="col" value="'+cl+'" onchange="window.opener.changeBorder()"><br><br>' +
                  'Style: <select id="style" onchange= "window.opener.changeBorder()">' +
                   '<option selected value="'+st+'">'+st+'</option>' +
                   '<option value="none">None</option>' +
                   '<option value="dotted">Dotted</option>' +
                   '<option value="dashed">Dashed</option>' +
                    '<option value="solid">Solid</option>' +
                  '<option value="double">Double</option>' +
                  '<option value="groove">Groove</option>' +
                    '</select><br><br>'+
                   '<input type="button" value="Close" onclick="javascript:window.close();"></form></body></html>';
                   w1.document.write(txt2);
                   }
          
          
            w1.document.close();
        }
   
          $(document).ready(function(){
            $("#prop1").text(ls);
        });
   
     function changeLS(){
            ls = w1.document.getElementById("space").value;
            $("#testedText").css("letter-spacing", ls+"px");
            $("#prop1").text(ls);
        }
     $(document).ready(function(){
            $("#but3").click(function(){
                openWin1(2);
            })
        });
      
      
       $(document).ready(function(){
            $("#prop2").text(wd+"px "+st+" "+cl);
        });

        function changeBorder(){
            wd = w1.document.getElementById("wid").value;
            cl=w1.document.getElementById("col").value;
            st=w1.document.getElementById("style").value;
            $("#testedText").css("border",wd +"px "+st+" "+cl);
            $("#prop2").text(wd+"px "+st+" "+cl);
        }
     </script>
    </head>
<body>
<div id="view">
    <p id="testedText">This is the tested text.</p>
</div>
<div id="controls">
    <form id="panel">
        <input type="radio" id="but1" name="knopka" value="Change original text" >Change original text <br>
        <input type="radio" id="but2" name="knopka" value="Change letter-spacing"> Change letter-spacing<br>
        <input type="radio" id="but3"  name="knopka"  value="Change border"> Change border <br>
        </form>
</div>
<div id="properties">
    <p>Letter-spacing: <span id="prop1"></span> px</p>
    <p>Border: <span id="prop2"></span></p>
</div>
</body>
</html>
    Code (JavaScript):

     
    ssimon171078, Apr 13, 2015 IP