Avatar billede mortvader Nybegynder
08. juli 2012 - 11:41 Der er 6 kommentarer og
1 løsning

Hjælp til Jquery .scrollTo

Hej!

Jeg kan ikke få Jquery.scrollTo til at virke.
Kan nogen hjælpe mig igang, vil jeg være meget taknemmelig!

Mit testscript følger i bunden.

Jeg har sat en div op, hvori jeg har placeret en række float:left div's ("sider") som jeg gerne vil scrolle imellem via den række links/menupunkter som jeg har placeret over container-div'en.
Indtil videre har jeg prøvet at implementere .scrollTo på det link der hedder "please go scrolling".

Men jeg magter det vist bare ikke. Mit javascript kendskab er vist for svagt. :P

Her kommer hele HTML dokumentet:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Include jQuery (ScrollTo Requirement) -->
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <!-- Include jQuery ScrollTo -->
    <script type="text/javascript" src="scripts/jquery.scrollto.min.js"></script>
   

<style>
#testjquery_test, #sagsstyring { height: 524px; margin: 0 auto; margin-top: 2px; clear: both }
#projekt_textbox { width: 740px; height: 474px; padding-top: 50px; float: left }
#slider { width: 740px; position: relative }
#subnavigation { width: 740px; height: 40px; font: normal 9pt "Calibri Bold", "Helvetica Neue", Helvetica, Verdana, sans-serif; position: relative; display: block }
li.subnav { float: left;padding-right:8px; }
li.topnav { float: right }
.scroll { height: 375px; width: 700px; overflow-x: hidden; border-style:solid; }
#scrollContainer { height: 375px; width: 4700px }
div.panel { height: 375px; width: 700px; float:left }

</style>

</head>
<body>

<div id="jquery_test">
    <div id="projekt_textbox">
    <a href="#projektoversigt" style='text-decoration:none;'>
    <h6>test</h6>
    </a>
        <div id="slider">
      <div id="subnavigation">
        <ul class="subnav">
                    <li class="subnav"><a href="#test_projektoversigt">Projektoversigt</a></li>
          <li class="subnav"><a onclick="$('#scrollContainer').scrollTo('#test_scrollhertil');" href="#">please go scrolling!</a></li>
          <li class="subnav"><a href="#test_kalender">Kalender</a></li>
          <li class="subnav"><a href="#test_projekt">Projekt</a></li>
          <li class="subnav"><a href="#test_medarbejder">Medarbejder</a></li>
          <li class="subnav"><a href="#test_teknik">teknik</a></li>
        </ul>
      </div>

      <div class="scroll">
        <div id="scrollContainer">
                    <div class="panel" id="test_projektoversigt">
                        <h7>Projektoversigt</h7>
                        <br/><br/>
                        <span class="projekttext">
            her står der noget et eller andet

                        </span>
                    </div>

          <div class="panel" id="test_scrollhertil">
            <h7>Medarbejderoversigt</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

          <div class="panel" id="test_kalender">
            <h7>Kalender</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

          <div class="panel" id="test_projekt">
            <h7>Projekt</h7>
            <br><br>
            <span class="projekttext">heja
            på daja<br><br>
            akakakak!

                        </span>
                    </div>

          <div class="panel" id="test_medarbejder">
            <h7>Medarbejder</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

                    <div class="panel" id="test_teknik">
                        <h7>Teknik</h7>
                        <br><br>
                        <span class="projekttext">Og man kan endda sætte billeder ind.. <br>hvis man vil

                        </span>
                    </div>
                </div>
            </div>
        </div>
    halløj
    </div>
</div>

</body>
</html>
Avatar billede DeeDawg Nybegynder
08. juli 2012 - 12:57 #1
Jeg ser umiddelbart 2 problemer.

Først og fremmest, så skal du være sikker på at sidens DOM er fuldt loadet, før du prøver at manipulere elementer med jQuery. Dette kan gøres på 3 måder, men rent teknisk er de identiske:

$(document).ready(function(){
    // Din jQuery-kode her
});

$(function(){
    // Din jQuery-kode her
});

jQuery(document).ready(function($){
    // Din jQuery-kode her
});

Den sidste bruges kun hvis du også benytter andre frameworks end jQuery, for at undgå konflikter.

For det andet, benytter du vist ikke helt scrollTo() korrekt. Se her, og kig nærmere på jQuery object under Ways to specify the target.

Så hvis du tilføjer et ID til dit link, kunne din kode se således ud:

<script type="text/javascript">
    $(function(){
        $("#link").click(function(){
            $("#scrollContainer").scrollTo($("#test_scrollhertil"), 800);
        });
    });
</script>

Bemærk! - Denne blok skal placeres i <head>.


Derudover bør du nok overveje at skifte til UTF-8 istedet for ISO-8859-1. :)
Avatar billede mortvader Nybegynder
08. juli 2012 - 13:54 #2
Tak for dit svar DeeDawg!

Jeg har kigget rigtigt meget på den demoside, og må desværre erkende at jeg bare ikke fatter hvordan jeg skal få det til at fungere.

Jeg har prøvet at implementere det du skriver med ID på linket. Forstår jeg det du skriver korrekt?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Include jQuery (ScrollTo Requirement) -->
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <!-- Include jQuery ScrollTo -->
    <script type="text/javascript" src="scripts/jquery.scrollto.min.js"></script>
   

<style>
#testjquery_test, #sagsstyring { height: 524px; margin: 0 auto; margin-top: 2px; clear: both }
#projekt_textbox { width: 740px; height: 474px; padding-top: 50px; float: left }
#slider { width: 740px; position: relative }
#subnavigation { width: 740px; height: 40px; font: normal 9pt "Calibri Bold", "Helvetica Neue", Helvetica, Verdana, sans-serif; position: relative; display: block }
li.subnav { float: left;padding-right:8px; }
li.topnav { float: right }
.scroll { height: 375px; width: 700px; overflow-x: hidden; border-style:solid; }
#scrollContainer { height: 375px; width: 4700px }
div.panel { height: 375px; width: 700px; float:left }

</style>

<script>
<script type="text/javascript">
    $(function(){
            $("#link").click(function(){
            $("#scrollContainer").scrollTo($("#test_scrollhertil"), 800);
        });
    });
</script>
</script>

</head>
<body>

<div id="jquery_test">
    <div id="projekt_textbox">
    <a href="#projektoversigt" style='text-decoration:none;'>
    <h6>test</h6>
    </a>
        <div id="slider">
      <div id="subnavigation">
        <ul class="subnav">
                    <li class="subnav"><a href="#test_projektoversigt">Projektoversigt</a></li>
          <li class="subnav"><a id="link" href="#">please go scrolling!</a></li>
          <li class="subnav"><a href="#test_kalender">Kalender</a></li>
          <li class="subnav"><a href="#test_projekt">Projekt</a></li>
          <li class="subnav"><a href="#test_medarbejder">Medarbejder</a></li>
          <li class="subnav"><a href="#test_teknik">teknik</a></li>
        </ul>
      </div>

      <div class="scroll">
        <div id="scrollContainer">
                    <div class="panel" id="test_projektoversigt">
                        <h7>Projektoversigt</h7>
                        <br/><br/>
                        <span class="projekttext">
            her står der noget et eller andet

                        </span>
                    </div>

          <div class="panel" id="test_scrollhertil">
            <h7>Medarbejderoversigt</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

          <div class="panel" id="test_kalender">
            <h7>Kalender</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

          <div class="panel" id="test_projekt">
            <h7>Projekt</h7>
            <br><br>
            <span class="projekttext">heja
            på daja<br><br>
            akakakak!

                        </span>
                    </div>

          <div class="panel" id="test_medarbejder">
            <h7>Medarbejder</h7>
            <br><br>
            <span class="projekttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </span>
                    </div>

                    <div class="panel" id="test_teknik">
                        <h7>Teknik</h7>
                        <br><br>
                        <span class="projekttext">Og man kan endda sætte billeder ind.. <br>hvis man vil

                        </span>
                    </div>
                </div>
            </div>
        </div>
    halløj
    </div>
</div>

</body>
</html>
Avatar billede DeeDawg Nybegynder
09. juli 2012 - 04:44 #3
Jeg har oprettet en mere simpel udgave af din side, for at vise dig hvordan. :)

http://pastebin.com/FS6DJ8sY
Avatar billede mortvader Nybegynder
09. juli 2012 - 12:01 #4
Hold kæft det er sweet! :D

Tak for hjælpen!
Det virker bare konge!

Hvis man måtte, smed jeg 1000 points oven i de 200.
Stor hjælp!

Tak tak tak :)
Avatar billede DeeDawg Nybegynder
09. juli 2012 - 12:22 #5
Det var da så lidt, og de 200 point er mere end nok. Det vigtigste for mig er at du med min hjælp har fundet løsningen på dit problem. :)
Avatar billede mortvader Nybegynder
09. juli 2012 - 12:34 #6
Nu fandt jeg lige på et ekstraspørgsmål:

Jeg vil gerne have de scriptfiler ned og køre lokalt fra min egen webserver. Så jeg har prøvet at hente js filerne direkte fra adresserne du har angivet, og selvf. ændre referencerne til dem. Men så virker det ikke.
Nu er det selvfølgelig ikke død og pine, men hvis du ved hvordan jeg kan køre det lokalt, kunne det bare være top dollar :D


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
Avatar billede mortvader Nybegynder
09. juli 2012 - 12:37 #7
Hov, det var en fejl i filnavnet.. Sorry, glem det sidste!

Det spiller bare max.

igen, 1000 tak for hjælpen! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester