Hoping to have two buttons, one to "Pause" one to "Play" the MP3 audio file. Buttons show but do not pause/play the audio, Aswell as the audio does not play whatsoever. Here's my code I'm using. Thanks.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
</body>
</html>
JavaScript
var x = document.getElementById("song");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
You have to load your js file after loading the document.
You should put the script at the end of the HTML file. You use var x = document.getElementById("song"); to get the DOM element but the element is not loaded yet as your script is on the top of the page so you can change the code this way:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
<!-- the DOM will be available here -->
<script src="script.js"></script>
</body>
</html>
It's a good practice to load JS file at the end of the file that makes the user see HTML faster.
If for any reason you cant load the js file at the end of the page you can change your JS file this way:
function playAudio() {
const x = document.getElementById("song");
x.play();
}
function pauseAudio() {
const x = document.getElementById("song");
x.pause();
}
have you tried using javascript for audio?
such as
var myAudio = new Audio(myAudioLink)
then doing
function playMyAudio() {
myAudio.play()
}
function pauseMyAudio() {
myAudio.pause()
}
i am glad to help.
Related
can you tell me how to fix it on this code exactly? here I have two internal codes and two external (to youtube)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LS_model</title>
<link href="ls.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Image1" style="position:absolute;left:62px;top:291px;width:876px;height:524px;z-index:0;">
<img src="images/Background.png" id="Image1" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:75px;top:31px;width:840px;height:260px;z-index:1;">
<img src="images/ads.gif" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:126px;top:343px;width:140px;height:57px;z-index:2;">
<img src="images/videoss-b.gif" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:723px;top:344px;width:140px;height:56px;z-index:3;">
<img src="images/Photos-b.gif" id="Image4" alt=""></div>
</div>
</body>
</html>
Try this
Use window.open to open two pages and remove return false from your code.
<img src="images/Photos-b.gif" id="Image4" alt="">
For opening in a new tab, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY', '_blank');
And for opening internal, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY');
I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.
I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Products
<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
<script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<center>
<div class="carousel-container"></div>
<div id="carousel">
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg">
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
</div>
</center>
I found there are multiple jQuery references in view.
<script src='../../Scripts/jquery-1.5.1.min.js'></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
Remove multiple jQuery references from the view.
Only one is enough.
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
I have been hacking away at this app for awhile now in xcode. I have built several html pages and integrated the inAppBrowser so url's open in the devices default browser. This works perfect on all my other pages but when I try to do the same thing with this particular page, the url never opens? I feel like this is a javascript error but my JS knowledge is very minimum at best.
How can I get the url to open on this particular page with inAppBrowser like it does on the other ones? Nothing is different except this page has its own JS for playing media.
Any help would be greatly appreciated. Thx
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- <link rel="stylesheet" href="css/index.css"> -->
<title>My App</title>
<style>
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
</head>
<body>
<script type="text/javascript" src="cordova.ios.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
<script type="text/javascript">
function playbeachcam(){
document.getElementById('bankschanneldiv').style.display= "none";
document.getElementById('beachcamdiv').style.display= "block";
document.getElementById('looperscamdiv').style.display= "none";
// window.plugins.videoPlayer.play("http://.../playlist.m3u8");
}
function playloopercam(){
document.getElementById('bankschanneldiv').style.display= "none";
document.getElementById('beachcamdiv').style.display= "none";
document.getElementById('looperscamdiv').style.display= "block";
// window.plugins.videoPlayer.play("http://.../playlist.m3u8");
}
function playbankcam(){
document.getElementById('bankschanneldiv').style.display= "block";
document.getElementById('beachcamdiv').style.display= "none";
document.getElementById('looperscamdiv').style.display= "none";
//window.plugins.videoPlayer.play("http://.../playlist.m3u8");
}
function openHome() {
var ref = window.open('http://www.google.com/', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });
}
</script>
<div class="header-container" data-role="header">
<div style=" text-align:left;margin-left:15px;">
<a href="index.html" style="text-decoration:none;"><img style="width: 59px; height: 50px" src="img/wbl-logo.png" />
<span style="width:auto;position:absolute;bottom:25%;margin-left:10px;font-size:22px;color:#07a54a;">My App</span></a>
</div> <!-- end logo -->
<div style="text-align:right;width:auto;position:absolute;right:5%;top:30%;">
<a class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-c" data-inline="true" data-transition="slide" data-role="button" href="#menu" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text" style="color:#0267a6;">MENU</span>
</span>
</a>
</div><!-- end menu -->
</div><!-- end header -->
<div class="content-container" data-role="content">
<div id="wrapper" style="bottom:5px;">
<div id="main-content">
<button id="BeachCam" onClick="playbeachcam();" >
Play Beach Cam
</button>
<br/>
<button id="LooperStar" onClick="playloopercam();">
Play Looper Cam
</button>
<br/>
<button id="BanksChannel" onClick="playbankcam();">
Play Banks Cam
</button>
<div id = "bankschanneldiv" style="display:none;">
<video
id="mediaplayer1"
controls="1"
autoplay="1"
height="218"
preload="none"
src="http://.../playlist.m3u8"
width="100%">
</video>
</div>
<div id = "beachcamdiv" style="display:none;">
<video
id="mediaplayer2"
controls="1"
autoplay="1"
height="218"
preload="none"
src="http://.../playlist.m3u8"
width="100%">
</video>
</div>
<div id = "looperscamdiv" style="display:none;">
<video
id="mediaplayer3"
controls="1"
autoplay="1"
height="218"
preload="none"
src="http://.../playlist.m3u8"
width="100%">
</video>
</div>
<p style="color:#f4f4f4;">Having Trouble?</p>
<p><a style="color:#07a54a;text-shadow:1px 1px 1px #333;" href="#" onclick='openHome()' target="_blank" >View the cams on our website</a></p>
</div>
</div>
</div>
<div class="footer ui-bar-a" data-role="footer" role="contentinfo">
<div style="text-align:center;width:auto;margin:10px 0;">
My Footer
</div> <!-- end footer content -->
</div><!-- end footer -->
</body>
</html>
After further troubleshooting I found out that this is the problem:
<script type="text/javascript" src="cordova.ios.js"></script>
So now I have found a work around and all is resolved.
I have set up photoswipe for mobile device, it's working fine apart from the photos keep Flicker when swipe on the phone, but its working fine on computer. any idea how to fix please? cheers
the example will be:
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test/title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe)
{
$(document).ready(function()
{
$("#gallery a").photoSwipe(
{
enableMouseWheel: false,
enableKeyboard: false
});
$("#gallery a:first").click();
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
<script type="text/javascript">
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">Apartment Specialists</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Feature Apartments</li>
<ul data-role="listview" data-filter="false" id="test-more">
<div id="gallery" >
<a href="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=350x262&s=732bf1b52c70b0fc" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=120x90&s=e4501ebdfd60d8db" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=350x262&s=293a3a114859a240" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=120x90&s=c599ece1364cfafe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=350x262&s=da0802cfe1060df4" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=120x90&s=f4b0ffaea30f6a2b" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=350x262&s=a54d15c8570f1d2b" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=120x90&s=767b0330b9cf2f1e" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=350x262&s=9e2db11b4d87f798" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=120x90&s=e9f8871520333fbe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=350x262&s=2cd999589c41d34d" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=120x90&s=1af459b7ecc85dbe" alt="" /></a>
</div>
<br />
<p align="center">
<font face="Arial, Helvetica, sans-serif">Back</font></p>
</ul>
<br />
<li>All Apartments</li>
</ul>
<div data-role="footer" align="center">
<h6 style="font-size: 55%;font-family:calibri">
RE/MAX Leaders Real Estate (1987) Ltd Licensed Under REAA 2008</h6>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
I just sort it. use code.photoswipe-3.0.5.min.js rather the version of 3.0.4. thanks