[OPGELOST] jQuery tools... en dan?

[Evert B.]

Beste mensen.
Ik probeer te expirimenteren met Jquery omdat ik de startexpandcollapse van CMSMS niet netjes vind werken. Echter, volgens mij doet dit niets meer dan het javascript in de zetten. De instructies zijn erg beknopt.

Klopt het dat het verder gewoon uitpuzzelen is vanaf de jQuery website of zie ik iets over het hoofd?

Naast de expand/collapse wil ik ook experimenteren met cuetips.

Groeten Evert

[stijlXpres]

Voor zover mijn ervaring rijkt met jQuery, is het inderdaad een kwestie van zelf goed inlezen en dan aan de slag.
In de head wordt inderdaad een stukje javascript geplaatst (ik zet dat vak in de pagina-specifieke meta-data). Tevens komt (soms) in de head een verwijzing naar een extern script. Tot slot krijgt het object waaraan je jQuery wilt koppelen een unieke klasse die wordt afgevangen door het javascript.

That's it; ik heb het op verschillende sites werkend, maar het is inderdaad een kwestie van even stoeien...

Succes!!

[Evert B.]

In de head wordt inderdaad een stukje javascript geplaatst (ik zet dat vak in de pagina-specifieke meta-data). Tevens komt (soms) in de head een verwijzing naar een extern script. Tot slot krijgt het object waaraan je jQuery wilt koppelen een unieke klasse die wordt afgevangen door het javascript.

That's it; ik heb het op verschillende sites werkend, maar het is inderdaad een kwestie van even stoeien...

Succes!!

Bedankt stijlXpress maar ik doe gewoon iets niet goed denk ik. Ik vold de instucties op zoals je hier vind: http://plugins.learningjquery.com/cluetip/

Ik heb de volgende .js bestanden in mijn root gezet:
- jquery-1.4.2.js
- jquery.cluetip.js
- jquery.cluetip.css

Ik doe deze code in mijn pagina specifieke metadata: (en toen dat niets opleverde ook in de van mijn sjabloon)

Code: Select all

<__script__ src="jquery.js" type="text/javascript"></__script>
<__script__ src="jquery.hoverIntent.js" type="text/javascript"></__script> <!-- optional -->
<__script__ src="jquery.cluetip.js" type="text/javascript"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
  $('a.tips').cluetip();
  
  $('#houdini').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
});
</__script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

Deze code doe ik in de pagina (met wysiwyg uitgeschakeld):

Code: Select all

  <!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p> 
 
  <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>

Toch is er niets te zien op de pagina...?

Wat doe ik fout?

[Rolf]

Heb je ook {literal}{/literal} om de Javascript heen staan?

Grt. Rolf 

[Evert B.]

Heb je ook {literal}{/literal} om de Javascript heen staan?

Grt. Rolf 

Jep Rolf, daar had je me al bij iets anders op gewezen (en had ik zowaar onthouden! ).
Nee het is iets anders ben ik bang.

GrtZ Evert

[stijlXpres]

Wat ik zo snel zie als ik jouw code vergelijk met de code uit de tutorial, valt mij op dat je 'jquery.hoverIntent.js' niet hebt geinclude...

[Rolf]

Evert,

Zo maar even wat hoor...

Ik heb de volgende .js bestanden in mijn root gezet:
- jquery-1.4.2.js
- jquery.cluetip.js
- jquery.cluetip.css

Ik doe deze code in mijn pagina specifieke metadata: (en toen dat niets opleverde ook in de van mijn sjabloon)

Code: Select all

<__script__ src="jquery.js" type="text/javascript"></__script>
<__script__ src="jquery.hoverIntent.js" type="text/javascript"></__script> <!-- optional -->
<__script__ src="jquery.cluetip.js" type="text/javascript"></__script>
...
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

- Je zou idd een bestand vergeten kunnen zijn zoals stijlXpres al aangeeft.
- Je verwijst naar jquery.js, maar het bestand heet zo te zien: jquery-1.4.2.js

Deze code doe ik in de pagina (met wysiwyg uitgeschakeld):

Code: Select all

  <!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p> 
 
  <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>

- Heb je de url's aangepast aan jouw website? Gebruik je ook pretty url met .html? Bestaat de ID?

- Staat deze site online? Heb je een link?

Grt. Rolf 

[Evert B.]

Ok Rolf en stijlXpress, ik ben al wel iets verder gekomen: ik heb jquery.hoverIntent.js toegevoegd en nu zie ik de links inderdaad, zonder dat er fouten optreden.

Echter, ik zie geen cluetips, wat ik ook probeer.
Het lullige als je iets fout diet is dat je niet weet wat je precies fout doet  .

Dit is de site (onder constructie)

[Rolf]

Ik krijg dit boven in het scherm te zien:

... $('a.title').cluetip({splitTitle: '|'});

Wil morgen wel even kijken of ik het hier aan de praat krijg.

Grt. Rolf

[Evert B.]

Rolf!

Ik heb nu die tekst (... $('a.title').cluetip({splitTitle: '|'}); )  uit de pagina gekregen. Dit hoort bij probeersel 2.

Ik snap er niets meer van, heb geprobeerd om alles wat niet werkt weer terug te draaien. Ik zal je wel mijn inlogdetails pm-en, misschien dat dat helpt.

Groeten Evert

[Rolf]

Evert,

Wil je niet flauw maken, maar op mijn test site werkte het direct 
"Geluk is met de dommen", zeg maar 

Heb een "test" pagina gemaakt en daar werkt het ook. En je was zelf ook al een heel eind gekomen zag ik.

 
  show me the cluetip!

Maar ik denk dat de definitie van "pull content from fragment.html" anders is dan zoals jij nu probeert.
Je probeert nu een hele pagina uit het cms op te nemen, maar deze is schermbreed ingesteld... en past dus niet.
Ik denk dat ze hier bedoelen een aparte html bestand zonder paginaopmaak die kan worden getoond. Ik denk dan aan een paar regeltjes en een foto.
Je zou hiervoor bijv. een aparte pagina kunnen aanmaken, met een apart html sjabloon en stylesheet.

Zelf zou ik overigens de js en css bestanden niet in de root van de website laten staan, het wordt dan zo onoverzichtelijk. Ik maak meestal een map 'scripts' of iets dergelijks aan en plaats het daarin. Maar goed de werking wordt natuurlijk niet anders 

Maar je kunt hiermee leuke dingen maken!!! Bedankt 

Grt. Rolf

[Evert B.]

Evert,

Wil je niet flauw maken, maar op mijn test site werkte het direct 
"Geluk is met de dommen", zeg maar 

Nou, je hebt het javascript gedeelte anders gedaan dan ik deed en dat hielp dus, thanks Rolf!!!!

Maar ik denk dat de definitie van "pull content from fragment.html" anders is dan zoals jij nu probeert.
Je probeert nu een hele pagina uit het cms op te nemen, maar deze is schermbreed ingesteld... en past dus niet.
Ik denk dat ze hier bedoelen een aparte html bestand zonder paginaopmaak die kan worden getoond. Ik denk dan aan een paar regeltjes en een foto.
Je zou hiervoor bijv. een aparte pagina kunnen aanmaken, met een apart html sjabloon en stylesheet.

Ik ben hiermee aan het stoeien. Heb zoals je zei een apart sjabloon en stylesheet gemaakt en het begin is er reeds.

Zelf zou ik overigens de js en css bestanden niet in de root van de website laten staan, het wordt dan zo onoverzichtelijk. Ik maak meestal een map 'scripts' of iets dergelijks aan en plaats het daarin. Maar goed de werking wordt natuurlijk niet anders 

Ja daar heb je helemaal gelijk in... ga ik ook doen.

Maar je kunt hiermee leuke dingen maken!!! Bedankt 

Ik zal je testpagina in de gaten houden!

Thanks alot Rolf!
Evert

[Evert B.]

Voor de Expand/Collapse (het vervelende verspringen van de pagina) heb ik een eenvoudige oplossing gevonden op het Engelstalige forum (de reply van nkoren in dezetopic).
Een User Defined Tag aanmaken met de volgende inhoud:

Code: Select all

static $firstExpandCollapse = true;//only gets set one time per page
	
	global $gCms;
	$config =& $gCms->GetConfig();

	if (!empty($params['id']) && !empty($params['title'])) {
		$id = $params['id'];
		$title = $params['title'];
	}
	else {
		echo 'Error: The expand/collapse plugin requires that both parameters (id,title) are used.';
		return;
	}

	if ($firstExpandCollapse) {
		echo '<__script__ type="text/javascript" language="javascript" src="'.$config['root_url'].'/lib/helparea.js"></__script>';
		$firstExpandCollapse = false;
	}
	$url = str_replace('&', '&',  $_SERVER['REQUEST_URI']);
	echo '<a onclick="expandcontent(\''.$id.'\')" style="cursor:hand; cursor:pointer">'.$title.'</a><br />
	<div id="'.$id.'" class="expand">';

Dan kun je in Tiny MCE gewoon de knoppen voor start/stop Expandcollapse gebruiken maar moet je de naam van deze tag gebruiken. Deze naam kun je zelf bedenken.
Bij mij heet de tag 'expandcollapse_ejb' en ziet de tekst in tinyMCE er als volgt uit:

Code: Select all

>{expandcollapse_ejb id='expand3' title='Hoe doet Kids Food Care dat?'}
* Gezonde alternatieven aanbieden voor zoete dranken koek, ships e.d.
* Kant- en klare weekvoedingsschema's
* Boodschappenlijsten
* Voorlichting aan personeel en oudersBegeleiding in communucatie naar ouders, ouderrraad en personeel (kant en klare brieven e.d.)
* Op de groep wordt er gewerkt met picto's met voedingsmiddelen{stopExpandCollapse}

Zie hierlive

Met jQuery zal ik verder gaan stoeien maar voor nu is deze topic [opgelost]