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();
});
Related
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
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 have a drop down user menu that contains child links that I cannot get to redirect properly. I unfortunately did not code the front-end, so I'm just trying to get it to link to dynamic PHP urls. I'm also working within the CodeIgniter framework, by the way. There are two clicks in the user's process (similar to Google's user icon). 1. You click the user image and drop down arrow, 2. You see profile, settings, logout.
With the following script, clicking the drop-down arrow redirects to the first link, profile, without even doing the drop-down animation. Any thoughts?
Here's the PHP file:
<div class="user css3">
<img src="images/user.jpg" alt="user" class="css3" />
<div class="child css3">
<ul class="user_links">
<li>Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
Here's the JavaScript for drop-down arrow button:
$('div.user').click(function() {
$('div.user div.child').slideToggle("fast");
$('div.live div.action div.category div.child, div.live div.action div.sort div.child').slideUp();
return false;
});
Here's the JavaScript that I came up with for the <ul> (I'm not much of a JS dev. haha):
$('ul.user_links li a').click(function() {
document.location($(this).attr("href"));
});
Any thoughts are greatly appreciated!
I said in the comments:
Remove the js for the <ul>, and then return false from the other block, and it should work.
Here is why: when you click an anchor, the event starts propagating upwards through the document structure (the DOM). When it reaches another element wired to catch the click event, it runs this element's event handler.
When you click the anchor, the click handler on div.user runs. The last statement there, return false, means "stop the event propagation, and prevent the default behavior". On an anchor, the default behavior would be to follow the link. Your code told the browser not to do it.
Not sure if this is the root cause, but anyways use:
window.location = $(this).attr("href");
Instead of
document.location($(this).attr("href"));
try adding an onclick event to the drop down that returns false, thus stopping the default action for links.
<img src="images/user.jpg" alt="user" class="css3" />
Or changing it so it's just a 'span' tag instead of a 'a' tag. You'd have to change the JQuery selector that causes the drop down as well so that it looks for 'span' instead of 'a'
I'm not sure why you need change the default behaviour of the links 3 links though, they would redirect to the href location anyway surely?
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 :)