html coding issue

karmik · Mar 31, 2015

Hey guys, I was trying to find a way to create an html file that references the oldschool runescape applet url. A

I'm using iFrame, but it's not really acting right. I can't get the background of the url to match the applet (So that I don't have 2 rectangles that aren't flush with eachother).

I want to be able to just play with 2 game applets in the same window. I tried to find a way to directly reference the applet itself, but I have no clue where I would start for that.

I would hope to be able to draw images and information onto the browser with html, that's the purpose of this as well.

CompileTime · Mar 31, 2015

Code:

<!DOCTYPE HTML>
<html>
	<iframe src="http://oldschool18.runescape.com/j1" width="800" height="550" ></iframe>	
	<iframe src="http://oldschool18.runescape.com/j1" width="800" height="550" ></iframe>
</html>

And here's the result.

karmik · Apr 1, 2015

Okay, I've gotten this:

Code:

<html style="background-color: #F48;"><head>

</head>
<body>		
	

	
<div id="content">
    <div>
	<button id="b1A" onclick="rs1switch()" style="top:0; left:0; position:absolute;">SWITCH(MEM)</button>
        <iframe id="rs1" src="http://oldschool30.runescape.com/"  onload="this.style.visibility'visible';"
            frameborder="0" height="100%" width="100%" style="position:absolute; 					
			clip:rect(150px,1095px,650px,340px);
            top:10; left:0px;"></iframe>
    </div>
	
	    <div>
	<button id="b2A" onclick="rs2switch()" style="top:0; left:0; position:absolute;">SWITCH(MEM)</button>
        <iframe id="rs2" src="http://oldschool30.runescape.com/"  onload="this.style.visibility'visible';"
            frameborder="0" height="100%" width="100%" style="position:absolute; 					
			clip:rect(150px,1095px,650px,340px);
            top:10; left:0px;"></iframe>
    </div>

	
</div>
		
	<script type="text/javascript">
		
			var rs1y = -140;
			var rs1hold= 1;
			document.getElementById("rs1").style.top=rs1y;			
			document.getElementById("b1A").style.top=rs1y+200+150;
			document.getElementById("b1A").style.left=170;		
			
			function rs1switch(){
				if(rs1hold==0){
					document.getElementById("b1A").innerHTML = "SWITCH(MEM)";
					rs1hold = 1;
					document.getElementById("rs1").style.top = rs1y;
					document.getElementById("rs1").style.clip = "rect(150px,1095px,650px,340px)";
				}else{
					document.getElementById("b1A").innerHTML = "SWITCH(F2P)";
					document.getElementById("rs1").style.clip = "rect(32px,1095px,532px,340px)";
					document.getElementById("rs1").style.top = rs1y+118;
					rs1hold=0;				
				}		
			}
			
			var rs2y = -140+503;
			var rs2hold= 1;
			document.getElementById("rs2").style.top=rs2y;			
			document.getElementById("b2A").style.top=rs2y+200+150;
			document.getElementById("b2A").style.left=170;		
			
			function rs2switch(){
				if(rs2hold==0){
					document.getElementById("b2A").innerHTML = "SWITCH(MEM)";
					rs2hold = 1;
					document.getElementById("rs2").style.top = rs2y;
					document.getElementById("rs2").style.clip = "rect(150px,1105px,650px,340px)";
				}else{
					document.getElementById("b2A").innerHTML = "SWITCH(F2P)";
					document.getElementById("rs2").style.clip = "rect(32px,1105px,532px,340px)";
					document.getElementById("rs2").style.top = rs2y+118;
					rs2hold=0;				
				}		
			}
			
	</script>
		
		 
</body></html>

It seems to flicker a bit much.
I guess that's just because applets :\

karmik · Apr 2, 2015

Okay, so I've been working on it for a while now. If you're using chrome, I have it able to do this:

Code:

<html>
<head>

</head>
<body>
<div style="position:fixed; width:100%; height:100%; top:0;left:0; background-color:#000; z-index:2"></div>

<div id="master" style="position:absolute; top:-150; left:200;">


<div id="diva" style="position:relative; height:503;">
	<iframe id="rs1" onload="this.value=0"  rc="http://oldschool30.runescape.com/" scrolling="no" 
		style="position:relative; width:765;  height:668; border:0">
	</iframe>
</div>

<div id="divb"style="position:relative;height:503;">
	<iframe id="rs2" onload="this.value=0" src="http://oldschool30.runescape.com/" scrolling="no" 
		style="position:relative; width:765; height:668; border:0"
	></iframe>
</div>


	<div id="buttons" style="position:absolute; z-index:3; top:200; left:-200">
		<button 
		id="b1" 
		value= "1" 
		onclick="slide('rs1')" 
		style="position:absolute; z-index:3; top:0; left:60">	
			test		
		</button>
		
		<button 
		id="b2" 
		value= "2"
		onclick="slide('rs2')" 
		style="position:absolute; z-index:3; top:0; left:60">	
			test		
		</button>
		
	</div>
</div>



<script>



	var buttonA = document.getElementById("b1");
	var buttonB = document.getElementById("b2");
	var offset = 503-150;
	buttonA.style.top=((1*503)-offset);
	buttonB.style.top=((2*503)-offset);
	
	
	function setvalue(elem,set){
		elem.value=set;
	}
	function slide(elemname){
		var elem = document.getElementById(elemname);		
		if(elem.value=="0"){
		elem.value="1";
		elem.style.top="118";
		}else{
		elem.value="0";
		elem.style.top="0";
		}
		
		
		if(elemname=="rs1" && elem.value=="1"){
			document.getElementById("master").style.top="-128";
		}else if(elemname=="rs1" && elem.value=="0"){
			document.getElementById("master").style.top="-150";		
			}
	}


</script>

</body>
</html>

Virtual · Apr 2, 2015

Instead of using an iframe (for maximum customing) you can just post the java applet and make the jar reference to the original jar file. Don't forget to put all parameters as well

karmik · Apr 2, 2015

Virtual said:
Instead of using an iframe (for maximum customing) you can just post the java applet and make the jar reference to the original jar file. Don't forget to put all parameters as well

I have no idea how to actually do that

I've been trying to do that before I started using iframes.

anyway, I got this far:

I can put in as many applets as I want now, and use the tabs on the side to shift applets in place, up or down.

Code:

<html>
<head>

</head>
<body style="overflow:hidden">
<div style="position:fixed; width:100%; height:400%; top:0;left:0; background-color:#000; z-index:1"></div>

<div id="master" style="position:absolute; top:-160; left:200;">
	<div id="diva" style="position:relative; height:503;">
		<iframe id="rs1" onload="this.value=0"  src="http://oldschool30.runescape.com/" scrolling="no" 
			style="position:relative; width:765;  height:668; border:0">
		</iframe>
	</div>

	<div id="divb" style="position:relative;height:503;">
		<iframe id="rs2" onload="this.value=0" src="http://oldschool30.runescape.com/" scrolling="no" 
			style="position:relative; width:765; height:668; border:0"
		></iframe>	
	</div>
	<div id="buttons" style="position:absolute; z-index:3; top:200; left:-200">
		<button 
		id="b1" 
		value= "1" 
		onclick="slide('rs1','b1')" 
		style="position:absolute; z-index:3; top:0; left:60">	
			(MEMS)		
		</button>
		
		<button 
		id="b2" 
		value= "1"
		onclick="slide('rs2','b2')" 
		style="position:absolute; z-index:3; top:0; left:60">	
			(MEMS)		
		</button>		
	</div>
	
	
	<div id="above" style="position:fixed; top:250; left:980; 
		height:150; width:200; z-index:2; background-color: #843"
		onclick="moveup()">
	</div>

	<div id="below" style="position:fixed; top:512; left:980; 
		height:150; width:200; z-index:2; background-color: #843"
		onclick="movedown()">
	</div>
	
</div>

	<div id="side" style="position:fixed; top:0; left:1180; width:300; height:100%; z-index:3; background-color: #750"></div>

<script>
	var buttonA = document.getElementById("b1");
	var buttonB = document.getElementById("b2");
	var offset = 503-150;
	buttonA.style.top=((1*503)-offset);
	buttonB.style.top=((2*503)-offset);
	
	var masterxoffset = 0;	
	function setvalue(elem,set){
		elem.value=set;
	}
	function slide(elemname,bn){
		var elem = document.getElementById(elemname);		
		var but = document.getElementById(bn);
		if(elem.value=="0"){
		elem.value="1";
		elem.style.top="118";
		but.innerHTML="(LOGIN|F2P)"
		}else{
		elem.value="0";
		elem.style.top="0";
		but.innerHTML="(MEMS)"
		}	
		if(elemname=="rs1" && elem.value=="1"){
			document.getElementById("master").style.top=-128;
			document.getElementById("buttons").style.top=(200+118-150);
		}else if(elemname=="rs1" && elem.value=="0"){
			document.getElementById("master").style.top=-150;
			document.getElementById("buttons").style.top=(200+140-150);		
		}
	}
	
	function setmasterx(xoff){
		masterxoffset=xoff;
		mast = document.getElementById("master");
		var mtop = parseInt(mast.style.top);
		mast.style.top=mtop+xoff;
	}
	
</script>

<script>

var level = 1;



function moveup(){
	if(level == 1){
		
	}else{
		level=level-1;
		setmasterx(503);
	}
	
}

function movedown(){
	if(level == 2){
	
	}else{
		level=level+1;
		setmasterx(-503);
	}
}

	var px,py;
	var downy = 0;
	var mousedown=false;
	var elemside = document.getElementById("side");
	
	var downyb = 0;
	
	elemside.onmousemove= function(e){	
		e = e||window.event;
		
		if(mousedown){
			setmasterx(e.clientY-py);
		}
		
		px = e.clientX;
		py = e.clientY;
		


	};
	elemside.onmouseout= function(e){
		e= e||window.event;
		mousedown=false;
	}
	elemside.onmousedown= function(e){
		e= e||window.event;
		downy = e.clientY;
		downyb = 0;
		mousedown=true;
	}
	elemside.onmouseup= function(e){
		e= e||window.event;
		mousedown=false;
	}

	

</script>

</body>
</html>

If you showed me how to use the oldschool applet through an external html document, I'd really like that

html coding issue

More options

karmik

Newcomer

CompileTime

Professional desktop/web application developer.

karmik

Newcomer

karmik

Newcomer

Virtual

Guru

karmik

Newcomer

Similar threads