I'm trying to detect if a class is present and, if so, set the background attribute of another element. This is what I have but it's not working.
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
BTW - My next step is for this to detect it whenever the ID "slider-banner" changes, but so far I can't even get it to work once on page load. Any help would be greatly appreciated... Thanks!
EDIT: I changed from .attr to .css as instructed. Makes sense... but still not working. I've tried adding console.log message within the IF statement and got nothing also. Does that give anyone any more ideas?
Example HTML where class changes:
<img id="slider-banner" class="living-nutrients" src="[image path]">
Example HTML where I want to change background image:
<div class="home-middle-one-third" id="home-middle-first">
</div>
UPDATE:
For everyone who said it "should work"... you are right! Turns out that, as written, it doesn't like being in the footer of the page, but when I moved it to the head, presto!
The final piece of this puzzle is to have it detect and evaluate based on the #slider-banner changing, (or more accurately, which class is present for the ID'd area), not just the page loading, as is currently.
The ID is for one element of a slide within a slider. There are three possible classes I could assign to the ID depending on which slide is visible. So I need the script to evaluate every time a slide changes.
Any ideas? Thank you all!
background-image is a element's style property, not its own one.
So .css("background-image","[path to new background image]");
Almost!
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
css is the correct function to set a CSS attribute.
The attr will set an HTML attribute. <div attr='attr value'>
Edit
I'm kind of guessing about the functionality of your script here in the following example.
When you set the background-image of a HTML node, that's all it does is set the background image. You must also set the width and height accordingly, to all the node to be large enough to even see the background of the node. Background images will not automatically resize the node.
var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css({
"background-image":"url("+slider.attr('src')+")", // url() for good meassures
//"background-image":slider.css('background-image'), //try this if that doesn't work
"height":slider.height(),
"width":slider.width()
});
}
Here is a working example.
Try this
jQuery("#home-middle-first").css("background-image","url([path])");
Related
I have a Gutenberg website and I want to add animations that the use can control, I am using aos (animate on scroll) and I figured, if I create a class then loop over it and that adds the relevant data-aos values e.g.
$('.aos-fade-up').each(function(i) {
$(this).attr('data-aos', 'fade-up');
});
It works as intended, adds the relevant attribute, and the content is hidden, but nothing happens on scroll.
What is the problem here? The attribute is on, it hides the content but nothing happens on scroll.
Pen here: https://codepen.io/StuartAttain/pen/MWWzVpe
You have to init after you do the replacements:
https://codepen.io/farinspace/pen/bGVppQb
or do a AOS.refreshHard(); afterwards:
https://codepen.io/farinspace/pen/ExVKKrw
I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.
$(".toppic").hover(function() {
var imgsrc = this.src;
$("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {
$("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})
I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.
Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.
I hope that helps.
Quick Intro:
I'm using jQuery.elevateZoom-3.0.8 as to show zoomed picture.
SRC attribute is path to smaller/normal image
DATA-ZOOM-IMAGE attribute is path to bigger image that serves as a zoom.
HTML Code Below:
<section id="designer-single" class="col-md-7" >
<div class="magnifier-thumb-wrapper mc">
<img class="front-magnify"
src="../../public/img/burn/purple-front.png"
data-zoom-image="../../public/img/burn/purple-front-lg.png">
</div>
</section>
<button class='back-image'>Click me</button>
Now I want image to change when user presses a button. Smaller image will change (SRC attribute), but bigger one will not refresh (data-zoom-image attribute) even though i change it with jQuery.
$('.back-image').on('click', function(){
$('.front-magnify').attr('src', 'public/img/burn/purple-back.png');
$('.front-magnify').attr('data-zoom-image', 'public/img/burn/purple-back-lg.png');
});
Question is: how do I update state of custom attribute "data-zoom-image" in elevateZoom.js so that it updates on DOM?
https://i.stack.imgur.com/hFvG7.png => without clicking
https://i.stack.imgur.com/r0tUw.png => when changing
Example on Codepen:
https://codepen.io/kenanbalija/pen/MojOEp
What seems likely to be the problem is that you're changing the attribute successfully, but the code in elevateZoom.js is initing based on the original value and isn't watching for changes.
Based on your comment below and a quick look at the plugin source code, my earlier guesses (reinstantiate the plugin by calling .elevateZoom again, or use the responsive option) won't work. This is a one-shot plugin, it's really not designed to be controllable after it's instantiated, so your options are pretty limited.
You could go brute-force and destroy the existing plugin (by removing the whole DOM element) before replacing it with a new one and reinstantiating the plugin.
Or, since you appear to be toggling between two different zoomable images, it may be simpler to instantiate them both separately and hide / reveal each as necessary, something along the lines of
$('.image').on('click', function(){
$('.front-magnify, .back-magnify').toggleClass('hidden');
})
That'd be a tradeoff between bandwidth and code complexity, of course.
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
I've tried editing this code a number of ways (using if statments and each statements) with nothing working. The idea is so simple; if a div contains this specific text, I want to change the src attribute of the image in that div only.
I can't seem to figure out what I'm missing. The code below changes all the images in all divs with that class rather than just the ones that contain the specific text. I've tried to work in 'this' but apparently don't understand how it affects the function.
$(document).ready(function(){
$('.my-content').filter(':contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
Could someone kindly point me in the right direction of what I need to change to make the script target only images in the div that contain the text instead of all div with that class because one of the div did contain that text (I think that's what triggers it; I may be off about that too).
Try this:
$(document).ready(function(){
$('.my-content:contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
See jQuery :contains docs
Edit
Actually I think your answer should work as well. Seems to work fine in this jsfiddle, can you post your markup?
$('div').filter(':contains("Top")').css("color", "red")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Top</div>
<div>Right</div>
<div>Bottom</div>
<div>Left</div>