I am using Material Design Light without any other framework like Angular or android. Just plain old PHP, Jquery, MDL min css and js.
Simple menu
<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">language</i>
</button>
<ul id="lang-switcher-items" class="mdl-menu mdl-js-menu mdl-menu--top-left" for="lang-switcher">
<li class="mdl-menu__item">EN English</li>
<li class="mdl-menu__item">RU Русский</li>
<li class="mdl-menu__item">UK Українська</li>
<li class="mdl-menu__item">PL Polski</li>
</ul>
Menu item click must run js function like setLanguage(language)
How do i create listener for "mdl-menu__item" click? Should i use Jquery .click(function()) for every li, or is any other ways for using mdl-menu like select element?
Use jquery's click event and bind it with the class. Also define an ID for your li elements so that you can get to know which element was clicked. look at the following example
$(".mdl-menu__item").click(function(){
var id = $(this).attr("id");
alert(id+"was clicked");
})
To demonstrate i have created a jsfiddle
Related
I have a div with another div inside it containing an element i - a font awesome icon.
<div id="my-div-thispageme">
<a href="/anotherpage" class="div-menu" title="Edit">
<div>
<img style="vertical-align:middle;" src="/images/icon_pngs/icon.png" height="40px" width="40px">
Page Title <i id="settingsico" class="fa fa-cog fa-lg"></i>
</div>
</a>
</div>
I have had no luck adding a class 'fa-spin' to the i element (with id settingsico) with jQuery.
I have tried variants of both:
$("#my-div-thispageme").mouseover(function() {
$("#my-div-thispageme a div i").addClass("fa-spin");
});
and
$("#my-div-thispageme").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
but always get an error of
"Cannot read property 'addClass' of null"
Here is a JSFiddle - though I can't get the font-awesome icon to render!
It looks like your top-level div element is this: <div id="my-div">
However, you are using the selector #my-div-thispageme.
Do you mean to use the selector #my-div?
If so, it should be as simple as:
$("#my-div").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
UPDATE
Due to the error you're getting, it appears that your code thinks the DOM element doesn't exist. This leads me to think that maybe you are calling your code before the DOM has loaded, or that you have created some element dynamically.
If it is the first case, make sure that you either wrap all your jQuery code inside this:
$(function() {
// your code here
});
Or, make sure all your code is at the end of the body.
This first is equivalent to $(document).ready(), and the second waits until the DOM tree has been created for executing any code.
In my custom WordPress theme, I placed my Cart icon in the header.php, where with other things I placed it in an <li class="user-cart">. I placed the db Query within this <li> and with the "Add to Cart" button I'm trying to reload the <li> so that it can query again and show the updated count of the products added.
On AJAX success I can do it using:
success: function (data) {
$('.user-cart').load(window.location.href + ' .user-cart');
}
When I'm clicking on the Add to Cart button, it's reloading the <li> with the update count(), but it's taking another <li> within the parent <li>, like:
<li class="user-cart">
<li class="user-cart">
<span class="user-cart-icon"></span> 15
</li> <!-- cloned li -->
</li> <!-- parent or original li -->
But the good part is that, the cloned <li> loads only once, on the first click after a page reload, then all the count comes within the second <li>.
What's the wrong part in my code? I don't want any duplicate <li> — just want to reload the <li class="user-cart">.
You should try like this
success: function (data) {
$('.user-cart').load(window.location.href + ' .user-cart a');
}
P.S what does that response data contain? I would prefer to use that to update the count, without making an additional request to server
I'm using jquery address to track changes with the browsers nav buttons and have hit a bump in the road. The plugin works great for simple html links but I have a dropdown menu that is triggering an address change when the parent node is clicked. The drop down menu looks like this:
<li id="messages"><a href="#" class="drop" >Messages</a>
<div class="drop2columns dropcontent">
<div class="col_2">
<ul>
<li><a id="msgs_received" href="#msgs_received">Inbox</a></li>
<li><a id="msgs_sent" href="msgs_sent">Sent</a></li>
</ul>
</div>
</div>
</li>
When I click the "Messages" portion to trigger my dropdown the location is getting set to "/" (I would assume because my href="#")
Is there a way to ignore this onclick event?
I've been thinking about creating an onClick event that gets/sets the same URL so it doesn't trigger jqueries address change method. This seems more like a hack then a solution though. Any thoughts?
In your JS, try this:
$("#messages").bind("click", function(e){
e.preventDefault();
});
I've been beating my head against my desk for the last two days over this one. I'm making an app that displays info from a db, the title/link, thumbnail, and time saved wrapped in an unordered list, like so: http://blog.madebycraig.com/images/full.jpg
What I'm trying to do is have a minimize button on the element, toggling the thumbnail and time saved on and off: http://blog.madebycraig.com/images/minimized.jpg I can accomplish this, but it's all or nothing. I click one minimize button, and everything goes. How can I contain it to just toggle items with a certain class name that are children of the div that the minimize button is in? I've tried .parent(), .child(), .next(), .prev(). I've thrown everything at it that I know. Now I turn to you, kind sirs (or madams). What am I doing wrong? Here's the ul I'm trying to run it on.
echo'
<li class="bookmarkContainer">
<img class="thumb" src="images/placeholder.png" />
<div class="title">'.$row['title'].'</div>
<div class="dt toggle">'.relativeTime($row['dt']).'</div><br />
<a class="collapse" href="#">hide</a>
<a class="delete" href="?delete='.$row['id'].'" id="'.$row['id'].'">Delete Bookmark</a>
</li>';
You can do it using .closest() and .find() like this:
$(".collapse").click(function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
If you have lots of these, or they are changing via ajax (seems like a search-resulty thing), use .live() or .delegate() like this:
$(".collapse").live('click', function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
//or...
$("#ulID").delegate('.collapse', 'click', function() {
$(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
I'm working on a project for an MMO "guild" that gives members of the guild randomly generated tasks for the game. They can "block" three tasks from being assigned.
The lists will look something like this:
<ul>
<li class="blocked">Task that is blocked</li>
<li class="blocked-open">Click to block a task</li>
<li class="blocked-open">Click to block a task</li>
</ul>
The blocked-open class means they haven't chosen a task to block yet. The blocked task means they've already blocked a task. When they click the list item, I want this to appear:
<ul class="tasks-dropdown no-display">
<li><h1>Click a Task to Block</h1></li>
<ul class="task-dropdown-inner">
<?php
//output all tasks
foreach($tasks as $task) {
echo '<li class="blocked-option"><span id="'.$task.'">'.$task.'</span></li>';
}
?>
<br class="clear" />
</ul>
</ul>
I don't quite know how, when the user clicks the .blocked-open line-item, to show that dropdown under only the one they clicked.
My jQuery looked like this before I became confused.
$("li.blocked-open").click(function() {
$("ul.no-display").slideToggle("900");
});
$(".blocked-option span").click(function() {
var task = $(this).attr('id');
alert("You have blocked: " + task);
location.reload(true);
});
I tested it by putting the dropdown under a line item in the code, and it worked fine, but when I have more than one dropdown in the code, clicking on one line item toggles all the dropdowns. I'm not sure what to do. :-p.
Your problem is caused because you currently have no way of uniquely identifying which dropdown you want to appear and that links it with the item you've clicked.
An easy way, but not very flexible, would be to assign a simple numerical id to each "blocked" or "blocked-open" item. Then give each dropdown an id of something like eg dropdown_1. Then adjust your code to something like this:
$("li.blocked-open").click(function() {
var id = $(this).attr("id");
$("#dropdown_"+id).slideToggle("900");
});
I haven't tested this, but it should work... I think :)