Jquery cycle menu with container - php

Question

I am trying to link an anchor to cycle to a specific div. This is what I have:
The menu
<div id="mainmenu">
<ul class="sidenav" id="menu">
<li>
<a href="#page2">Serviciile noastre
</a>
</li>
<li>
<a href="#page8">Credite Nevoi personale fara ipoteca
</a>
</li>
<li>
<a href="">Credite Nevoi personale cu ipoteca
</a>
</li>
<li>
<a href="">Credite ipotecare
</a>
</li>
<li>
<a href="">Carduri de credit
</a>
</li>
<li>
<a href="">Credite "Prima Casa"
</a>
</li>
<li>
<a href="">Refinantari credite/carduri
</a>
</li>
<li>
<a href="">Acte necesare
</a>
</li>
<li>
<a href="">Economisire creditare
</a>
</li>
</ul>
</div>
And the JavaScript
var $jts = jQuery.noConflict();
$jts(function() {
// maincontent cycle
$jts('#maincontent').cycle({
fx: 'blindY', // You can choose effect do you like, for reference : http://www.malsup.com/jquery/cycle/browser.html
speed: 'slow',
timeout: 0,
cleartype: true, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: true,
pager: '#menu',
startingSlide : 0,
after:onAfter,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#menu li:eq(' + (idx) + ') a';
}
});
function onAfter(curr, next, opts, fwd){
//get the height of the current slide
var $ht = $jts(this).height();
I am using jquery.cycle.all.min.js.

Answer 1

So if I understand correctly, you wish to have an <a href=... click event to take it to the corresponding slide.
Simplest way to do this for your example slide id of 7:
The link you want to click to view a specific slide:
<!-- support for those strange users
without Javascript - we will fix this later -->
Sample text
Your JS to control the behaviour
//if the user has JS enabled, we will stop the
//link from taking us away from the page
//and only do the sweet animation
$(".go-to").click(function(gt){
gt.preventDefault();
var slide = $(this).attr("rel");
$("#maincontent").cycle(slide);
});
Main things to note:
Use of the rel attribute. Use it, it's great.
Use of the empty selector class go-to - used only to define that particular link to interact with cycle. This can be any name you like (so long as it follows the conventions outlined below), for example foo, bar, coco-the-clown etc.
Finally, the next is a little off-topic, but a useful piece of information none-the-less;
If you want your pages to validate to W3C standards, ID's must be unique, and start with a letter. Direct from the horse's mouth:
ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
http://www.w3.org/TR/html4/types.html#type-name
in response to your comment
So the basic premise of what we want to do:
Assign an identifier to each link that corresponds with the slide number - which means this will have to be a number.
Find out the slide order.
Using your link you posted in the comment you should change it to reflect which ever slide number you want to see when clicked, like so:
<a href="credite.php" class="go-to" rel="1" >Credite Nevoi personale fara ipoteca</a>
Also, remove the rel="opt" and class="go-to" from your div element.
If you go and try this now (assuming you have more than 1 slide...) and it is what you wanted, you probably won't need to come back and read the rest.
So when you click the link mentioned above, this should take you to slide number 2 - provided you are not on slide number 2. "What?!" I hear you cry. Read on.
So, if you were to look at the rendered source code in your browser, you will see that inside of your cycle element, maincontent, each of the div elements that are direct descendants of maincontent will be the slides. These are in order (for a computer); 0 is the starting slide and 1 is the second slide, 2 is the third slide ad infinitum.
So - if you are using PHP & MySQL to show your content, it will be super-easy to assign "IDs" to your anchor's rel attributes. Alternatively, you can hard-code these.
Let me know how you did!