[OPGELOST] jQuery Scrollable voor content

frankmanl · Post by **frankmanl** » Thu Jan 19, 2012 5:01 pm

Heeft iemand wel eens de jQuery Scrollable plugin gebruikt in de {content}-tag?
Ik bedoel deze:
http://flowplayer.org/tools/demos/scrol ... -sized.htm
Ik krijg hem niet aan de praat, de knoppen prev en next onderin doen het niet.

Frank

Rolf · Post by **Rolf** » Thu Jan 19, 2012 5:34 pm

Hoi Frank

heb je een linkje naar de site?
kunnen we even meekijken.

grt. Rolf

frankmanl · Post by **frankmanl** » Fri Jan 20, 2012 3:40 am

Hoi Rolf,
Zie http://www.wilbertvandersteen.nl/cmsms/scrollable.
Ik heb de source gebruikt van http://flowplayer.org/tools/demos/scrol ... -sized.htm, een werkende pagina .
De inhoud van de body heb ik geplakt in mijn {content}-veld.
De css roep ik aan middels een HTML-blok, dat ik aanroep via Pagina specifieke metadata.
Verder is het nog goed te weten dat het sjabloon dat ik gebruik altijd de jQuery-code aanroept, en bovendien een aantal scripts die nodig zijn voor de jQuery scrollbar (zie bijv. http://www.wilbertvandersteen.nl/cmsms/ ... -rode-wijn).

Frank

Rolf · Post by **Rolf** » Fri Jan 20, 2012 9:24 am

Op het eerste oog zie ik zo niets bijzonders...

Ik zou eens beginnen de Gallery slider uit te schakelen.
Vaak is er een conflict tussen jQuery aanroepen. Als er alleen maar zaken van de Scrollable op de pagina staan dan weet je dat dit niet het geval is. Dan even verder kijken...

Rolf

frankmanl · Post by **frankmanl** » Fri Jan 20, 2012 10:09 am

Ik heb nu zowel de Gallery eruitgehaald, als de scrollbar aan rechterzijde.
Wel staat nog de aanroep naar jQuery erin.
Het werkt nog steeds niet ...

stv · Post by **stv** » Fri Jan 20, 2012 1:22 pm

Waarschijnlijk heeft dit te maken met de "base href" in je head. Op het moment dat je op de link klikt voegt javascript een extentie toe aan de url. Door de base href wordt deze pagina geladen. Om dit te voorkomen moet je even dit toevoegen aan je .js file na je jquery.

Code: Select all

$(document).ready(function(){
 $("a[href^='\#']").click(function(e){
		e.preventDefault();
		document.location.hash=this.href.substr(this.href.indexOf('#')+1);
	});
});

frankmanl · Post by **frankmanl** » Fri Jan 20, 2012 1:32 pm

stv wrote:Om dit te voorkomen moet je even dit toevoegen aan je .js file na je jquery.

Dit snap ik niet - waar, in welke file zou dat moeten? En moet dat dan nog op een bepaalde plek in die file?

stv · Post by **stv** » Fri Jan 20, 2012 1:40 pm

Hoe ik meestal werk:

<head>
<__script__ type="text/javascript" src="js/jquery.min.js"></__script>
<__script__ type="text/javascript" src="js/library.js"></__script>
<__script__ type="text/javascript" src="js/functions.js"></__script>
</head>

Eerst je jquery. Daarna je library waar je al je files plaatst zoals je flowplayer scrollable. In je functions kan je bijv mij script in zetten en het stukje script welke jouw scrollable activeert:

Code: Select all

// wait until document is fully scriptable
$(function() {

	// select #flowplanes and make it scrollable. use circular and navigator plugins
	$("#flowpanes").scrollable({ circular: true, mousewheel: true }).navigator({

		// select #flowtabs to be used as navigator
		navi: "#flowtabs",

		// select A tags inside the navigator to work as items (not direct children)
		naviItem: 'a',

		// assign "current" class name for the active A tag inside navigator
		activeClass: 'current',

		// make browser's back button work
		history: true

	});
});
</__script>

stv · Post by **stv** » Fri Jan 20, 2012 2:00 pm

bij het nader bekijken van je code mis je iets essentieels.

a. Je Jquery is aanwezig. Maar je plugin bestand ontbreekt. Ga naar http://flowplayer.org/tools/download/index.html en vink version 1.2.6 stable aan. De rest kan uit behalve UI Tools --> Scrollable en de onderliggende. Download het bestand en kopieer de inhoud van dit bestand naar je library.js bestand.
b. Je functies (om je flowplayer scrollable te activeren) staat nu onder aan de pagina. Verwijder dit en stop het lekker in je functions.js. Voeg deze code toe aan je functions.js plus mijn bovenstaande code (je javascript hoort in je head als het kan):

Code: Select all

$(function() {

	// select #flowplanes and make it scrollable. use circular and navigator plugins
	$("#flowpanes").scrollable({ circular: true, mousewheel: true }).navigator({

		// select #flowtabs to be used as navigator
		navi: "#flowtabs",

		// select A tags inside the navigator to work as items (not direct children)
		naviItem: 'a',

		// assign "current" class name for the active A tag inside navigator
		activeClass: 'current',

		// make browser's back button work
		history: true

	});
});

$(document).ready(function(){
$("a[href^='\#']").click(function(e){
      e.preventDefault();
      document.location.hash=this.href.substr(this.href.indexOf('#')+1);
   });
});

Volgens mij ben je dan al een heel eind om dit werkende te krijgen. Probeer het even en laat me het weten.

frankmanl · Post by **frankmanl** » Fri Jan 20, 2012 2:04 pm

Terwijl je dit schrijft ontdek ik net die ontbrekende call. Oh, dit is echt te erg voor woorden!
Bij het copy&paste-en is de call naar de library niet meegekomen!!

Ik heb het nu voor elkaar.
Dank voor de hulp,

F.

frankmanl · Post by **frankmanl** » Sat Jan 21, 2012 4:11 am

Hier nog even beschrijving van hoe ik het nu heb gedaan.

opslaan van jQuery code
Ik heb de map uploads/scripts/jQuery aangemaakt, waarin alle jQuery code wordt opgeslagen.
De kerncode van jQuery (jquery-1.7.1.min.js) staat hier, voor iedere jQuery-toepassing maak ik een submap aan waarin alle code van die toepassing wordt opgeslagen. Voor scrollable betreft dat het bestand jquery.tools.min.js.
Bij het bovenbeschreven probleem met scrollable was ook sprake van een functie, die onderin de content was opgenomen en waarvan stv zei "stop het lekker in je functions.js". Deze functie staat nu in het bestand scrollable.functions.js en niet meer onderin de content van mijn eigen pagina.
Zo is er voor elke jQuery-toepassing een eigen submap met een of meer .js-bestanden. Alles staat dus bij elkaar, wat het onderhoud vergemakkelijkt.

HTML-blok haalt alle jQuery op
Vervolgens heb ik een HTML-blok call-jQuery-library geschreven, dat alle jQuery code in één keer ophaalt:

Code: Select all

{literal}
<!-- call jQuery -->
<__script__ type="text/javascript" src="uploads/scripts/jQuery/jquery-1.7.1.min.js"></__script>

<!-- call willekeurige andere jQuery scripts -->
(...)
<!-- end willekeurige andere jQuery scripts -->

<!-- call scrollable -->
<__script__ type="text/javascript" src="uploads/scripts/jQuery/scrollable/jquery.tools.min.js"></__script>
<__script__ type="text/javascript" src="uploads/scripts/jQuery/scrollable/scrollable.functions.js"></__script>
<!-- end scrollable -->

<!-- call overige jQuery scripts -->
(...)
<!-- end overige jQuery scripts -->
{/literal}

De eerste call laadt jQuery, daarna volgen de calls naar alle scripts die ik nodig heb, ook scrollable inclusief de functie die hem activeert.

plaats alles in de <head>
Alle benodigde jQuery-code wordt opgehaald in de de <head>-tag:

Code: Select all

<head>
(...)
{* haal jQuery libraries op *}
 {global_content name='call-jQuery-library'}
{* end jQuery *}
</head>

Alle jQuery-code wordt zo en in de <head>-tag geplaatst en is beschikbaar op de site.

Frank

PS
Ik heb niets aangepast ivm de "base href", zoals stv suggereerde - alles werkt naar behoren zonder die aanpassing.

CMS Made Simple Forums

[OPGELOST] jQuery Scrollable voor content

[OPGELOST] jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

Re: jQuery Scrollable voor content

[OPLOSSING] jQuery Scrollable voor content