Develop Reference

Adding a class to all the images in the webpage except for a particular <div> using javascript

So I want to add a class to all the images in the webpage except for a particular <div>. I have made this code that will add a class to all the images in the webpage:
$(function(){
$('img').addClass('posts');
});
I need a similar code that does the vice-versa.

You can use the jQuery .not() method:
$(function(){
$('img').not('.posts img').addClass('aden');
});
I'm not sure what you mean by "do the vice-versa". Are you saying you want to remove the posts class from those images, or add it just to the images within that div?

leave it as you have there, and then remove the class from the image with a specific ID:
$('#imageID').removeClass('posts');
or if you want all images within a specific DIV not to have that class:
$('#divID img').removeClass('posts');
Of course this depends if your code justifies doing it this way or not, this is the best "cheating" option if you have a lot of images and you want "to skip" a specific image or a bunch of them from the class assignment.

You can use a custom attribute for the images you want to update:
<img ... update="true">
('img[udpate="true"]').attr("src"," url...")

How to remove "display: none" from my html and body tag

i have just entered my website and all of the contect doesnt seems to appear, in the source there is an inline css style display:none in the html tag and the body tag... is there a way to track what does give this css property to the body and html tag, so i could remove it.. I tried Firebug plugin for Mozilla Firefox, but i cant find anything... The website is running on Wordpress
here is the link http://p315468.for-test-only.ru/

elements hidden with JQuery in (index):
$('html, body').hide()
just remark this line.

You can also try this
$(document).ready(function(e) {
$('.classname').css('display','block');
});
or using Id
$(document).ready(function(e) {
$('#ElementId').css('display','block');
});

If you want to track down what JavaScript is causing that issue and you are using Wordpress, the first thing you can turn to is deactivate all the plugins and reactivate it one after another to see which plugin is causing that issue.

$('#Element').css('display','');
$('#Element').css('display','block');

give a class to it and in jquery do
$( window ).load(function() {
$(".classname").show();
});

The problem is you write inline css in your home page,
so you need to remove dispaly:none; from your html and body tag from your home page
and it's working perfect.

Zoomsounds: Load new file into div via data-source attribute

I'm using a javascript audio player named ZoomSounds. It creates divs of a circular play button and loads content into them like this:
<div id="ap3" class="audioplayer-tobe skin-minimal"
style="position:absolute; width:100px;"
data-type="normal" data-source="sounds/edge.mp3"></div>
What I'd like to do is have other files on the page and load them into the same div (ap3) through clicking their links. ZoomSounds doesn't seem to have any support, and it seems a waste of a nice little plugin. Is there a simple way of doing this? Thank you.

I think the answer depends on what this plugin is doing with the data attributes and when, but if you just want to replace the div#ap3's data attributes you can use jQuery.
So let's say you have another file referenced in an anchor tag like so:
<a class="replace1" href="sounds/replacement.mp3">The Replacement MP3</a>
You can grab that href and replace the div#ap3 data-source attribute with it like so:
(function($) {
$("a.replace1").click(function(e){
e.preventDefault();
var hrefReplacement = $(this).attr('href');
$("div#ap3").data("source",hrefReplacement);
});
})(jQuery);

Removing a link from an html element using JQuery

The company I am working for handed me over a messy website ran using templates, so some elements in the website are automatically generated and are active links.
My main problem is that there are some elements on the site are active links that aren't suppose to be links at all. I was wondering if there is a way to remove the link from an html element using JQuery and maybe CSS?
this will help me tremendously, thanks in advance. I need to remove all href's from class 'slider'.
Here is some of my jquery, can someone please show me how to add it?
<script type="text/javascript">
$(document).ready(function(){
$("#productsLink").hover(function(){
$("#productsMenu").slideDown();
});
$("#productsLink, #productsMenu").hover(function(){
$("#productsLink").css("color","red");
});
$(".spacer", this).hover(function(){
$("#productsLink").css('color', 'white');
$("#productsMenu").slideUp();
$("#aboutLink").css('color', 'white');
$("#aboutMenu").slideUp();
});
});
</script>

try unwrapping the sliders using .unwrap(), assuming all these links have the class slider and they are directly wrapped in an anchor tag.
$('.slider').unwrap()

If you want to remove links with the class name slider from the DOM:
$('a.slider').remove();

You can remove all href attributes from links with class slider with this code:
$('a.slider').removeAttr('href')
This will keep the content of the elements intact and just disables them as a link.

CSS is no help here, it could only be used to hide elements completely.
You can use the replaceWith method to turn specific a elements into span elements. Example:
$('a.something, a.someother').replaceWith(function(){
return $('<span/>').text($(this).text());
});

Jquery: Hide all images except recaptcha image

i need a code in Jquery for hide all images on all pages except the 'reCaptcha' thing.
The images of reCaptcha start with the link: 'google.com/recaptcha' or 'recaptcha.net' ...
My idea is to make the script that hide all images but not touch the images that contains the part 'recaptcha'.
Is possible to make in Jquery?
Thanks in advance and to all.
Kind Regards.
Luca.

Something like this?
$('img:not([src*=recaptcha])').hide();

First run $("img").hide(); then simply put an ID on the captcha tag and run $("#ID").show();
Or if you can't use an ID tag, cycle through all images in a loop and check what's in the src attribute, or even use a regex selector.

The ReCaptcha script puts all of its generated markup within a <div id="recaptcha_widget_div">
Having said that, you can grab all images except those within this DIV like this...
$("img:not(#recaptcha_widget_div img)").hide();
Or if that is too ugly, you can hide all images and re-show the ReCaptcha ones like this...
$("img").hide();
$("#recaptcha_widget_div img").show();