We Keep Coding

JQuery/JavaScript: Enable and disable div

this is my code example:
$( "#new_warehouse" ).onClick(function() {
$('.js-dependent-fields:hidden').children().prop('disabled', true);
});
It adds a "disabled" to all childs of my js-dependent-fields div, if style="display: none;". How can I revert this when the js-dependent-fields div gets visible?
Many thanks in advance!

You should use correctly .on() listener with .click() event with a callback function in the prop() method:
$( "#new_warehouse" ).on('click', function() {
$('.js-dependent-fields').children().prop('disabled', function(){
return $(this).is(':hidden');
});
});
Thing to notice is that the target element is a class selector so it would return a collection so, we have to look for each one with the $(this) and check if it is :visible.

Perhaps a more apt code would be
$( "#new_warehouse" ).onClick(function() {
$('.js-dependent-fields').children().prop('disabled',
$('.js-dependent-fields').is(':hidden') ?
true : false );
});

You can reverse the effect using :visible pseudo class selector. But for your need you can use like this:
$('.js-dependent-fields:hidden').children().prop('disabled',
$('.js-dependent-fields').is(':hidden')//sets true if hidden else false
);

JQuery hover doesnt work

I got a JQuery hover but it doesnt show. The dimmed-item class, is what I would like to add on to the kunden-item class. Bouth of them allready work if I manuely put them in. JQuery is allready in the File so there must be some logic mistake I made.
Here my HTML for 1 Element:
<div class="kunden-item kunde2-item">
<img class="kunde" src="<?php echo $params->get('image2');?>" alt="Kunde">
</div>
Here my JQuery:
$(document).ready(function(){
$("kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});

kunden-item is a class, so your selector needs a leading .:
$(".kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});
Also note that you can massively shorten your code by using hover() and toggleClass():
$(".kunden-item").hover(function() {
$(this).toggleClass('dimmed-item');
});
Or just by using CSS alone:
.kunden-item:hover {
opacity: 0.5; // for example only, apply whatever style you need here
}

Class selectors begin with a .
You have a type selector and are trying to match <kunden-item> elements.
You should have:
$(".kunden-item")
You can probably get rid of the JS entirely and just use a :hover rule in your stylesheet though.

You're missing a dot (.) before kunden-item. You can also use .hover(), which works like this:
$(document).ready(function(){
$(".kunden-item")
.hover(function() {
$(this).addClass("dimmed-item");
},
function() {
$(this).removeClass("dimmed-item");
});
});

possible clear jquery `one` method

Its possible to clear jquery one property? for example given html
<div id="button">button</div>
<div id="clearOneProperty">clear one property</div>
and js
$("#button").one("click", function () {
alert("blah");
});
$("#clearOneProperty").on("click", function () {
// clear "one" property, that is after this event, I want "#button" to work again
});
Demo http://jsfiddle.net/RzzCu/2/
So, if click #button div, alert happened only one times right?
And I want that, at click on #clearOneProperty, reset one property. Its possible?
P.S. I am not asking how to make this with other ways, I am interest exact: "possible clear jquery one method?". Thanks.

Try this:
function bindButton() {
$("#button").unbind('click').one("click", function() {
alert("blah");
});
}
bindButton();
$("#clearOneProperty").on("click", function() {
bindButton();
});
Updated fiddle

The one unbinds its self on first invocation as stated "The first form of this method is identical to .bind(), except that the handler is unbound after its first invocation", jQuery Documentation *So you need to bind it again*.
Live Demo
$("#button").one("click", onefunction);
function onefunction() {
alert("blah");
}
$("#clearOneProperty").one("click", function() {
$("#button").one("click", onefunction);
});​

Just rebind it inside the function.
$("#button").one("click", function () {
alert("blah");
});
$("#clearOneProperty").one("click", function () {
$('#button').one("click", function () {
alert("blah");
});
});
here a fiddle

Use unbind() method
$("#button").unbind();

Try
$('#button').unbind('click');

Javascript , jQuery - what have I done wrong?

$(document).ready(function () {
$("href").attr('href', 'title');
});
$('a[href$=.jpg]').each(function () {
var imageSrc = $(this).attr('href');
var img = $('<img />').attr('src', imageSrc).css('max-width', '300px').css('max-height', '200px').css('marginBottom', '10px').css('marginTop', '10px').attr('rel', 'lightbox');
$(this).replaceWith(img);
});
});
This is the jQuery code I have at the moment, which I want to change all links' href to the same as their title, before then embedding them in the page. Yet with the changing href to title bit in the code, it stops working. I'm new to Javascript so am definitely doing something wrong, just not sure what yet! Any help much appreciated!
Thank you guys
EDIT
This is the html that I want to change:
<p class="entry-content">Some interesting contenthttp://example.com/index.php/attachment/11</p>

You are changing it wrong, you are trying to select href elements instead of a.
This fix should do it:
$("a[title]").each(function() {
$(this).attr('href',$(this).attr('title'));
});
It will select all a elements with title and set the href with this value.

Here's a much more efficient way.
Since you're just replacing the <a> elements, there's really no need to change its href. Just select the <a> elements that end with jpg/jpeg, and use that attribute directly.
Example: http://jsfiddle.net/5ZBVf/4/
$(document).ready(function() {
$("a[title$=.jpg],[title$=.jpeg]").replaceWith(function() {
return $('<img />', {src:this.title, rel:'lightbox'})
.css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
});
});​
Your .each() is outside the .ready() function.
You can accomplish the href change easily like this:
$(document).ready(function () {
$("a").attr('href', function() { return this.title; });
});
The .attr() method will accept a function where the return value is the new value of (in this case) href.
So the whole thing could look like this:
Example: http://jsfiddle.net/5ZBVf/3/
$(document).ready(function() {
$("a[title]").attr('href', function() { return this.title; })
.filter('[href$=.jpg],[href$=.jpeg]')
.replaceWith(function() {
return $('<img />', {src:this.href, rel:'lightbox'})
.css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
});
});

This line:
$("href").attr('href','title');
Is finding all href elements and replacing their href attr with the string 'title'. Since there is no such thing as an href element, Try this instead:
// for every anchor element on the page, replace it's href attribute with it's title attribute
$('a').each(function() {
$(this).attr('href', $(this).attr('title');
});

Check this out: http://jsfiddle.net/TbMzD/ Seems to do what you want.
Note: $(document).ready() is commented because of jsfiddle, you actually need it in your code.

Try:
$("a").each(function () {
var $this = $(this);
$this.attr('href', $this.attr('title'));
});

Optimize jquery code

$(textBox).focus( function() {
$(spans).css({"background-position": "0 100%"});
});
$(textBox).blur( function() {
$(spans).css({"background-position": "0 0"});
});
This is already short but it's either I am just too paranoid, or we could code this shorter by
$(textBox).bind('focus blur', function() { *do toggle here* });
or something else.
Any help would be greatly appreciated. =)

Try this:
$( textBox ).focus( function(){...} ).blur( function() {...} );
And yes, you can also use the bind() function as you specified.
I find my version more readable.
Good luck!

You can try this as well:
$(textBox).bind('focus blur', function(e) {
var bg = (e.type=='blur') ? '0 0' : '0 100%';
$(spans).css({"background-position": bg});
});

I think there's a line between optimization and code clarity. Without any further evidence, I don't believe you'll see any major improvements as far as optimizations go.
Keeping these two separate allows for a very quick and easy scan... No logic to go through. Its just "When this happens, then do this". Simple and you're probably losing, if anything, very little.
Edit:
If like you mentioned in a comment you want to toggle the class, you could
$(textBox).bind('focus blur', function() {
var currentClass = $(this).attr('class');
var newClass = currentClass == 'gotFocus' ? 'noFocus' : 'gotFocus';
$(this).removeClass(currentClass).addClass(newClass); });

If you want to use the same function for both the events, you need to use a way of changing the effect that can be used to turn it both ways. Something like:
$(textBox).bind('focus blur', function() { $(spans).toggleClass('over'); });
If there are a lot of elements that you want to change the effect on, you should consider using the cascading effect of CSS instead of letting jQuery change the class for all the elements, i.e. changing the class for a single parent element, and have a style that targets all the child elements that you want to affect:
#container span { background-position: 0 0; }
#container.over span { background-position: 0 100%; }
Changing the class of the parent will change the style of all affected children:
$(textBox).bind('focus blur', function() { $('#container').toggleClass('over'); });

$("#test").bind("focus blur", function (e) {
$(spans).css({"background-position": e.type === "focus" ? "0 100%" : "0 0"});
});