Hello everyone ,
http://saptshati-rudra-sadhana.com/[
^
In above link there is an audio in every division,My problem is that when the page flip i.e, when it visible , the audio should be play and by clicking next or previous button it should be pause and another video get started.I tried it a lot but can't do :( can u please help me out ?
here is the html code :
<!DOCTYPE html>
<html lang="en" class="no-js demo-2">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rudhyadhayi Sadhyay</title>
<meta name="description" content="Bookblock: A Content Flip Plugin - Demo 2" />
<meta name="keywords" content="javascript, jquery, plugin, css3, flip, page, 3d, booklet, book,
perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
<!--
<link rel="stylesheet" type="text/css" href="css/demo2.css" />
<link rel="stylesheet" type="text/css" href="css/calendar.css" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('.bb-item').style.display = 'block') {
$('audio').each(function() {
$(this).play();
});
} else {
$('audio').each(function() {
$(this).pause();
});
}
});
</script>
<script>
function doStuff()
{
var nameElement = document.getElementById("someInput");
var theName = nameElement.value;
<!-- document.getElementById("someDiv").innerHTML = theName; -->
window.location.href="#"+theName;
}
</script>
</head>
<body>
<div class="container">
<!--
<header style="display:inline;">
<img src="images/1.png" alt="sadhana" style="position: relative;
left: 261px;
top: 31px"/>
<nav class="codrops-demos" style="font-size: 1.2em;<br mode=" hold=" />position: relative;<br mode=">
<a class="current-demo" href="index.html">Home</a> |
<a href="aboutus.html">About Us</a> |
<a href="contactus.html">Contact Us</a>
</nav>
</header>
<div class="main clearfix">
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item" id="1">
<img src="img/b1.jpg" alt="1">
<br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="2">
<img src="img/b2.jpg">
<br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="3">
<img src="img/b3.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="4">
<img src="img/b4.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="5">
<img src="img/b5.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="6">
<img src="img/b6.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="7">
<img src="img/b7.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
<div class="bb-item" id="8">
<img src="img/b8.jpg"> <br /> <br />
<audio src="img/004_Joduniya Kar Charni_128kbps.mp3" controls="">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</div>
</div>
<a id="bb-nav-prev">
href="#" style="removed: absolute;
removed -79px;
removed 251px;" ><img src="images/pb.png"></a>
<a id="bb-nav-next" style="removed: absolute;<br mode=" hold=" />top: 251px;<br mode=">
<img src="images/nb.png"></a>
<div style="margin-removed 50px;<br mode=" hold=" />">
<span>Enter Page No.</span> <input id="someInput" type="text" size="3">
<input type="button" value="Say Hello" önClick="doStuff()" style="background: url(images/go.png);
height: 51px;
width: 70px;
border: none;
font-size: x-small;
color: rgb(255, 255, 255);
font-size: 1px">
<br /><br /> </div>
</div>
</div>
</div><!--
<script src="js/jquery.min.js" ></script>
<script src="js/jquery.bookblock.js"></script>
<script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' )
},
init = function() {
config.$bookBlock.bookblock( {
orientation : 'horizontal',
speed : 700
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.up:
config.$bookBlock.bookblock( 'prev' );
e.preventDefault();
break;
case arrow.down:
config.$bookBlock.bookblock( 'next' );
e.preventDefault();
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>
</body>
</html>
and here is the jquery :
http://saptshati-rudra-sadhana.com/js/modernizr.custom.js
Submit an article or tip