I'm trying to use jquery to animate a series of words I'm trying to just get one word to roll down into view then stay for a half second and then disappear out of view by rolling down (like a lotto machine).
The overflow for the div is hidden so the words are out of view at top: -20 and at top: 20 but in view around top 5 or top 0. But each time the setInterval runs it displays the .rw-word at a different location, also the timing seems to be off....
Here's what I have so far:
html :
<div id="login-modal" class="modal">
<section class='rw-wrapper'>
<h3 class='rw-sentance'>LOG IN TO START
<div class="rw-words">
<span class="rw-word">COLLECTING</span>
</div>
</h3>
</section>
css:
.rw-wrapper {
width: 80%;
position: relative;
padding: 10px;
}
.rw-sentance {
overflow: hidden;
height: 21px;
}
.rw-sentance span {
white-space: nowrap;
}
.rw-words {
display: inline;
text-indent: 10px;
font-family: 'Permanent Marker', cursive;
position: relative;
}
.rw-words span {
opacity: 1;
max-width: 40%;
color: #F58835;
font-size: 25px;
letter-spacing: 2px;
position: absolute;
top: -25px;
}
javascript:
$(document).on('click', '#account-login', function (){
wordScroll();
});
setInterval(wordScroll, 2000);
function wordScroll() {
$('.rw-word').delay(200).animate({ top: '0'}, 100,function(){
$('.rw-word').delay(4000).animate({ top: '25'}, 100,function(){
$('.rw-word').css('top','-20px');
});
});
}
Fiddle
I think you should place setInterval(wordScroll, 2000); withing the click event.
$(document).on('click', '#account-login', function (){
//wordScroll();
setInterval(wordScroll, 2000);
});
function wordScroll() {
$('.rw-word').delay(200).animate({ top: '0'}, 100,function(){
$('.rw-word').delay(4000).animate({ top: '25'}, 100,function(){
$('.rw-word').css('top','-20px');
});
});
}
Related
For example:
Click a button - 1 div flys off the page the other div flys on the page.
Click the button again - Same div flys off, other div returns.
I'm brand new to Javascript/JQuery so any help would be great! Thanks.
$(document).ready(function() {
$(".bookBox-1").click(function() {
$(".main-title").slideUp("slow");
});
$(".bookBox-1").click(function() {
$(".bookDescriptions-kinkyKenny").slideDown();
});
});
.bookDescriptions-kinkyKenny,
.bookDescriptions-eatWhatYoureGiven {
position: absolute;
width: 1778px;
height: 423px;
top: 144px;
left: 0;
display: none;
}
.bookDescription-1,
.bookDescription-2 {
position: relative;
height: inherit;
width: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.main-title {
font: 100 125px 'Josefin Sans', sans-serif;
position: relative;
left: 151px;
}
function myfunc1() {
$(".main-title").slideUp("slow");
$(".bookDescriptions-kinkyKenny").slideDown();
$(".bookBox-1").unbind("click", myfunc1);
$(".bookBox-1").click(myfunc2);
}
function myfunc2() {
$(".bookDescriptions-kinkyKenny").slideUp("slow");
$(".main-title").slideDown();
$(".bookBox-1").unbind("click", myfunc2);
$(".bookBox-1").click(myfunc1);
}
$(document).ready(function() {
$(".bookBox-1").click(myfunc1);
});
I am having difficulty to put the scroll bar in a vertical position instead of horizontal. Also, I want to slide images with up
and down arrow key of the keyboard. Please help me I have an
assignment due. I'll appreciate your help.
For more information please check my code into jsfiddle https://jsfiddle.net/mgj7hb0k/
The code below is from HTML file
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">74°</span></div>
<div class="slide" id="slide-1"><span class="temp">64°</span></div>
<div class="slide" id="slide-2"><span class="temp">82°</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
</nav>
</div>
CSS file. I have added some styles into separate css file.The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.
#import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 300px;
height: 500px;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
width: 300%;
}
.slide {
float: left;
width: 300px;
height: 500px;
position: relative;
background-position: -100px 0;
}
.temp {
position: absolute;
color: white;
font-size: 100px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:
Js file
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
Why is it that if I give a variable a "0", then in the html the number is "10"? I'm using jQuery and JavaScript both, but as you can see the number in the middle is "10" after I reload the page. It's always "10" and not changing.
I'm trying so that that purple square goes in circles 10 times and I want the middle number to change every round up by one. How can I achieve that?
let calc = 0;
for (let i = 0; i < 11; i++) {
$('#animate').click(function() {
$(this).animate({
top: '350px'
});
$(this).animate({
left: '350px'
});
$(this).animate({
top: '0px'
});
$(this).animate({
left: '0px'
});
});
document.getElementById("szam").innerHTML = calc;
calc++;
}
#container {
height: 400px;
width: 400px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 100px;
left: 170px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>Hello</p>
</div>
<h1 id="szam">0</h1>
</div>
Here's a screenshot:
The loop runs relatively quickly, but the animations are queued by default. This means that the code iterates i from 0 to 10 and queues each animation, but displays 10 almost immediately because the loop happens so fast. On the other hand, each animation waits for the previous animation to finish before it starts. So the animation takes much more time to complete than the loop itself.
To demonstrate with the code below, notice that the "Loop is done" message seems to appear as soon as the trigger is clicked.
One solution is to use the complete callback of jQuery's animate to advance the counter when each cycle is complete.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
.animate( properties [, duration ] [, easing ] [, complete ] )
var calc = 0;
var elm = document.getElementById("szam");
function advance() {
calc++;
elm.innerHTML = calc;
}
$('#animate').click(function() {
for (var i = 1; i <= 10; i++) {
$(this).animate({
top: '150px'
}).animate({
left: '150px'
}).animate({
top: '0'
}).animate({
left: '0'
}, advance);
}
console.log('Loop is done.');
});
#container {
height: 200px;
width: 200px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
cursor: pointer;
color: white;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 15px;
left: 85px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>CLICK</p>
</div>
<h1 id="szam">0</h1>
</div>
Does anyone know how I would use jQuery to subtract 1 from a current css value of several divs with the same class on a click? I have 5 divs with the same class, each have their own z-index setting. I want to subtract 1 from their current value when I click on one div. My goal is to bring one div forward on click setting z-index to 100. I then want to subtract 1 from the others' current value (whatever that is) on that same click to send them back.
$('.classname').mousedown(function() {
$(this).css("z-index", "100");
$(this).siblings().css("z-index", - 1);
});
});
This code just sets all the siblings z-index to -1.
Thanks for any help. I'm also open to suggestions on a better way to do this.
You can give the css() method a function to perform some logic on the current value. Try this:
$('.classname').mousedown(function() {
$(this)
.css("z-index", "100")
.siblings().css("z-index", function(i, val) {
return parseInt(val, 10) - 1;
});
});
So basically, you want to do this?
var divs = document.getElementsByClassName('classname');
function setZIndex(div) {
div.style.zIndex = window.getComputedStyle(div).zIndex - 1;
}
function handler(e) {
[].forEach.call(divs, setZIndex);
e.target.style.zIndex = 100;
}
[].forEach.call(divs, function(div) {
div.addEventListener('click', handler, false);
});
.classname {
width: 20px;
height: 20px;
border-style: solid;
border-width: 1px;
}
#one {
position: absolute;
top: 0px;
left: 0px;
background-color: red;
z-index: -1;
}
#two {
position: absolute;
top: 15px;
left: 10px;
background-color: blue;
z-index: -1;
}
#three {
position: absolute;
top: 30px;
left: 20px;
background-color: yellow;
z-index: -1;
}
#four {
position: absolute;
top: 45px;
left: 30px;
background-color: green;
z-index: -1;
}
#five {
position: absolute;
top: 60px;
left: 40px;
background-color: white;
z-index: -1;
}
<div id="one" class="classname"></div>
<div id="two" class="classname"></div>
<div id="three" class="classname"></div>
<div id="four" class="classname"></div>
<div id="five" class="classname"></div>
I'd like to continuously show and hide two page elements in turn.
This is the code:
$(document).ready(function() {
var continuous = function () {
setTimeout(function() { $("#Mass_alert").css('display','block'); $("#Devotion_alert").css('display','none'); },1500);
setTimeout(function() { $("#Mass_alert").css('display','none'); $("#Devotion_alert").css('display','block'); },1500);
};
setInterval(continuous,500);
});
This is the HTML:
<div id="Mass_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">Mass alert</div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">devotion alert</div>
I get the right effect once. What should I change in the code above to have the continuous effect. I don't want to use fadeToggle, because, I actually need the display:none setting. If I don't then there is space left for the hidden element that interferes with the placement of the other element.
try:
setInterval(function () {
$('#Mass_alert, #Devotion_alert').toggle();
}, 1500);
with:
<div id="Mass_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">Mass alert</div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px; display: none;">devotion alert</div>
demo: http://jsfiddle.net/qxMdA/1/
Try just toggling back and forth.
var a = false;
$(document).ready(toggle);
function toggle() {
if (a) {
$("#Mass_alert").css('display','block'); $("#Devotion_alert").css('display','none');
}
else
{
$("#Mass_alert").css('display','none'); $("#Devotion_alert").css('display','block');
}
a = !a;
setTimeout(toggle, 1500);
}