Menu icon Foundation

My Posts








My Comments

hassan commented on hassan's post over 1 year

Hello @Jarryd Fillmore I find out solution for this you just need to install foundation file from github and there you will have to go foundation_sites --> dist --> plugins there you must need to add these files in body tag after footer.
<script src="js/foundation.core.js"></script><script src="js/foundation.util.mediaQuery.js"></script>
these two are essential for only use foundation plugins in any project even with bootstrap.
after to add those lines. you need to call $(document).foundation(); in your js file
and then add any plugin file
<script src="js/foundation.abide.js"></script>
like i only want to use abide plugin so i included this file in my project now it will start work with foundation data attributes
and all plugin files you can find in plugini folder that i mentioned on top.
Thanks :)

hassan commented on hassan's post over 1 year

yes i found the problem was with 6.2.o version and i just updated js file and my problem is solved
thanks @philippe

hassan commented on hassan's post over 1 year

okay @jinch yes thats true but only this is best solution i got so i shared with you its remove actual effect but its doing same and one more thing i want to tell you this feature is available with foundation 6 offcanvas reveal try that and you will see thats working thanks :)

hassan commented on hassan's post over 1 year

@jinch i saw your code you are still using foundation 6 code which codepen link i sent just try that instead of that link and css you will see effect just remove your html of offcanvas and add codepen html and css then try it and let me know thanks i will help you out :)

hassan commented on hassan's post over 1 year

@jinch Yes I did it with sticky topbar and its worrking fine :)

hassan commented on hassan's post over 1 year

Hey blerim and @jinch I found a solution for this.
http://codepen.io/zurbrandon/pen/adbOPN
this link will help you.
Thanks

hassan commented on hassan's post over 1 year

I am going to attach some screenshots hope it will help to understand what actually i want thanks.


hassan commented on hassan's post over 1 year

Thanks @Rafi Benkual which links you sent me i got that and i have same thing what you mentioned in these links but there problem is when you click on sticky nav button to open off canvas then top bar goes on top mean topbar hide from that point and goes on top of page where off canvas starts .
but If you see in foundation 5 no matter where is top bar or content even its scroll down and we click on button off canvas will appear from that point thats what we need and that was awesome off canvas.
In f6 off canvas start from top ok if i am using sticky nav and user scroll page down and he want to open off canvas he clicked then user see off canvas open but for links he have to scroll all page to top .
But in F5 no matter where is page and user scrolling when user click on button he just got off canvas there thats what i want.
in F5 you can see it's awesome tell me any solution for F6. Thanks

hassan commented on hassan's post almost 2 years

@Rafi Benkual @Clyde Witchard hi guys i found whats problem of magellan in 6.1.2 here what i got.
```Javascript
this.$element.on({
'resizeme.zf.trigger': this.reflow.bind(this),
'scrollme.zf.trigger': this._updateActive.bind(this)
}).on('click.zf.magellan', 'a[href="#"]', function(e) {
e.preventDefault();
var arrival = this.getAttribute('href');
_this.scrollToLoc(arrival);
});
};

its code in foundation.js line number -> 4302 to 4310 and what you need to do on line number 4308 
 remove this line.

```Javascript 
  _this.scrollToLoc(arrival);

and paste this code
Javascript
/ requestAnimationFrame is disabled for this plugin currently
// Foundation.Move(_this.options.animationDuration, $body, function(){
$body.stop(true).animate({
scrollTop: scrollPos
}, opts);

its got from 6.1.1 and your magellan will work absoluetly fine thanks i hope it will help many .

hassan commented on hassan's post almost 2 years

@Rafi Benkual @Clyde Witchard hi guys i found whats problem of magellan in 6.1.2 here what i got.

 this.$element.on({
      'resizeme.zf.trigger': this.reflow.bind(this),
      'scrollme.zf.trigger': this._updateActive.bind(this)
    }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
        e.preventDefault();
        var arrival   = this.getAttribute('href');
        _this.scrollToLoc(arrival);
    });
  };

its code in foundation.js line number -> 4302 to 4310 and what you need to do on line number 4308
_this.scrollToLoc(arrival);
remove this line and paste this code.

// requestAnimationFrame is disabled for this plugin currently
// Foundation.Move(_this.options.animationDuration, $body, function(){
$body.stop(true).animate({
scrollTop: scrollPos
}, opts);
its got from 6.1.1 and your magellan will work absoluetly fine thanks i hope it will help many :)

Posts Followed

  • 2
    Replies
  • Another Off Canvas question

    By Craig Garrity

    offcanvas

    Sorry, I have searched through a few off canvas threads and added a new one here. I'm new to Foundation 6, been playing around with it today, I really like the look of it. My problem is getting both left and right off canvas menus to show up. It's probabl... (continued)

    Last Reply by Craig Garrity almost 2 years ago


  • 8
    Replies
  • contain Magellan to grid

    By David

    Magellan

    Hello, I would like to use Magellan as a sub nav. Is there an easy hack to contain the Magellan Nav to their designated grid while scrolling down (like in the example: http://foundation.zurb.com/docs/components/magellan.html). If I implement Magell... (continued)

    Last Reply by hassan almost 2 years ago





  • 5
    Replies
  • Orbit Foundation 6

    By Hossein Mahmoodi

    OrbitF6

    Hi, i try to make a slider with orbit in foundation 6 and i provide all JS files to do this, but look to screenshot and it's noting! i copy example code from foundation website! how can i fix that to show correctly?! thanks

    Last Reply by amandine about 2 years ago




  • 6
    Replies
  • Javascript not loaded

    By VIncent Kosciuszko

    javascript

    Hello, I've some problems with the new version of Foundation. When I start a new project I got this error: TypeError: $(...).foundation is not a function. Because of that my top-bar didn't work. Any idea ? All links in my index.html work well.

    Last Reply by Erik M about 2 years ago


Following

Followers

My Posts

My Comments

You commented on hassan's post over 1 year

Hello @Jarryd Fillmore I find out solution for this you just need to install foundation file from github and there you will have to go foundation_sites --> dist --> plugins there you must need to add these files in body tag after footer.
<script src="js/foundation.core.js"></script><script src="js/foundation.util.mediaQuery.js"></script>
these two are essential for only use foundation plugins in any project even with bootstrap.
after to add those lines. you need to call $(document).foundation(); in your js file
and then add any plugin file
<script src="js/foundation.abide.js"></script>
like i only want to use abide plugin so i included this file in my project now it will start work with foundation data attributes
and all plugin files you can find in plugini folder that i mentioned on top.
Thanks :)

You commented on hassan's post over 1 year

yes i found the problem was with 6.2.o version and i just updated js file and my problem is solved
thanks @philippe

You commented on hassan's post over 1 year

okay @jinch yes thats true but only this is best solution i got so i shared with you its remove actual effect but its doing same and one more thing i want to tell you this feature is available with foundation 6 offcanvas reveal try that and you will see thats working thanks :)

You commented on hassan's post over 1 year

@jinch i saw your code you are still using foundation 6 code which codepen link i sent just try that instead of that link and css you will see effect just remove your html of offcanvas and add codepen html and css then try it and let me know thanks i will help you out :)

You commented on hassan's post over 1 year

@jinch Yes I did it with sticky topbar and its worrking fine :)

You commented on hassan's post over 1 year

Hey blerim and @jinch I found a solution for this.
http://codepen.io/zurbrandon/pen/adbOPN
this link will help you.
Thanks

You commented on hassan's post over 1 year

I am going to attach some screenshots hope it will help to understand what actually i want thanks.


You commented on hassan's post over 1 year

Thanks @Rafi Benkual which links you sent me i got that and i have same thing what you mentioned in these links but there problem is when you click on sticky nav button to open off canvas then top bar goes on top mean topbar hide from that point and goes on top of page where off canvas starts .
but If you see in foundation 5 no matter where is top bar or content even its scroll down and we click on button off canvas will appear from that point thats what we need and that was awesome off canvas.
In f6 off canvas start from top ok if i am using sticky nav and user scroll page down and he want to open off canvas he clicked then user see off canvas open but for links he have to scroll all page to top .
But in F5 no matter where is page and user scrolling when user click on button he just got off canvas there thats what i want.
in F5 you can see it's awesome tell me any solution for F6. Thanks

You commented on hassan's post almost 2 years

@Rafi Benkual @Clyde Witchard hi guys i found whats problem of magellan in 6.1.2 here what i got.
```Javascript
this.$element.on({
'resizeme.zf.trigger': this.reflow.bind(this),
'scrollme.zf.trigger': this._updateActive.bind(this)
}).on('click.zf.magellan', 'a[href="#"]', function(e) {
e.preventDefault();
var arrival = this.getAttribute('href');
_this.scrollToLoc(arrival);
});
};

its code in foundation.js line number -> 4302 to 4310 and what you need to do on line number 4308 
 remove this line.

```Javascript 
  _this.scrollToLoc(arrival);

and paste this code
Javascript
/ requestAnimationFrame is disabled for this plugin currently
// Foundation.Move(_this.options.animationDuration, $body, function(){
$body.stop(true).animate({
scrollTop: scrollPos
}, opts);

its got from 6.1.1 and your magellan will work absoluetly fine thanks i hope it will help many .

You commented on hassan's post almost 2 years

@Rafi Benkual @Clyde Witchard hi guys i found whats problem of magellan in 6.1.2 here what i got.

 this.$element.on({
      'resizeme.zf.trigger': this.reflow.bind(this),
      'scrollme.zf.trigger': this._updateActive.bind(this)
    }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
        e.preventDefault();
        var arrival   = this.getAttribute('href');
        _this.scrollToLoc(arrival);
    });
  };

its code in foundation.js line number -> 4302 to 4310 and what you need to do on line number 4308
_this.scrollToLoc(arrival);
remove this line and paste this code.

// requestAnimationFrame is disabled for this plugin currently
// Foundation.Move(_this.options.animationDuration, $body, function(){
$body.stop(true).animate({
scrollTop: scrollPos
}, opts);
its got from 6.1.1 and your magellan will work absoluetly fine thanks i hope it will help many :)

Posts Followed








Following

Followers

  • No Content