Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Image change scroll page to top

    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-s...test-hrvatski#
    Code:
      <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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    you can try taking the # out of your href and adding a return false to your onclick:

    Code:
     <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>

  • Users who have thanked xelawho for this post:

    Regoch (01-15-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

    Code:
    <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.

    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>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I try with this
    Code:
    <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.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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:

    Code:
    <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?

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I try with that your code but nothing happens, so I try to do this
    Code:
    	<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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •