Configuring Foundation components

Archives rtPanel
#1

I’ve been trying to configure Foundation’s Magellan in my child theme without success. The component itself works on default settings, but I can’t figure out how to tweak them per Foundation’s instructions here: http://foundation.zurb.com/docs/components/magellan.html

I tried putting the jQuery(document).foundation(); block in the header, the footer, and even tried using the data-attribute method; none of them change the component’s default behavior. Breakpoints confirmed that the code was getting run, just no change in the behavior.

The main test I used was to try to change the default “active” class to something else. No matter what I try, the Magellan links always get styled with “active” (the default, I think) even when the JS says otherwise. My only guess is that my foundation(); call is getting overriden somewhere later by something in rtPanel. Any insight would be much appreciated!

#2

Hello ikidre,

Magellan is working fine at my site. Can you share your site URL so i can debug the issue.

Thanks

#3

Sure, thanks! But please note that what I have up right now is what I consider an acceptable hack.

  • The JS scroll behavior is from another plugin I had to add, not Foundation.
  • The “active” class is still there, but I’ve styled it to look like nothing because it was confusing. It would switch to the subsequent anchor if even a tiny sliver was showing in the window frame.

So, again, my problem isn’t that Magellan is not working, but that I can’t seem to set its initialization options.

Example here: http://atdplogs.berkeley.edu/wpplayground/ed/courses/

#4

Remove following code:

<script type="text/javascript">
    jQuery(document).foundation({
        "magellan-expedition": {
          active_class: 'active', // specify the class used for active sections
          threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
          destination_threshold: 20, // pixels from the top of destination for it to be considered active
          throttle_delay: 50, // calculation throttling to increase framerate
          fixed_top: 0, // top distance in pixels assigned to the fixed element on scroll
        }
    });
    </script>

and check.

rtPanel already initiate foundation js, so you do not need to initiate it again.

Let me know if this helps.

Thanks

#5

OK, removed, and no change in behavior, which is expected since this was going on before I tried to set those initialization parameters. Again, Magellan is working but I want to know how I’m supposed to alter those parameters.

I’m aware rtPanel is initiating it, and I think I found where: in rtp-concat-lib.js. It’s got:

Foundation.libs.magellan={name:"magellan",version:"5.0.3",settings:{active_class:"active",threshold:0}

Changing “active” there does affect the class name on the page, but inserting any of the other parameters seems not to. (I’m particularly keen on tweaking destination_threshold, since that’s the most broken part; it is totally misaligned from the element at the top of the page.)

#6

I am not getting you exactly as you said “Magellan is working but I want to know how I’m supposed to alter those parameters”.

Can you please provide more details. what exactly is your requirement?

One more thing is that do not make changes in rtp-concat-lib.js directly, Since rtPanel uses grunt task runner. For more details you can check http://docs.rtcamp.com/rtpanel/developer/setup-rtpanel-development/

#7

I want to change Magellan from its default setting (specifically, destination_threshold, if that does what it claims to do). Again, Foundation instructions are here: http://foundation.zurb.com/docs/components/magellan.html#js

I don’t have permission to install all of the extras needed to develop rtPanel on my own, and besides, it feels extremely heavy-handed to have to do so just to tweak some JS settings. Is that really the only way to do this?

(p.s. I know I probably sound frustrated, but I do want to say thanks for sticking with me and trying to help!)

#8

Hello ikidre,

Now I got you. Can you please tell me that are using child of rtPanel or doing changes in rtPanel theme itself?

You can not modify ‘destination_threshold’ in current rtPanel since its using foundation version ‘5.0.3’ and the latest version of foundation is ‘5.4.5’.

You can easily update the foundation in theme via bower. After updating foundation version you can easily over write the options you want.

Let me know for further assistance or any other queries regarding foundation updates.

Thanks

#9

Yes, I’m working on a child theme. The provided example was very convenient for noobs like me! :smile:

Ah ha! This explains it all. Unfortunately, I don’t have the admin privileges to install all of the development prereqs. The CSS hack I threw together will be acceptable for the time being. Do you know if rtPanel regularly adopts newer versions of Foundation?

Again, thanks for all the help!

#10

You are welcome :slight_smile:

Here you can find updated version of rtPanel https://github.com/rtcamp/rtpanel.

We update rtPanel regularly. We will update it on WordPress directory soon.

Thanks

#11