I am working on a slider, when mouse hovers over logo the details will show, and when mouse hovers out from its parent div it should hide.
jQuery('.st_inner img').mouseover(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function() {
jQuery('#spon_detail').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://placehold.it/200x50">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>
You forgot to add the class on img element. There is no element using sponsor_thumb class
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function(){
jQuery('#spon_detail').fadeOut();
});
.key_val{
width : 400px;
height : 400px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img class="sponsor_thumb" src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail" style="display:none">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>
Not sure what you are trying to achive but what you might be missing is hiding the element before you want to fade it in
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function(){
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>
I think you missed to add .st_inner img on mouseout function.
jQuery('.st_inner img').mouseenter(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function() {
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://dummyimage.com/300.png/09f/fff">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>
You can also check this https://jsfiddle.net/a6ekejz5/1/
Hope this will help you.
Related
I want to remove a Parent div using js or jquery but I am unable to do so because it is multiple cards made dynamically. Here is my code:
<?php
for($ter as $term)
{
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
<?php
echo $term->name;
?>
</h2>
</div>
<div class="row-joinee">
<?php echo $term->data; ?>
</div>
</div>
}
?>
main.js file:
jQuery(document).live(function($) {
if ( $('.row-joinee').text().length == 0 ) {
// length is 0
$('.row-joinee').closest(".wrapper-newjoinee-custom").remove();
}
});
please help me to make display none of wrapper-newjoinee-custom class if row-joinee class is empty
You could try something like this:
$(".row-joinee").filter(
function() { return $(this).text().trim() == ""})
.closest(".wrapper-newjoinee-custom").hide()
This will hide those .wrapper-newjoinee-custom that has en empty <div class="row-joinee">
Demo
$(".row-joinee").filter(function() { return $(this).text().trim() == ""}).closest(".wrapper-newjoinee-custom").hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name im empty
</h2>
</div>
<div class="row-joinee"></div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
jQuery(document).ready(function(){
jQuery(".artists-main .artists-name1 a ").mouseover(function(){
jQuery(".artists-image .artists-img1").show();
});
jQuery(".artists-main .artists-name1 a ").mouseout(function(){
jQuery(".artists-image .artists-img1").hide();
});
jQuery(".artists-main .artists-name2 a ").mouseover(function(){
jQuery(".artists-image .artists-img2").show();
});
jQuery(".artists-main .artists-name2 a ").mouseout(function(){
jQuery(".artists-image .artists-img2").hide();
});
jQuery(".artists-main .artists-name3 a ").mouseover(function(){
jQuery(".artists-image .artists-img3").show();
});
jQuery(".artists-main .artists-name3 a ").mouseout(function(){
jQuery(".artists-image .artists-img3").hide();
});
jQuery(".artists-main .artists-name4 a ").mouseover(function(){
jQuery(".artists-image .artists-img4").show();
});
jQuery(".artists-main .artists-name4 a ").mouseout(function(){
jQuery(".artists-image .artists-img4").hide();
});
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
</div>
Hide and show images on hover. Class artists-main has artists names and class artists-image has images of the artists. It's working fine but my code is lengthy. I have round about 50+ artists and page will be filled by jQuery code. I want to shorten it.
use same class name
$.each($(".artists-main .artists-name a"), function(index, element) {
$(element).mouseover(function() {
$('.artists-image .artists-img:eq(' + index + ')').show();
})
$(element).mouseout(function() {
$('.artists-image .artists-img:eq(' + index + ')').hide();
})
})
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name">Artist 1</div>
<div class="artists-name">Artist 2</div>
<div class="artists-name">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img" src="https://picsum.photos/200/300?random=1">
<img class="artists-img" src="https://picsum.photos/200/300?random=2">
<img class="artists-img" src="https://picsum.photos/200/300?random=3">
</div>
You can also use native javascript code:
let images = document.querySelectorAll(".artists-img");
images.forEach(x => x.classList.add("no-display"));
function changeHover(idx) {
images.forEach(x => x.classList.add("no-display"));
document.getElementById("img" + idx).classList.remove("no-display");
}
.no-display {
display: none;
}
<div class="artists-main">
<div class="artists-name"><a onmouseover="changeHover(1)" href="#">Artist 1</a></div>
<div class="artists-name"><a onmouseover="changeHover(2)" href="#">Artist 2</a></div>
<div class="artists-name"><a onmouseover="changeHover(3)" href="#">Artist 3</a></div>
</div>
<div class="artists-image">
<img class="artists-img" id="img1" src="https://i.picsum.photos/id/474/536/354.jpg?hmac=wmJxGqF8CZdMBSMLHMqolt46tKerJulEfjVeecZJHyE">
<img class="artists-img" id="img2" src="https://i.picsum.photos/id/266/536/354.jpg?hmac=sWDqtbQOm-fz6eG3de_B6hdMz4PpEHoxp0qn2v-C9gQ">
<img class="artists-img" id="img3" src="https://i.picsum.photos/id/573/536/354.jpg?hmac=DLmhMwWbQZVtjZxUi5BvgENG7DfyeVxKcBdEKHIQ9k8">
</div>
Fiddle snippet
You can use the index of the element, and control visibility by adding CSS class:
jQuery(document).ready(function(){
jQuery(".artists-main > div").mouseover(function(){
var current_index = $(this).index();
$('.artists-image > div').removeClass('visible-artist');
$('.artists-image > div').eq(current_index).addClass('visible-artist');
});
});
.artists-image > div.visible-artis {
display: none;
}
using index() and avoiding to number your class:
$(".artists-main .artists-name a").on("mouseover mouseout", function(e){
var index = $(this).closest('div').index();
if(e.type == "mouseover"){
$(".artists-image .artists-img").eq(index).show();
}
else{
$(".artists-image .artists-img").eq(index).hide();
}
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name">Artist 1</div>
<div class="artists-name">Artist 2</div>
<div class="artists-name">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img" src="https://picsum.photos/200/300?random=1">
<img class="artists-img" src="https://picsum.photos/200/300?random=2">
<img class="artists-img" src="https://picsum.photos/200/300?random=3">
</div>
This is a no effort solution. But I really recommand that you settle this up with pure CSS (pseudo-elements).
CSS = Presentation
JS = Behaviour
$(document).ready(function () {
$('.artists-name1').hover(function() {
$('.artists-img1').toggle();
});
$('.artists-name2').hover(function() {
$('.artists-img2').toggle();
});
$('.artists-name3').hover(function() {
$('.artists-img3').toggle();
});
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
</div>
The SIMPLEST way to do this would be using purely CSS, you may follow the example given here :
.artists-img1 {
display : none;
}
.artists-name1:hover + .artists-img1 {
display: block
}
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
Solution reference :
https://www.w3schools.com/howto/howto_css_display_element_hover.asp
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">
<img src="https://images.unsplash.com/photo-1580820726687-30e7ba70d976?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80" id="picture2" width="20%" height="auto" /></div>
</body>
</html>
I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});
I am loading a grid of news stories and want to append two DFP adverts at a particular place in the grid - which is define by a data attribute data-adposition
Here's the HTML of the divs
<div class="aggregator">
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
<h2>Test DFP TWO</h2>
</div>
</div>
I am then looping through and currently using detach() to preserve the data but remove it from the document.
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
Having no luck currently! The detach() works as it stores the data when I console.log but does no append to the position defined in the data-adposition
it works for me. what are you getting back from the php expression for data-adposition?
$(document).ready(function(){
var selector = ".aggregator";
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator">
<div class="news-item">n1 </div>
<div class="news-item">n2 </div>
<div class="news-item">n3 </div>
<div class="news-item">n4 </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="1">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="2">
<h2>Test DFP TWO</h2>
</div>
</div>
I have a child div that needs to be added with a class using jQuery.
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
The jQuery code that i tried so far is this:
j('.main-content .post-content').each(function () {
j(this).after().addClass('home-inner-content');
});
This is the result that i am desiring for:
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid home-inner-content">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
Any help is appreciated. Thanks
You probably want something like:
j('.main-content .post-content').each(function () {
j(this).children().first().addClass('home-inner-content');
});
.after() is for inserting content, not locating it.
But really, I don't think you need a loop. You can do:
j('.main-content .post-content > *:first-child').addClass('home-inner-content');
The first part selects the elements you want. .addClass() adds a class to each of the elements that got selected.
If I understand you correctly, next code will help.
$('.main-content .post-content>div').addClass('home-inner-content');
$('.main-content .post-content').each(function() {
$(this).children().addClass('home-inner-content');
});
body * {
padding-left: 1em;
}
body *:before {
font-family: monospace;
content: attr(class);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<article class="post status-publish">
<div class="post-content">
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container">
</div>
</div>
</div>
</article>
</div>
You don't need to use each function here.
j('.main-content .post-content>div').addClass('home-inner-content');