Here's a simple animation i'm trying to make. The divs array carries the id of different divs. The loop function simply loops through the array and shows the divs and hides them making it like a slideshow. For some reason, both divs show at the same time and then hide at the same time. I just couldn't figure out why...please help out! Thanks!
Edit:I think the javascript loop isn't waiting for the JQuery animation to finish. I think ill have to use the setInterval function? Can someone tell me how I can use it here?
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var divs=["#slide1","#slide2"];
function loop(){
for (var i=0;i<divs.length;i++)
{
$(divs[i]).show(1000).hide(1000);
}
}
$(document).ready(function(){
//$("#slide1").show();
loop();
});
</script>
</head>
<body>
<div id="slide1" style="display:none">ONE</div>
<div id="slide2" style="display:none">TWO</div>
</body>
</html>
How about this:
jsFiddle example
var divs = ["#slide1", "#slide2"];
function loop() {
var elem = divs.shift();
$(elem).show(1000).hide(1000, function () {
divs.push(elem);
loop();
});
}
$(document).ready(function () {
//$("#slide1").show();
loop();
});
Related
Coding noob here. I am trying to use two separate audio files on two separate images, so that when I click on picture A, sound 1 plays, and when I click on picture B, sound 2 plays. The problem is, when I click on picture A or B, sound 2 will always play.
I know this is an 'id' issue, but I cannot figure it at all since I'm brand new to coding. I also have some repeating scripts.
It is a "create.js/sound.js" script. I like the way the audio functions with create.js. Here is the code I am working with:
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
var soundID = "fuzz";
function loadSound () {
createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/82751__sikoses__stm1-some-bass-7.mp3?v=1621410085", soundID);
}
function playSound () {
createjs.Sound.play(soundID);
}
</script>
<body onload="loadSound();">
<img onclick="playSound();" class="playSound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/spiral222.png?v=1621455564" width="220" height="220">
</body>
<script>
var soundID = "thud";
function loadSound () {
createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/79150__blipdrums__sheenery2-bd.wav?v=1621409163", soundID);
}
function playSound () {
createjs.Sound.play(soundID);
}
</script>
<body onload="loadSound();">
<img onclick="playSound();" class="playSound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/FACE.png?v=1621462776" width="220" height="220">
</body>
I've tried messing around with the soundID variable but to no avail. The other things I have tried were just guesses which also failed.
Any bit of help would be really appreciated.
You are overwriting the first instances of loudSound() and playSound() in the second script. If you change the name to loudSound2() and playSound2(), that should fix it.
I.e.
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
var sound1ID = "fuzz";
function loadSound1 () {
createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/82751__sikoses__stm1-some-bass-7.mp3?v=1621410085", sound1ID);
}
function playSound1 () {
createjs.Sound.play(sound1ID);
}
</script>
<body onload="loadSound1();">
<img onclick="playSound1();" class="play-sound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/spiral222.png?v=1621455564" width="220" height="220">
</body>
<script>
var sound2ID = "thud";
function loadSound2 () {
createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/79150__blipdrums__sheenery2-bd.wav?v=1621409163", sound2ID);
}
function playSound2 () {
createjs.Sound.play(sound2ID);
}
</script>
<body onload="loadSound2();">
<img onclick="playSound2();" class="play-sound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/FACE.png?v=1621462776" width="220" height="220">
</body>
Also, it's usually best to use kebab-case for CSS classes as CSS is case insensitive.
I got a stuck in this piece of code
The full code
<html>
<head>
<script>
function hide(kaka){
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
}
function remove(kaka){
var temp=document.getElementById(kaka).display;
temp=(temp=='block')?'none':'block';
}
</script>
</head>
<body>
<IFRAME id="kaka" SRC="ads.php" WIDTH=10000 HEIGHT=10000></IFRAME>
<script>
</body>
I'm trying to make the iframe to hide after someone's click
visibility and display are just text strings, so setting them to a variable, and then changing the variable, won't change the element.
function toggle(kaka) {
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
document.getElementById(kaka).visibility=temp;
}
I'm just now giving my first steps on jQuery animate(). I'm trying to make a presentation type thing just to practice, but I can't seem to be able to change the text of my div in the middle of the animation using the animate() function.
Here's my current code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
//can I change the text with animation???
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id='text' style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Is there a practical way I can change the text while the opacity is turned off, so when the animation returns the text is changed?
You can use the queue function to queue up the change.
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
div.queue(function() {
div.html('New text');
div.dequeue(); // This is necessary to continue the animation
});
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
You can define an animation-listener and change your text within the listener:
$('div').animate(
{ opacity: 0 }, // and all the other properties you want to animate
{ duration: 50,
step: function(left){
// change text here after a particular progress
}
});
This is not available in jQuery, but you can use the jQuery plugin typed.js, here is an example:
div.typed({ strings: ["HELLO", "It's me..."], typeSpeed: 0 });
I´m trying to loop this animation but I don´t know why it does not work ?
I have 4 divs with differences images and I want to loop this to replay again and again.
$(document).ready(function () {
setInterval("comeon()", 2000);
});
function comeon() {
var current = $(".current");
var next = current.next();
if (next.length == 0) {
next = $(".current:first");
}
current.removeClass('current').addClass('previous');
next.css("opacity", "0.0").addClass("current").animate({
opacity: 1.0
}, 500, function () {
current.removeClass("previous");
comeon();
});
What I have done wrong ?
**UPDATE**
<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>
</div><!-- End slider-->
Please have a look at http://jsfiddle.net/7kt9z/6/
next = $("cur:first");
This is attempting to select an element like <cur>. Oops!
You want:
next = $(".current:first");
or
next = cur.first();
Edit
I finally understand what you need:
next = current.siblings().first();
setInterval needs to be used in a certain way.
You need to assign setInterval to a variable, and this assignment should be attached to an event.
var setIt;
$(window).load(function() {
setIt = setInterval(comeOn, 1000);
});
Since you're using images, you can wait for all the images to load and then starting your slider (that's using the load event to assign setInterval to the variable setIt).
Also, do not wrap your function in qoutes in setInterval. Instead of:
setInterval("comeOn()", 1000)
Do this:
setInterval(comeOn, 1000)
I've got a working example here:
http://codepen.io/anon/pen/rHzpL
I have two Javascript scripts on a site. One is an accordion (show/hide) and the other is a basic script to show/hide based on a hyperlink click. Both scripts work fine independently, but once together on the same page the accordion one stops working: the click to display the items in the accordion stops working. Here's the code:
<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>
<script>
$(function(){
$(".para").click(function(){
$("#fillit").html($(this).next(".details1").html());
});
$(".details1:first").clone().appendTo("#fillit").show();
});
</script>
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
content of script.js
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/2)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
I don't think these scripts actually conflict. You are loading the accordion code after you try to use it. Perhaps reorder your script tags.
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
should go before the use of TINY.accordion which it defines:
var parentAccordion=new TINY.accordion.slider("parentAccordion");
I don't know enough about the meaning of the string arguments in the call to init, but perhaps you could change the script element that creates the accordion and initializes it to happen on document load, for example by delaying it using jQuery's $.ready or by moving it after any elements whose ids appear in those string arguments.
Also the accordion code is unintentionally using a global s. And short names like s can easily collide which is a maintenance hazard even if not the cause of your immediate problem.
var a=T$(t), i=s=0, ...
is not declaring s locally. Perhaps edit it to say
var a=T$(t), s, i=s=0, ...
<script language="javascript">
jQuery.noConflict();
var b=jQuery.noConflict() || $.noConflict;
b(document).ready(function(){
b(".btn-slide").click(function(){
b("#panel").slideToggle("slow");
b(this).toggleClass("active"); return false;
});
});
</script>
Then instead of $ use b to access jQuery.