javascript - onlick event not working within a window.open -
i'm trying achieve onclick event once window.open has opened. when user clicks button in new window works.
the onclick event works if it's not within newly opened window.
<div class="show-dialog" id="content"> <script type="text/javascript"> var c = document.getelementbyid("content"); function resizetext(multiplier) { if (c.style.fontsize == "") {c.style.fontsize = "1.0em"; } c.style.fontsize = parsefloat(c.style.fontsize) + (multiplier * 0.2) + "em"; } </script> <a href="javascript:void(0);" onclick="resizetext(1)" id="plustext">make text bigger</a> <a href="javascript:void(0);" onclick="resizetext(-1)" id="minustext">make text smaller</a> </div> the javascript function enables clicking links , increasing or decreasing text. open.window function opens new window , working fine within window.open example onlick event doesn't trigger. can't use function :(
<span class="show"><a href="#">show<i class="fa fa-external-link-square fa-left"></i></a></span> $(".show a").click(function() { var e = $(this).parent().next("div.show-dialog").html(); var t = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes"); t.document.write("<html><head>"); t.document.write("<style>body{font-size:2em;}</style>"); t.document.write("<script type='text/javascript'> var c = document.getelementbyid('content'); function resizetext(multiplier) { if (c.style.fontsize == '2em') { c.style.fontsize = '2em'; } c.style.fontsize = parsefloat(c.style.fontsize) + (multiplier * 0.2) + 'em'; } </script>"); t.document.write("</head><body>"); $(t.document).find("body").html(e); t.document.write("<a href='javascript:void(0);' onclick='resizetext(1)' id='plustext'>make text bigger</a> <a href='javascript:void(0);' onclick='resizetext(-1)' id='minustext'>make text smaller</a>"); t.document.write("</body>"); t.document.write("</html");}); any appreciated :)
in end managed onclick work within window.open.
i intergrating function increase , decrease font-size within window.open onclick.
// creating window open text in div class name show-dialog $(".show a").click(function() { // varible grabs content of show dialogs var activitycontent = $(this).parent().next("div.show-dialog").html(); // establish varibale create buttons increase text var usergui = "<div class='usergui'><a href='javascript:void(0);' onclick='resizetext(1)' id='plustext'><i class='fa fa-plus-square-o fa-2x'></i></a> <a href='javascript:void(0);' onclick='resizetext(-1)' id='minustext'><i class='fa fa-minus-square-o fa-2x'></i></a><br>increase / decrease font size.</div>"; // created variable window.open var inwindow = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes"); // writing inwindow variable inwindow.document.write("<html><head>"); inwindow.document.write("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link href='https://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'>"); inwindow.document.write("<title>hello world</title>"); inwindow.document.write("<style>body{font-family: 'open sans', sans-serif; font-size: 18px; line-height: 1.8;}a{color:#663366;}a:hover{color:#844484;}.usergui{float:right;}</style>"); inwindow.document.write("</head><body id='content'>"); $(inwindow.document).find("body").append(usergui); $(inwindow.document).find("body").append("<br><br>"); $(inwindow.document).find("body").append(activitycontent); inwindow.document.write("</body><script type='text/javascript'> // increase font size function function resizetext(multiplier) { var c = document.getelementbyid('content'); if (c.style.fontsize == '') { c.style.fontsize = '1.175em'; } c.style.fontsize = parsefloat(c.style.fontsize) + (multiplier * 0.2) + 'em'; }</script></html>"); inwindow.document.write(""); inwindow.document.close(); }); the html in question above ^.
Comments
Post a Comment