T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. vijayanand
  2. General Discussion
  3. Tuesday, 15 July 2014
  4.  Subscribe via email
I want to make my sidebar fixed on mouse scroll .Exactly like t3 documentation page for your reference check below link
http://t3-framework.org/documentation/bs3-customization#layout-width
Comment
There are no comments made yet.
Accepted Answer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

To make a sidebar like our T3 framework documentation, please check out the tutorials at: http://www.joomlart.com/tutorials/joomla-tutorials/tutorial-how-to-add-progressive-sidebar-navigation-in-joomla-article

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Gardner luna:)
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
hi ,
i have checked above documentation , Well i don't want to add progressive sidebar navigation, i just want my sidebar position fixed on mouse scroll can you please guide me.

Thanks
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
Hi,

Please try to remove the JS, the JS is to make the progressive effect. That means in the tutorials, ignore the step: "Then, we add some JavaScript"

Gardner.
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
Hi,

Please try to remove the JS, the JS is to make the progressive effect. That means in the tutorials, ignore the step: "Then, we add some JavaScript"

Gardner.

its not working:( Is there any other options , I need to add "data-spy" and "data-target or somethig else??
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
You can add the class "affix" to the sidebar. Here is an example:

<div class="doc-container row">
<div class="doc-sidebar col-md-3">
<ul class="affix doc-nav nav nav-list">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</div>

<div class="doc-content col-md-9">
<section id="section-1">
<h3>Section 1</h3>
<p>Section 1 content here.</p>
...
</section>
<section id="section-2">
<h3>Section 2</h3>
<p>Section 2 content here.</p>
...
</section>
<section id="section-3">
<h3>Section 3</h3>
<p>Section 3 content here.</p>
...
</section>
</div>
</div>


What you have to do next is to fix the position of the sidebar. Add the CSS rule to the custom.css file (templates/t3_bs3_blank/css).

.doc-nav.affix {
top: 200px;
bottom: 200px;
}



View more info about Bootstrap affix at: http://getbootstrap.com/javascript/#affix

Gardner.
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
I used this in sidebar.

<div data-spy="affix" data-offset-top="100">
<ul class="doc-nav nav nav-list">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</div>

Im my custom.css i put.

.affix {
top:100px;
position:fixed;
}
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
or

.affix {
width:263px;
top:100px;
position:fixed;
}
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
To use a joomla menu (main menu) without creating html, just add this code in TLPS / blocks / mainbody folder / one-sidebar-left:

Original:

<!-- SIDEBAR LEFT -->
<div class="t3-sidebar t3-sidebar-left col-xs-12 col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR LEFT -->


New:

<!-- SIDEBAR LEFT -->

<div class="t3-sidebar t3-sidebar-left col-xs-12 col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9"><div data-spy="affix" data-offset-top="90"><?php $this->_c($vars['sidebar']) ?>
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" /></div> </div>

<!-- //SIDEBAR LEFT -->


custom.css:

.affix {
top:90px;
position:fixed;
}


In this mode, you need rename the changed files and the calls in mainbody.php to preserve your work during an upgrade.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
I used this css . I used only more than 768px. Less,i use menu in collapse .

@media (max-width:767px) {
display:none;
}

@media (min-width:768px) and (max-width:991px) {
.affix {
width: 220px;
}

}
@media (min-width:992px) and (max-width:1199px) {
.affix {
width: 213px;
}

}

@media (min-width:1200px){
.affix {
width: 263px;
}
}
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Oh, great tutorials :(
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
Had a small error in Layout view, corrected now.

<!-- SIDEBAR LEFT -->

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>">

<div data-spy="affix" data-offset-top="90">

<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />

</div>

</div>

<!-- //SIDEBAR LEFT -->
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
thanks Igor Cunha, great tutorial .
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Igor,

This is a really nice tutorial !

I've followed it and it works well...

But... When I'm scrolling to the bottom of my page, the navbar overlay my footer and that's bad !

Do you know how to fix this ?

Thanks,

Polo
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

It will require some customization, could you please share the page that have the sidebar, I will check and suggest.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 14
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Gardner,

Sorry for the late answer , I didn't see yours before...

I'm afraid the site I was talking about is intranet, but I've got another one where I'd like to do the same thing. It is still in development and it uses t3-framework too. You can see it here :

http://polymetis.fr/gmpca/actualites-du-gmpca

I believe it is some JS customization, but any help will be welcome :)

Regards,

Paul
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 15
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

I checked the site you mentioned: http://polymetis.fr/gmpca/actualites-du-gmpca and see the issue but I am not sure how you want it to be, you want the footer section override the sidebar?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 16
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

I want it the sidebar not overriding the footer, and stay on top of it. (maybe, we can say "stop the affixing, when scrolling at the entire bottom";), exactly like on this page :

http://www.joomlart.com/documentation/joomla-templates/uber-template/uber-template-configuration#create-template-style.

Do you see my point ?

Regards,

Paul
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 17
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

Yeah, I got your point. it will require some JS but I am afraid it's out of our support scope. You can hire a dev to help you with that.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 18
Accepted Answer Pending Moderation
0
Votes
Undo
Ok ! Thanks...
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 19
  • Page :
  • 1


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