How to make jquery toggle width animation stop midway to close again? - javascript

Maybe the question is confusing but let me give you an example, when I spam click the button that toggles the width, the div with keep on animating way after the button press and it doesn't look amazing. What I want is for the div to stop midway and go the other way and not complete its existing animation when the button is pressed again.
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
Here is the fiddle, so you can see what exactly what I'm talking about. Try spamming the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
Help would be greatly appreciated, I have looked everywhere and I can't seem to find anything on my problem.

You can use .stop() method. Try this
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").stop().animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>

You can check if element is not animated before do animation
https://api.jquery.com/is/
https://api.jquery.com/animated-selector/
$(document).ready(function(){
$('.menuToggle').click(function(){
if( $('.menuContainer').is(':animated') ) { return false; }
$(".menuContainer").animate({width: 'toggle'});
});
});
.menuContainer{
height: 100vh;
width: 15vw;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>

Related

Toggle Class when click on element itself and remove when click outside

I have a list of dom element:
When I click on the element, it will toggle open and close.
When I click on the child of the open one, it will not close the parent.
When I click on another one, it will open the one which is clicked and close the others.
When I click outside the element that has been opened, it will close then open.
-> The problem is I can't archive the first one. Does somebody know what I'm doing wrong here?
$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).addClass("active");
});
$(document).mouseup(function(n) {
var t = [];
t.push($(".front"));
$.each(t, function(t, i) {
$(i).is(n.target) || $(i).has(n.target).length !== 0 || $(i).removeClass("active")
})
});
.front {
position: relative;
background-color: red;
width: 100px;
height: 100px;
margin: 20px;
}
.front .back {
position: absolute;
top: 50%;
left: 150px;
display: none;
background-color: green;
width: 50px;
height: 50px;
}
.front.active .back {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="front">
<div class="back"></div>
</div>
<div class="front">
<div class="back"></div>
</div>
<div class="front">
<div class="back"></div>
</div>
just add toggle class after your first line:
$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).toggleClass("active");
});

[JS move element in middle of screen

I'm beginner in JS and I need to help someone to do one task but I'm stuck.
She need to move element from bottom outside of the screen to the middle of the screen at the display of the page.
She try this but nothing happened:
$(document).ready(function(){
var myimg = $( this ).find(" div ");
//Just trying to move div but nothing
myimg.animate({transform: 'translateY(150px)'}, 800, 'ease')
})
#first {
margin-top: 150px;
margin-left: 170px;
display: block;
float: left;
}
#middle {
margin-top: 150px;
margin-left: 100px;
display: block;
float: left;
}
#last {
background-color:#F16668;
margin-top:150px;
margin-left:100px;
display:block;
width:300px;
height:100px;
float:left;
}
<div id="first">
lama
</div>
<div id="middle">
lama
</div>
<div id="last">
lama
</div>
Can you help me please ?
Thank you a lot !
I hope this helps you understand how to animate with CSS classes and transitions.
setTimeout(function () {
$("#middle").addClass('goUp');
}, 1000); // move up after 1 second
$("#middle").click(function () {
$(this).toggleClass('goUp');
}); // move on click
div {
border: 1px solid red;
position: relative;
transition: all 0.5s;
}
#middle {
display: block;
top: 100px;
}
#middle.goUp {
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="middle">Click to move</div>

Use draggable jQuery method and hide the scrollbar on a div?

I did a div with a big width (i.e.3000px) and I hide it with a parent div with overflow:scroll, beacuse with a overflow:hidden I can't scroll to right/left.
So the best answer need to do a div that I can scroll to left/right (preferably with a draggable method) not having the scrollbar.
My code below:
HTML
<div class="contents-home-container">
<div class="contents-home-container-inner">
<div class="contents-home">
<!-- X7 <contents-home divs> -->
</div>
</div>
</div>
CSS
.content-home-conteiner {
overflow: hidden;
cursor: -webkit-grab;
padding-left: 15px;
width: 100%;
margin-top: 20px;
height: 75vh;
}
.contents-home-container-inner {
width: 2600px;
margin-left: 250px;
display: block;
height: 100%;
}
.contents-home {
float: left;
margin-right: 15px;
margin-left: 15px;
width: 13%;
height: 100%;
}
jQuery
I tried with the .draggable method but the console output an error that display ".draggable is not a function" (something like this, but I copy/paste the basically function from the jQuery documentation..). I'm using WordPress.
.draggable is not a function
means the draggable js is not called before the code.
include jquery and jqueryUI in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

How to do page load in jQuery?

I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>

Banner ad with 'slidedown' function working in my jsfiddle but not real environment

I am currently working with a banner ad and the jquery slidedown function.
My desired goal is to simply have the banner slide down after several seconds and cover up the header of my page, until the user either completes the form (or clicks the "x", which I haven't placed yet.
I got it working just fine within the jsfiddle environment, but for the life of me, I can't figure out why it will not "slide down" in my live environment.
Here is my jsfiddle: http://jsfiddle.net/tXumG/13/.
Here is the banner on my live page: http://online.saintleo.edu/the-saint-leo-experience/faculty-spotlights.aspx
Any help would be GREATLY appreciated. Thank you very much.
HTML:
<div class="hidden">
<body>
<div id="blog-subscribe-outer-container">
<div id="blog-subscribe-overlay">
<div id="blog-subscribe-left"><img src="http://online.saintleo.edu/media/150491/blog-logo-
icon.png" /></div>
<div id="blog-subscribe-center"><span style="color: #FF0000; font-family: arial; font-size:
35px">Subscribe Now!</span></div>
<div id="blog-subscribe-right">
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: '206683',
formId: '3c8d4d75-6e0e-4d1a-a39d-c2728223e2d9'
});
</script>
</div>
</div>
<div id="blog-subscribe-base">
</div>
</div>
</body>
</div>
----------------------------
JS:
jQuery(function($) {
$('.hidden').delay(4000).slideDown("slow");
});
-----------------------------
CSS:
.hidden {
display: none
}
#blog-subscribe-outer-container {
width: 100%;
position: relative;
}
#blog-subscribe-overlay {
background-color: orange;
position: fixed;
text-align: center;
width: 100%;
z-index: 1;
}
#blog-subscribe-base {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #275d39;
}
#blog-subscribe-left {
float:left;
}
#blog-subscribe-center {
display: inline-block;
margin:0 auto;
padding-top: 45px;
}
#blog-subscribe-right {
float:right;
width: 33%;
padding-top: 10px;
}
#blog-subscribe-inner-container {
width:100%;
text-align:center;
}
I suggest to use Css Transitions
And Then use jquery to add the class to element:
$(document).ready(function() {
$('.blog-subscribe-hidden').addClass('animated');
});
Working Fiddle: http://jsfiddle.net/tXumG/14/

Categories