jQuery toggle and slide for testimonials setup - javascript

I'm trying to make a custom slider for a few testimonials. The picture below illustrate how it should work. The first testimonial is highlighted and when the user clicks on the next testimonial the yellow background should slide to it, the font color of the name and company should change and also the actual testimonial text should slide.
I managed to make a functional version, which you can see in this fiddle or live on this website. Any improvements and explanations will be highly appreciated (I'm still very new to jQuery).
Here is the jQuery code I used:
$("div.container-slider").click(
function () {
$("div.active-slide").toggleClass("animate", 1000, function () {
$("div.mike").toggleClass("current-font", function () {
$("span").toggleClass("company-current");
}),
$("div.neil").toggleClass("inactive-slide", function () {
$("span").toggleClass("company");
});
}),
$("div.testimonial-text").slideToggle("slow", function () {
$("div.testimonial-text-2").toggleClass("display-none");
});
});
Problems:
How can I make the font color and weight change more subtle?
How can I target specific span codes, because right now the script changes the span color everywhere on the website?
How can I make the testimonial-text slide more smoothly (similar to the yellow background)?

It looks like you're already using CSS transitions. Have you tried fiddling with them?
Use this to limit scope to the current element, as in $(this).find('span')...., or use index (eq()) to target by slide, or give the relevant spans a class to target.
I'm not sure why you're toggling your display-none class, but that's
probably causing the abruptness. Try removing that.

Related

Toggling class on scroll when div enters viewport with CSS scroll-snap

I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?

Truncate text of Twitter Bootstrap carousel

I want to truncate the text of the Bootstrap carousel .carousel-caption element. I am using shave.js to truncate the text. However, the truncating only works on the first .carousel-caption element.
I`ve created a jsfiddle to demonstrate my problem: jsfiddle
When I remove the CSS class carousel-inner from the carousel, the truncating works perfectly on booth .carousel-caption elements.
I am not pretty sure about the issue, but I think it's due to the dynamic behavior of the carousel so the shave code will only work on the first caption because it's visible and its height is set so your code should also be dynamic to call the shave funcion for each slide.
An idea is to use the event provided by the carousel component and call the shave function there.
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".carousel-caption").shave(70);
})
slid.bs.carousel : This event is fired when the carousel has completed
its slide transition. ref
Full code : https://jsfiddle.net/dpnpo4o7/2/
I used the jQuery version of the plugin in the code above but it works the same with the JS version:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
shave(".carousel-caption", 70);
})
Full code : https://jsfiddle.net/dpnpo4o7/3/
I went through the fiddle. And shave must be finding those second captions but since it is invisible at that moment, it is failing to do that.
Solution: You might want to capture the prev and next events and then try your code.

Color entire Bootstrap menubar when mobile (hamburger menu) is clicked

I've got a menubar that I want to add some CSS or JS to. I want to make it such that when I click on it when in responsive view, the entire object can be targeted (I plan to do some background styling). I've found some stack overflows re: coloring the menu items, the menu itself, but none of those when applied to the overall menubar either A) work at all B) work only for responsive, which is what I want.
I've made a codepen. I just can't figure out if things like :active or :focus or something else would be the right fit. Hopefully the code pen illustrates what I want. I just cannot seem to target the navbar in it's entirety whether thru JS or CSS. I want to achieve a background effect for not just the dropdown but the row the hamburger lives in when clicked.
You can use Bootstrap's collapse events.
$('.navbar-collapse').on('show.bs.collapse', function () {
// Do your stuff
// This event fires immediately when the show instance method is called.
});
$('.navbar-collapse').on('hide.bs.collapse', function () {
// Do your stuff
// This event is fired immediately when the hide method has been called.
});
CODEPEN
If you add this to your navbar-header div:
<div onClick="clickMe()" class="navbar-header page-scroll">
then add this as a function:
function clickMe(){
if(window.innerWidth < 768){
$('.navbar-header').css('background-color', 'red');
}
}
it will work. you can also do an addClass('className'), and specify the class name like so:
.navbar-header.className{
background-color:red;
}

add class after jquery's show and hide animation

How do I slow down the add class event to occur gradually after the hide and show animation in Jquery?
The add class in this instance is read from the CSS file which essentially positions the paragraph. Every occurs sweetly but the add class is too abrupt and fast after the smooth animation.
The js file:
$(".grad").hide().show(3000, function() {
$( this ).addClass("menubar");
});
May be below code useful, without any test I wrote your answer
$(".grad").hide().show(3000, function() {
setTimeout(function(){ $( this ).addClass("menubar"); }, 3000);
});
Nevermind, figured it out myself. switchClass did not accomplish the task that well.
the addClass pointing to class:menubar in css positions the paragraph.
Solution: I renamed grad to menubar in the js file as well as the html file, the same as the class I wanted to introduce after show and hide and shortened everything. In this manner menubar loads gradually from the js as well as from css and animates not only the show and hide but also the css attributes; very cool.
$(".menubar").hide().show(3000);

Changing a transparent images background color after clicking on a seperate div

I am trying to add a background color selection to an E-Card site I am making for an assignment in college.
I have the button and the background set up, but cant seem to get the JS for it to work.
I am a newbie with javascript/jquery, so I'm aware I am probably making a ridiculous mistake, but my code so far is:
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
Where ".pink" is the button you would press to the the background color of an image inside the "card-preview" div.
This way seems relatively simple, but doesn't seem to be working!
Any ideas/suggestions?
The .pink div has a dual class on it, the second class is ".box", which sets the size as there are a few intended color selections available.
The page in question is linked here: http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Rewrite your code to:
$(function() {
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
});
or place on bottom of page, berofe </body>
This makes your code run only after the DOM is loaded.
.card-preview img: you are changing the background colour of the img elements inside the div, not the div itself.
try using .click() it worked fine for me. check my fiddle
edit
noticed your selection divs for colors show class='box pink' i changed my fiddle to match.
edit
for the comment below: fiddle

Categories