I'm trying to get my div element to change pictures. The problem I'm having is that all the div that I've selected are changing. I've tried the .each() function but I haven't been able to get it to work.
$('.product_category_item div').hover(function() {
$('.main_image').each(function() {
$(this).css("display", "none");
});
$('.hover_image').each(function() {
$(this).css("display", "block");
});
}, function() {
$('.main_image').each(function() {
$(this).css("display", "block");
});
$('.hover_image').each(function() {
$(this).css("display", "none");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 product_category_item">
<a href="taps.html">
<div>
<img class="main_image" src="img/water-faucet1.jpg">
<img class="hover_image" src="img/gold-faucet1.jpg">
<p>
taps
</p>
</div>
</a>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/block_seal.jpg">
<img class="hover_image" src="img/round_seal.jpg">
<p>
seals
</p>
</div>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/hinge1.jpg">
<img class="hover_image" src="img/hinge2.jpg">
<p>
hinges
</p>
</div>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/handle1.jpg">
<img class="hover_image" src="img/handle2.jpg">
<p>
handles
</p>
</div>
</div>
Try changing your code to below.
$('.product_category_item div').hover(function(){
$(this).find('.main_image').hide();
$(this).find('.hover_image').show();
}, function(){
$(this).find('.main_image').show();
$(this).find('.hover_image').hide();
});
Related
I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.
You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link
I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.
Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps
i want to find closest h2 tag to hovered image following is my html code
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7"><a href="#">
<div class="img">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div></a>
</div>
<h2>Arenas</h2>
</div>
this is what i am trying to do in jquery
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('h2').hide();
})
})
Please help me how can i do it .
closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor
Something like:
$('.img').hover( function(){
$(this).closest('.ih-item').siblings('h2').hide();
});
You can use the .parents() method to get the correct ancestor and find for h2 tag:
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
PLease go through below code, It will help you. Amending #mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
},function(){
$(this).parents().eq(2).find('h2').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
you were missing quotes on h2 :
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('.col-md-3').find('h2').hide();
})
})
this should work
You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.
$(document).ready(function () {
$('.img').hover( function(){
$(this).parent().parent().parent().find('h2').hide();
})
})
https://jsfiddle.net/9b9s87oo/1/
I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>
I have a list of items with hidden content that shows/hide on hover. I'm trying to get the same functionality to work as I tab through my page. Currently, I can only get every hidden content to appear all at once.
Here's a live example of my code
jQuery:
$('#top .item .content').hover(function (e) {
$(this).children('.black-box').stop().slideToggle(300);
});
$('#top').on('keyup', function (e) {
var keyCode = e.keyCode || e.which;
var isTabbing = false;
if (keyCode == 9) {
if ($('.featured-content').find('*').is(':focus')) {
if (!isTabbing) {
isTabbing = true;
$('.featured-content .item .content .black-box').stop().slideToggle(300);
}
}
}
});
HTML:
<div id="top" class="featured-content">
<div class="item">
<h3>Tacos</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
I love tacos!
</div>
</div>
<div class="start-btn">Start Eating</div>
</div>
<div class="item">
<h3>Pizza</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
And Pizzzzzzaaa! P-I-Z-Z-A!
</div>
</div>
<div class="start-btn">Keep Eating</div>
</div>
<div class="item">
<h3>OMFG Naps</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
Because you just ate a ton of food! #foodcoma
</div>
</div>
<div class="start-btn">Go to sleep</div>
</div>
</div>
I think you want to use focus and focus out to trigger your events.
$('#top').on('focus', function(){
// do something
});
$('#top').on('focusout', function(){
// do something
});