Develop Reference

Javascript - How to turn this into a simple function

$(document).ready(function()
{
// $('.pull-me').click(function()
// {
// $('.login').slideToggle('slow')
// });
$('#thumbnail1').mouseenter(function()
{
$('#thumbnailTitle1').css('visibility', 'visible')
});
$('#thumbnail1').mouseleave(function()
{
$('#thumbnailTitle1').css('visibility', 'hidden')
})
$('#thumbnail2').mouseenter(function()
{
$('#thumbnailTitle2').css('visibility', 'visible')
});
$('#thumbnail2').mouseleave(function()
{
$('#thumbnailTitle2').css('visibility', 'hidden')
})
$('#thumbnail3').mouseenter(function()
{
$('#thumbnailTitle3').css('visibility', 'visible')
});
$('#thumbnail3').mouseleave(function()
{
$('#thumbnailTitle3').css('visibility', 'hidden')
})
});
I'm very new to Javascript but am trying to learn. I aware this is jQuery but would like to know if there is a quicker way to do this code, like create a smaller function that i can call up to display/hide the text.
Because i will be adding more thumbnails and i don't want to have to write it all out for every photo and text that i display on the photo.

You can use bind a single event handler using Multiple Selector, In the event handler create the targeted selector using the current element this id property.
$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
$(selector).css('visibility','visible');
}, function(){
var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
$(selector).css('visibility','hidden');
})
However I would recommend you to establish the relationship using custom data-* prefixed attribute. Here example
$('.thumbnail').hover(function() {
$('#' + this.dataset.target).toggleClass('hidden');
}, function() {
$('#' + this.dataset.target).toggleClass('hidden');
})
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="thumbnail" data-target="thumbnailTitle1">thumbnail 1</span>
<span class="thumbnail" data-target="thumbnailTitle2">thumbnail 2</span>
<span class="thumbnail" data-target="thumbnailTitle3">thumbnail 3</span>
<div class="hidden" id="thumbnailTitle1">thumbnailTitle1</div>
<div class="hidden" id="thumbnailTitle2">thumbnailTitle2</div>
<div class="hidden" id="thumbnailTitle3">thumbnailTitle3</div>

The following is an option.
( function( $, window, undefined ) {
var handle_mouse_events = function handle_mouse_events( thumbnail_selector, thumbnail_title_selector ) {
$( thumbnail_selector ).mouseenter(
function() {
$( thumbnail_title_selector ).css( 'visibility', 'visible' );
}
);
$( thumbnail_selector ).mouseleave(
function() {
$( thumbnail_title_selector ).css( 'visibility', 'hidden' );
}
);
};
handle_mouse_events( '#thumbnail1', '#thumbnailTitle1' );
handle_mouse_events( '#thumbnail2', '#thumbnailTitle2' );
handle_mouse_events( '#thumbnail3', '#thumbnailTitle3' );
} )( jQuery, this );
.image_container > div {
display : inline-block;
width : 150px;
height : 200px;
}
span {
visibility : hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_container">
<div id="thumbnail1">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle1">Title #1</span>
</div>
<div id="thumbnail2">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle2">Title #2</span>
</div>
<div id="thumbnail3">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle3">Title #3</span>
</div>
</div>

Use classes instead of ID's if you want to target similar elements with a behaviour.
The function itself is correct. The problem is that you have structured your HTML with unique ID's for every image. Trying to fix the problem by writing functions that target your unique ID's is the wrong approach, the underlying problem is your usage of ID's to target the element in the first place.
$(document).ready(function() {
$('.thumbnail').on('mouseenter', function() {
$(this).find('.thumbnail-title').css('visibility', 'visible');
})
$('.thumbnail').on('mouseleave', function() {
$(this).find('.thumbnail-title').css('visibility', 'hidden');
})
});
In the code snippet above you can see that every element with a class of thumbnail is selected. When the user hovers over a thumbnail you can reference the currently hovered element (with $(this)) and find the child element with the class thumbnail-title.
This is the simplest approach to sharing behaviour across elements of the same type.
Here's a working fiddle: https://jsfiddle.net/wq5r97ep/2/
EDIT: You can of course abstract this away into a plugin or just a general function. But this is the basic idea.

Something like this:
function handleEventsFor(index) {
$('#thumbnail' + index).mouseenter(function() {
$('#thumbnailTitle' + index).css('visibility', 'visible')
});
$('#thumbnail' + index).mouseleave(function() {
$('#thumbnailTitle' + index).css('visibility', 'hidden')
})
}
And call it like this:
handleEventsFor(1);
handleEventsFor(2);
Or like this:
for(var i = 0; i < 5; ++i) {
handleEventsFor(i);
}

You can try like this also,
Lets say your HTML
<div id="thumbnails">
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
</div>
Jquery
$(document).ready(function(){
$("#thumbnails").find('.thumbnails').mouseenter(function(){
var visibility = $(this).css('visibility');
if(visibility == 'hidden'){
$(this).css('visibility', 'visible');
}
});
$("#thumbnails").find('.thumbnails').mouseleave(function(){
var visibility = $(this).css('visibility');
if(visibility == 'visible'){
$(this).css('visibility', 'hidden');
}
});
});

I would write a simple visibleHover plugin for it. Using it will work like this
$(selectorForThumbnails).visibleHover(selectorForText);
Or as the example shows
// '.thumbnail' is the class of the parent elements
// 'span' is the selector for the children text elements
$('.thumbnail').visibleHover('span');
You can customize these inputs to match any HTML structure you have.
Click the Run code snippet button below to see it work
(function($) {
$.fn.visibleHover = function(selector) {
return this.each(function(idx, elem) {
$(elem).hover(
function() { $(selector, elem).css('visibility', 'visible'); },
function() { $(selector, elem).css('visibility', 'hidden'); }
);
});
};
})(jQuery);
$('.thumbnail').visibleHover('span');
.thumbnail {
float: left;
margin-right: 10px;
}
.thumbnail .image {
width: 100px;
height: 100px;
background-color: #eee;
}
.thumbnail span {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
<div class="image"></div>
<span>Text A</span>
</div>
<div class="thumbnail">
<div class="image"></div>
<span>Text B</span>
</div>
<div class="thumbnail">
<div class="image"></div>
<span>Text C</span>
</div>

Referencing by ID (i.e. $('#thumbnailn')) is very specific. You can make broader references by accessing tags or other attributes such as class instead.
Something like:
HTML:
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle1"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle2"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle3"></span>...</div>
JavaScript:
$(".thumbnails").mouseenter(function() {
$(this).children("span").css('visibility', 'visible');
}).mouseleave(function() {
$(this).children("span").css('visibility', 'hidden');
});
In the above example I show how to reference a class (i.e. $(".thumbnails")) and a tag (i.e. ("span")) using JQuery

Using JQuery
$('#thumbnail3').mouseleave(function(e)
{
$(e.target).hide();
})
Using css.
#thumbnail3:hover {display:none}

Writing the whole thing inside a loop is one option.
for(var i = 1; i <= whatever_your_length_is; i++) {
$('#thumbnail' + i).mouseenter(function() {
$('#thumbnailTitle' + i).css('visibility', 'visible');
};
$('#thumbnail' + i).mouseleave(function() {
$('#thumbnailTitle' + i).css('visibility', 'hidden');
});
}

Toggle hide and show

I have tried everything to get it to toggle show and hide but every time I add hide in the function, it stops working or I can get hide to work flawlessly while show doesn't work at all. Any help would be appreciated.
<div class="ShowHideClicker clear" >
<img src="something.gif"></div> <div class="ShowHideList">
<div class="ui-widget" id="SearchBar">
<label for="tags">Search:</label>
<input id="tags">
<button class='clear' id="ClearButton"> Clear</button>
</div>
<div id="Result"></div>
</div>
$(document).ready(function(){
$('.ShowHideList').hide();
$('.ShowHideClicker').click(function(){
$(this).next().show('drop', {direction: 'left'}, 1000);
});
});

Here is the simple solution with toggleClass:
$('.ShowHideClicker').on('click', function(){
$(this).next().toggleClass('hidden');
});
http://jsfiddle.net/LcYLY/

You should be using the .toggle() this way: JSFIDDLE and make sure you have included jQuery and jQuery UI in your header ("drop" is a jQuery UI feature)
jQuery:
$(document).ready(function(){
$('.ShowHideClicker').click(function(){
$('.ShowHideList').toggle('drop', 1000);
});
});
CSS:
.ShowHideList { display: none; }

How to target a child of a sibling div using jquery

I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.
Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/
HTML:
<div id="container">
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 1
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 1
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 2
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 2
</div>
</div>
</div>
</div>
JQuery:
$('.item .item-image').bind({
mouseenter: function() {
$(this).siblings('.item-body').children('body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('body-inner').hide();
console.log('Left');
}
});
I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/

body-inner needs to have a . to indicate a class selector:
$(this).siblings('.item-body').children('.body-inner').hide();
Additionally, as of jQuery 1.7 the .on method is preferred to .bind:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle

Alternatively, you could use hover and toggle():
DEMO jsFiddle
$('.item .item-image').hover(function(){
$(this).siblings('.item-body').children('.body-inner').toggle();
});
PS: you should remove class hidden on second .item-body as in jsFiddle
Or using only CSS:
DEMO jsFiddle
.item-image:hover ~ .item-body > .body-inner {
display: block;
}

Your code works fine. You're just missing . to target class body-inner
$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here
Also, you should use .on() instead of .bind(), final code look like:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.
If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:
$('.item-body:eq(1)').removeClass('hidden');
Updated Fiddle

You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()
$('.item').on({
mouseenter: function () {
$(this).find('.item-body .body-inner').show();
},
mouseleave: function () {
$(this).find('.item-body .body-inner').hide();
}
});
Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???

You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});

try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.

$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

Selecting an element with jQuery in a Twitter Bootstrap Popover

I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
I'm using a button to reveal the popover which contains the above content:
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$('#link').click(function() {
alert('beep');
});
});
However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?
Reference: Popovers in Bootstrap

You do not need to perform Event delegation here.Instead use $('#popover-content') instead of $('#popover-content').html() while setting the content. This will have the events registered attached by default without requiring any delegation.
Demo
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content'); //<-- Remove .html()
}
});
$('#link').click(function() {
alert('beep');
});
});

You can try this:
$(document).on('click', '#link', function(){
alert('beep');
});

You can mannuly use popover:
html
<div id="popover-wrapper">
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
<div class="popover right popup-area popover-pos">
<div class="popover-content">
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
</div>
</div>
</div>
css
#popover-wrapper {
.popover {
left: auto;
right: 0;
width: 250px;
top: 35px;
.popover-content {
// ..
}
}
&.open .popover {
display: block;
}
}
js
$('#trigger').hover(function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).addClass('open');
next();
});
}, function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).removeClass('open');
next();
});
}
);