I am currently building a small website using ruby on rails and foundation as the css framework. I implemented a top bar for navigation with 2 items being nested drop downs.
Here is the code of the top-bar that is inside my layout/application.html.erb:
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Logo</li>
<li>Home</li>
<li>Statistics</li>
<li>News</li>
<li>Items
<ul class="menu">
<li>Infected items</li>
<li>Detective items</li>
</ul>
</li>
<li>Guides
<ul class="menu">
<li>Lore</li>
<li>Beginner tutorial</li>
<li>Mod rules</li>
<li>Strategy guide</li>
<li>How to be a good detective?</li>
</ul>
</li>
</ul>
</div>
</div>
As shown in the following picture:
The code behaves as intended until I open the statistics page right next to home, as shown in this one:
If I enter the stats page manually, I get no problems until I switch back to home. This happens anytime I click a link of the top bar that is not the same page that I currently am at.
I currently have no custom javascript or jQuery listeners implemented at all and I'm using a fresh foundation installation using foundation-rails.
Why is this happening and how can I solve it? Is it related to rails?
Thank you
This was due to a conflict between foundation and turbolinks.
For anyone running into this kind of apparently random issues, I solved this by following the approach suggested here:
http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
So I have an app that I am trying to strip out all of the JQuery Mobile and now use Intel's App Framework. I am having trouble figuring out how to integrate multiple html pages into the app so that I don't have to have all my code in a single file. I tried this:
$.ui.loadContent("page2.html");
but that doesn't seem to work. I get a 'loading content' spinner but nothing seems to happen.
How do I link pages together from different files?
Ok so I have figured it out. The documentation can sometimes be hard to search and there is no search box available on their website right now. But if you go to the quickstart and then then AFUI(on the left) and then panel properties they say:
data-defer="filename.html" - This will load content into the panel
from a remote page/url. This is useful for separating out content into
different files. af.ui.ready is not available until all files are
loaded asynchronously.
So in my index.html file I have something like this:
<div id="afui">
<nav>
<ul class="list">
<li>Post a Lunch</li>
<li>Personal Profile</li>
<li>Select University</li>
</ul>
</nav>
<!--Main View Pages-->
<div class="panel" title="Events" id="event-list_panel" data-defer="event-list.html" data-load="loadMainEventsList"> </div>
<div class="panel" title="Description" id="description_panel" data-defer="description.html" data-load="loadEventDetails"> </div>
<div class="panel" title="Select University" id="select-university_panel" data-defer="select-university.html"> </div>
</div> <!--id="afui"-->
and then I have the details of each page in seperate files. In my mind this does a literal copy/paste, and I haven't found any evidences yet that it isn't just a copy/paste.
Update:
in AF3 data-defer is now data-include
How to select a tab by id in recent versions of jQuery UI? I used to do this:
$(mytabs).tabs("select", "#tab_contents");
And it worked fine, even with some of the tabs hidden. Now I upgraded jQuery UI and the code above does not work anymore. I tried following some other suggestions on this site, and ended up with this:
$(mytabs).tabs("option", "active", $(mytabs).find("li").index("#tab_header"));
Not only it's way more verbose, but it doesn't select the correct tab, since some of them are hidden. How can it be done?
P.S. To hide some tabs, I used $("#tab_header").hide(). Is this still correct in recent versions, or is there a better way?
Found out a solution:
$(mytabs).tabs("option", "active", $("#tab_header").index());
This selects the correct tab, regardless of which ones are visible (it's even possible to select tabs currently invisible - the contents are shown, but the header is not).
<div id="tabs">
<ul>
<li id="ha">A</li>
<li id="hb">B</li>
<li id="hc">C</li>
<li id="hd">D</li>
<li id="he">E</li>
</ul>
<div id="a">AAA</div>
<div id="b">BBB</div>
<div id="c">CCC</div>
<div id="d">DDD</div>
<div id="e">EEE</div>
</div>
.index starts from 0,
$(mytabs).tabs("option", "active", $("#ha").index());
but if you use #a instead of #ha use like this
$(mytabs).tabs("option", "active", $("#a").index()-1);
I'm just starting with jQuery Mobile and adapting an existing application.
My problem is jQuery mobile is inserting anchor tags in my li tags within an unordered list.
The doc tells me that read-only lists will be created if the list has no links.
This is very unexpected behavior to put it mildly.
When I comment out the JQM includes I get my simple li elements back, so I know it is JQM that is doing it.
Markup without JQM:
<ul id="root_ul" data-role="listview">
<li id="1_1306901436141">Profile
</li>
</li>
Markup after JQM:
<ul id="root_ul" data-role="listview" class="ui-listview">
<li id="1_1306901436141">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#/evaluation_headers/714%20/tastesheet&ui-page=ul1_1306901436141" > <span>Profile</span>
</a>
</div><span> </span>
</div>
</li>
JQM has put in links into the list but I want a simple readonly list with no links.
Thanks everyone for responding. In my effort to simplify my code to submit to this site I failed to include a nested list within an item. I created a simple nested list and found that this causes JQM to insert the links. Not what I want or expected but will now figure out a workaround. The nested lists are at the heart of my app so maybe I won't use JQM.
Thanks again for your responses.
What you can do do avoid jQuery Mobile inserting anchor tags for your nested ul is to wrap the nested ul in a div. In fact besides for the conventions provided by the JQM framework you can also pretty much style a JQM li anyway you wish by placing what ever markup/css you want inside the li.
<ul>
<li>Item 1</li>
<li>
<div><ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
</ul></div>
</li>
</ul>
I have three level data in my page and on the first level I need to display multiline data.
When I have only one level the multiline works perfect. so the following code works well.
<ul data-role="listview"
data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e">
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>150 EUR</h4>
<p>12:50 to 14:15 (1h25) Direct</p>
</li>
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>175 EUR</h4>
<p>15:00 to 16:15 (1h15) Direct</p>
</li>
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>225 EUR</h4>
<p>16:00 to 20:00 (4h) wait 2h Frankfurt, Germany</p>
</li>
</ul>
And show perfect result.
But when I add few UL to show nested stuff the things started breaking.
I put following lines.
<ul data-role="listview" data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e">
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>150 EUR</h4>
<p>12:50 to 14:15 (1h25) Direct</p>
<ul>
<li>View</li>
<li>Submit</li>
<li>Reset</li>
</ul>
</li>
</UL>
And it starts breaking. And give result like following.
Any help would be appreciated.
Try below link and check whether you are using proper syntax or not, it may be possible you are not using code pattern which is present in jquery mobile or Jquery mobile understandable code.
Link: http://jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-nested.html
It looks like nesting <ul> tags in a jQM list view as a direct child does not work. It looks like something in the jQuery Mobile framework removes those from list views.
You can, however, wrap your child <ul> tags with a <div>, that works and can still be styled to your liking.
Example: http://jsfiddle.net/shanabus/MVt2B/