Hello and thanks for reading my question. I'll warn you, it will probably seem dull to most of you, but I just can't get it working.
It's about a chrome extension I'm trying to write for my audio stream. Here's what I'm trying to do:
A small icon, that when is clicked once starts playing music, and when is clicked again stops, and so on...
Here's what I've tried:
<!doctype html>
<html>
<head>
</head>
<body>
<script src="popup.js"></script>
<div id="music"></div>
</body>
</html>
and popup.js
var well=0
//Executed when the extension's icon is clicked
chrome.browserAction.onClicked.addListener(function(tab)
{
if(well>0)
{
var well=0;
document.getElementById('music').innerHTML= '<iframe src="#" width="100" height="100"></iframe>';
}
else
{
var well=1;
document.getElementById('music').innerHTML= '<iframe src="http://electro.piratefm.ro/popup.html" width="100" height="100"></iframe>';
}
});
What's happening is that when the extension is loaded, no music plays. When you click it, it starts playing and everything's fine. When you click it again, it stops for a couple of seconds then starts playing again. I need it to stop until you click it again.
Thanks for reading and sorry if it's already been asked or if it's dull.
I fixed it, my js skills are horrible so it was a dumb mistake, this is the fixed version:
var well=0
//Executed when the extension's icon is clicked
chrome.browserAction.onClicked.addListener(function(tab)
{
if(well==1)
{
well=0;
document.getElementById('music').innerHTML= '<iframe src="#" width="100" height="100"></iframe>';
}
else
{
well=1;
document.getElementById('music').innerHTML= '<iframe src="http://electro.piratefm.ro/popup.html" width="100" height="100"></iframe>';
}
});
Related
<script src="js/jquery-2.1.1.js"></script>
<script src="notify/js/notify.js"></script>
<script src="notify/js/notify-bootstrap.js"></script>
<form>
<div id="userInfoDiv" name="userInfoDiv" style="padding-top:100px;padding-left:100px;">
<span class="box pos-demo">Notifyjs position div</span>
</div>
</form>
<script type="text/javascript">
$(".pos-demo").notify(
"Welcome Guest",
{ position:"right" }
);
$.notify("This notofication is working ","success");
</script>
Note : The notification is not displayed.Where as $,notify("") without position is working fine.
I have the same problem. Though I cannot confirm this the cause I think its because at the time of the notification, the elements do not actually exist in the DOM (the web page), so there is nothing for the element to tie to. It fails silently, I used the Google developer tools and could see no error being generated.
My solution. If you create a function and call in body.onload the element appears. e.g
<body onload="notifyme();">
And then somewhere in the page (at the bottom perhaps)
<script>
function notifyme() {
var s = "Hello";
$("#myelem").notify(s);
}
</script>
I know this works a I have just tried it. Works every time, every page.
I'm trying to get a Chrome extension to pop up a "popup" or a "panel" in the front of the currently focused window. It seems like the focused boolean for chrome.windows.create isn't working.
It always opens behind the current window, no matter what I've tried.
// popup.html
<html>
<head>
</head>
<body>
</body>
<script src="loader.js"></script>
</html>
// loader.js
function load() {
var popupId;
chrome.windows.create({
type: 'popup',
url: 'http://xxx/bookmarks',
height: 500,
width: 800,
focused: true
}, function(popup) {
popupId = popup.id;
});
chrome.windows.update(popupId, {focused: true});
}
document.getElementsByTagName('body')[0].onload = function() { load(); };
Any ideas would be appreciated. Thanks!
Since you don't really need the popup page, I would suggest you remove it and instead move your code to open a new window in the javascript file for your background page. You can act on a click on your extension icon by using:
chrome.browserAction.onClicked.addListener(function callback)
and supplying your logic in a callback.
I created a web application where it needs to popup images and videos from Fancy boxes called rippolls. Here my "Rippolls" are load in popup boxes and users can vote for those rippolls.
My question is, in one page I listed all rippolls and when I click on a rippoll with an image or video it is loaded withour fancy box and fancy box css.
I have referenced
<script src="../../Content/Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="../../Content/Styles/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
in a _layout.cshtml where is referenced to the _RippollList.chtml page.
Code in the _RippollList.chtml is :
$("a.btnVotePop#(poll.Id)").fancybox({
'onComplete' : function() {
alert('hello');
try {
FB.XFBML.parse();
twttr.widgets.load();
history.pushState({}, "#poll.Name.Trim()", "/polls/#poll.Id");
document.getElementsByTagName("title")[0].innerHTML = "#poll.Name.Trim()";
//history.replaceState({}, "title", "#poll.Name.Trim()");
//$("#rippoll_image_path").attr("content", $("#polltitle").val());
}
catch (ex) {
alert('Error parsing response.');
}
},
'onClosed' : function(){
alert("closed");
try {
history.pushState({}, "Rippoll", "/home/mypage");
document.getElementsByTagName("title")[0].innerHTML = "My Page";
$('#divDetailCont').css('display', 'none');
}
catch (ex) {
}
},
ajax : {
type : "GET"
},
'width': '560px'
});
Html :
<div id="videoDeftImgContainer" class="videoDefultImg">
<a class="btnVotePop#(poll.Id)" href="RippollCardPopup/#(poll.Id)">
<img class="inImgSize" src="#poll.ImagePath" />
</a>
<div id="plyBtnClk" class="playBtn" onclick="">
<a class="btnVotePop#(poll.Id)" href="RippollCardPopup/#(poll.Id)">
<img src="../../Content/images/newImages/hoverPlay.png" />
</a></div></div>
script references:
<script src="../../Content/Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="../../Content/Styles/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
but still I m getting a page without fancybox and its styles.
I am in a doubt of because I am putting some text values to rippoll( ex: rippoll name, rippoll question etc..) and it may having some special characters(#%$#{}) also, and is it the reason for not open rippolls in the fancy box.
Help me out for this. please post if any code segments where you successed.
I have developed a chrome extension which is supposed to have a scroll bar if the content in the popup is more than the specified height to the body of popup .
I am adding the contents of my popup.html
<!DOCTYPE html>
<head>
<title>Compare Hatke</title>
<script type='text/javascript' src='popup.js'>
</script>
<style>
body {
min-width:357px;
min-height: 500px;
overflow-x:hidden;
overflow-y:auto;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
</head>
<body>
Extension developed by Prashant Singh
</body>
</html>
Also the JS which is injecting data to the popup file
var len = currentArray.length;
var string = "";
for(i=0;i<len;i++){
if(tab.id==currentArray[i].tabID){
string += "<img src='" + currentArray[i].image + "' height='20px' max-width='100px'> " + currentArray[i].prod +"<br>";
}
}
document.write(string);
What could be the possible issue ? I am not getting scroll bar even if the data to be shown is much much greater that can be shown in one view.
Any explanation would be appreciated. Thanks !
Added a div in the popup.html page
<body>
<div id='showData'>
Extension developed by Prashant Singh
</div>
</body>
And replaced document.write by document.getElementById('showData').innerHTML and it worked in a flash. Any explanation. Why previous one was not working ?
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>