Using a document-specific variable in javascript

26 Posts

stormlifter Reply #1, 17 years, 3 months ago

Basically I’ve got a chunk that I’m writing that essentially has all the code required for "jQuery Cycle Plugin" to run. What I want to do is put in document-specific variables into the the chunk so that jQuery Cycle can use it.

This is the code.

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(document).ready(function($){
  					   						   
	$('#slider')
.after('<ul id="cycleNav">')
.cycle({ 
	    fx:     'scrollDown', 
	    speed:   1000, 
	    timeout:  6000, 
	    pause:   1,
            pager:  '#cycleNav' ,
            pagerAnchorBuilder: function(idx, slide) { 
                     return '<li><a href="#">' + <* Where I want pagetitle*> + '</a></li>'; 
    } 
	});
});

I have tried several ways of writing it but it doesn’t seem to be working.
I’d like to be able to pull up the pagetitle of a specific document.

2,310 Posts

bunk58 Reply #2, 17 years, 3 months ago

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(document).ready(function($){
  					   						   
	$('#slider')
.after('<ul id="cycleNav">')
.cycle({ 
	    fx:     'scrollDown', 
	    speed:   1000, 
	    timeout:  6000, 
	    pause:   1,
            pager:  '#cycleNav' ,
            pagerAnchorBuilder: function(idx, slide) { 
                     return '<li><a href="#">'[*pagetitle*]'</a></li>'; 
    } 
	});
});

Should work if it’s directly in the html via your template, chunk or TV.

26 Posts

stormlifter Reply #3, 17 years, 3 months ago

Yeah I typed that directly in. Not sure why that’s not working.
Also there is the whole thing of wanting to pull an ID from another page, but one issue at a time.

I got things to work using this

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(document).ready(function($){
 var sliderTitles=new Array();
sliderTitles[0]="[*pagetitle*]";
sliderTitles[1]="blabla1";
sliderTitles[2]="blabla2";      

	$('#slider')
.after('<ul id="cycleNav">')
.cycle({ 
	    fx:     'scrollDown', 
	    speed:   1000, 
	    timeout:  6000, 
	    pause:   1,
            pager:  '#cycleNav' ,
            pagerAnchorBuilder: function(idx, slide) { 
                     return '<li><a href="#">' + sliderTitles[idx] + '</a></li>'; 
    } 
	});
});
</script>

Now to pull titles from other pages.

152 Posts

Henrik Nielsen Reply #4, 17 years, 3 months ago

Quote from: stormlifter at Jul 30, 2009, 02:23 AM

Yeah I typed that directly in. Not sure why that’s not working.
Also there is the whole thing of wanting to pull an ID from another page, but one issue at a time.

I got things to work using this

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(document).ready(function($){
 var sliderTitles=new Array();
sliderTitles[0]="[*pagetitle*]";
sliderTitles[1]="blabla1";
sliderTitles[2]="blabla2";      

	$('#slider')
.after('<ul id="cycleNav">')
.cycle({ 
	    fx:     'scrollDown', 
	    speed:   1000, 
	    timeout:  6000, 
	    pause:   1,
            pager:  '#cycleNav' ,
            pagerAnchorBuilder: function(idx, slide) { 
                     return '<li><a href="#">' + sliderTitles[idx] + '</a></li>'; 
    } 
	});
});
</script>

Now to pull titles from other pages.

Have you tried with Ditto?

Something like [[Ditto? &depth=`0` &parents=`somedocumentIDfromwheretostart` &tpl=`tpl-SliderTitles` !]]

- and the content of the tpl-SliderTitles chunk:

sliderTitles[ [+id+] ]="[+pagetitle+]";

I have not tried this, but think i’t should work...

Edited: Removed a typo.

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!

26 Posts

stormlifter Reply #5, 17 years, 3 months ago

Figured it out using GetField

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(document).ready(function($){
 var sliderTitles=new Array();
sliderTitles[0]="[[GetField? &docid=`50` &field=`pagetitle`]]";
sliderTitles[1]="[[GetField? &docid=`51` &field=`pagetitle`]]";
sliderTitles[2]="[[GetField? &docid=`52` &field=`pagetitle`]]";      			   
						   
	$('#slider')
.after('<ul id="cycleNav">')
.cycle({ 
	    fx:     'scrollDown', 
	    speed:   1000, 
	    timeout:  6000, 
	    pause:   1,
            pager:  '#cycleNav' ,
            pagerAnchorBuilder: function(idx, slide) { 
                     return '<li><a href="#">' + sliderTitles[idx] + '</a></li>'; 
    } 
	});
});
</script>