[Solved] Sending vars past iframes.

axeblade346 · June 22, 2012

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 June 23, 2012 by axeblade346

astralaaron · June 22, 2012

If you are using ajax why do you need iframes to make this work in the first place? couldn't you just load the content into the current page into <div>'s ? Then it might be easier to access the variables

axeblade346 · June 23, 2012

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>

Sign In

[Solved] Sending vars past iframes.

Recommended Posts

axeblade346

Link to comment

Share on other sites

astralaaron

Link to comment

Share on other sites

axeblade346

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity