I really need help with this. I'm building a slider with swiper js
I have a product with few options, the idea is to filter the images that don't match with the option selected.
I know swiper has a lot of method and events, but the closest I found was the removeSlide and add/append Slide, which eliminates the element from the DOM. So I did it with plain javascript, hidden the images with css like this:
if (event.target.name.includes("Color")){
images.forEach((image)=>{
if (!image.dataset.thumbColor.includes(color)){
image.classList.add('hidden');
swiper.swiper.update();
swiper2.swiper.update();
}
});
thumbs.forEach((thumb)=>{
if (!thumb.dataset.thumbColor.includes(color)){
thumb.classList.add('hidden');
} else {
thumb.addEventListener('click',()=>{
swiper2.swiper.slideTo(thumb.dataset.slideNum);
})
}
});
}
The problem whit this (like you can see in the link below) is that after the first filter, when you click a thumb image it doesn't send you anymore to the correct image.
https://e9ef6jlcbp604898-59185856680.shopifypreview.com
You may need to try swiper.update() after manually manipulating your slides.
Ref: https://swiperjs.com/swiper-api#method-swiper-update
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 am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.
I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?
$(document).ready(function(){
$('#novelDescrip').hide();
$('#barDescrip').hide();
$('.novel').hover(function(){
$('#novelDescrip').fadeIn('slow', 1);
},
function(){$('#novelDescrip').hide();}
);
$('#barminder').hover(function(){
$('#barDescrip').fadeIn('slow', 1);
},
function(){$('#barDescrip').hide();
});
});
This should explain the use of toggle as well as the link Jorge posted.
How do I check if an element is hidden in jQuery?
Here are a few methods to get you started with the jQuery toggle function:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
The slide and fade are used to give the toggle a slide or fade out effect.
You can also use the following attributes for different things:
$('element:hidden')
$('element:visible')
Or you can do the same with is:
$(element).is(":hidden")
$(element).is(":visible")
Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.
Hope that helps.
I'd like to have a different logo on each "page" of my single page website http://goo.gl/16XdA (each page has a separate div). Is it possible, and how? Many thanks
That site is pretty nice, I don't understand why changing the logo would be hard for you.
Here is a simple way to do it, there are many.
<li class=""><a onclick="changeLogo();" href="#team">Team</a></li>
<script type="javascript/text">
function changeLogo(){
var logoImg = document.getElementById("logo").children[0];
logoImg.src = "newsource.jpg";
}
</script>
I would suggest pre-loading the various logos so that the switch is instantaneous.
What have you try? You can add event to your navigation: when user click on nav item, it change your current logo...
Something like this
$('#nav li').click(function(){
var selected = $('a', this).attr('href'); // This will return current item # like #team, #activities...
#change your logo based on selected
$('#logo img').attr('src', 'your url');
});
You can do this several ways with javascript. I'd shift the background position of a sprite-format image on the click event using jQuery or change the source of the image url altogether. Another method is to just add your individual logos to each of those nicely animated backgrounds you have going there (if you don't mind making the logos page-specific).
http://api.jquery.com/click/
http://api.jquery.com/css/
You can find which of your divs are currently visible
Check if element is visible after scrolling\
and then set the image in your logo div based on that.
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])");
after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.