Coder Social home page Coder Social logo

Comments (21)

alvarotrigo avatar alvarotrigo commented on May 18, 2024 1

If you are looking to change the class for the <body> element, then you can make use of the callback:

 $.fn.fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        afterLoad: function(anchorLink, index){
            //using anchorLink
            if(anchorLink == 'secondSlide'){
                $('body').addClass('secondSlide');
            }
        }
    });

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

What do you mean with "to body class"?

You can add anchors by just adding them in the anchor option:

$.fn.fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
});

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

if section with 'secondPage' anchor is active how to add this anchor to body class? when you scroll to some sections and body class dynamically changes according to anchor..

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

@Admdh the <body> element class is not changing at any time.
What exactly you want to accomplish ? I don't understand what you are asking for.

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

if you'll look at this project you can see how body class is changing https://github.com/peachananr/onepage-scroll

need something like this in your project!

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

Why is it needed?

You can do it if you need it by using this:

 $.fn.fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        afterLoad: function(anchorLink, index){
            $('body').removeClass().addClass(anchorLink);
        }
    });

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

Here you have an example working as you want:
http://jsfiddle.net/7PwsS/6/

Check the body classes dubbing.

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

it's needed for example to change color of header when body class changes or even hide it.. i see it's working but when you load document without anchors body has no class..

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

There is also a problem with this feature.
What if the user has added his own classes to the body? This method would delete all of them just to add the class corresponding with the section.

I see your point though. (Although this changes of styles could be done with javascript using the callback, which will also work in the case there are no anchors).

You can also deal with the no anchor problem using the index instead of the anchorLink:

$.fn.fullpage({
    afterLoad: function (anchorLink, index) {
        $('body').removeClass().addClass('sectionNumber' + index);
    }
});

Living demo: http://jsfiddle.net/7PwsS/7/

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

ok! if i use this callback for example to alert and add class to header

afterLoad: function(anchorLink, index){
    //using index
    if(index == '1'){
        alert("Section 3 ended loading");
       $('#header').addClass('test');
    }

    //using anchorLink
    if(anchorLink == 'secondSlide'){
        alert("Section 2 ended loading");
    }
}

when user visit site for the first time he won't se alert and no class will be added. he will see it when will scroll back to that index or if will reload page with anchorLink.. example http://jsfiddle.net/7PwsS/10/

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

Why don't you just add the first class to your body at the HTML markup?

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

ok, done with that... And is there a way to remove anchor or index? for example user visits site sees index 1 and when he'll move to index 2 or some else the index 1 will be removed so he could never come back to index 1 until reload page..

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

A way to avoid going back? Nop.

That's a very specific thing for your project and I don't see the place for it in this plugin. Sorry I'm afraid. The plugin is implemented in a way you can navigate through all the page always under any circumstance.

from fullpage.js.

eduarddotgg avatar eduarddotgg commented on May 18, 2024

thank you for help! you helped a lot! sorry for disturbing you!

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

No problem. Your welcome!

from fullpage.js.

zenics avatar zenics commented on May 18, 2024

using latest jQuery library above jQuery 1.8.3, with

$.fn.fullpage({
    afterLoad: function (anchorLink, index) {
        $('body').removeClass().addClass('sectionNumber' + index);
    }
});

adds the classes all together but doesnt remove them when slide changes and you get
<body class="sectionNumber2 sectionNumber3 sectionNumber4 "

any idea cant use 1.8.3 because other plugins.

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

afterLoad is for sections (vertical) not for slides (horizontal).
Use afterSlideLoad if you want to use it for slides.

from fullpage.js.

zenics avatar zenics commented on May 18, 2024

got it it was a jQuery version conflict using jquery/1.11.0 and jqueryui/1.10.1 resolved it.

from fullpage.js.

Mikdadali avatar Mikdadali commented on May 18, 2024

i want to just add simple 1 class to boy because i want to change the header background when scroll is it possible?

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

@Mikdadali see my video tutorial here regarding how to use fulpage.js's css state classes to trigger css changes:
https://www.youtube.com/watch?v=qiCVPpI9l3M

from fullpage.js.

Mikdadali avatar Mikdadali commented on May 18, 2024

thank you i have already done that using that classes thanks again

from fullpage.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.