The below snippet will load an element on page load using jquery,css, and javascript.
$('.callqueue').click(function(){
$('#dddnav').toggleClass('menu-open');
$('body').toggleClass('menu-open');
});
$(window).load(function (){
$('#dddnav').toggleClass('menu-open');
});
#man {
display:none;
}
#dddnav {
height:30%;
background:#333;
position:fixed;
top:0;
right:-270px;
width:300px;
transition:right .5s;
-webkit-transition:right .5s;
}
#dddnav.menu-open {
right:0;
transition:right .5s;
-webkit-transition:right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="http://placehold.it/200" />
</div>
However, I want the element to load after 3 seconds after the page load, and to unload it after 5 seconds without having to click on the button. How can I get this done using javascript? I found this link: https://css-tricks.com/forums/topic/toggle-classes-with-delays/ but i cant seems to make it work.
Would appreciate any response, example. Thank you!
async and await
To avoid race conditions and ensure that each call to functions go in proper order (although order isn't that important with a method like toggleClass()), use async and await keywords with setTimeout().
Demo
$(window).load(openClose);
$('.callqueue').click(slideNav);
async function openClose() {
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
var open = await slideNav();
await new Promise((resolve, reject) => setTimeout(resolve, 2000));
var close = await slideNav();
};
function slideNav() {
$('#dddnav').toggleClass('menu-open');
}
#man {
display: none;
}
#dddnav {
height: 30%;
background: #333;
position: fixed;
top: 0;
right: -270px;
width: 300px;
transition: right .5s;
-webkit-transition: right .5s;
}
#dddnav.menu-open {
right: 0;
transition: right .5s;
-webkit-transition: right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="https://placehold.it/200" />
</div>
What about doing
$('.callqueue').click(function(){
$('#dddnav').toggleClass('menu-open');
$('body').toggleClass('menu-open');
});
// Let's define a callable to be used inside setTimeout.
toggleIt = function(){
$('#dddnav').toggleClass('menu-open')
};
$(window).load(function(){
setTimeout(
function(){
toggleIt()
setTimeout(toggleIt, 2000) // 5s as 3 + 2
}, 3000
)
})
#man {
display:none;
}
#dddnav {
height:30%;
background:#333;
position:fixed;
top:0;
right:-270px;
width:300px;
transition:right .5s;
-webkit-transition:right .5s;
}
#dddnav.menu-open {
right:0;
transition:right .5s;
-webkit-transition:right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="http://placehold.it/200" />
</div>
Try this:
$(window).load(function (){
var start_time = new Date().getTime();
while (true) {
if(new Date().getTime() - startTime > 3000){
$('#dddnav').toggleClass('menu-open');
break;
}
}
});
Related
so when doing these page transitions I can have one work but when i try to call out two transitions only one works. what am i doing wrong? tried some different stuff I'm stuck.
In my JavaScript I have it called out just to grab all .transitions so I should be able to do -1 or -name after them to call out multipole right? it works fine if I do one page transition per page but once i start adding more then one to one set page html it only animates one.
window.onload = () => {
const transition_el = document.querySelector('.transition');
const anchors = document.querySelectorAll('a');
setTimeout( () => {
transition_el.classList.remove('is-active');
}, 500);
for (let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
anchor.addEventListener('click', e => {
e.preventDefault();
let target = e.target.href;
transition_el.classList.add('is-active');
setTimeout(() => {
window.location.href = target;
}, 500)
});
}
}
/*catching*/
.transition-catching {
content: url(/HP/Catching.svg);
position:absolute;
width: 27%;
margin-top:19.3%;
margin-left:20%;
z-index: 101;
transition: 0.5s ease-out;
}
.transition-catching.is-active {
margin-left: -500px;
}
/*clean*/
.transition-clean {
content: url(/HPA/Clean.svg);
position:absolute;
width: 81%;
margin-top: 20%;
margin-left: -20%;
z-index: 101;
transition: 0.5s ease-out;
}
.transition-clean.is-active {
margin-left: 40px;
}
<body>
<div>
</div>
</body>
<body>
<div>
</div>
</body>
I have a simple script where random keywords appear at a timed interval. What I'd like is for them to stop appearing after one is clicked on.
Here's what I have so far:
function generate() {
$("[id*='keyword']").each(function(){
$(this).removeClass("show");
})
var number= Math.floor(Math.random() * 5) + 1
$("#keyword"+number).addClass("show");
}
$(function(){
setInterval(generate, 4000);
})
$("[id*='keyword']").click(function() {
clearInterval(generate);
});
div[id*='keyword']{
background: #aaa;
position: absolute;
left: -200px;
opacity: 0;
width:200px;
line-height: 60px;
text-align: center;
color: white;
height: 60px;
-webkit-transition: 1s all ease;
transition: 1s all ease;
}
div[id*='keyword'].show{
left: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="keyword1" class="keyword">
<h3>Keyword1</h3>
</div>
<div id="keyword2" class="keyword">
<h3>Keyword2</h3>
</div>
<div id="keyword3" class="keyword">
<h3>Keyword3</h3>
</div>
The random keyword appearing works fine, but the clearInterval function is not. I feel like I'm missing something simple here.
Thanks!
do like that way,
var intervalTime=0;
$(function(){
intervalTime = setInterval(generate, 4000);
})
$("[id*='keyword']").click(function() {
clearInterval(intervalTime);
});
change two lines of your code like the following:
window.intervalID = setInterval(generate, 4000);
and
clearInterval(window.intervalID);
I like to know the cleanest method to distribute elements vertically with jQuery. I nailed it but it's not very clean right >< ? I would like to get to do it without plugin... Thank you in advance ;-)
Here my JSFiddle
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
if(firstElem.length){
var heightCall = (firstElem.offset().top)+(firstElem.outerHeight())+(gap);
var middleElem = $('#dolore');
middleElem.offset({top : heightCall});
var lastElem = $('#amet');
var NewHeightCall = (middleElem.offset().top)+(middleElem.outerHeight())+(gap);
lastElem.offset({top : NewHeightCall});
/* Animation */
$('#lorem, #dolore, #amet').hover(
function(){
$(this).stop().animate({left: (($(this).offset().left)-(20))+'px',opacity:'0.5'},'slow')
},
function(){
$(this).stop().animate({left: (($(this).offset().left)+(20))+'px',opacity:'1'},'slow')
});
}
});
I have fiddled around with your code:
This is a simplified version:
HTML:
<div id="lorem" class="vertical-block">My first ID div</div>
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<div id="amet" class="vertical-block">My third ID div</div>
CSS:
.vertical-block {
position: absolute;
padding:15px;
}
#lorem{
top:20%;
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
Javascript:
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
var top = 0;
$('.vertical-block').each(function(element){
var $currentElement = $(this);
if (top === 0) {
top = $currentElement.offset().top + $currentElement.outerHeight() + gap;
} else {
$currentElement.offset({top: top});
top = top + $currentElement.outerHeight() + gap;
}
});
});
https://jsfiddle.net/rae2x4e0/1/
Now if you want to go for a purely css solution, then:
HTML:
<div class="container">
<div id="lorem" class="vertical-block">My first ID div</div>
<br />
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<br />
<div id="amet" class="vertical-block">My third ID div</div>
</div>
CSS:
.container {
position-relative;
text-align: right;
padding-top: 10%;
}
.vertical-block {
padding:15px;
display: inline-block;
margin-top: 20px;
}
#lorem{
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
https://jsfiddle.net/ycdwpjxw/1/
So I have a plus/minus divs, which, when the buttons are clicked, will either add or subtract a value. My issue is that when I place two of these on a page, they conflict with each other.
How can I adjust these so that they won't conflict?
You can see the working code here: http://codepen.io/maudulus/pen/yjnHv
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$('#middle').val(eval(inputVal) +1)
}
}
function subtractInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(-1)
} else {
$('#middle').val(eval(inputVal) -1)
}
}
You are using #middle as an ID in two places, the IDs need to be unique (I updated the IDs to something unique, they are arbitrary). So, jQuery finds the first ID it sees and updates it, that is why the top one gets updated when you click the bottom one. A simple fix is to use $(thisDiv).parent().children('input') when you want to update the value. That way you ensure you find the proper input to update.
Here is a working codepen that I forked of your original.
Also, you should not be using eval. There are better ways to convert a string into an int. Here is a good explanation as to why eval is a bad idea.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle1" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle2" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$(thisDiv).parent().children('input').val(eval(inputVal) +1) // change it here
}
}
To extend tokyovariable's answer
The easiest way to find the input element would be:
$(thisDiv).closest('.doors').find(':input');
and forget about eval. You can use $.isNumeric to check if it's a number.
This is a simplified version:
$(function(){
$('.left').on('click',function() {
calculateValue(this, -1, -1);
});
$('.right').on('click',function() {
calculateValue(this, +1, 1);
});
});
function getInput(thisDiv)
{
return ($(thisDiv).closest('.doors').find(':input'));
}
function calculateValue(thisDiv, op, defaultValue)
{
var elem = getInput(thisDiv);
var value = elem.val();
elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}
$(function(){
$('.left').on('click',function() {
calculateValue(this, -1, -1);
});
$('.right').on('click',function() {
calculateValue(this, +1, 1);
});
});
function getInput(thisDiv)
{
return ($(thisDiv).closest('.doors').find(':input'));
}
function calculateValue(thisDiv, op, defaultValue)
{
var elem = getInput(thisDiv);
var value = elem.val();
elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}
.miniDoor {
font-style: bold;
height:30px;
width:30px;
background:#333;
padding:10px;
font-size:20px;
text-align:center;
color:#fff;
line-height:1.5em;
/* transition: all .3s ease-in-out;*/
transition:all .3s;
transition-timing-function: cubic-bezier(0,0,0,1);
transform-style: preserve-3d;
float:left;
}
.miniDoor.right {
-webkit-transition: background .7s;
-moz-transition: background .7s;
transition: background .7s;
}
.miniDoor.right:hover {
background: #6B6A6A;
background: rgba(107, 106, 106, 0.8);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.miniDoor.left {
-webkit-transition: background .7s;
-moz-transition: background .7s;
transition: background .7s;
}
.miniDoor.left:hover {
background: #6B6A6A;
background: rgba(107, 106, 106, 0.8);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
#middle1, #middle2{
border:0;
height:50px;
width:75px;
background:#333;
padding:10px;
font-size:20px;
text-align:center;
color:#fff;
line-height:1.5em;
/* transition: all .3s ease-in-out;*/
transition:all .3s;
transition-timing-function: cubic-bezier(0,0,0,1);
transform-style: preserve-3d;
float:left;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle1" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle2" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
I want to clone the first-child button from #navCotainer and insert it after the last button.
Now the Problem is: The script kind of inserts the first child 3 times. what do I have to do to get ir right? And also, what am I doing wrong?
of course a link to the fiddle http://jsfiddle.net/ygjDR/ and the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span class="moveNav8 left8">left</span>
<div id="navContainer" style="width: 100%; overflow-y: auto;">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
<script type="text/javascript">
$(document).on('click','.moveNav8', function() {
if($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000, function() {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
});
}
});
</script>
<style type="text/css">
.button {
position: relative; float: left;
width:100px;
height:50px;
background-color:green;
margin-right:10px;
}
.moveNav8 {
position:absolute;
top:100px;
left:0px;
background-color:red;
width:40px;
height:40px;
}
.moveNav8.right8 {
left:100px;
}
</style>
Try this:
http://jsfiddle.net/gtttG/
You need to add a check for $(".button:animated").length === 0.
Animation callback is invoked for every item, appending a button 4 times. Instead execute callback only once after the last animation using deferred pattern:
$(document).on('click', '.moveNav8', function () {
if ($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000).promise().done(function () {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
})
}
});
http://jsfiddle.net/ygjDR/3/