What's new
By:
Filters
ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

JQuery help for web design



Jon.G

Jon.G

]So im basically using a link, to scroll through a series of divs to select the correct one.
Ie click on happy, and scrolls to 'happy' div,

However, the scroll seems to not go to what its linked to, but scrolls to the third div in the list.

Heres the code:
HTML: 
<div id="portfoliowrapper">
      <div id="row1"><a id="kazooki" href="#">Kazooki</a></div>
      <div id="row1"><a id="UoD" href="#">Universe of Downhill</a></div>
      <div id="row1"><a id="kudia" href="#">Kudia</a></div>
</div>

<div id="description">
      <div id="top">description</div>
      <div id="kazooki">kazooki</div>
      <div id="UoD">Universe of Downhill</div>
      <div id="kudia">kudia</div>
</div>

<script type="text/jscript">
 function goToByScroll(id){
 $("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
 }
 
 $("#row1 > a").click(function(e) { 
   // Prevent a page reload when a link is pressed
 e.preventDefault(); 
   // Call the scroll function
 goToByScroll($(this).attr("id"));           
 });
 </script>
 
Last edited:
Dm_26

Dm_26

use <div class=""> for the main divs and <div id=""> for the rows etc

should .offset not be .focus() aswell?
 
Last edited:
Jon.G

Jon.G

solved, without jquery.

HTML: 
<div id="row1"><a href="#kazooki">Kazooki</a></div>

Technically yes thats what i was doing, but turns out jquery isn't needed.
 
Dm_26

Dm_26

Found another way aswell....use the code you have for the goToByScroll and for the links use

<a href="javascript:void(0)" onClick="goToByScroll('ID_YOU_WANT_TO_GO_TO')">
 
Jon.G

Jon.G

Dm_26 said:
Found another way aswell....use the code you have for the goToByScroll and for the links use

<a href="javascript:void(0)" onClick="goToByScroll('ID_YOU_WANT_TO_GO_TO')">
Click to expand...

cant get that way working.

Just noticed as well, that using the href="#divname" method, the div just "appears" there is no smooth scrolling that jquery presents :(
 
Dm_26

Dm_26

Apparently it doesn't work in IE

this is the full code for the page I found, it scrolls slowly down to it (I'm using firefox)

Code: 
<html>
    <head>
        <script type="text/javascript" src="[URL="http://www.cliosport.net/forum/view-source:http://djpate.com/portfolio/scrollTop/jquery.js"]jquery.js[/URL]"></script>
        <script>
        function goToByScroll(id){
                 $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        }
        </script>
    </head>
    <body>
    <ul>
        <li><a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Go to anchor 3</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('4')">Go to anchor 4</a></li>
    </ul>
    <div style="width:600px">
        <div id="1">
        <h1>1</h1>
        Div 1
        </div>
        <div id="2">
        <h1>2</h1>
                Div 2
        </div>
        <div id="3">
        <h1>3</h1>
        Div 3
        </div>
        <div id="4">
        <h1>4</h1>
        Div 4
        </div>
    </div>
    </body>
</html>
Make sure you've imported the jQuery.js file though http://djpate.com/portfolio/scrollTop/jquery.js
 
Jon.G

Jon.G

forgot to change javascript type.

Im using chrome for now, and still not working perfectly. Seems to scroll (with effect) to the top of the last div, no matter what div is used.
 
Dm_26

Dm_26

Have you tried

Code: 
<div id="portfoliowrapper">
      <div id="row1"><a href="javascript:void(0)" onClick="goToByScroll('kazooki')">Kazooki</a></div>
      <div id="row1"><a href="javascript:void(0)" onClick="goToByScroll('UoD')">Universe of Downhill</a></div>
      <div id="row1"><a href="javascript:void(0)" onClick="goToByScroll('kudia')">Kudia</a></div>
</div>

<div id="description">
      <div id="top">description</div>
      <div id="kazooki">kazooki</div>
      <div id="UoD">Universe of Downhill</div>
      <div id="kudia">kudia</div>
</div>

<script type="text/jscript">
 function goToByScroll(id){
 $("html,body").animate({scrollTop: $("#"+id).offset().top},'slow');
 }
</script>

I changed the links and the start of the gotobyscroll function to "html,body" instead of "#Description"
 
Jon.G

Jon.G

No doesnt look like thats working at all now.

From what I understand using "html,body" will scroll the whole page to that selected div, which is not what I want.
Using "#description" will only scroll the contents inside that div to the required div.
 
Jon.G

Jon.G

No doesnt look like thats working at all now.

From what I understand using "html,body" will scroll the whole page to that selected div, which is not what I want.
Using "#description" will only scroll the contents inside that div to the required div.
 
You must log in or register to reply here.

Similar threads

Chapster5
JQuery driving me insane...
Replies
24
Views
2K
Chapster5
Chapster5
mas
Need some jQuery/website help. Im stuck.
Replies
2
Views
524
mas
mas


Top