Show HTML element (div) using iframe shim method

Hello guys ,


for those interested in showing div over java applet .

it can be used to show video or any webpage over applet

code below is a rough coding ,users are advised to modify it as per their requirements


<style>
html,body {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color:#6A6666;
width:100%;
height:100%;
background-color: white;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

overflow:hidden;


}
#ytapiplayer {display:block; width:560px; height:340px;
position:absolute;
top:100px; left:300px;
background:#000;
/* for IE
filter:alpha(opacity=0);
/* CSS3 standard
opacity:0;*/
z-index:1000; visibility:hidden;
}

#resizable {
background-color:black;
}
#framediv {
background-color:black;
}

.iframeclass{
position:absolute;
top:0;
left:0;
margin-top:0px;
margin-left:0px;
width:100%;
height:100%;
background-color:'black';
/* for IE
filter:alpha(opacity=0);
/* CSS3 standard
opacity:0; */
}
</style>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>

<script>
//jquery only used for safari detection here
var isSafari=0;
var userAgent = navigator.userAgent.toLowerCase();
jQuery.each(jQuery.browser, function(i, val) {
if(i=="safari"&&($.browser.webkit)&&!(/chrome/.test(userAgent))){
isSafari=1;

}
});

function fnMinMax(obj,videoWidth,videoHeight){

if(obj.title=='Minimize'){

var sd = document.getElementById('resizable');
sd.style.visibility='hidden';
sd.style.display='none';
var shimmer=document.getElementById('shimmer');
shimmer.style.width=''+videoWidth+'px';
shimmer.style.height='20px';
obj.title='Maximize';
obj.innerHTML='Maximize';
}else{
var videoHeightNew=parseInt(videoHeight)+20;
var shimmer=document.getElementById('shimmer');
shimmer.style.width=''+videoWidth+'px';
shimmer.style.height=''+videoHeightNew+'px';
var player=document.getElementById('ytapiplayer');
shimmer.setAttribute('bgcolor','#000');
player.style.width=''+videoWidth+'px';
player.style.height=''+videoHeightNew+'px';
var sd = document.getElementById('resizable');
sd.style.visibility='visible';
sd.style.display='block';

obj.title='Minimize';
obj.innerHTML='Minimize';

}

}

function showPopUp(videoUrl,videoWidth,videoHeight,videoPosX,videoPosY){

if(videoUrl==''){
//videoUrl='http://www.youtube.com/v/UXQ8ym4ufeA&hl=en_US&fs=0&hd=0&autoplay=1&showsearch=0&iv_load_policy=3&rel=0';
}
if(videoWidth!=''&&videoHeight==''){
videoHeight=videoWidth*3/4;
}
if(videoWidth==''&&videoHeight!=''){
videoWidth=videoHeight*4/3;
}
if(videoWidth==''){
videoWidth='500';
}

if(videoHeight==''){
videoHeight='450';
}



if(!isSafari){
//if(document.getElementById('ytapiplayer').style.visibility=='visible'){
if(videoUrl==''){


var sd = document.getElementById('ytapiplayer');
sd.style.visibility='hidden';
sd.style.display='none';
sd.innerHTML='';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);


}else{
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
var shimmerWidth=parseInt(videoWidth);
var shimmerHeight=parseInt(videoHeight)+20;
shimmer.style.width=''+shimmerWidth+'px';
shimmer.style.height=''+shimmerHeight+'px';

shimmer.style.top='100px'; //we will change this later
shimmer.style.left='300px';//we will change this later

shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('bgcolor','#000');
shimmer.setAttribute('src','javascript:false');

document.body.appendChild(shimmer);
showdeadcenterdiv(videoPosX,videoPosY,'shimmer');//curently won't show at center for this uncomment code in this function and modeify top and left postion accordinglt
// make sub div visible
var sd = document.getElementById('ytapiplayer');
sd.innerHTML='';
var resizeW=parseInt(videoWidth)-5;
var resizeH=parseInt(videoHeight)-5;
sd.style.visibility='visible';
sd.style.display='block';
sd.style.width=''+shimmerWidth+'px';
sd.style.height=''+shimmerHeight+'px';
sd.innerHTML='<span style="margin-left:'+(videoWidth-140)+'px;margin-top:0px"><a href="javascript:void(0);" onclick="fnMinMax(this,'+videoWidth+','+videoHeight+')" style="color:#FFFFFF;text-decoration:none" title="Minimize">Minimize</a> <a href="javascript:void(0);" onclick="showPopUp(\'\',\'\',\'\',\'\',\'\')" style="color:#FFFFFF;text-decoration:none">CLose</a></span><div id="resizable" style="width:'+videoWidth+'px;height:'+videoHeight+'px;top:0px;left:0px" class="ui-state-active"><iframe src="'+videoUrl+'" width="98%" height="98%" frameborder="0"></iframe> </div>';

showdeadcenterdiv(videoPosX,videoPosY,'ytapiplayer');

$("#resizable").resizable({
containment: '#ytapiplayer'
});

}
}else{


var scrolledX, scrolledY;
if( self.pageYoffset ) {
scrolledX = self.pageXoffset;
scrolledY = self.pageYoffset;
} else if( document.documentElement && document.documentElement.scrolltop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrolltop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrolltop;
}

if(typeof(scrolledX)=='undefined'){
scrolledX=0;
}
if(typeof(scrolledY)=='undefined'){
scrolledY=0;
}
// Next, determine the coordinates of the center of browser's window

var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}

//if(document.getElementById('ytapiplayer').style.visibility=='visible'){
if(videoUrl==''){
var sd = document.getElementById('ytapiplayer');
sd.style.visibility='hidden';
sd.style.display='none';//even one hiding will do
sd.innerHTML='';
document.getElementById('appletdiv').style.width=scrolledX+centerX;
document.getElementById('appletdiv').style.height=scrolledY+centerY;

}else{


var leftoffset = scrolledX + (centerX - videoWidth);
var topoffset = scrolledY + (centerY - videoHeight);

document.getElementById('appletdiv').style.width=leftoffset;
//document.getElementById('appletdiv').style.height=topoffset;
var sd = document.getElementById('ytapiplayer');
sd.innerHTML='';
var resizeW=parseInt(videoWidth)-5;
var resizeH=parseInt(videoHeight)-5;
sd.style.visibility='visible';
sd.style.display='block';
sd.style.width=''+videoWidth+'px';
sd.style.height=''+videoHeight+'px';
sd.innerHTML='<span style="margin-left:'+(videoWidth-60)+'px;margin-top:0px"><a href="javascript:void(0);" onclick="showPopUp(\'\',\'\',\'\',\'\',\'\')" style="color:#FFFFFF;text-decoration:none">CLose</a></span><div id="resizable" style="width:'+videoWidth+'px;height:'+videoHeight+'px;top:0px;left:0px" class="ui-state-active"><iframe src="'+videoUrl+'" width="98%" height="98%" frameborder="0"></iframe> </div>';
sd.style.top=topoffset;
sd.style.left=leftoffset;
$("#resizable").resizable({
containment: '#ytapiplayer'
});

}

}

}

//Show at ur given position
function showdeadcenterdiv(Xpos,Ypos,divid) {
//unomment code below for showing div at dead center.
try{
// First, determine how much the visitor has scrolled
/*
var scrolledX, scrolledY;
if( self.pageYoffset ) {
scrolledX = self.pageXoffset;
scrolledY = self.pageYoffset;
} else if( document.documentElement && document.documentElement.scrolltop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrolltop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrolltop;
}

if(typeof(scrolledX)=='undefined'){
scrolledX=0;
}
if(typeof(scrolledY)=='undefined'){
scrolledY=0;
}
// Next, determine the coordinates of the center of browser's window

var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}

// Xwidth is the width of the div, Yheight is the height of the
// div passed as arguments to the function:
var leftoffset = scrolledX + (centerX - Xwidth) / 2;
var topoffset = scrolledY + (centerY - Yheight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
*/
if(Ypos==''){
Ypos='40';
}
if(Xpos==''){
Xpos='18';
}
var o=document.getElementById(divid);
var r=o.style;
r.position='absolute';
//r.top = topoffset + 'px';
//r.left = leftoffset + 'px';
r.top = Ypos+'px';
r.left = Xpos+'px';
r.display = "block";
}catch(err){

//alert(divid);

}
}
</script>


<div id="ytapiplayer" class="ui-widget-content">
<div id="resizable" >

</div>
</div>

<div id="appletdiv" style="width:100%;height:100%">

//Your applet code here.
</applet>

Scrollable Table with fixed header and first column

From a long time ,I was searching for a script that can satisfy my need to have a scrollable table with fixed header and fixed First column,I tried many scripts but some of them were not compatible with the application I want to make(I was trying to make a calendar for aircraft activity in a flight management system with drag drop functionality.) and some script was not multi browser capable so I decided to write my own script using jquery.I am not a master in jquery but I know its basic use.
so I want to share this code with the one who want to create their own scrollable table with flexible content for the table.





<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
fnAdjustTable();
});

fnAdjustTable=function(){

var colCount=$('#firstTr>td').length; //get total number of column

var m=0;
var n=0;
var brow='mozilla';
jQuery.each(jQuery.browser, function(i, val) {
if(val==true){

brow=i.toString();
}
});
$('.tableHeader').each(function(i){
if(m<colCount){

if(brow=='mozilla'){
$('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td

$(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
}
else if(brow=='msie'){
$('#firstTd').css("width",$('.tableFirstCol').width());

$(this).css('width',$('#table_div td:eq('+m+')').width()-2);//In IE there is difference of 2 px
}
else if(brow=='safari'){
$('#firstTd').css("width",$('.tableFirstCol').width());

$(this).css('width',$('#table_div td:eq('+m+')').width());
}
else{
$('#firstTd').css("width",$('.tableFirstCol').width());

$(this).css('width',$('#table_div td:eq('+m+')').innerWidth());
}
}
m++;
});

$('.tableFirstCol').each(function(i){
if(brow=='mozilla'){
$(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight());//for providing height using scrollable table column height
}else if(brow=='msie'){

$(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()-2);
}else{
$(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
}
n++;
});



}

//function to support scrolling of title and first column
fnScroll=function(){

$('#divHeader').scrollLeft($('#table_div').scrollLeft());
$('#firstcol').scrollTop($('#table_div').scrollTop());


}

</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="firstTd">
</td>
<td>
<div id="divHeader" style="overflow:hidden;width:284px;">
<table cellspacing="0" cellpadding="0" border="1" >
<tr>
<td ><div class="tableHeader">Title1</div></td><td><div class="tableHeader">Title2</div></td><td><div class="tableHeader">Title3</div></td><td><div class="tableHeader">Title4</div></td><td><div class="tableHeader">Title5</div></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="firstcol" style="overflow: hidden;height:80px">
<table width="200px" cellspacing="0" cellpadding="0" border="1" >
<tr>
<td class="tableFirstCol">First Col row1 </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row2</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row3</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row4</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row5</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row8</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row9</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div id="table_div" style="overflow: scroll;width:300px;height:100px;position:relative" onscroll="fnScroll()" >
<table width="500px" cellspacing="0" cellpadding="0" border="1" >
<tr id='firstTr'>
<td>Row1Col1</td><td>Row1Col2</td><td>Row1Col3</td><td>Row1Col4</td><td>Row1Col5</td>
</tr>
<tr>
<td>Row2Col1</td><td>Row2Col2</td><td>Row2Col3</td><td>Row2Col4</td><td>Row3Col5</td>
</tr>
<tr>
<td>Row3Col1</td><td>Row3Col2</td><td>Row3Col3</td><td>Row3Col4</td><td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td><td>Row4Col2</td><td>Row4Col3</td><td>Row4Col4</td><td>Row4Col5</td>
</tr>
<tr>
<td>Row5Col1</td><td>Row5Col2</td><td>Row5Col3</td><td>Row5ol4</td><td>Row5Col5</td>
</tr>
<tr>
<td>Row6Col1</td><td>Row6Col2</td><td>Row6Col3</td><td>Row6Col4</td><td>Row6Col5</td>
</tr>
<tr>
<td>Row7Col1</td><td>Row7Col2</td><td>Row7Col3</td><td>Row7Col4</td><td>Row7Col5</td>
</tr>
<tr>
<td>Row8Col1</td><td>Row8Col2</td><td>Row8Col3</td><td>Row8Col4</td><td>Row8Col5</td>
</tr>
<tr>
<td>Row9Col1</td><td>Row9Col2</td><td>Row9Col3</td><td>Row9Col4</td><td>Row9Col5</td>
</tr>
</table>
</div>
</tr>
</table>
</body>
</html>



I hope this will be helpful for some one