Change background-image with attribute value - javascript

I have this link:
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg"></div>
I need to change background-image url from another class with data-url on hover event.
I try this right now but doesn't work:
var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {
jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
This script get me this result:
element.style {
background-image: url((unknown));
}
i need this:
<div class="bg" style="background-image: url(http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg);"></div>
any advice? thanks

Your syntax is wrong for getting attr data-src, use this
var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {
jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
jQuery('.wp-show-posts-inner').on('mouseleave',function() {
jQuery('.home-banner .bg').css({'background-image': "url()"});
});
.bg{height:100px;width:100px;}
.wp-show-posts-inner{height:100px;width:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-banner">
<div class="bg">
</div>
</div>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner (Hover on me)</div>

You code has three problem.
You should use selector before using .attr(). So use $(this).attr('data-src')
In end of second parameter of .css() there is additional ' that should removed
css background-image property should wrapped into url()
So you code should change to
$('.wp-show-posts-inner').hover(function() {
$('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});
$('.wp-show-posts-inner').hover(function() {
$('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});
.bg {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner</div>
<div class="home-banner">
<div class="bg">bg</div>
</div>

Related

Cannot add class to element children

I'm trying to find an element in my HTML file based on its parent class name and then add a class to it. I've tried the solution in here but it won't work. also, I've tried to log the child class name to see if it's working but it will return undefined. My HTML file is something like this:
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>
To get the class name from jQuery object you have to use prop(). Try to set some style to the element so that the changes are visible (like color):
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").prop('class'));
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>
Use addClass instead of toggleClass.toggleClass class will require an event like click to toggle the class.
$(document).ready(function() {
//console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").addClass("search-controller");
});
.search-controller {
height: 100%;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">Test
</div>
</div>

Hover on a link and change the background-image of a div - JQuery

I'm having trouble making a div's background-image change when hovering over a link the code looks fine to me so I'm at a loss here is the code:
Javascript:
$('#hover-01').on('mouseover', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
HTML:
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change"
style="background-image: url(images/5.jpg);">
<div class="overlay"></div>
</div>
jQuery version: v2.1.1
Any idea's or advice?
Edit: the code does work however it was a problem with a 3rd party plugin (I assume) so I fixed it with normal javascript and not jQuery
'mousein' isn't an event handler that you can use. You should use mouseover and mouseout, or mouseenter and mouseleave. See jQuery mouse events here.
You also need to give a width/height to your container that will hold the image, since it has no contents. Also, you have two function() declarations in your mouseout function, I fixed it in the following code sample:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
width:1000px;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change">
<div class="overlay"></div>
</div>
Use this fiddle:
JS:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
You can use jQuery's toggleClass() method to solve your problem like this:
$(document).on('ready', function() {
$('#link').on('mouseover', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
$('#link').on('mouseleave', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
});
body.colored {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a id="link" href="#">This is a Link</a>
</div>
Hope this helps!
You can use the CSS :hover ~ to change the hover-change div when hover-01 is hovered over as follows:
#divToHover:hover ~ #divToChange {
/*your code here*/
}
#change {
height: 300px;
width: 300px;
background-image: url("//www.google.com/favicon.ico");
}
#hover {
height: 40px;
width: 40px;
background-color: green;
}
#hover:hover ~ #change {
background-image: url(/favicon.ico);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>
Try the following code. Make sure to set height and width for the div for which you want the background change.
Issue was with your event name used. Refer here for list of mouse events
$('#hover-01').on('mouseover', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
}).on('mouseout', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
});
.responsive-section-image {
height: 150px;
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project" href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change" style="background-image: url('https://placehold.it/350x150/ff0000')">
<div class="overlay"></div>
</div>

Using Javascript or CSS, is there anyway to select elements that have css style overflow: hidden?

I'm having some problem with my code, the last error is replace only some html elements have overflow: hidden; to overflow: none;, i can use javascript or css to do it, but i don't know how at this time. Please help me!
Is there anyway to select elements that have css style overflow: hidden; in javascript or css?
UPDATE 2: (everything came ok!)
Thanks Pranav C Balan, Michael_B have gave some awesome answers.
var ele = $('.selector').filter(function() {
return $(this).css('overflow') == 'hidden';
})
ele.css('color', 'red');
.overflow {
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=selector>1</div>
<div class="selector overflow">2</div>
<div class=selector style="overflow:hidden">3</div>
<div class=selector>1</div>
<div class="selector overflow">4</div>
<div class=selector>5</div>
You can use filter() for that
var ele = $('.selector').filter(function() {
return $(this).css('overflow') == 'hidden';
})
ele.css('color', 'red');
.overflow {
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=selector>1</div>
<div class="selector overflow">2</div>
<div class=selector style="overflow:hidden">3</div>
<div class=selector>1</div>
<div class="selector overflow">4</div>
<div class=selector>5</div>
Using CSS only, if the overflow: hidden is declared in the HTML element (i.e., inline), you can target the style attribute and make the match using attribute selectors.
HTML
<div class="..." id="..." style="overflow: hidden;"> ... </div>
CSS
div[style*="overflow:hidden"], div[style*="overflow: hidden"] { ... }
The asterisk * tells CSS to match a div with a style attribute that contains the substring "overflow:hidden" or "overflow: hidden".

How to add a fade effect to html transition with javascript

I have this code (see jsfiddle below)
<script type='text/javascript'>
https://jsfiddle.net/mA8hj/ and would like to know how to edit the javascript in a way that by clicking the links in the fiddle, the text displayed fades slowly to another text when clicking another link. (Something like you'd use in CSS by adding -ms-transition: .2s;).
Thanks!
Try to pass "slow"/"fast"/"medium"/any delay in milliseconds as a parameter to show,
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).stop().show("slow");
});
DEMO
Or by using .fadeIn()
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).css("opacity",0).stop().fadeIn("slow");
});
Use a CSS class and CSS transitions instead, and use jQuery only to add/remove this class .show:
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').removeClass("show");
$('#answer' + numb).addClass("show");
});
#answer,
#answer1,
#answer2,
#answer3,
#answer4 {
position: absolute;
opacity: 0;
transition-duration: 0.4s;
}
#answer.show,
#answer1.show,
#answer2.show,
#answer3.show,
#answer4.show {
position: absolute;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
<div class="clear" class="question"></div>
<div id="answer1">1</div>
<div id="answer2">2</div>
<div id="answer3">3</div>
<div id="answer4">4</div>
<div class="new_member_box_display show" id="answer">Text will appear here when one of the tabs above is clicked</div>
https://jsfiddle.net/mA8hj/94/

jQuery UI replaceWith() animation?

So I have a div:
<div id="lol">
Some random text!
</div>
And I have other div:
<div id="happy">
lol
</div>
How could a make an animation, in which the first div is smoothly replaced by the second one? If a Do a fadeIn/fadeOut, the second div would only starting to happear after the first div was gone.
I think simply this would work.
$("#happy").hide();
$("#smooth").click(function(){
$("#happy").show();//no transition for this
$("#lol").slideUp();//with transition
});
here is a demo fiddle
or you can even toggle the effect like this
Yes. Quite easy. Assuming #lol is visible and #happy is not. (You can use jQuery's show/hide to set that up).
$('#lol').fadeOut(function() {
$('#happy').fadeIn();
});
$("#lol").fadeOut(1000,function(){
$("#happy").fadeIn();
});
I think that is what do you want:
$("button").click(function () {
$(".happy").toggle('slow');
});
JSFIDDLE
You can add a class to both of these divs, then toggle the class. This will allow both to toggle simultaneously (one fades in at the same time the other is fading out).
HTML
<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>
JQuery
$("#happy").hide();
$("#btn").click(function() {
$(".toggle").toggle(2000);
});
JSFiddle
Using fadeOut/fadeIn will work if you use absolute positioning. There are many other options as well.
I'm not at all sure what you would like to see in your final result, but here are a few examples:
Example fiddle
CSS:
div.container {
position: relative;
height: 30px;
}
div.container div {
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="container">
<div id="lol">Some random text!</div>
<div id="happy" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol1">Some random text!</div>
<div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol2">Some random text!</div>
<div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
<div id="lol3">Some random text!</div>
<div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>
Sample code:
$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);
$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);
$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});
$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);

Categories

Resources