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);
}
Related
I have this small code which changes div after every 20 seconds. it works if I saved that in a small HTML file. it works if I save the live HTML code and run but it does not fire in the live site.
you can see that every 20 seconds the bar is getting changed but in my live site, it is not changing. live site is here.
https://pushdaddy2.myshopify.com/products/uhjkjhkhk
but if I save the live site code in desktop and launch that code in chrome it works.
https://jsfiddle.net/anamika99/vhmo7ex4/
jQuery(document).ready(function($) {
var allBoxes = $("div#qab_container").children("div");
transitionBox(null, allBoxes.first());
// console.log(allBoxes);
$("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({
"height": $("#qab_background").innerHeight()
});
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest("#qab_container").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function() {
setTimeout(function() {
transitionBox(to, nextTo);
var karreff = 787786766;
console.log(karreff);
}, 3000); // 20000 on site
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shopify-section-header" class="shopify-section">
<div id="qab_container" style="display: block; color: inherit; height: 44px;">
<div id="qab_background" onclick="qab_button_on_click(event)" style="opacity: 1; margin: 0px; padding: 0px; left: 0px; height: auto; width: 100%; z-index: 99998; position: fixed; cursor: pointer; background-image: url("https://way2enjoy.com/shopify/1/announcementbar/js/img/bar_background/20170926_cart.png"); top: 0px;">
<div id="qab_bar" style="text-align: center; margin: 0px; padding: 12px 10px; left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; background-color: rgba(5, 175, 242, 0); color: rgb(242, 242, 242); font-size: 16px; line-height: 20px; font-family: Helvetica;">
<div id="qab_content" style="text-align:center; display: inline-block;"><span id="qab_message" style="color:inherit;">All t-shirts are 15% off </span> </div>
</div>
</div>
<div id="qab_background1" onclick="qab_button_on_click1(event)" style="opacity: 0; margin: 0; padding: 0; left: 0; height: auto; width: 100%; z-index: 1000000; position: relative; cursor: pointer;">
<div id="qab_bar1" style="text-align: center; margin: 0; padding: 10px; left: 0; height: auto; width: 100%; box-sizing: border-box; border: none;">
<div id="qab_content1" style="text-align:center; display: inline-block;">
<span id="qab_message1" style="color:inherit;">fghghghh hghghhfhhf fhfgf</span>
</div>
</div>
</div>
</div>
</div>
solved this by triggering the function only when all data are loaded.
we have set the settimeout for allBoxes
earlier what was happening that our javascript code was taking some time to insert in html and before that full code was executing and that time in real there was no data we needed so we set the settimeout of 10 second and then everything was working because in this 10 second everything was in loaded in DOM and we were ready with full data.
here is full code which is working flawlessly
jQuery(document).ready(function($) {
setTimeout(function () {
var allBoxes = $("div#qab_container").children("div");
transitionBox(null, allBoxes.first());
console.log(allBoxes);
}, 10000);
$("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({"height": $("#qab_background").innerHeight()});
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest("#qab_container").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function () {
setTimeout(function () {
transitionBox(to, nextTo);
var karreff=787786766;
console.log(karreff);
}, 20000);
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
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();
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');
});
});
}
My website has a news section in the format of squares that animate alot like the Metro UI. The square animates once every 5-10 seconds (random) and swaps between the text and picture.
FIDDLE
I now want the animation to immediately switch to the text-stage when the user mouse-overs, and remain there until mouse-out. When the user mouse-outs the animation can either resume with any delay that's left from before the mouse-in, or instantly switch to the picture-stage. I prefer the first, but any solution works.
I tried doing something with .hover but I'm not sure how to best pause/resume animations. Cheers.
HTML
<div class="news-container">
<div>
<div class="news-window">
<div class="date"><span>05</span><div>Sep</div></div>
<div class="news-tile" id="1">
<div class="news-pic" style="background-image:url('https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');"></div>
<div class="news-title"><div>News Title</div></div>
</div>
</div>
<div class="news-window">
<div class="date"><span>28</span><div>Aug</div></div>
<div class="news-tile" id="2">
<div class="news-pic" style="background-image:url('https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg');"></div>
<div class="news-title"><div>News Title</div></div>
</div>
</div>
<div class="news-window">
<div class="date"><span>17</span><div>Aug</div></div>
<div class="news-tile" id="3">
<div class="news-pic" style="background-image:url('https://www.petfinder.com/wp-content/uploads/2012/11/99233806-bringing-home-new-cat-632x475.jpg');"></div>
<div class="news-title"><div>News Title</div></div>
</div>
</div>
</div>
</div>
CSS
.news-container {
text-align: center;
display: inline-block;
vertical-align: top;
}
.news-window {
display: inline-block;
overflow: hidden;
background: #EFEFEF;
width: 230px;
height: 200px;
margin: 0 15px;
cursor: pointer;
}
.news-tile {
width: 230px;
height: 400px;
position: relative;
top: 0px;
}
.news-pic {
width: 100%;
height: 200px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.news-title {
width: 100%;
height: 200px;
background: #5D697B;
color: orange;
font-size: 18px;
display: table;
}
.news-title div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.news-window .date {
width: 50px;
height: 56px;
background: orange;
position: absolute;
z-index: 100;
opacity: 0.5;
line-height: 1.25;
font-size: 14px;
}
.news-window .date span {
font-size: 28px;
}
JS
$(document).ready(function(){
move(1);
move(2);
move(3);
});
function random(){
return ((Math.random() * 5000) + 5000);
}
function move(i) {
$("#" + i + ".news-tile").delay(random()).animate({top: "-200px"}, 600, 'easeOutCirc');
$("#" + i + ".news-tile").delay(random()).animate({top: "0"}, 600, 'easeOutCirc');
window.setTimeout(function() {move(i) }, 500);
}
EDIT: Fiddle had a problem. Fixed now.
Instead of .delay() use setTimeout, which is more appropriate in case of cancelling the animation on hover().
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Reference
Also, it would be more convenient to use classes instead of id attributes in your situation.
I'd make it this way (updated):
$('.news-window').each(function(i, el){
el.timer = setTimeout(function(){moveUp.call(el)}, random());
}).hover(function(){moveUp.call(this, true)}, moveDown);
function random(){
return ((Math.random() * 5000) + 5000);
}
function moveUp(x){
var that = this;
$('.slide', that).stop().animate({top:"-200px"}, 600, 'swing');
clearTimeout(that.timer);
that.timer = x || setTimeout(function(){moveDown.call(that)}, random());
}
function moveDown(){
var that = this;
$('.slide', that).stop().animate({top:"0"}, 600, 'swing');
clearTimeout(that.timer);
that.timer = setTimeout(function(){moveUp.call(that)}, random());
}
NOTE, I added slide class to each of the news-tile elements (as you have more sections with news-tile class).
JSFiddle
I have this code:
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background: red
}
.menu2 {
display: none;
}
<div id="main">
<div class="menu1">COntent 1</div>
<div class="menu2">Content 2</div>
</div>
How to: When I'm scroll down div .menu2 display sticky in top as css
.menu2 {
height: 30px; background: blue; position: fixed
}
My code: http://jsfiddle.net/rh1aLnxs/
Thanks
this can be accomplished with css's position:fixed, as long as you don't need additional behavior regarding the parent div (position:fixed is ignorant to the parent in css)
here's an example:
.menu1 {position:fixed; height: 30px; background: red; max-width: 500px; width:100%}
http://jsfiddle.net/rh1aLnxs/
If you need for example, for menu1 to go away when the user scrolls below main, then you need to use jquery's scroll event and handle the positioning manually (http://api.jquery.com/scroll/)
try this:
var headerTop = $('.menu1').offset().top;
// var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerTop) { // Check to see if we have scrolled more than headerBottom
if (($(".menu2").is(":visible") === false)) {
$('.menu1').hide();
$('.menu2').fadeIn('slow');
}
} else {
if ($(".menu2").is(":visible")) {
$('.menu2').hide();
$('.menu1').fadeIn('slow');
}
}
});
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background-color: red
}
.menu2 {
background-color: blue;
max-width: 500px;
width: 100%;
top: 0;
display: none;
/*display: none*/
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="menu1">Content1</div>
<div class="menu2">Content2</div>
</div>
Here are some improvements on your fiddle along with a simplified version of the script to add/remove a fixed class on scroll.
http://jsfiddle.net/rh1aLnxs/2/
jQuery(window).bind("scroll", function() {
if (jQuery(this).scrollTop() > 100) {
jQuery(".menu1").removeClass("no-fixed").addClass("fixed");
} else {
jQuery(".menu1").removeClass("fixed").addClass("no-fixed");
}
});
#main {max-width: 500px; height: 900px; margin: auto; background: green}
.menu1 {height: 30px; background: red}
.menu2 {display: none}
#main {
width:100%;
position:relative;
}
.no-fixed {
position: relative;
}
.fixed {
position: fixed;
width:100%;
max-width: 500px;
}
<div id="main">
<div class="menu1"></div>
<div class="menu2"></div>
</div>