We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (7)

Resolved ScrollSpy not working in BS3 Blank

0
Votes
Undo
  1. Mohammad Musharof
    Mohammad Musharof
  2. General Discussion
  3. Sunday, 04 May 2014
  4.  Subscribe via email
Hello, I am trying to add Bootstrap Scroll spy feature in BS3 Blank template. I have added HTML attribute in body tag like
<body data-spy="scroll" data-target="#t3-mainnav">

But, its not working. Anyone can help me please?
Thanks
  1. template customization
  2. T3 BS3
  3. one page
Comment
There are no comments made yet.
Responses (7)
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

look at http://getbootstrap.com/javascript/#scrollspy

"Resolvable ID targets required!
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>."

So your links in the navigation should have a target to your 'scrollable' content. Default you have <a href="/link/to/something" ../>

This should be modified to <a href="#content1" ... />, <a href="#content2" ... /> etc.

And in your content you need some divs with this id's

<div id="content1">...</div>
<div id="content2">...</div>


Ok now the solution....

1. Go to your menu (joomla menu)
2. Change 'Menu Item Type' to 'External URL' (see image) and add the target id of your div (step 3) in section 'Link'.
Don't forget to add '#'!
3. Now you need to add the div with your target id in your content
<div id="content">
......
</div>

Repeat this for all menu items (use different id's as target) and include all divs to your content (article, module, ...)

P.S. <body data-spy="scroll" data-target="#t3-mainnav"> was already added by you...

Good luck,
Eugen
Attachments (1)
scrollspy_nav.png scrollspy_nav.png
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mohammad,

can you give me a little bit more infos? What exactly doesn't work? Will be nice to have a link to your site....

Regards,
Eugen
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Very detailed tutorials, Eugen ;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Mohammad Musharof
Mohammad Musharof
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks a lot for detailed reply. I will give a try and inform you :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

really hard to find a problem without to see the problem....

So if i understand it correctly the ScrollSpy works, or?

Your problem is " I was trying to add active class in menu item when someone scroll to specific section".

Do you want to add 'active' css class for some modifications etc. after the user was clicking on menu item?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Mohammad Musharof
Mohammad Musharof
Accepted Answer Pending Moderation
0
Votes
Undo
Its not working
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
Mohammad Musharof
Mohammad Musharof
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for your reply Eugen. I was trying to add active class in menu item when someone scroll to specific section. I am converting my OnePage bootstrap theme ( http://wingthemes.com/demos/html/matter/ ) to T3 Joomla Template in Localhost. BTW, i have added this feature by a third-party jQuery plugin.

Thanks again :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.