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.
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>
I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/
You are looking for the Scrollspy.
This is how you can do it:
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' );
}
I've used the jQuery Mobile ThemeRoller to create a theme for a new mobile website I'm working on. In general the theme works well, but the list-divider that's displayed in the ThemeRoller isn't used in my application.
Here's a screenshot illustrating the problem:
ThemeRoller problem http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png
The relevant HTML for the page in question is:
<div id="schedule" data-role="page" data-theme="a">
<div data-role="content" data-theme="a">
<ul data-role="listview">
<li data-role="list-divider">8:00 am</li>
<li>Welcome & Keynote</li>
<li data-role="list-divider">9:00 am</li>
<li>Session title displayed here</li>
</ul>
</div>
</div>
I've even tried adding a few things I found in the ThemeRoller markup:
<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>
This has no effect. No matter what I do, it seems to set the class to ui-bar-b. I can live-edit the HTML in Chrome and change ui-bar-b to ui-bar-a and it looks exactly how I would expect.
Am I doing something wrong? Is this maybe a jqm bug?
Using jqm 1.1.0 and jquery 1.7.0.
You can add the data-dividertheme="a" attribute to your data-role="listview" element to force a specific swatch to be used for the divider list-items. By default, if your listview is set to theme a, then the dividers will be set to theme b, so you have to force list-dividers to be the correct theme or you have to build your themes with this in mind.
<ul data-role="listview" data-dividertheme="a">
<li data-role="list-divider">8:00 am</li>
<li>Welcome & Keynote</li>
<li data-role="list-divider">9:00 am</li>
<li>Session title displayed here</li>
</ul>
Here is a demo: http://jsfiddle.net/8aZpQ/ (this demo forces theme e for dividers)
And here is the documentation for this: http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html
I have made a Spry 4-tabbed panel from Dreamweaver and customised it to use as a portfolio site.
I want to run 'Flickrshow' as the 3rd tabbed panel content. (Flickrshow is a javascript slideshow that links to a Flickr photo sharing account).
My problem is that the Flickrshow slideshow doesn't display in the 3rd tabbed panel content.
However it does display in the 1st tabbed panel content and it also does display correctly when the code is run independently. I also have another Javascript 'simplegallery' running in the 2nd panel content, which works fine. Is this causing a conflict?
Any suggestions why this won't display?
Thanks!
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>
<script> var cesc = new flickrshow('cesc', {
autoplay:true,
interval:4200,
hide_buttons: false,
license:null,
tags:'website',
user:'52147781#N05'});</script>
<div id="nav1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About</li>
<li class="TabbedPanelsTab" tabindex="0">Graphics</li>
<li class="TabbedPanelsTab" tabindex="0">Photos</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"><div id="simplegallery1"></div></div>
<div class="TabbedPanelsContent"><div id="cesc"><p>Please enable Javascript to view this slideshow</p></div></div>
<div class="TabbedPanelsContent"><div id="contact"></div>
</div>
</div>