JavaOriented: Browser Compatible Issues & Script issues solutions

Z-index:

Adding z-index:

The first example, Stacking without z-index, explains how stacking is arranged by default. If you want to specify a different stacking order, you have to position an element and use the z-index property.

This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers.

Warning! z-index only has an effect if an element is positioned.

bottom: furthest from the observer
...
Layer -3
Layer -2
Layer -1
Layer 0 default rendering layer
Layer 1
Layer 2
Layer 3
...
top: closest to the observer

Notes:

When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
If several elements share the same z-index value (i.e. they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply.

In the next example, the layers' stacking order is rearranged using z-index. The z-index of DIV#5 has no effect since it is not a positioned element.

Example source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

div {

opacity: 0.7;

font: 12px Arial;

}

span.bold { font-weight: bold; }

#normdiv {

z-index: 8;

height: 70px;

border: 1px dashed #999966;

background-color: #ffffcc;

margin: 0px 50px 0px 50px;

text-align: center;

}

#reldiv1 {

z-index: 3;

height: 100px;

position: relative;

top: 30px;

border: 1px dashed #669966;

background-color: #ccffcc;

margin: 0px 50px 0px 50px;

text-align: center;

}

#reldiv2 {

z-index: 2;

height: 100px;

position: relative;

top: 15px;

left: 20px;

border: 1px dashed #669966;

background-color: #ccffcc;

margin: 0px 50px 0px 50px;

text-align: center;

}

#absdiv1 {

z-index: 5;

position: absolute;

width: 150px;

height: 350px;

top: 10px;

left: 10px;

border: 1px dashed #990000;

background-color: #ffdddd;

text-align: center;

}

#absdiv2 {

z-index: 1;

position: absolute;

width: 150px;

height: 350px;

top: 10px;

right: 10px;

border: 1px dashed #990000;

background-color: #ffdddd;

text-align: center;

}

</style></head>

<body>

<br />position: absolute;

<br />z-index: 5;

</div>

<br />position: relative;

<br />z-index: 3;

</div>

<br />position: relative;

<br />z-index: 2;

</div>

<br />position: absolute;

<br />z-index: 1;

</div>

<br />no positioning

<br />z-index: 8;

</div>

</body></html>

See also

Stacking without z-index : Default stacking rules
Stacking and float : How floating elements are handled
The stacking context : Notes on the stacking context
Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level

Overlay issue:

Close button wont work Some time’s :

We need to change the javascript:parent.close() method to javascript:close();

Then it wont take parent object and it will close.

Print Button Implementation:

1. Take div for header and footer and content and for css also(what ever u want to print) and give id for the div’s.

2. Call the javascript method or Jquery method on keydown event for print, here we need to capture the ctrl+p event also using event key (if Required)

jQuery(document).keydown(function(event) {

//alert('ctrl+p');

if(event.ctrlKey && event.keyCode == 80) {

console.log("Hey! Ctrl+P event captured!");

event.preventDefault();

event.returnValue=false;

printCorePage();

}

});

3. First apply for css and apply for header and apply for content and apply for Footer.(content)

4. Using, document.getElementById(“idname”).innerHTML = content

5. If any content is not required then block the content.

Using, document.getElementById("printmenu").style.display = "none";

UI Tips:

Importing java file into jsp:

<%@page import="com.uboc.banking.bo.UserControl"%>

-------------------------------------------------------------------------

Importing tag-lib into jsp:

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

-------------------------------------------------------------------------

Prototype.js error :

Add jquery conflict code in jquery

$.noConflict();

($ depends upon jquery symbol)

-------------------------------------------------------------------------

Object expected: Script error

Import is missing for that variable, So import the required class

-----------------------------------------------------------------------

Object extected : Script error

Some time need to import the core matric's lib

---------------------------------------------------------------------------

To restrict the Hyperlinks in a page Code:

var div = document.getElementById("printableContentBlock");

var anchorList = div.getElementsByTagName('a');

for(var i = 0; i < anchorList.length; i++) {

anchorList[i].disabled = true;

anchorList[i].onclick = '';

anchorList[i].removeAttribute('href');

}

window.print();

window.close();

}

----------------------------------------------------------------------------

Object expected: script error in IE

ex: firstusageconfirmpayment.do

Solution: need to import the function implementation file

Ex: Tip is not defiend in FF

Solution: Need to import the below js file :

----------------------------------------------------------------------------

Script Error: "actualTitle" is null in FF

Object expected: script error in IE

1. Check the title of landing Page

2. And change the Title div id

----------------------------------------------------------------------------

JavaOriented

Monday 25 November 2013

Browser Compatible Issues & Script issues solutions

No comments:

Post a Comment

SpringBoot