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);
Related
I'm using wow.js and animate.css for my homepage.
I read a topic from MDBootstrap and others discussions in which people say that it is bad for SEO.
So I checked in the brwoser and saw that everything with the wow class is in "visibiliy : hidden".
When I use the hack:
jQuery(document).ready(function () {
var scrolled = false;
jQuery(window).on('scroll', function() {
if (!scrolled) {
scrolled = true;
new WOW().init();
}
});
});
The visibility proprety disappear until I scroll.. Everything is working, I guess it's better for the google crawls ??
But the problem is that every wow class on the first screen, for example navigation items, site title, are not working because now I have to scroll to make animations work.
How can I make them work again ?? i tried my own jquery animation (fadeIn etc) but it produces some bugs on the page..
Does someone know how what is the logic to make all wow class work?
MDb contains two animation classes. In my case it was ok to use the same scrolling solution as the wow effects below the first screen and set the animated class to the elements at the top of the page. But this will only work if you know the elements on the viewport after loading the page, otherwise I think you can only handle it your self.
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.
I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..
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.
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