$(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');
});
}
Related
I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!
function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.
$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});
Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});
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/
http://jsfiddle.net/bDQt7/4/
This doesn't work, hello2 and hello3 won't show up. It has to do with the '#id can only be used once' ? Changing it to class doesn't work, how to fix this?
HTML
Toggle
<div id="menu" class="hidden">hello</div>
<div id="menu" class="hidden">hello2</div>
<div id="menu" class="hidden">hello3</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
}
IDs must be unique.
Try this:
HTML:
<div class="hidden">hello</div>
<div class="hidden">hello2</div>
<div class="hidden">hello3</div>
JS:
$(document).ready(function(){
$("a").click(function(){
$("div").toggleClass("hidden unhidden");
});
});
Fiddle here.
A Jquery solution for you, I just replaced your id with another unique class. Just refer the code below to get a grip over it.
HTML
Toggle
<div class="xTest hidden">hello</div>
<div class="xTest hidden">hello2</div>
<div class="xTest hidden">hello3</div>
JQUERY
$("a").click(function(){
var xObj = $(".xTest");
if(xObj.hasClass("hidden"))
{
xObj.removeClass("hidden").addClass("unhidden");
}
else
{
xObj.removeClass("unhidden").addClass("hidden");
}
});
DEMONSTRATION
Why don't your wrap all your divs inside another div?
http://jsfiddle.net/bDQt7/7/
it has more sense to have menu and items inside it (I guess you need anchors and not divs inside the menu div)
That way you don't need jquery if you still don't know what it is.
<div id='menu' class='hidden'>
<a href='#'>menu</a>
<a href='#'>menu2</a>
<a href='#'>menu3</a>
</div>
I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...
I've found examples where you can use a selectors to have multiple divs expand/collapse, but haven't seen one with the use of an icon when collapsed and one when expanded.
How can I adjust the following so that it allows me to expand and collapse multiple divs? ie: if you open one it won't open ALL the others.
<!-- HTML -->
Show
<div class="slidingDiv" style="display: block;">
Check out
</div>
<!-- CSS -->
.show_hide{
background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
padding-left:20px;
}
<!-- JS -->
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
var isShow = $(this).text() == 'Show';
$(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
});
});
You are asking for a complex solution, here are some tips:
1 - Use different icons on hide/show:
Use a different class for showing and hiding, than use removeClass & addClass to change your "a" class. Ex:
$('a.group1').removeClass('hiding').addClass('showing');
2 - To not hide/show multiple divs, use a second class to group them.
Ex:
<a class="show_hide group1">
<div class="slidingDiv group1"> div1 </div>
<div class="slidingDiv group1"> div2 </div>
...
$('.slidingDiv.group1').hide();
Than, you can select them by using "a.group1", and ".slidingDiv.group1"...
Thus slidingDiv can determine how to hide, and group1 determines what should be hidden/shown.
See:
Add class: http://api.jquery.com/addClass/
Remove class: http://api.jquery.com/removeClass/
Multiple classes HTML: https://stackoverflow.com/a/8722205/506625
Multiple selector jquery: http://api.jquery.com/multiple-selector/
Element visibility jquery: http://api.jquery.com/visible-selector/
$(document).ready(function(){
$(".show_hide").click(function(){
$("div").slideToggle();
});
});
Try this
http://jsfiddle.net/DRAJI/Q8tFh/4/
This is an Example jsfiddle, refer this
What you are looking for is an accordion. Search for "jQuery Accordion" and you will find many solutions.
Here is a small idea to get you going if you want to do it yourself:
HTML:
<div id="container">
<div class="header">H1</div>
<div class="content">c1</div>
<div class="header">H2</div>
<div class="content">c2</div>
<div class="header">H3</div>
<div class="content">c3</div>
</div>
CSS:
.container { height: 600px; width: 400px; }
.header { height: 32px; background: url(plus.png) no-repeat right center; }
.selectedHeader { background: url(minus.png) no-repeat right center !important; }
.content { height: 200px; }
Javascript:
$('#container').live("click", function (e) {
var $item = $(e.target);
if ($item.hasClass("header")) {
$item.addClass("selectedHeader").siblings().removeClass("selectedHeader"));
$content.not($item.next()).slideUp();
$item.next().slideDown(UxSpeed);
}
}
// this will hide all contents initially and show only the first one
$('.header').not($('.header').first()).next().hide();
Hope this helps.
Use slideToggle with $(this) instead of using with $(".slidingDiv")
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
$(this).slideToggle();
var isShow = $(this).text() == 'Show';
$(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
});
});
Check this one, DEMO http://jsfiddle.net/yeyene/FPGH4/
Add target attribute to target multiple divs.
HTML
<a class="show_hide" target="slidingDiv1">Show</a>
<div id="slidingDiv1" class="slidingDiv">
Check out 1
</div>
<a class="show_hide" target="slidingDiv2">Show</a>
<div id="slidingDiv2" class="slidingDiv">
Check out 2
</div>
<a class="show_hide" target="slidingDiv3">Show</a>
<div id="slidingDiv3" class="slidingDiv">
Check out 3
</div>
JQUERY
$(document).ready(function(){
$('.show_hide').on('click',function(){
$('.show_hide').text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
$(".slidingDiv").slideUp(100);
$('#'+$(this).attr('target')).slideDown(300);
var isShow = $(this).text() == 'Show';
$(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:10) +'px'});
});
});