CODEWITHSUNDEEP
javascriptjqueryhtml
Amit Kansal
Amit Kansal

Reputation: 227

Completely Hide frame in framesets using Javascript or Jquery

Please go thorough below HTML files code.
Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly.
I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.

Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    <title>Frameset Example Title (Replace this section with your own title)</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
         $('frame[name="topFrame"]').fadeToggle("slow");
        $("#top").toggle();
      });
    });
    </script>
    </html>

content.html

<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:30px;
    background-color:#ffcc00;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


</head>
<body>
<h1>Content</h1>
<br>

<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>

<script>
$('button').on('click',function(){
     $( "p" ).toggle( "slow" );
      $( "h1" ).toggle( "slow" );
});
</script>

</body>
</html>

menu_1.html

<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:10px;
    background-color:#ff9900;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
    $('img, button').on("click" , function (e) {
        $('p').toggle();
    });
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p><a href="white.html" target="content">White Page</a></p>
</body>
</html>

Upvotes: 3

Views: 9058

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.

Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :

Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :

........

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
        var origCols = null;
        function receiveMessage(event)
        {
          if(origCols!=null)
           showFrame()
          else
           hideFrame();
        }

        addEventListener("message", receiveMessage, false);

        function hideFrame() {
            var frameset = document.getElementById("frameSet");
            origCols = frameset.rows;
            frameset.rows = "0, *";
        }

        function showFrame() {
            document.getElementById("frameSet").rows = origCols;
            origCols = null;
        }
        </script>
    </html>

And now write onclick of button like below :

<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>

Upvotes: 6

nodeffect
nodeffect

Reputation: 1840

Try using IDs Here's a short example..

<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>

<script type="text/javascript">
   $('#thumbnail').click(function() {
     $('#showhide').toggle();
   });
</script>

Upvotes: 1

Related Questions