frameset.php
1 2 3 4 5 6 7 |
<frameset cols="50%,20%,*"> <frame src="frame1.php" name="frame1" id="frame1"/> <frame src="frame2.php" name="frame2" id="frame2"/> <frame src="frame3.php" name="frame3" id="frame3"/> </frameset> |
This is where the important line is: –
parent.document.getElementsByTagName( ‘frameset’ )[ 0 ].cols = ‘10,10,*’ ;
frame1.php
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="image">Click Here to change frame sizes</div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> (function(){ $('#image').on("click" , function (e) { alert("changing sizes now...."); parent.document.getElementsByTagName( 'frameset' )[ 0 ].cols = '10,10,*' ; }); }()); </script> |
frame2.php
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> frame 2 </body> <style> body { background-color: yellow; } </style> |
frame3.php
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> frame 3 </body> <style> body { background-color: blue } </style> |