Member Avatar for sunnykeerthi

Hi,
i have a html page with 3 frames(Index.html), and the preview is as in the screenshot. Here in Welcome.html i have a button named block. when i click this button i want left.html to be disabled(the frame in left side), i'm able to do it., but the form elements(the links) are still enabled. anyone please help me on how to disable even them. the code I've written is as below.

Index.html

<HTML>

<FRAMESET rows="10%, *"> 
    Welcome
 <FRAME src="time.jsp" marginheight="25%" marginwidth="75%"> 
<FRAMESET cols="15%,*">
<FRAME src="Left.html" id="Left" name="Left"> 

<FRAME src="right.html" name="tgt" > </frameset>
<NOFRAMES> 
This displays if frames are not supported. 
</NOFRAMES> 
</FRAMESET> 
 </style>
</HTML>

Left.html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body><form name="hi" id="hi"><table>
            <tr><td colspan="3">
            <a href="View_Queries.jsp" target="tgt">Queries</a><br/></td></tr>
            <tr><td colspan="3"><a href="Welcome.jsp" target="tgt" name="home" id="home">home</a></td>
            <tr><td colspan="3"><a href="WL_Verif.jsp" target="tgt">MyAlloc</a></td></tr><br/>
            <tr><td colspan="3"><a href="On_Hold.jsp" target="tgt">On Hold</a></td></tr>
            <tr><td colspan="3"><a href="logout.jsp" target="_parent">logout</a></td></tr>
            </tr></table></form>
    </body>
</html>

Welcome.html

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            function disabledFrame()
            {

               parent.Left.document.hi.disabled=true;

            }
        </script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="button" value="block" onclick="disabledFrame()">
    </body>
</html>

Thanks

  • 3 Contributors
  • 2 Replies
  • 637 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for dany12

If you like to simplify your work use jquery and check this code

$(document).ready(function(){
3        $('#divLabel :input').attr('disabled', true);
4    });

and check prop function vs attr function on the net hope this helps cheers

Member Avatar for AleMonteiro

You could use jQuery as suggested by dany12, it's a great idea because it really simplifies your job.

But, if can't or won't use jQUery this is how you can do it with pure JS:

function disabledFrame()
{
    var frm = parent.Left.document.hi, // Reference to the form in the Left frame
        links = frm.getElementsByTagName('a'), // Reference to the array of <a>'s
        i=0, // Counter to loop the links
        il=links.length; // Links length


    for(; i<il;i++){
        disableAnchor(links[i], true); // Disable link
    }
}

// Function obteined from http://geekswithblogs.net/TimH/archive/2006/01/19/66396.aspx
function disableAnchor(obj, disable){
  if(disable){
    var href = obj.getAttribute("href");
    if(href && href != "" && href != null){
       obj.setAttribute('href_bak', href);
    }
    obj.removeAttribute('href');
    obj.style.color="gray";
  }
  else{
    obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
    obj.style.color="blue";
  }
}

See this link to understand how the disabling of an anchor is done: http://geekswithblogs.net/TimH/archive/2006/01/19/66396.aspx

Good luck.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.