...

View Full Version : Image change scroll page to top



Regoch
01-15-2012, 07:06 PM
Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample:
http://www.galerija-galiotovic.kus-sinj.hr/hr/fotogalerija/3/test-hrvatski#
<table id="Table_galerija">

<tr>
<td style="width:520px;height:445px;vertical-align:top;padding:20px;">
<h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
<div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
<td>

<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>

<div style="height:14px;"></div>
<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
</tr>
</table>

xelawho
01-15-2012, 08:40 PM
you can try taking the # out of your href and adding a return false to your onclick:



<div class="slikica"><a href="" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'; return false"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>

Regoch
01-15-2012, 09:18 PM
That works but I didn't realis that I have same problem with my move thiumbnails up and down script, i try remoce # from href and put "; return false" but only get page to refresh!


<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a>

here is up/down code.


<script type="text/javascript">
if (iens6){
var crossobj=document.getElementById? document.getElementById("galerija_male") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

xelawho
01-15-2012, 09:36 PM
wow. code for in case people are using netscape 4... you're not taking any chances, are you? ;)

can you post the code where you added the return false, with how you added it?

Regoch
01-15-2012, 09:41 PM
I try with this

<div id="gori"><a href="" onmousedown="moveup(); return false" onmouseup="clearTimeout(moveupvar); return false"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="" onmousedown="movedown(); return false" onmouseup="clearTimeout(movedownvar); return false"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div>
but only get page to reload.

xelawho
01-15-2012, 10:48 PM
works for me in basic testing, but maybe there is something else going on.

I'm a little confused by your code - the first mousedown calls the moveup function which sets the moveupvar timeout, and the mouseup on the same link (which might happen 1 millisecond later, if it is a normal click) clears that timeout.

am I confused or does that seem weird?

but if that is the way you want it, why not just call the function with an onclick and clear the timeout within the function:



<div id="gori"><a href="" onclick="moveup(); return false"><img src="me.jpg" width="119" height="23" alt="Top Sport" /></a></div></div>
<div id="doli"><a href="" onclick="movedown(); return false"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div>

function movedown(){
clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout(movedown,20)
}

function moveup(){
clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout(moveup,20)
}


or am I missing something?

Regoch
01-16-2012, 08:54 AM
I try with that your code but nothing happens, so I try to do this
<div id="gori"><a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div>
onMouseover and work fine with no scroll to top of page. I think I leave this way, already waste to much time on that. Thanks for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum