We Keep Coding

Applying jQuery hover to multiple elements using jQuery each

I'm trying to get the following working so I can make certain elements of a page reveal others on hover using jQuery. I'm trying to use the data attribute of the hover element to pick the revealed element.
I just can't seem to get this working. Or is there a better way to do this?
function setUpServiceHover(){
$( ".poster-banners__poster" ).each(function(i) {
$(this).hover(
function () {
$("#service_" + ($(this).data('target')).addClass('intro__service--show'));
$("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
},
function () {
$("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
$("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
})
});
}
setUpServiceHover();
Appreciate the help.
Thanks.

you don't need to iterate for hover effect, just add hover event handler as shown below
NOTE: you need not to put this script inside setUpServiceHover() function and remove this function. You need to put it inside document.ready.. or $(function().. to ensure DOM loaded.
$(function(){
$(".poster-banners__poster").on("hover",
function () {
$("#service_" + ($(this).data('target')).addClass('intro__service--show'));
$("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
},
function () {
$("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
$("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
});
});

How to toggle a specific JavaScript function with a click?

We need to disable and re-enable with a click, a function which shows us the amount of characters within plenty of < pre >.
The function we use is this:
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function(){
$('pre').each(function(i){
var iCharacters = $(this).text().length;
$(this).prepend("<b style='color:red'>" + iCharacters + " </b>");
});
});
});
</script>
Thanks a lot for your help in advance.

I believe an easy way to do this would be to always display the numbers but they hide or show them on the click of a button using jQuery's toggle method. You can find a working example here: https://jsbin.com/pohagaz/1/edit?html,js,output.
$("pre").each(function(i){
var iCharacters = $(this).text().length;
$(this).prepend("<b class='charCount' style='color:red'>" + iCharacters + " </b>");
});
$("#showCounts").click(function() {
$(".charCount").toggle();
});

Jquery: trying to hide and show on hover on multiple divs with same id plus number

Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks

This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/

You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});

I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);

jQuery multiple radio buttons and load html code?

You think is right this way for show HTML code in each click on radio?
What is you propose to animate (effect) appropriate for show and hide html code?
see you example of my codes: http://jsfiddle.net/9LECb/
$('#housing_select input').click(function(){
var classes = $(this).attr('id');
if(classes == 'hotel_select'){
$('.hotel_apartment_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'hotel_apartment_select'){
$('.hotel_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'suite_select'){
$('.hotel_select, .hotel_apartment_select').hide();
$('.'+classes).show();
}
})
With respect

You can remove the if conditions and minimize the code to:
$('#housing_select input').click(function() {
var classes = $("." + this.id);
$('.hotel_apartment_select, .suite_select, .hotel_select').not(classes).hide();
classes.show();
})
JSFiddle: http://jsfiddle.net/9LECb/2/
Note:
You can check jQuery UI Tabs as they acheive a similar effect

Try this:
$('#housing_select input').click(function() {
$('.hotel_apartment_select, .suite_select, .hotel_select').not("." + this.id).hide();
$("." + this.id).show();
})

Noobie Jquery Question - Why doesn't this simple script work?

I'm learning JQuery and I wrote a simple AJAX external script for my homepage that tries to load some static markup from a seperate html file and insert it into my homepage when i hover over a link...
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('<div id="contact_container">').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});
at this point, i'm simply trying to get the 'test2' alert box to show, which is why i have the code below that commented out. currently, the 'test1' alert box is the only the one that shows, meaning the 'test2' alert line never gets hit. your thoughts?
here's the snippet of code from my contact.htm file...
<div id="contact_container">
<div id="contact">
<p>
<strong>NAME</strong>: My Name<br/>
<strong>EMAIL</strong>: My Email<br/>
<strong>SKYPE</strong>: My Skype Handle<br/>
<strong>ADDRESS</strong>: My Address<br/>
</p>
</div><!--end contact-->
</div><!--end contact_container-->
thanks so much in advance for your help!

You were calling $.load using incorrect selector syntax, a selector is not an HTML string, it must conform to the syntax rules set by the jQuery Selectors manual:
$('a#contact_link').hover(function()
{
alert('test1');
$('div#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});

The selector is probably the cause.
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});

I believe your #contact_container selector is not quite kosher. Check out the selector doco (http://docs.jquery.com/Selectors) at the JQuery site. I think something like this might be a little better:
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});