How to start sound using picture in javascript - javascript

Hi I'm currently stuck on a problem
I have a picture where i want it to animate as well as start a sound clip. So far, the picture gets animated, but the music won't start.
This is my javascript:
$(document).ready(function() {
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
function play_single_sound() {
document.getElementById('audiotag1').play();
};
});
});
});
This is my index.html where info about my audio ID is:
<audio id="audiotag1" src="tailtoddle_lo.mp3" preload="auto"></audio>

Assuming your jQuery is set up correctly, you likely want the following
remove the nested document.ready
actually call the function inside the click
Like this
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
$('#audiotag1').play();
$(this).animate({
height: '150px',
width: '150px'
});
});
});
or this
function play_single_sound() {
document.getElementById('audiotag1').play();
}
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
play_single_sound();
$(this).animate({
height: '150px',
width: '150px'
});
});
});

You need to call the function play_single_sound in img click handler as of now you are only defining the function. Also you only need to use one document-ready handler.
play_single_sound();
Complete Code
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
//Call the function here
play_single_sound();
});
//Define it outside the click handler
function play_single_sound() {
document.getElementById('audiotag1').play();
}
});

Related

Prevent stack animation

I'm a javascript/jquery rookie, but I try to put in place a an interactive page containing multiple divs. These Divs enlight when we pass the mouse over and turn back to normal when mouse leaves the div. The div enlarges when clicked, and a "back" button" must turn back the div to "normal" state. My problem is the behavior of the div when click the back button, and it starts to get back to normal but enlarges again afterward. I know I could resolve the problem by moving the "button" out of the div, but is there any other solution ?
Also, how to "stop" the opacity change when enlarging the DIV ? Tried the stop() function in various scenarios but without success so far...
Thanks for the help.
Here is the HTML code :
<div id='container'>
<div id='back_button'>BACK</div>
</div>
And here is for the jQuery
$(document).ready(function () {
$('#container').hover(function () {
$(this).fadeTo('fast', 1);
}, function () {
$(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$(this).stop( true, true ).parent().animate({
width: "200px",
height: "100px"
});
});
});
I also created an example on jsfiddle
Stop the click on the back button from propagating up to the parent, and you can use a class to disable the hover events when the element is enlarged.
$(document).ready(function () {
$('#container').hover(function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
}, function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).animate({
width: "600px",
height: "600px",
opacity: 1
}).addClass('large');
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "200px",
height: "100px"
}).removeClass('large');
});
});
FIDDLE
please use this updated code
$(document).ready(function () {
$('#container').hover(function () {
$(this).stop().fadeTo('fast', 1);
}, function () {
$(this).stop().fadeTo('fast', 0.8);
}).click(function (e) {
if(e.target.id=="back_button" || $(this).width()>200){
return;
}
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$('#container').animate({
width: "200px",
height: "100px",
});
});
});

jquery .animate callback executing automatically

$(function(){
$("#obj").click(function(){
$("#theimage").animate({height: '334px', width: '500px'},function(){
$("#obj").click(function(){
$("#theimage").animate({height: '150px', width: '250px' })
});
});
});
});
the first animate makes the image 500x334 and the callback is supposed to execute once you click the image again which will make it small, however the callback is executing automatically (i think this is supposed to happen) but I was wondering if there was a way to stop it from executing and then when you click the image it will then animate again? When i added a .stop it worked once and then after that it kept executing twice?
The problem is you are registering a click handler within another one, so when the second click happens your first and second will get triggered
$(function () {
var flag = false;
$("#obj").click(function () {
if (flag) {
$("#theimage").stop(true, true).animate({
height: '150px',
width: '250px'
})
} else {
$("#theimage").stop(true, true).animate({
height: '334px',
width: '500px'
});
}
flag = !flag;
});
});
Actually callbacks are made for executing a set of code after an animation or a particular job completed. So whenever the first animation got executed completely, obviously the call back part should get executed. Try like this,
$(function(){
$("#obj").click(function(){
if (parseInt($("#theimage").width()) === 500)
{
$("#theimage").stop().animate({height: '150px', width: '250px' })
}
else
{
$("#theimage").stop().animate({height: '334px', width: '500px'});
}
});
});
LIVE - DEMO

how to animate height of a div back-jquery

I'm trying to show some part of a div and animate it to 100% when the div is clicked.
and I want to animate it back to the initial height of the div if it's clicked again.
this is what i have so far,but it doesn't work. can anyone help?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>
click() doesn't accept two function arguments, previously there was a toggle() function that performed how you need it but it has now been deprecated and removed from jQuery.
Since your use case is pretty simple, I believe something like this would be enough:
$("#mydiv").click(function () {
var $this = $(this);
$this.animate({
height: $this.height() == 150 ? '100%' : 150
}, 300);
});
Demo fiddle
This should do the job for you.
jQuery:
$(document).ready(function() {
$("#mydiv").toggle(
function() {
$(this).animate({height: '100%'}, 300);
};
function() {
$(this).animate({height: 150}, 300);
});
});

How to get `morpha.start()` after 2sec `mouseenter`?

Mootools: How to get morpha.start() after 2sec mouseenter?
window.addEvent('domready',function() {
var morph = new Fx.Morph('resize',{duration:700,delay:400});
$$('#resize').addEvent('mouseenter',function(e){
e.stop();
morpha.start({
width: '200px',
height: '100px'
});
}//It does not work on adding ',2000' here
);
<div id="resize" class="resize">DIV will get bigger after 2sec on mouseenter</div>
use delay.
http://www.jsfiddle.net/dimitar/m6JKt/ example
document.id('resize').set("morph", {duration:700,delay:400}).addEvents({
mouseenter: function(){
this.store("timer", (function() {
this.morph({
width: '200px',
height: '100px'
});
}).delay(2000, this));
},
mouseleave: function() {
$clear(this.retrieve("timer"));
}
});
this has also been refactored to use element.morph which does the class instance for you - and it will cancel the transition if you mouseout within the 2 seconds starting period grace.

toggling jquery animation getting error

Im trying to have a layer animate/expand hight on click of a "show" button, and then, within the layer, have a button to hide it back to 0.
$(".showcart").click(
function(){ $("#cart").animate({ height: "400px" }); $(".showcart").toggle();});
$(".hidecart").click(function(){
$("#cart").animate({height: "0px"});
});
});
Not sure where the problem is, any ideas?
Try wrapping your code inside the DOM ready event...
$(function() {
$(".showcart").click(function(){
$("#cart").animate({ height: "400px" });
$(".showcart").toggle();
});
$(".hidecart").click(function(){
$("#cart").animate({height: "0px"});
});
});
$(".showcart").click(function(){
$("#cart").animate({ height: "400px" });
$(".showcart").toggle();});
$(".hidecart").click(function(){
$("#cart").animate({height: "0px"});
});
});

Categories

Resources