T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. 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
Comment
There are no comments made yet.
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)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
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. # 2
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. # 3
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. # 4
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. # 5
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. # 6
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. # 7
  • Page :
  • 1


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