Anythingslider: Pass current page number, to PHP

[ic3d]

Hi all,

I am using the external menu with AnythingSlider. It looks like this:

// set up external links
$(‘#externalNav a’).click(function(){
var slide = $(this).attr(‘href’).substring(1);
$(‘#slider’).anythingSlider(slide);
return false;
});

For using the menu all i have to do is create an html-element and name it id=”externalNav”. The links in there link to a number of the slide, for example Home will link to the homepage.

As i said it works fine, however, i’d like to read the number (in this example 1) in PHP. I of coarse know how to do that with regular URL’s ($_request for example), but since there is JS involved i don’t know where to begin.

Could anyone please help me out?

[Mottie]

I’m not the best at php, but are you trying to use the default hashTags used by the slider or your own custom hash tags?

[ic3d]

The default hashtags. But i have to admin i don’t know mutch about JS. I don’t even know how to read the current hashtag nr and print it on screen. When i paste the following part into my pages where the slider is, it doesn’t show anything.

var current = $(‘#slider’).data(‘AnythingSlider’).currentPage;
document.write(current);

If i solved that, the question is not only relevant to this script anymore and i could perhaps Google my answer (and post it here of coarse).

[Mottie]

Using a “document.write” will only write the contents to the page WHILE the page is being loaded – it is not dynamic and in the situation above, it won’t do anything because “current” is not undefined. It doesn’t become defined until after the document is ready and the plugin has finished initializing.

So php and javascript can use ajax or the actual hash tag/search string to pass information. I do know that “$_GET[]” will get any parameters from the search string in the url, but that isn’t how the current page is set in AnythingSlider. What I’m not 100% sure about is how to get the hash tag information from php, which is what you would need. I’ll do a little research ;)

[Mottie]

Hmm ok, a hash won’t work. Maybe ajax would be the best bet for you.

[ic3d]

Maybe this can be done with the work you guys already did. All i actually want is to check what page is active, so that i can change the menu-item.

I am now using:

Home
About

All i want is to add a class to the selected slide. So when someone for example clicked the 2nd slide, it looks like this:

Home
About

And when someone enters the site (slide 1 is selected).

Home
About

[Mottie]

Check out this demo.

[ic3d]

Thanks a lot Mottie, that did the trick!

I am feeling like a pain in the ass now, but perhaps you could help me out one more time.

Everything is working, but my links navigation menu has some javascript animation in them. For example:

What i would like to do is to have the css class like this:

.nolink  {

top:-35px;

}

This animates the image from top to bottom and works great. However, it also works on the dropdownitems, that don’t have an image and thus move out of the box. I tried this thingy below, but that doesn’t work.

.nolink img  {

top:-35px;

}

Do you have a clue how to solve this? I am using the code from your sample:

.

var nav = $('#externalNav'),

updateLink = function(page){

nav.find('.nolink').removeClass('nolink');

nav.find('a[href="#' + page + '"]').addClass('nolink');

};

[clokey2k]

I am making assumption that ‘img’ is not declared as ‘position: relative’ whereas the ‘a’ is.
Try adding a ‘position: relative’ to your ‘.nolink img’.

[ic3d]

Thank you for your answer.

That’s not it. For some reason it can’t find the image class. It doesn’t do anything, whatever i place inside.

.nolink img  {

// whatever

}

If i remove the img from the class name, it does work. In HTML it would look like this. I assume the .nolink class is added by the above script dynamically.

[Mottie]

It looks like you are animating the “a” and not the “img”, so try this css:

.nolink a {

top:-35px;

}

[ic3d]

Thanks again for the reply. I’ve been away for a couple of days, hence the late reply.

I tried what you suggested, but that didn’t work. I found out that the other JS is causing the problem. However, with my limited knowledge of JS i don’t know what it is..

$(function(){

$(".container div a").hover(function(){

$("img", this).stop().animate({top:"-35px"},{queue:false,duration:100});

}, function() {

$("img", this).stop().animate({top:"0px"},{queue:false,duration:100});

});

});



$(function(){

$(".containerbanners div a").hover(function(){

$("img", this).stop().animate({top:"0px"},{queue:false,duration:50});

}, function() {

$("img", this).stop().animate({top:"-115px"},{queue:false,duration:100});

});

});

This script animates the image (button) up or down. So without it this is working (see below). But i need this part of JS as well to animate.

.nolink img  {

top:-35px;

}

[Mottie]

Honestly, I can’t play guessing game today… if you need help, please share a link to your site or make a jsfiddle demo.

[ic3d]

I understand. I uploaded a demoversion: http://www.qado.nl/temp/test.html

The top level menu is working as it should (well sort off, the mouse-over shouldn’t when a image is down), but with the dropdowns it shouldn’t work anymore, but it does. It moves the menu item up.

[Mottie]

Ok, thanks, that make things 100% more clear… try this code:

$(function(){

$(".container div a").hover(function(){

if (!$(this).is('.nolink')){

$("img", this).stop().animate({top:"-35px"},{queue:false,duration:100});

}

}, function() {

$("img", this).stop().animate({top:"0px"},{queue:false,duration:100});

});

});

[Author]

Posts