Solved

Problem in Netscape

Posted on 2001-07-05
5
192 Views
Last Modified: 2010-08-05
Hi,

I have one image which will be moving along with the scorll. And a text Box at the Bottom. As I Scroll Down The Image will appear in front of the text Box. But In Netscape it is not possible The Image will be Behind the textBox.

I have one sample File uploaded.

http://kq.cuttack.net/ravi/

Pls scroll down and view.

Is it possible in Netscape also to view same as IE
0
Comment
Question by:ravimk
5 Comments
 
LVL 5

Expert Comment

by:djbusychild
ID: 6258432
This is a known issue with NS. You cannot have anything on top of form widgets... sorry.. =(
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6258657
Not only form-element, you can't place anything above a java-applet, flash and other elements which are not plain html. This is because these items have an infinite z-index which will make them appear in front of everything. You can hide the form-elements by putting them in a layer and make it visible or invisible at command, but it won't be pretty.

Regards,
CJ
0
 
LVL 2

Accepted Solution

by:
tleish earned 250 total points
ID: 6258669
Webreference.com gives a good explanation of what doesn't work with objects on the page and layers:
http://www.webreference.com/dhtml/diner/seethru/

The only solution I've ever seen when this has to be used it to put the form element in a layer, and hide it whenever the 2nd layer would be covering it.

Here's an example from FAQTS.com, view it in NS to see what I mean:

<!------- BEGIN CODE --------->
<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
.php { color: white; background-color: darkblue; }
.python { color: white; background-color: lightblue; }
#layer1 {
  position: absolute;
  z-index: 10;
  left: 50px;
  visibility: hidden;
}
#layer2 {
  position: absolute;
  z-index: 5;
  left: 0px;
}
</STYLE>
<SCRIPT>
function showLayer (id) {
  if (document.layers)
    document[id].visibility = 'show';
  else if (document.all)
    document.all[id].style.visibility = 'visible';
  else if (document.getElementById)
    document.getElementById(id).style.visibility = 'visible';
}
function hideLayer (id) {
  if (document.layers)
    document[id].visibility = 'hide';
  else if (document.all)
    document.all[id].style.visibility = 'hidden';
  else if (document.getElementById)
    document.getElementById(id).style.visibility = 'hidden';
}
function clipSelect () {
  if (document.layers) {
    document.layer2.oldClipWidth = document.layer2.document.width;
    document.layer2.clip.width = 50;
  }
  else if (document.all)
    document.all.layer2.style.clip = 'rect(auto 50px auto auto)';
}
function unclipSelect () {
  if (document.layers)
    document.layer2.clip.width = document.layer2.oldClipWidth;
  else if (document.all)
    document.all.layer2.style.clip = 'rect(auto auto auto auto)';
}
function init () {
  if (document.layers)
    document.layer1.onmouseout = function () {
      hideLayer(this.id);
      unclipSelect();
    };
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<A HREF="javascript: void 0"
   ONMOUSEOVER="showLayer('layer1'); clipSelect();">
Knowledge Bases
</A>
<BR>
<DIV ID="layer1"
     ONMOUSEOUT="if (document.all) {
                   if (!this.contains(event.toElement)) {
                     hideLayer(this.id);
                     unclipSelect();
                   }
                 }
                 else if (document.getElementById) {
                   window.tid = setTimeout('hideLayer(\'' + this.id
+ '\')', 20);
                 }"
     ONMOUSEOVER="if (document.getElementById)
                   clearTimeout(window.tid);"
>
<TABLE BORDER="0">
<TR>
<TD CLASS="javascript">
<A HREF="http://JavaScript.FAQTs.com" CLASS="javascript">
JavaScript.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="php">
<A HREF="http://php.FAQTs.com" CLASS="php">
php.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="python">
<A HREF="http://python.FAQTs.com" CLASS="python">
python.FAQTs.com
</A>
</TD>
</TR>
</TABLE>
</DIV>
<DIV ID="layer2">
<FORM NAME="formName">
<SELECT NAME="aSelect" WIDTH="150" STYLE="width: 150px;">
<OPTION>Kibo
<OPTION>Kibology
<OPTION>Xibology
</SELECT>
</FORM>
</DIV>
</BODY>
</HTML>
<!------- END CODE --------->
0
 
LVL 5

Expert Comment

by:djbusychild
ID: 6260106
well plugins and applets have their own graphics context, so the problem is there for both NS and IE. form elements reside in the same graphics context and the problem is only in NS
0
 

Author Comment

by:ravimk
ID: 6263733
Thanks for giving an Code and explaining the problem and giving the refrence for more info.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now