Jump to content

axeblade346

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

About axeblade346

  • Birthday 11/03/1985

Previous Fields

  • Languages
    html

Profile Information

  • Location
    South Africa

axeblade346's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. axeblade346
    Hiya. I have a Website where I need to center the View on a area of an image (Pixels coordinates must be in the center)http://wurmmapsearch...et/DeliMap.html Current coding is [/font]<script><!--function XY(y,x){var xt=((x-1)*41)+206;var yl=((y-1)*41)+545;xo.style.top=xt;yo.style.left=yl;ov.style.top=xt;ov.style.left=yl;window.scrollTo(yl-300,xt-300);}// -->[/font][font=times new roman,times,serif]</script> Note that the +206 and +545 for xt and yl is for the 1x1y coordinates of the map. I tried window.outerWidth window.outerHeight but the don`t give me the effect I want if I get to close to the Edges of the page. (Does the Page need to made larger for it to work 100%?) Current Best I can get is http://i260.photobuc...p/MapCentre.png
  2. axeblade346
    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>
  3. axeblade346
    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.
×
×
  • Create New...