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 acplish this but I am not able to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ".dtd">
    <html>
    <head>
    <title>Frameset Example Title (Replace this section with your own title)</title>
    <script src=".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=".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=".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>

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

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

Share Improve this question edited Jun 4, 2014 at 6:14 Bhushan Kawadkar 28.5k5 gold badges39 silver badges60 bronze badges asked Jun 4, 2014 at 6:10 Amit Kansal 2271 gold badge6 silver badges14 bronze badges

Thanks @Bhushan for Framing my question in better way :) – Amit Kansal Commented Jun 4, 2014 at 6:19
I guess you are binding click event too many times, makes it hide/show simultaneously , organize your click functions or unbind before bind them. – GGG Commented Jun 4, 2014 at 6:25

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Completely Hide frame in framesets using Javascript or Jquery - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)