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();
});
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.
Building off a previous question,
Is it possible to make a jquery button do two things at once?
Right now I have this:
<td>
<a href="#'.$row['abstractid'].'">
<button onClick="$(\'.hide\').toggle();">Read Abstract
</button>
</a>
</td>
This works (yay!) - it both jumps to and displays the div that is hidden with that database id number- but since those results are looped, it displays ALL of them. Now, it goes to the correct place on the page, but it still shows all the results instead of just that one result.
Could I make this button so onClick it not only toggles the hide but also sets the database ID number for the query to pull so it only displays one set of results- OR just only displays that one database ID set and leaves the others hidden? Would I have to set the table id as the database id and give that the class of hidden instead of putting it into a div?
Example:
right now it's:
<div id="'.$row['abstractid'].'" style="display:none;" class="hide">
<table>
stuff
</table>
But would I need to make it
<table id="'.$row['abstractid'].'" style="display:none;" class="hide">
instead? This makes sense to me in theory but I'd have to be a little creative with my CSS I think.
You could use onclick="function() {$(\'.hide\').toggle();$(\'.hide\').toggle();}"
However, I would not recommend that. My suggestion is:
<button class="read-abstract">Read Abstract</button>
Then
<script>
$(document).ready( function() {
$(".read-abstract").live( "click", function() {
// do stuff here
});
}
</script>
For more on unobtrusive Javascript: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Regarding showing and hiding values I always approach it as so:
HTML:
<button data-hide-id="1" class="read-abstract">Read Abstract</button>
<table id="table-1" class="hide">
<tr>
<td>Contents will show hide on click of read abstract</td>
</tr>
</table>
JS (in <head>):
<script type="text/javascript">
$(document).ready( function() {
$(".read-abstract").live( "click", function() {
$("#table-" + $(this).data("hide-id") ).toggle();
});
}
</script>
Working example: http://jsfiddle.net/sZREt/
You toggle all items with the class "hide" instead of only the specific one
You don't need to put a button into an anchor (I don't even know if it's allowed). If you need it to look like a button you can use CSS.
IDs have to start with a letter and not with a number. I guess your abstractid is a number, therefore I prepended abstr
If you give an element the class hide (which presumably hides it) then you don't really need the inline style.
Here is the updated code:
Read Abstract
<table id="abstr'.$row['abstractid'].'" class="hide">
there's a php scripts which create multiple <p>text</p> elements due to user's query.
I'd like to create an option that every time user clicks on a certain element , the text in this elements will appear in a text box.
The intuitive way to do such task is:
<p class="c1"> textA...</p>
<p class="c2"> textB...</p>
<p class="c3"> textC...</p>
<p class="c4"> textD...</p>
and the jQuery code will be :
$("p.c1").click(function(){ code... }
$("p.c2").click(function(){ code... }
etc ...
Is there any elegant method of implementing this functionality ?
Any suggestion will be helpful,
Thanks in advance
Event delegation.
$('body').on('click', 'p[class^=c]', function(evt) {
var clickedPara = $(this);
});
There, I filter on paragraphs whose class attribute starts with c. This is just demonstrative but is ultimately likely not very watertight. You should give your elements a common class. If this class was, say, 'clickablePara', you could instead use
$('body').on('click', 'p.clickablePara', function(evt) {
Event delegation means you bind one event and evaluate the trigger element when it fires, rather than binding lots of events to each possible element. If this is new to you, it's worth looking into. If you happen to be in the UK, the upcoming edition of .NET Magazine has an article by me discussing it.
you can assign multiple classes to HTML elements. You can change your PHP script to output mutliple classes. i.e.
<p class="c1 clickable"> textA...</p>
<p class="c2 clickable"> textB...</p>
<p class="c3 clickable"> textC...</p>
<p class="c4 clickable"> textD...</p>
Then you can use the click function.
$("p.clickable").click(function () {
$('#yourtextbox').val($(this).text());
});
JSFIDDLE
It does'nt say anything about dynamic elements inserted with ajax, so I'm guessing the elements are created serverside before the page is outputted and that delegation is'nt neccessary ?
$("p[class^='c']").on('click', function() {
$("#textboxID").val(this.innerHTML);
});
FIDDLE
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'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();
});