Develop Reference

jQuery hide parents

I have the following HTML:
<div class="windowtemplate movingwindow" style="display: block;">
<div class="top">Attenzione <span class="closebutton"></span></div>
<div class="body">
<p>texthere</p>
<span class="genericbutton">Close</span>
</div>
<div class="bottom"></div>
</div>
I'm trying to hide this box (starting from div class="windowtemplate movingwindow") with jQuery with this code:
function closedialog() {
$(this).parent("windowtemplate").hide();
};
But this doesn't sort any effect, where i'm wrong?
(I'm a newbie with jQuery, so, sorry if it's a really simple problem, but I can't find any solution!)

try this
<span class="genericbutton">Close</span>
and this for your js
function closedialog(element) {
$(element).closest(".windowtemplate").hide();
};

this here doesn't refer to the clicked element.
The selector is wrong, missing . for the class selector.
.parent() doesn't select the grandparent elements, you should use .closest() instead.
You should avoid using attribute event handlers.
$('.genericbutton').on('click', function() {
$(this).closest('.windowtemplate').hide();
});
If the .windowtemplate is generated dynamically you should delegate the event, if you are using jQuery 1.7+ you can use the .on() method:
$(document).on('click', '.genericbutton', function() {
$(this).closest('.windowtemplate').hide();
});

First of all you missed the dot signifying a class and second parent() selector searches only level up in the tree, you need parents().
Use this code -
$('.genericbutton').on('click', function() {
$(this).parents(".windowtemplate").hide();
}

jQuery remove div onclick

I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.

If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.

HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/

Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});

Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample

jQuery click function affecting multiple divs

I'm trying to use jQuery's click function to apply a hover state to a selected div, without differentiating the div's in the JavaScript. I'm currently using:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
With the HTML:
<div class="project first project_gizmoscoop">
<div class="title">
GizmoScoop!
<div class="date">2012</div>
</div>
<a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
<div class="title">
Striking Code
<div class="date">2011</div>
</div>
<a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>
The .hovered class is applied to the clicked link (specific styles from an external CSS file). However, everything is being chosen. (See http://www.codeisdna.com for an example).
I know what I'm doing wrong (I should be specifying the individual ID's or using HTML5 data attributes), but I'm stuck unnecessarily. I feel like a complete newb right now, that I can't do something this simple (although I've done more advanced stuff).

You simply need to take advantage of jQuery's flexibility (and good programming practice) and reduce your scope accordingly. You're already doing something similar with your variable definition. For example, to target only those a.expand elements inside the instance of .project that's clicked:
$(".project").click(function() {
$(this).find("a.expand").removeClass("hovered");
...
});

$(".expand").click(function() {
$(this).addClass("hovered");
..
});

Bootstrap Popover on Image

So I have a list of icons, I'm trying to get a popover to activate when you hover over an icon, I can't seem to get it to work, any help would be appreciated.
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
And i have this in a separate js file
$('.icon').popover({placement:'top'});

Put attributes in jquery variable instead of tag
<img class="icon" rel="popover" src="images/brandable.png"/>
Add script as following
<script>
$('document').ready(function() {
var popOverSettings = {
placement: 'top',
selector: '.icon',
title:'Brandable',
trigger: "hover",
content:'This is a popover'
};
$(this).popover(popOverSettings);
});
</script>

this is over a year late, but i found this to work:
Fiddler Link
using this JS:
$(function(){
$('[data-toggle=popover]').popover({
trigger: 'focus',
html: true,
title: 'Toolbox'
})
});
And this html:
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>
You need to allow the image to accept focus with the tabindex property. That was the key for me. Remove the "trigger: 'focus' line if you want the popover to stay open on click events...
Hope it helps!

For your code you have:
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
trigger: "hover" isn't valid html. Bootstrap help document notes, "Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation=""."
So instead you would want to include data-trigger="hover" also looks like your missing a space before src=.
Also you have placement top in the html and also in the javascript. You only need to declare in one place. So you can delete data-placement="top" from the img tag, or in your javascript you can remove it so it would just be $('.icon').popover({placement:'top'});
Also you have "$" in front of your function. Depending on where that code is located you may have a jquery conflict. To note for sure you'll need to post whichever error you are seeing in your error log. If you use chrome right click > web inspect > click the red x at the bottom and copy any errors you see in there.

$(function(){
$('#poper').popover({
html: true,
trigger:'focus',
content: $('#pop')
});
}
);

Perhaps the easiest way to do this uses the OnMouseOver and OnMouseOut events described in this answer: https://stackoverflow.com/a/10709196/121737
I would prefer to do this using one image, the same width as a normal icon but twice the height. This image would show two icons, one above the other, the upper one being the normal icon, the lower being the rolled over icon:
img.icon {
display: block;
width: 4ex; height: 4ex;
background-size: 4ex 8ex;
background-position: 0 0;
}
img.icon:hover {
background-position: 0 -4ex;
}
img.icon#twitter {
background-image:url('icons/twitter.jpg');
}
img.icon#facebook {
background-image:url('icons/facebook.jpg');
}
After this declaring the icons in HTML is much cleaner:
<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />

Is it possible to copy javascript with javascript?

Is it possible to copy javascript with javascript? For example:
<div class="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('.copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<div id="copyArea">
Put here:
</div>
</div>
But this doesn't copy the tag and its content. At least, not that I know of.
NOTE:
I came upon this question in relationship to a different question I had posted here: Infinite-loop question: Is it possible to make a "Copy this code to share", with a "copy this code to share" inside of it?
I hope it's ok to post this question separately as it's sort of a curiosity thing.

EDIT: I think this is what you want. This (demo) will fill a textarea for easy copying:
<div id="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyArea').val($('#copyThis').html());
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<textarea rows="10" cols="40" id="copyArea"></textarea>
</div>
You were doing DOM manipulation before ready. Use:
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
See the demo.

I think in a round about way what your trying to do is covered by jquery's live methods.
<div class="copy">
<a class="click-me">click me</click>
</div>
<script type="text/javascript">
$('.click-me').live('click',function(e){
$(e).parent().clone().appendTo('#copyArea');
})
</script>
Using Live will re-bind the new element to the click handler without having to copy a javascript block

If you want the click event to be cloned also, you need to set the withDataAndEvents argument to true in clone
$('.copyThis').clone(true).appendTo('#copyArea');

Note: this answer is to a question different from the one actually asked :-) I'll leave it here as a historical curiosity however.
The problem is very likely to be that your <script> tags are just not being executed. If what you want to happen is that your cloned <div> have the same "click" handler, however, you should really go about it in a totally different way:
Use a "class" instead of an "id" to mark the <div> elements that should be affected; say, "cloneMe"
Use the jQuery .live() or (better) .delegate() facilities to set up the handler so that it operates off of bubbled events, and can therefore handle clicks on cloned <div> blocks.
(then in your Javascript somewhere: )
$(function() {
$('body').delegate("div.cloneMe", "click", function(ev) {
$(this).clone().appendTo('#copyArea');
ev.preventDefault();
});
});
Now you should be able to clone to your heart's content, and you don't have to worry about that bad old Javascript jammed so obtrusively into your code.
edit — ah - I now see that I was completely confused about what it was that was getting clicked. If the clicking is happening on a separate button (or <a> or whatever), then there's really no need to have the script stuck in the middle of the page at all; the whole thing should just be a simple event handler setup.