<ul data-role="listview">
<li>Facebook</li>
<li>Google</li>
<li>Apple</li>
</ul>
$(document).bind('pagebeforecreate',function(){
$('form ul li').each(function(){
$(this).html('<a role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
});
});
The code above should change the listview into a list of buttons with a plus icon on the left side. However, it isn't working for me. The <a...></a> is being inserted correctly, but the icon isn't showing up correctly. This default icon is still being displayed. How can I fix this?
In addition to #patrick's reply above, you also need to initialize the button widget after attaching it to the document. Try this,
$(document).bind('pageshow',function(){
$('ul li').each(function(){
var $this = $(this);
$this.html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$this.text()+'</a>');
var $btn = $('a', $this);
$btn.button();
});
});
According to the jQuery mobile docs a data-role="button" attribute is required to style any anchor link as a button.
In your code you have:
<a role="button"
This is incorrect.
You need to change this to:
<a data-role="button"
So your whole code will now be:
<ul data-role="listview">
<li>Facebook</li>
<li>Google</li>
<li>Apple</li>
</ul>
$(document).bind('pagebeforecreate',function(){
$('form ul li').each(function(){
$(this).html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
});
});
Related
I have a question for you. I'm trying to use localstorage in my dropdown toggle menu. I have the following HTML code:
<li class="nav-item" id="sidebar">
<a class="sidebar-heading" href="#thirdSubmenu" data-toggle="collapse"
class="dropdown-toggle">Anagrafica</a>
<ul class="collapse list-unstyled" id="thirdSubmenu">
<li>
<a class="nav-link" href="">
<span data-feather="database"></span>
Categorie Materiale</a>
</li>
<li>
<a class="nav-link" href="">
<span data-feather="database"></span>
Sottocategorie Materiale</a>
</li>
..
I want that, when I click on Anagrafica and dropdown menu is opened, when I update my page it remains open too, storing if the dropdwon was opened or not. I'have tried the following code but does work. I'm not good at jQuery, so I hope that someone of you could help me.
Here my jQuery code:
$("#thirdSubmenu li a").on("click", function() {
var container = $(this).closest("li");
var selected_item_index = $("#thirdSubmenu li a").index(container);
localStorage.setItem("sidebar_selected", selected_item_index );
});
$(function() {
$("#thirdSubmenu li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active");
});
You want to index the parent <li> within it's siblings
Try changing
$("#thirdSubmenu li a").on("click", function() {
var container = $(this).closest("li");
var selected_item_index = $("#thirdSubmenu li a").index(container);
localStorage.setItem("sidebar_selected", selected_item_index );
});
To
$("#thirdSubmenu li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var selected_item_index = $(this).parent().index();
localStorage.setItem("sidebar_selected", selected_item_index );
});
You can also go with JavaScript Cookies. Store a value in a cookie
I want menu item to be highlighted when an item is selected in the drop down. I tried following code. Code is working if I prevent default behavior of a which I don't want, So I tried using local storage but it is not working, only page refreshes and default Home item of menu is highlighted.
Menu
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Fire & Water <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Storm Damage</li>
<li>Commercial Restoration</li>
</ul>
</li>
<li class="dropdown">
Mold <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mold Remediation</li>
<li>What is Black Mold?</li>
<li>Mold "Removal" vs Remediation</li>
<li>Commercial Mold Remediation</li>
</ul>
</li>
</ul>
This is Working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(e){
e.preventDefault();
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
$("li").removeClass('active');
$('a[href="' + hrefs + '"]').parents('li').addClass('active');
});
});
This is not working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
localStorage.setItem('activeTab', hrefs);
var activeTab = localStorage.getItem('activeTab');
$("li").removeClass('active');
alert("activeTab : " + activeTab);
$('a[href="' + activeTab + '"]').parents('li').addClass('active');
});
});
I think, you have to apply active class on page load event not in click event. your code should be something like as below
$(document).ready(function(){
// activate left navigation based on current link
var current_url = window.location;
$('.dropdown-menu li a').filter(function () {
return this.href == current_url;
}).last().parents('li').addClass('active');
});
On every page load, you have to filter out link of current page from your navigation bar and then apply class active in parent. I have posted code for your explanation purpose you have to modify as per your HTML code structure.
Hope, this will work :)
I have been trying to use the following code to get my nav element to stay highlighted once clicked. My page will not reload, but will display all content on one page - show this should work. Do I have a problem with selectors? Or is something else wrong? It looks like it should be working to me...
HTML:
<div class="admin-main-area">
<div class="admin-left-nav">
<ul id="admin-left-links">
<li><a class="link" href="#">Orders</a></li>
<li><a class="link" href="#">Reports</a></li>
<li><a class="link" href="#">Add Product</a></li>
<li><a class="link" href="#">Update Products</a></li>
<li><a class="link" href="#">Update Stock</a></li>
<li><a class="link" href="#">Update Pricing</a></li>
</ul>
</div>
<div class="admin-content-area">
<p>this is some content</p>
</div>
</div>
Javascript:
<script>
$('a.link').click(function(){
$('a.link').removeClass("active");
$(this).addClass("active");
});
</script>
CSS:
.active {
background-color: #f43333;
}
At the time you setup the click event handlers the links are not yet loaded in the DOM.
Try this (it will setup the handlers when the DOM is loaded):
$(window).ready(function() {
$('a.link').click(function() {
$('a.link').removeClass("active");
$(this).addClass("active");
});
})
Of course, you will also need to include jQuery before the <script> snippet
Here's a working fiddle:
https://jsfiddle.net/nsjfe5g1/
I don't understand what you need , but for my understandings you can simply do this with css :focus selector
a:focus {
background-color: #f43333;
}
Try with demo https://jsfiddle.net/nsjfe5g1/2/
I would like to redirect about and contacts to their "proper page" when they get clicked, e.g. clicking on about should redirect to about.html.
It does work quite well with magazine, books and talks, since I just want them to redirect to index.html when clicked.
This is my html code:
<div class="navbar-collapse collapse">
<ul id="filter">
<ul class="nav navbar-nav">
<li><a href="#" data-group="magazine">
<span class="span-text">Magazine</span></a></li>
<li><a href="#" data-group="books">
<span class="span-text">Books</span></a></li>
<li><a href="#" data-group="talks">
<span class="span-text">Talks</span></a></li>
<li><a href="about.html">
<span class="span-text">About</span></a></li>
<li><a href=mailto:info#enyamoore.com>
<span class="span-text">Contact</span></a></li>
</ul>
</ul>
</div>
Js:
<script>
$(document).ready(function() {
/* initialize shuffle plugin */
var $grid = $('#grid');
$grid.shuffle({
itemSelector: '.item' // the selector for the items in the grid
});
/* reshuffle when user clicks a filter item */
$('#filter a').click(function (e) {
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});
</script>
Have you any suggestions? Thanks in advance.
This is should be a simple fix, you only have to put a back slash in front of the page. Note that #/about.html will not work. For the "using data-groups" part could you be a bit more specific? That might affect this answer.
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle