I have created an email subscription popup modal. Right now I have the modal set to fade in but instead of that I want the modal to slide up from bottom of the page to the top. I tried slideUp() instead of fadeIn() but it does not work. I feel like I am missing something. Do I need to create another function for the slideUp()? It is a popup modal so it is ready when the window scrolls instead of on a click event. Any help is appreciated. Thank you. My code is below.
$(document).scroll(function() {
if (!$("#mc_embed_signup").data("userClosed")) {
$(".popup-close").click(function(e) {
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 400) {
$("#mc_embed_signup").slideUp(600);
}
}
});
function closeSPopup(e) {
e.preventDefault();
$("#mc_embed_signup").data("userClosed", true);
$("#mc_embed_signup").hide();
}
jQuery .slideUp() hides the matched elements with a sliding motion. If you want to slide your popup up, you could use .animate()
$("#popup").show().animate({top: (window.innerHeight / 2 - 50) + "px"}, 1000);
#popup {
display: none;
width: 200px;
height: 100px;
position: fixed;
top: 100%;
left: calc(50% - 100px);
background-color:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup"><div>
.slideDown() should be used, but!.. instead of using top: NN in CSS use the bottom: NN. This way the element "anchors" to it's bottom property, and the .slideDown() will perform from bottom to top!
var $popup = $("#popup");
$popup.slideDown();
#popup {
position: absolute;
transform: translate(-50%, 0);
bottom: 24px; /* don't use top. Use bottom */
left:50%;
width: 300px;
height: 160px;
background:red;
display: none;
}
<div id="popup">Popup ou yeah</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I have a website with side-bar menu. Menu is by default visible. If i click close-btn. Menu is hidden. That works
I would like make menu by default visible for desktops and by default hidden for mobiles.
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 250px;
height: 100vh;
position: fixed;
top: 0;
z-index: 50;
left: 0px;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
.side-bar.non-active {
left: -250px;
}
.side-bar.active {
left: 0px;
}
The window.innerWidth < 850 works but i'm not sure if there is something better. 850px i use for #media queries.
$(document).ready(function () {
//jquery for toggle sub menus
$(".sub-btn").click(function () {
$(this).next(".sub-menu").slideToggle();
$(this).find(".dropdown").toggleClass("rotate");
});
//jquery for expand and collapse the sidebar
if (window.innerWidth > 850) {
$(".close-btn").click(function () {
$(".side-bar").addClass("non-active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("non-active");
$(".menu-btn").css("visibility", "hidden");
});
}
else {
$(".side-bar").css("left", -250);
$(".close-btn").click(function () {
$(".side-bar").addClass("active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("active");
$(".menu-btn").css("visibility", "hidden");
});
}
});
The issue is propably in $(".side-bar").css("left", -250); because in the DOM i can see it as inline style and after click nothing happen. Only .menu-btn disappers.
Is there another way how to set "reverse" logic for mobiles please? Or maybe just easy fix this i hope little bug?
I tried set oposite style for left: -250px; to left:0; via following logic but without any positiv result..
Use this instead:
if (window.matchMedia('(max-width: 850)').matches) { ... }
else { ... }
This uses css media query in JavaScript without any frameworks.
I have hamburger menu that comes in with an animation. When I click again on hamburger menu (after I have already escaped from the menu), the menu appears without animation.
I assume it is caused by .animate - I need to make .toggle
$(document).ready(function() {
$("#openMenu").click(function() {
$("#main").toggle(200);
$("#menuSection").toggle(200);
$(".menu").animate({ left: "2%" });
});
});
CSS:
.menu {
height: 100px;
width: 0px;
background-color: #450a5a;
display: flex;
position: absolute;
left: -50%;
cursor: pointer;
pointer-events: none;
transition: all 0.5s;
}
I assume that you click again on the #openMenu element to trigger menu closing animation when it's opened. Calling .animate that you have in your code again, after .menu element's style it already set to left: 2%; will not change anything. You have to implement code that will trigger either "out" animation or "in" animation depending on whether or not the menu is opened.
$(document).ready(function() {
$("#openMenu").click(function() {
$("#main").toggle(200);
$("#menuSection").toggle(200);
var menu = $(".menu");
if (menu.css("left") == "2%") { //if the "in" animation was already performed
menu.animate({ left: "0%" }); //revert back to normal
} else {
menu.animate({ left: "2%" }); //perform "in" animation
}
});
});
I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
Trying to get this sidebar to be scrollable. Right now you can navigate through it by clicking items within in (using jQuery to animate the margin upon clicking an item), but I'd like to add scrolling functionality as well.
I tried overflow: scroll without success. Any help?
https://codepen.io/Finches/pen/xpXZVW
$('.track-name').click(function() {
//Remove active class from all other track names
$('.track-name').not(this).removeClass('active');
//Add active class on clicked track name
$(this).addClass('active');
var id = $(this).attr("data-id");
var scrollAmount = id * -50;
console.log(scrollAmount);
$('.track-name-inner').animate({ marginTop: scrollAmount }, 300);
});
Not sure why they disappear when I click them but that's OK.
You needed to set an explicit height on the container in order for overflow:scroll to work.
Working codepen:
https://codepen.io/anon/pen/ZvXpva
.track-name-wrapper {
position: absolute;
left: 35px;
top: 50%;
width: 300px;
display: inline-block;
height: 300px;
overflow-y: scroll;
top: 150px;
}
This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much
you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}
As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>