We Keep Coding

How to affect an Li with a certain class in jQuery?

I am using a jQuery gallery plugin, the thumbs are all in an unordered list and the main image is to the right in a div.
The plugin adds the class "selected" to the li whose main image is currently being shown. As soon as the plugin moves on to the next image, the selected class is removed from the li and added to the next li.
I want to affect the li that currently has the class "selected" applied to it. I can't just do this:
$('li.selected').whateverRules();
because jQuery is applying the class dynamically, the class isn't there from the document ready state hence it doesn't work.
I also can't use .live() because I have no event to attach. So how can I work with this?
How can I affect the li which currently has a class of "selected" if this class was added dynamically?

There is no way to bind to an event when a CSS class has been changed. Perhaps you could modify the jquery plugin to trigger an event when the selected class has been added and bind to that?
Here is a link for trigger() if you feel adventurous. trigger()

Depending on how intensive your calls are you could always use an interval. It's not ideal, necessarily, but may do what you need:
var selectedInterval = setInterval(function () {
$('li.selected').whateverRules();
}, 100); // adjust timing to fit based on function complexity / timing.
I try to remember to store setInterval's return values into a variable in case they need to be cleared later. It's worth a shot, though not as clean as I'd like. If I were you I'd look into some event that fires when the gallery changes it's selection (there ought to be one, I'd imagine).

I guess you can attach the event to the controls of the gallery:
jQuery(function($){
$('a.next-image').mouseup(function(){
$('img.selected') ... // what you want.
});
});
I guess this a bit ugly but with no source is dificult solve in a clean way.

Clicking A Link Two Times

I have a link like this :
<a href="#" onclick="renkDegistir()" title="Yaz .......
And JS code :
function renkDegistir()
{
$("#cont #main article").addClass("siyah-stil");
}
When click this link siyah-stil class is added to article. But i want to do, if link clicked 2nd time remove siyah-stil class.
In summary ,
on first click : addClass("siyah-stil");
on second click : removeClass("siyah-stil");

Try using toggleClass():
function renkDegistir()
{
$("#cont #main article").toggleClass("siyah-stil");
}
But I'd suggest also removing the in-line onclick attribute, and switching to jQuery's click() event-handler:
$('a').click(
function(){
$("#cont #main article").toggleClass("siyah-stil");
});
Edited to address #Eray's comment (below):
Can you explain [to] me , why jQuery's click() function [is] better than in-line onclick attribute?
The reason I prefer to use non-inline code is that it reduces the complexity of changing the onClick events; since they get changed in one place, rather than having to change the onclick attribute in every a (or other) element. Admittedly, you could achieve that benefit by simply changing the renkDegistir() function, but then you end up with functions named for posterity, rather than the inherent nature of the function.
It also makes it easier for others to take over, and adapt your code, and to iron out bugs when they appear.

toggleClass does exactly that.
http://api.jquery.com/toggleClass/

Here you go:
JQuery - toggleClass

How to make style of an element dependent on another element's style

I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.

try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4

Hover Item with JQuery

Is there a way to hover an element using javascript?
I don't want to create another class, I just want to cause element to hover with javascript when my mouse pointer is not over that element.
For example I have 5 elements with the same class and I want to call hover on all of them when one of them is actually hovered.

I assume you mean the pseudo class :hover that you've associated with a link (for example). As you hover over that link, you want to invoke all other link's :hover styles.
Unfortunately, you can not invoke the :hover styles from jQuery, that requires that you actually move your mouse pointer over that element. You have to use classes and utilize jQuery's hover event.

You can achieve this by addressing all of the items in your collection at the same time in your hover event handlers
var items = $(".some-class-applied-to-many-different-items");
items.hover(function() {
// Mouseover state
items.addClass("blah"); // <- for example
},
function() {
// Mouseout state
items.removeClass("blah");
});

If I understand your question correctly, you've added a hover event using jQuery, and you'd like to trigger that event manually regardless of the mouse.
If I understood correctly, you want to call the mouseenter to trigger the mouseenter event.
If I've understood incorrectly, and you actually have a :hover CSS rule which you'd like to trigger using Javascript, that's not possible.
Instead, you should add a class name to the rule (eg, something:hover, something.FakeHover { ... }), and add that class name using jQuery. (eg, $(...).addClass('FakeHover')).

In jQuery, the trigger function allows you to trigger events (includingmouseover, I believe) on elements.
In straight JavaScript, if you’ve assigned a function to an element’s event handler, you can of course call that whenever you want. E.g.
function mouseoverHandler() {
// Do something
}
// Assign function to element’s event handler
document.getElementById('link1').onmouseover = mouseoverHandler
// Call that function
document.getElementById('link1').onmouseover();

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});

This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});

I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});

Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.