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
Related
I am referencing the gallery selector options that auto cycle in the relative content. This site is built in full HTML hard code so feel free to view source.
Everything is completely operational on local side. As soon as I upload to godaddy and test, the functionality is not working: https://www.steam-green.com/gallery.html
Here is what is not working:
<div class="collapse navbar-collapse latest--project" id="navbarfiltr">
<ul class="simplefilter">
<li class="active" data-filter="*">All</li>
<li data-filter=".carpet-cleaning">Carpet & Rug Cleaning</li>
<li data-filter=".upholstery-cleaning">Upholstery Cleaning</li>
<li data-filter=".tile-and-grout">Tile & Grout</li>
<li data-filter=".hardwoods">Hardwoods</li>
<br><br>
<li data-filter=".water-damage-restoration">Water Damage Restoration</li>
<li data-filter=".mold">Mold Removal</li>
<li data-filter=".rug">Area Rug</li>
</ul>
</div>
I am seeing you are using isotope jquery library.
I saw your custom.js and I don't see where you are initilizing this plugin for that specific menu nor your html.
Please refer again to documentation https://isotope.metafizzy.co/
Its possible that you didn't update your custom.js file in production, please check.
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.
I am new to HTML and CSS, but I have an idea on JavaScript.
Previously, I made a horizontal switch in the following way using flat-ui from flat-ui
Now I want to implement vertical switch in the following way
How can I make it?
something like this?
<ul class="body">
<li >
<a>switch #1</a>
</li>
<li class="active">
<a>switch #2</a>
</li>
</ul>
See the css and animation in link
jsfiddle.net/uNFWX/
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.