Hey all
Im having a problem... Ok, this is the situation...
I have a small product image, on which ive floated a div over it, and
defined it as draggable. Now, this works, and i can drag it around no
problem. great. but then, what i want to do is, based on the location of
that dragable element from the top and the left, to move (using the
Effect.MoveBy method) a larger image - so effective its a detail viewer.
But, ive come into problems. I can get the logic to work out exactly
where the box is, but when i go to movve it, it works perfectly on the
first go, but on subsequent moves it goes the wrong way?!
My javascipt is...
var oiX = 0;
var oiY = 0;
function setOldVars(){
oiX = $(''squ'').style.top;
oiY = $(''squ'').style.left;
iX = oiX.replace(''px'', '''');
iY = oiY.replace(''px'', '''');
//$(''ggggg'').innerHTML = ''X:
''+iX+'' Y: ''+iY;
}
function moveProductImage(x, y, prod){
var nX = x.replace(''px'', '''');
var nY = y.replace(''px'', '''');
//var nxpos=0, nypos=0;
if(nY < iY){
nypos = nY - iY;
// 25 -
} else if(nY > iY){
nypos = iY - nY;
}
if(nX < iX){
nxpos = nX - iX;
} else if(nX > iX){
nxpos = iX - nX;
}
new Effect.MoveBy(prod, (nxpos*2.5), (nypos*2.5));
//new Effect.Move (prod,{ x: 10, y: 10, mode: ''absolute''});
//$(''squ'').style.top = nX+''px'';
//$(''squ'').style.left = nY+''px'';
//$(''ggggg'').innerHTML = ''iX:
''+iX+'' iY: ''+iY+'' nX:
''+nX+'' nY: ''+nY+''
nypos:''+nypos+'' nxpos:''+nxpos;
}
and my HTML is...
<div id="shoppcon">
<p>| <%=link_to(''Add to basket'', :action =>
''addtobasket'', :id =>
params[:id])%> |
<%=link_to(''Checkout'', :action =>
''checkout'')%> |</p>
</div>
<div id="small" style="background-image:
url(<%=url_for(:controller
=> ''shop'', :action => ''thumb'', :id
=> params[:id] + ''.jpg'')%>);">
<div id="squ" onmouseover="new
Draggable(''squ''); setOldVars(); "
onclick="moveProductImage($(this).style.top, $(this).style.left,
''productlarge'');" ></div>
</div>
<div id="inspector">
<div id="enlargement">
<%=image_tag(url_for(:controller => ''shop'',
:action => ''image'',
:id => params[:id] + ''.jpg''), { :id =>
''productlarge'' })%>
</div>
<div id="specs">
<p>Large view open</p>
</div>
<div class="tab" id="v"><a
href="javascript:void(0);"
onclick="setProductTab(''enlargement'');">Detail</a></div>
<div class="tpsx"></div>
<div class="tab" id="tc"><a
href="javascript:void(0);"
onclick="large(''/shop/image/<%=params[:id]%>.jpg'');
setProductTab(''specs'');">Large</a></div>
</div>
</div>
If anyone has any ideas at all that would be great... im sure its a
math related problem but i just cant see it!!
Many thanks
Tim Perrett
--
Posted via http://www.ruby-forum.com/.