So I have a problem that I do know the solution to, but it would require a ton of repetitive code in the process so I know there must be a simpler way to do this. I have a list of divs that all have a main image and alt image. The alt images are hidden behind the main images and are supposed to switch with each other when the user hovers over the main image. Each div has it's own specific ID, but I really don't want to have to write the same script over and over just changing the ID. Here's my HTML (simplified but same structure minus fluff):
<section>
<div id="one">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
<div id="two">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
<div id="three">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
</section>
and the jQuery I had written up:
<script type="text/javascript">
$(document).ready(function () {
$('#one img.main').mouseenter(function () {
$('#one img.main').hide();
$('#one img.alt').show();
});
$('#one img.alt').mouseleave(function () {
$('#one img.alt').hide();
$('#one img.main').show();
});
});
</script>
I really don't want to repeat for each div since there are 9 in my current page. Any suggestions?
SOLVED:
jQuery(document).ready(function () {
//swap out main images on hover
jQuery('.stores div img.main').mouseenter(function () {
jQuery(this).hide();
jQuery(this).next('img.alt').show();
});
jQuery('.stores div').mouseleave(function () {
jQuery('img.alt').hide();
jQuery('img.main').show();
});
});
You should be able to reduce it to:
$(document).ready(function () {
$('section > div > img.main').mouseenter(function () {
$(this).hide();
$(this).next('img.alt').show();
});
$('section > div > img.alt').mouseleave(function () {
$(this).hide();
$(this).prev('img.main').show();
});
});
You can use this selector for each first img:
$('section div img:first')
So if you put an id in the section:
$('#yourSectionId div img:first')
You need to write scripts mouseenter on .main and mouseleave on the div itself
<script type="text/javascript">
$(document).ready(function () {
$('section > div > img.main').on('mouseenter', function (e) {
$(this).find('~ .alt').show();
$(this).hide();
});
$('section > div').on('mouseleave', function (e) {
$(this).find('.alt').hide();
$(this).find('.main').show();
});
});
</script>
I would use:
<script>
$(document).ready(function () {
$('section > div').on('mouseenter', function () {
var el = $(this);
el.find('.main').hide();
el.find('.alt').show();
});
$('section > div').on('mouseleave', function () {
var el = $(this);
el.find('.alt').hide();
el.find('.main').show();
});
});
</script>
Related
I have this structure
<div class="container">
<a> <img /> </a>
<div id="actions"></div>
<ul id="add-to"> </ul>
</div>
and I'm using a script like this
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prev('a').addClass('opacity');
}, function() {
jQuery(this).prev('a').removeClass('opacity');
});
});
</script>
it does work when hover on the actions element id, but not with the #add-to.
Can you help me with this?
thanks
prev() only select immediate previous element, a is not immediately previous to#add-to. In this case you can use siblings() or prevAll() . while using prevAll() use first() to get closest one
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).siblings('a').addClass('opacity');
}, function() {
jQuery(this).siblings('a').removeClass('opacity');
});
});
</script>
or
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prevAll('a').first().addClass('opacity');
}, function() {
jQuery(this).prevAll('a').first().removeClass('opacity');
});
});
</script>
I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>
Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/
Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle
Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/
I need to make div visible on hover
$(document).ready(function () {
$('.carousel').hover(function () {
$(this).parent().next('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).parent().next('.semitransparentoverlay').fadeOut('200');
});
});
but on hover div becomes visible again and again
http://jsfiddle.net/n8b65qbb/14/
How to prevent it and make div visible only once and then hide it on mouselive only once?
If you do the hover on the parent instead, and move the overlay to within the wrapper, this will prevent the fading in of the overlay from triggering a second hover event.
html, moving overlay inside of carousel-wrapper:
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Show all" class="btn-1"/>
</div>
</div>
Jquery, targeting carousel-wrapper for hover:
$(document).ready(function () {
$('.carousel-wrapper').hover(function () {
$(this).children('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).children('.semitransparentoverlay').fadeOut('200');
});
});
Updated link: http://jsfiddle.net/carasin/1po0acv6/2/
Another option would be including and extra div just for hover event, before carousel-wrapper.
$(document).ready(function () {
$('.hover-block').hover(function () {
$(this).siblings('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).siblings('.semitransparentoverlay').fadeOut('200');
});
});
Check fiddle: http://jsfiddle.net/benjasHu/d1wg3fe0/
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();
});
<li><b>Arbeiten</b></li>
This is the link. When i click this it change the id of the div(#section17) from display none to block.
<li><b>Feiern</b></li>
Now if i click on a other link(#section15) it should change the display:block from #section17 to display:none again and the link(#section15) to display block
The page doesnt reload just the url change a little bit.
Can anyone help me?
<script type="text/javascript">
$("a").click(function () {
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
</script>;
DEMO: http://jsfiddle.net/gvee/qba7e/
HTML
<ul>
<li><b>section 17</b>
</li>
<li><b>section 18</b>
</li>
<li><b>section 19</b>
</li>
</ul>
<div id="sections-container">
<div id="section17">section 17</div>
<div id="section18">section 18</div>
<div id="section19">section 19</div>
</div>
JQuery
$('a').click(function (e) {
// Prevent jumping to anchor
e.preventDefault();
// Hide all other sections
$('#sections-container > div').css('display', 'none');
// Show only one we want
var addressValue = $(this).attr('href');
$(addressValue).css('display', 'block');
});
You have to cancel the link's default behaviour:
$("a").click(function (event) {
event.preventDefault();
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
your code should be like this
<script type="text/javascript">
function HideShow(ctrl) {
var addressValue = $(ctrl).attr("href");
$(addressValue).css("display", "block");
}
</script>
<li><b>Arbeiten</b></li>
<li><b>Feiern</b></li>
If you give all sections a class of sectionClass then hide all elements with this class and show the relevant one on click you should be in business.
$("a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".sectionClass").hide();
$(addressValue).show();
});