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.
Related
I am trying to make a dropbox-like custom context menu. What I need is that when the user right-clicks an element, the options such as "Edit" and "Delete" that pop up in the context menu link to "edit" and "delete" for that specific element. The context menu:
<div class="screenlock-transparent">
<div class="context-menu-wrapper">
<ul class="context-menu">
<li><i class="icon-edit" style="margin-right: 10px;"></i>Edit</li>
<li><i class="icon-trash" style="margin-right: 10px;"></i>Delete</li>
</ul>
</div>
</div>
The way I have gone about this is to user jQuery to fire an event when the user right-clicks an element:
<script type="text/javascript">
$(document).ready(function(){
// Launch on-right-click on element
$(".custom-context-menu").mousedown(function(){
if(event.which == 3) {
if ($(this).hasClass("ul-all-years-faculty")) { // If on the general faculty ul
// Load external php here to build url string specific to the element
// Replace current href value with the url string produced by the external php script
} else if ($(this).hasClass("ul-year-specific-faculty")) {
} else if ($(this).hasClass("ul-semester")) {
} else if ($(this).hasClass("ul-subject")) {
}
}
});
});
</script>
Where you see the quotes if the if statement is where I am trying to write the code that will call my external php script and replace the href of the, for example, "Edit" link in the context menu with an href of a url containing variables specific to the element that was right-clicked.
I know how to use .load() for a div - $("#ID").load(...) will load in the echoed content inside that div. However, what about loading inside the href of a link (a) ?
Thank you so much. I greatly appreciate your help.
If I understand you correctly, and you want to change the href of an a tag, you want to use the .attr() function
http://api.jquery.com/attr/
so it would look something like this
$("a").attr("href", "http://newlink.com")
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">
I am generating an HTML table with PHP (using the codeigniter framework) and I'm trying to add a link that will open a jquery dialog with some information that is specific to that row. Sort of a 'More Info' type link that simply opens the dialog.
When I add the dialog div to that row and encapsulate the required information in it, it breaks the table (cannot have a div in the table).
Plus, it seems I would need to add an unknown amount of jquery dialog functions declared... I'm assuming some sort of a function is needed and the ID of the element that opens the dialog as well as the ID for the dialog would be passed to the function. But, it seems there should be something built into jQuery for something like this.
Am I missing something, and if so does anybody have any tips to get me pointed in the right direction?
Embed the information as metadata on the row, a la…
<tr data-foo="additional data here" data-bar="even more data">…</tr>
And in your javascript, a little magic called .live():
$('#your_table .show_dialog').live('click', function(){
var data_for_dialog = {
foo: $(this).closest('tr').attr('data-foo'),
bar: $(this).closest('tr').attr('data-bar')
}
show_dialog(data); // your own code to show the dialog
});
Where you have an <a> tag with the class "show_dialog". Note that this isn't very efficient if you have a lot of attributes or any of them contain data that needs to contain newlines. You could improve this by iterating over each attribute defined on that <tr> and automatically including the attributes starting with data-. That's out of the scope of this question though.
As far as showing the dialog, something like this would be sufficient:
function show_dialog(data) {
var $dialog = $('#dialog');
for(var attr in data) {
$dialog.find("." + attr).html(data[attr]);
}
$dialog.show();
}
<div id="dialog">
<p class="data-foo"></p>
<p class="data-bar"></p>
</div>
That's untested, but should illustrate what's happening well enough.
Note: You can define custom attributes in HTML5 so long as they are prefixed with "data-", hence that showing up everywhere above.
I agree with Tomalak's comment to use one box and change the content in it.
If you wanted to do what I think you are trying to do(without seeing your code) it seems that you might be putting the dialog div in the <table> tag instead of a <td> tag, that would be the first thing to check.
Secondly to open the dialog you can just reference the div next to the link:
<table>
<tr>
<td>
<span class="MoreInfo">More info</span>
<div>stuff for dialog</div>
</td>
</tr>
</table>
$(document).ready(function(){
$('.MoreInfo').next().dialog({ autoOpen: false })
$('.MoreInfo').click(function(){
$(this).next().dialog('open');
});
});
Edit: Sorry messed up the Jquery I am assuming you are using the JqueryUI Dialog
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 have following markup and javascript to sort some items. Items can be sorted within a block or across other blocks. It works but I have a problem in retrieving correct block ID after an item is moved from one block to another.
For example, if I move item 1 within "Block 1", I get "I am in Block= block_1" but if I move Item 1 to Block 2 I still get I am in Block 1.
But I want to make the block 2 as its parent container. I need to retrieve this id so that I can do some ajax and update the db accordingly.
Can you please help me correct this??
<div id="blocks_sortable">
<div id="block_1">
<h2>Block 1</h2>
<div class="items_sortable connectedSortable">
<div id="item_1">
<span>Item 1</span></div>
<div id="item_2">
<span>Item 2</span></div>
<div id="item_3">
<span>Item 3</span></div>
</div>
</div>
<div id="block_2">
<h2>Block 2</h2>
<div class="items_sortable connectedSortable">
<div id="item_4">
<span>Item 4</span></div>
<div id="item_5">
<span>Item 5</span></div>
<div id="item_6">
<span>Item 6</span></div>
</div>
</div>
</div>
<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
connectWith: '.connectedSortable'
, forcePlaceholderSize: true
, stop : function(event, ui){
alert("I am in block = "+$(this).parent().attr("id"));
}
}).disableSelection();
</script>
Thank you.
I suspect the problem is you are using the wrong event. Basically what I think is happening is that the stop event is firing too soon or for the wrong object.
I would read over the docs Here and see if there is a more appropriate event for what you are trying to do.
I think what you want is something like the "update" or "deactivate" events.
Both of these events will fire once for each "block" if you move an item from one "block" to the other.
Update will only fire once if moved within a block
Deactivate will always fire for all the blocks.
With update you can check if the event is firing in the "non-original" block by checking for ui.sender:
$(".items_sortable").sortable({
connectWith: '.connectedSortable',
forcePlaceholderSize: true,
update: function(event, ui){
if(ui.sender){
alert(ui.item.attr("nodeName") + " in block = " +
$(this).parent().attr("id"));
}
}
}).disableSelection();
Will alert the parent id ONLY when an item is moved to another block. The event will fire for both blocks, but the alert will only show for the "non-original" one.
If you're using AJAX to update info in a DB I suspect what you want is the event to fire for both blocks:
Once for the "original" which is now missing an element, and one for the "new" which has now gained an element.
I'm not too familiar with exactly what you are doing or jQuery UI, so I can't be more specific. Remember, the docs are your friend.
Hope this helps.
maybe its better instead of using the id attribute you identify the elements using their index.
so more like
alert('I am in block' + $(this).parent().index());
You can play safe and add a REL attribute which will hold the value of the appropriate parent id. You will need to add some code to maintain that REL attribute when you move elements around.