Avatar billede mcclaud Nybegynder
20. september 2011 - 22:28 Der er 10 kommentarer og
1 løsning

Smooth scrolling i accordion-menu

Hej alle eksperter

Jeg arbejder lidt på at integrerere en blød vertikal side scrolling og en accordion-menu. Begge dele virker glimrende hver for sig. Desværre virker de ikke sammen.

Når man klikker på et af de tre første undermenu-punkter i accordion-menuen til venstre (Galleri / Showroom / Nyheder), så kommer man frem til de rigtige sider. Desværre sker det ikke med smooth scrolling. Er det muligt?

Se siden her: http://www.halfmen.dk/!TEST!/test.htm

:o) mcclaud
Avatar billede majbom Novice
21. september 2011 - 07:53 #1
det er fordi du har din menu i en iframe. når du klikker på menuen på selve siden, bliver man på samme side - når du klikker i menuen skifter den side.
Avatar billede mcclaud Nybegynder
21. september 2011 - 18:14 #2
Jeg har nu lagt menuen ind på selve siden.

Accordion-menuen i venstre side er hele tiden foldet ud. De tre første undermenuer (Galleri / Showroom / Nyheder) virker - men uden smooth scrolling. Klikker man på linkene midt på siden (Klik for scroll til niveau ?) scroller siden rigtig fint.

Har nogen et forslag til at få integreret smooth scroll i accordion-menuen samtidig med, at den kommer til at virke som netop accordion-menu?

Se siden her: http://www.halfmen.dk/!TEST!/test.htm

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
23. september 2011 - 14:33 #3
filen jquery.scrolling.js, er den fil der normalt hedder jquery.min.js går også under navnet jquery-latest.min.js (jquery run time file)
filen skal loades før du loader andet jquery script

hvad er det du godt kan lide ved jquery.easing.js ??, jeg ville droppe den
jeg ville tage udgangs punkt i denne http://css-tricks.com/snippets/jquery/smooth-scrolling/
og rydde op i dine css filer, du har overflødige egenskaber, og du ændre det sammen i flere filer :(, eks html ændres i style.accordion.css og style.main.css

ref http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
bemærk accordion.js er forældet og nu en del af UI, (advarsel UI fylder lige 200K og ligger her http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js ), dertil skal du så også lige ligge themes
ny link http://docs.jquery.com/UI/Accordion

jeg har lavet en lille demo du kan lade din inspirer af, baseret på den Accordion du anvender og http://css-tricks.com/snippets/jquery/smooth-scrolling/
coden til smooth-scrolling har jeg lagt ud i en seperat fil, for at holde min html fil så ren som muligt
demo: http://olsensweb.dk/test/experten/spm/947695/ronols/

nb: det glæder mig du er gået væk fra tabel design :)
Avatar billede olsensweb.dk Ekspert
23. september 2011 - 22:45 #4
den jquery.accordion.js du anvender ligger her dezinerfolio.com, men den officielle og sidste før det blev ui ligger her http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ de 2 er ikke ens
du bør nok lave din menu om så den er baseret på den rigtige.
Avatar billede mcclaud Nybegynder
24. september 2011 - 00:07 #5
Hej ronols

Tak for dine input... Jeg har dog helt opgivet acordion-menuen for i stedet for at satse på en simpel topmenu.

Du kan se siden her: http://www.halfmen.dk/!TEST!/test.htm

Jeg oplever dog nogle små problemer:

1. Jeg vil gerne af med <ul> tagget og i stedet bruge et <div> tag, men jeg kan ikke f¨det til at fungere

2. Scriptet med smooth-scroll virker ikke i Firefox

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
24. september 2011 - 17:19 #6
>Jeg har dog helt opgivet acordion-menuen for i stedet for at satse på en simpel topmenu.
fornuftig beslutning, men desværrer er du gået tilbage til tabel design :(, der ligger en helt fornuftig topmenu her http://www.w3schools.com/css/css_navbar.asp

>1. Jeg vil gerne af med <ul> tagget og i stedet bruge et <div> tag, men jeg kan ikke f¨det til at fungere
koncetrer der heller om at komme af med tabellen

>Scriptet med smooth-scroll virker ikke i Firefox
hvis du mener mit script ikke hopper som en hoppebold, så nej gu-ske-lov, det ser da ud af H til IMHO

jeg har valgt at bruge den originale jquery.easing.1.3.js, frem for den du anvender, eneste forskel er i den originale er der licens info i (TERMS OF USE - jQuery Easing Open source under the BSD License. )

aninmerings functionen ligger 2 steder, den ene påvirker nav1 som class, (de link nede i teksten), og den anden påvirker nav som id (de link i menuen)
ny demo http://olsensweb.dk/test/experten/spm/947695/2011-09-24/
Avatar billede mcclaud Nybegynder
24. september 2011 - 21:44 #7
Hej ronols

Mange tak for hjælpen... Jeg har nu fået det til at virke, så det er bare alle tiders. Jeg har desuden downloadet den originale jquery.easing.1.3.js med licens info.

Mange tak for hjælpen - endnu engang. Hvis du sender et svar, så er der points på vej.

Ps: Jeg er igen gået væk fra tabelbaseret design i menuen. :o)

Endnu engang mange tak.

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
24. september 2011 - 22:36 #8
selv tak

>Ps: Jeg er igen gået væk fra tabelbaseret design i menuen. :o)
godt, så skal resten af siderne også følge med, så du kun bruger tabeller til tabulære data, men det må komme næste gang du redesigner siderne.
Avatar billede mcclaud Nybegynder
24. september 2011 - 22:46 #9
Jeg skal prøve at huske det...  :o)
Avatar billede olsensweb.dk Ekspert
25. september 2011 - 19:50 #10
tfp

jeg sad lige og legede lidt http://bassistance.de/jquery-plugins/jquery-plugin-accordion/,
nærmere bestemt http://jquery.bassistance.de/accordion/demo/

jQuery('#list3').accordion({
    header: 'div.title',
    active: false,
    alwaysOpen: false,
    animated: false,
    autoheight: false
});

og lavede om på min tidligere vertion så menuen nu anvender accordion
ny vertion http://olsensweb.dk/test/experten/spm/947695/2011-09-25/
Avatar billede mcclaud Nybegynder
25. september 2011 - 22:41 #11
Ikke dårligt...  :o)
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