Jump to content

[Solved] Sending vars past iframes.


axeblade346
 Share

Recommended Posts

Good day all. I am busy making a webpage for a game I play and need some help as I am fairly new to JS.The basic idea is a searchable list on the left and when you click on the towns name it must display its location on the map on the right.The list.html contains the vars I need to place and Image overlay over the map but I don`t know how to pass/call it from the map.html(something tells me this is gonna be HTMLDOM and JS)All the images are hosted on separate servers and the Recent Map.png gets updated a lot by a community member.Thus feel free to copy and paste the code to check out how it looks. The Iframe--btw. Why does it throw the map frame below the listl frame when the map frame is at 90% (total being 100%)?

<html>  <iframe src="List.html" width=10% height=100% frameborder=0></iframe>  <iframe src="Map.html" Name="MapFrame" width=89% height=100% frameborder=0></iframe></html>

The List.html--The Ajax coding for the search list is from another tutorial site-- There is a few normal links I used for testing.-- The vars I need passed is xt and yl and they pop up in a alert atm.

<html><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script>(function ($) {  // custom css expression for a case-insensitive contains()  jQuery.expr[':'].Contains = function(a,i,m){	  return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;  };  function listFilter(header, list) { // header is any element, list is an unordered list	// create and add the filter form to the header	var form = $("<form>").attr({"class":"filterform","action":"#"}),		input = $("<input>").attr({"class":"filterinput","type":"text"});	$(form).append(input).appendTo(header);	$(input)	  .change( function () {		var filter = $(this).val();		if(filter) {		  // this finds all links in a list that contain the input,		  // and hide the ones not containing the input while showing the ones that do		  $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();		  $(list).find("a:Contains(" + filter + ")").parent().slideDown();		} else {		  $(list).find("li").slideDown();		}		return false;	  })	.keyup( function () {		// fire the above change event after every letter		$(this).change();	});  }  //ondomready  $(function () {	listFilter($("#header"), $("#list"));  });}(jQuery));  </script>   <script language="JavaScript"><!--function XY(x,y){var xt=((x-1)*41)+206var yl=((y-1)*41)+195alert ("Xtop=" + xt + ", Xleft=" + yl);}// --></script><body>  <h1 id="header">Search:</h1>  <i>Enter your towns name and Click on name for Map</i>  <h2>List of Towns:</h2>  <ul id="list"><li><a href="1x1y.html") target="MapFrame">1x1y Test opens page</a></li><li><a href="javascript:XY(1,1)" target="MapFrame">1x1y Test with alert</a></li><li><a href="1x2y.html") target="MapFrame">1x2y Test opens page</a></li><li><a href="javascript:XY(1,2)" target="MapFrame">1x2y Test with pass</a></li><li><a href="1x3y.html") target="MapFrame">1x3y Test opens page</a></li><li><a href="1x4y.html") target="MapFrame">1x4y Test opens page</a></li><li><a href="2x1y.html") target="MapFrame">2x1y Test opens page</a></li></ul></div></body></html>

The map.html--Current values are for 5x7y--I need the xt to set x.style.top and the yl to set y.style.left

<style>#map {	position:absolute;	top:0;	left:0;	z-index:0;}#x {	position:absolute;	top:206; /*This Changes - Thus top=((x-1)*41)+206*/	left:195;	z-index:1;}#y {	position:absolute;	top:206;	left:195; /*This Changes - Thus left=((y-1)*41)+195*/	z-index:2;}</style><body><img id="map" src="http://minersahoy.com/Wurm%20Maps/Recent%20Map.png" width="2240" height="2240"><img id="x" src="http://i260.photobucket.com/albums/ii34/axe346/Wurm/Map/Markx.png" width="2045" height="42" ><img id="y" src="http://i260.photobucket.com/albums/ii34/axe346/Wurm/Map/Marky.png" width="42" height="2045">  </body><script>  x.style.top=((5-1)*41)+206  y.style.left=((7-1)*41)+195</script>  </html>

Thus

<script>  x.style.top=((5-1)*41)+206  y.style.left=((7-1)*41)+195</script>

needs to be more like

<script>  x.style.top=xt  y.style.left=yl</script>

any help would be appreciated.

Edited by axeblade346
Link to comment
Share on other sites

Lols , I didn`t even needs <Div>s expect for Long town names that got cut of.Code now is.

<html><style>#map {    position:absolute;    top:0;    left:300;    z-index:0;}#xo {    position:absolute;    top:206;    left:495;    z-index:1;}#yo {    position:absolute;    top:206;    left:495;    z-index:2;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script>(function ($) {  // custom css expression for a case-insensitive contains()  jQuery.expr[':'].Contains = function(a,i,m){	  return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;  };  function listFilter(header, list) { // header is any element, list is an unordered list    // create and add the filter form to the header    var form = $("<form>").attr({"class":"filterform","action":"#"}),	    input = $("<input>").attr({"class":"filterinput","type":"text"});    $(form).append(input).appendTo(header);    $(input)	  .change( function () {	    var filter = $(this).val();	    if(filter) {		  // this finds all links in a list that contain the input,		  // and hide the ones not containing the input while showing the ones that do		  $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();		  $(list).find("a:Contains(" + filter + ")").parent().slideDown();	    } else {		  $(list).find("li").slideDown();	    }	    return false;	  })    .keyup( function () {	    // fire the above change event after every letter	    $(this).change();    });  }  //ondomready  $(function () {    listFilter($("#header"), $("#list"));  });}(jQuery));</script><script><!--function XY(y,x){var xt=((x-1)*41)+206var yl=((y-1)*41)+495xo.style.top=xtyo.style.left=yl}// --></script><body><div style="width:295px;float:left;">  <h1 id="header">Search:</h1>  <i>Enter your towns name and Click on name for Map</i>  <h2>List of Towns:</h2>  <ul id="list"><!--<li><a href="javascript:XY(10,15)">10x15y Base</a></li>--><li><a href="javascript:XY(16,27)">Greendog 16x27y</a></li><li><a href="javascript:XY(11,4)">Conway Harbour 11x4y</a></li><li><a href="javascript:XY(13,4)">Dragons Lair 13x4y</a></li><li><a href="javascript:XY(18,3)">Anachronism 18x3y</a></li><li><a href="javascript:XY(21,4)">The Wispering Wood 21x4y</a></li><li><a href="javascript:XY(23,4)">T.H. Deliverance Outpost 23x4y</a></li><li><a href="javascript:XY(24,4)">Cazic Farms 24x4y</a></li><li><a href="javascript:XY(25,4)">Cazic Harbour 25x4y</a></li><li><a href="javascript:XY(24,5)">Cazic Thule 24x5y</a></li><li><a href="javascript:XY(46,19)">Sloppy Hollows Trading Post 46x18y</a></li></ul></div><div><img id="map" src="http://minersahoy.com/Wurm%20Maps/Recent%20Map.png" width="2240" height="2240"><img id="xo" src="http://i260.photobucket.com/albums/ii34/axe346/Wurm/Map/Markx.png" width="2045" height="42" ><img id="yo" src="http://i260.photobucket.com/albums/ii34/axe346/Wurm/Map/Marky.png" width="42" height="2045"></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...