I am using Bootstrap scrollspy for a vertical menu.The menu has some titles, each title for a div in the page.
The scroll spy works fine, but the problem occur when the user expand a section to see more information. The expands and collapse are done using ng-show. When the section expands the scroll spy will not point on the correct element.
I searched for a solution but all of them didn't work, I think because they are for adding elements to the DOM dynamically, while my problem in showing and hiding elements.
Here is an image to demonstrate the problem.
The scroll menu bar code:
<div class="col-sm-2" style="padding-left: 0px; padding-right: 0px;">
<div id="sidebar" class="bs-docs-sidebar hidden-print" role="complementary" style="padding-left: 0px;">
<ul class="nav bs-docs-sidenav" >
<li>
Program Committee
<ul class="nav" >
<li>Big Data, Business Intelligence, Analytics</li>
<li>BPM, Web Services, SOA</li>
<li>Cloud and Distributed Computing</li>
<li>E-Learning, M-Learning</li>
<li>High Performance Computing</li>
<li>Interoperability and Future Internet Technologies</li>
<li>IR, Data and Knowledge Management</li>
<li>Multimedia, Computer Vision and Image Processing</li>
<li>Networking, Sensor Networks, Mobile Computing</li>
<li>Natural Language Processing</li>
<li>Security, Privacy</li>
<li>Social Computing </li>
</ul>
</li>
</ul>
</div>
Sections Code the have ng-click and ng-show:
<div id="bigdata" class="bs-callout bs-callout-warning" ng-click="show_bigdata=(show_bigdata+1)%2">
<h3>Big Data, Business Intelligence, Analytics</h3>
</div>
<div id="show_bigdata" ng-show="show_bigdata">
<h4 class="page-header">Track Chairs</h4>
<ul>
<li><i class="icon-chevron-sign-right"> </i>Ahmed Mike, New Mexico Tech, USA
</li>
<li><i class="icon-chevron-sign-right"> </i>Mohamed Mokbel, University of Minnesota, USA
</li>
</ul>
<h4 class="page-header">PC Members</h4>
<ul>
<li><i class="icon-circle-arrow-right"> </i>Ahmed Lbath, University Joseph Fourier of Grenoble, France</li>
<li><i class="icon-circle-arrow-right"> </i>Amr Awadallah, Cloudera, USA</li>
</ul>
</div>
You may try to manually trigger the scroll event on the window once the expanding of a section is done.
I once ran into a simmilar problem and worked around the issue by forcing scrollspy to update after the DOM has changed.
Updating scrollspy is rather easy as it hooks in on the scroll event of the window, which you can manually trigger after you are done manipulating the DOM.
whendone {
$( document ).trigger( 'scroll' );
}
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
Context: I have created a top-bar menu using Foundation 6 (following the docs), with it displayed horizontally on large screens, and as a responsive vertical menu on medium and down. There is one item with children which is displayed as a dropdown on large screens, and as a drilldown menu on medium screens and below.
I created the site using the Zurb 'Yeti Launch' app, so as far as I can tell, I have all js libraries included.
Issue: Nothing happens when either the dropdown parent or any of the child items are clicked. Any help getting to the bottom of this is much appreciated!
My markdown for the menu is as follows:
<div class="top-bar" id="main-menu">
<div class="row">
<div class="large-12 columns">
<div class="top-bar-left">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
<li>Home</li>
<li>What's On</li>
<li>Listen Again</li>
<li>Community</li>
<li>
About
<ul class="menu vertical">
<li>Presenters</li>
<li>Volunteers</li>
<li>The Board</li>
</ul>
</li>
<li>Get Involved</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
Did you added the init code?
$(document).foundation();
The CodePen example with the same HTML as you provided worked.
http://codepen.io/shoaibik/pen/PNravB
Update:
It look likes you can called Foundation JS and jQuery second time in app.js file, Please remove once instance and confirm again.
If you go to this dev site (it's a Joomla site using bootstrap) and view on 1023px wide screen or smaller (or any smartphone), there is a hamburger menu. If you click it, it drops down a menu and if you click "Learn More", it jumps to a form (because it's really just an anchor). However, the dropdown menu stays open (because it's not going to a new page I guess).
Is there an easy way to add some code that basically says "any dropdown menu click should CLOSE the dropdown menu"?
Here is the code for the menu when it's expanded (first nav tag is probably all that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
Home
</li>
<li class="dropdown">
Features <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Scheduling & Routing
</li><li>
Billing & Invoicing
</li><li>
Mobile Workforce
</li><li>
Office Staff Persona
</li><li>
Owner Persona
</li><li>
Field Worker Persona
</li></ul></li>
<li class="dropdown">
Industries <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Cleaning
</li><li>
Lawn
</li><li>
Pest
</li><li>
HVAC
</li></ul></li>
<li>
Pricing
</li>
<li class="active dropdown">
About <b class="caret"></b>
<ul class="level1 dropdown-menu"><li class="current active">
Resources
</li><li>
Support
</li><li>
Security
</li></ul></li>
<li class="">
Learn More
</li>
<li>
Contact
</li>
<li>
Log In
</li>
</ul></nav>
And then when it collapses again, the classes in the nav tag look like this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
So it looks like that class of "in" needs to go away. Therefore, I am trying this jquery, but it isn't working. Shouldn't this work?
jQuery(function($) {
$("li a").click(function() {
$("nav.t3-navbar-collapse").removeClass( "in" );
});
});
Sorry for the bad luck on the first question, I actually just did this recently so I have a snippet on hand for you.
Basically what you want to tell the code to do is close the nav when you click an anchor, so you target the a and use a slideUp property.
$(document).ready(function(){
$("a").click(function(){
$("Your_Nav_ID").slideUp('slow');
});
});
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks
I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.
This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO