I am using Twitter Bootstrap to build a portfolio that uses the carousel.
I'm using the following as a way to navigate to certain elements in the carousel:
<ul id="portfolionav" class="nav nav-pills">
<li class="" id="carousel-ux">UX | UI</li>
<li class="" id="carousel-vd">Visual Design</li>
<li class="" id="carousel-web">Web</li>
<li class="" id="carousel-mobile">Mobile</li>
<li class="" id="carousel-corpid">Identity</li>
What I am trying to do is apply the active class on an LI tag when a specific element in the carousel is reached. For example, when the carousel slides to element #5, the active class needs to apply to the "mobile" LI tag, and be removed from any of the other LI tags.
Can anyone please give me a idea on how to do this?
Thank you!
I had been playing around with a similar idea, based on a post i found here: http://forrst.com/posts/Adding_pagination_to_bootstrap_carousel-ULn
My implementation here, with slide titles rather than just bullets:
http://jsfiddle.net/64qK2/
By tweaking the javascript, you could set the active class on the LI item rather than the link, and add nav stylings.
/Mark
Related
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
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>
We are using JSF2.0 ,our end HTML needs to have <li> in the list box instead of <optionValues>. We are using <h:selectOneListBox> in the jsf . We are trying to use Jquery to change the <optionValues> to <li>.
Is there any other bettter solution for this?
Not with the standard JSF HTML component set. They all renders standard HTML elements without any fanciness.
You need to look at a JSF component library with enhanced skinnability support. The PrimeFaces component library for example, which uses jQuery UI under the covers, has a <p:selectOneListbox> which generates an <ul><li>, exactly as you need. See the showcase page. Here's the generated HTML source of the 1st <p:selectOneListbox> example on the showcase page:
<ul>
<li class="ui-selectlistbox-item ui-corner-all">Option 1</li>
<li class="ui-selectlistbox-item ui-corner-all ui-state-active">Option 2</li>
<li class="ui-selectlistbox-item ui-corner-all">Option 3</li>
</ul>
Im using the jQuery Mobile list with dividers:
http://jquerymobile.com/test/docs/lists/lists-divider.html
Currently the structure is like this (A and B are dividers):
<li>A</li>
<li>Adam</li>
<li>Alex</li>
<li>B</li>
<li>Bob</li>
<li>Barbara</li>
How can I put a span around li's that arnt dividers like so?:
<li>A</li>
<span class="myspan">
<li>Adam</li>
<li>Alex</li>
</span>
<li>B</li>
<span class="myspan">
<li>Bob</li>
<li>Barbara</li>
</span>
I could run some javascript on page load that added these spans, but this seems a bit messy to me. Are there any practical downsides to doing this? Thanks
UPDATE - The reason I want a span is I need it so when you click on a header, the li's below it collapse a bit like an accordion: http://jqueryui.com/demos/accordion/ Thanks
What are you trying to achieve?
Rather than using list divider, would it make sense to break your display into seperate listviews, i.e.
<h3>A</h3>
<ul data-role="listview" >
<li>Adam</li>
<li>Alex</li>
</ul>
<h3>B</h3>
<ul data-role="listview" >
<li>Bob</li>
<li>Barbara</li>
</ul>
This way you are not breaking the list's HTML.
Edit Another approach would be to just add classes to individual list items to visually indicate that they are grouped together. For example:
<ul data-role="listview" >
<li class="group-a">Adam</li>
<li class="group-a">Alex</li>
<li class="group-b">Bob</li>
<li class="group-b">Barbara</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/