This is my first post to the forum.
I am setting up an English/Thai language course website which will contain many audio files of English and Thai speech. I did a single webpage proof of concept using a mouseover/button javascript function
http://www.javascriptkit.com/script/script2/soundlink.shtml
With some mods and some inline js, this worked OK.
$(document).ready(function() {
var html5_audiotypes = {
"mp3": "audio/mpeg",
"ogg": "audio/ogg",
};
function createsoundbite(sound) {
"use strict";
var html5audio = document.createElement('audio');
if (html5audio.canPlayType){
for(var i=0; i<arguments.length; i++) {
var sourceEl = document.createElement('source');
sourceEl.setAttribute('src', arguments[i]);
if (arguments[i].match(/\.(\w+)$/i))
sourceEl.setAttribute('type', html5_audiotypes[RegExp.$1]);
html5audio.appendChild(sourceEl);
}
html5audio.load();
html5audio.playclip = function() {
html5audio.pause();
html5audio.currentTime=0;
html5audio.play();
}
return html5audio;
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}};
}
}
var cn402=createsoundbite("audio/cn402.ogg", "audio/cn402.mp3");
var ry402=createsoundbite("audio/ry402.ogg", "audio/ry402.mp3");
var cn403=createsoundbite("audio/cn403.ogg", "audio/cn403.mp3");
var ry403=createsoundbite("audio/ry403.ogg", "audio/ry403.mp3");
var cn404=createsoundbite("audio/cn404.ogg", "audio/cn404.mp3");
var ry404=createsoundbite("audio/ry404.ogg", "audio/ry404.mp3");
});
The javascript code is called by a line of html code like this:
Please don't swim by yourself</span>
I want to incorporate this function and its associated variables into jquery. so that all js code is removed from the html. The first step, just getting the jquery code to work has proved a bit problematic for me. I've tried just including the js audio code in a document ready function. as shown above but this doesn't work. Any help would be much appreciated.
I'm not sure if I get you right, but you can remove the javascript code from the given link very easily:
$('.rollover').click(function(){
ry402.playclip();
});
Let's have a look at: http://api.jquery.com/click/
Related
I'm new to javascript & i want to do this simple thing.
I want to make a script which goes to coded url's & clicks on a button each time the script is executed.
Suppose,i have these links -
I want the javascript to to go on these links after running it & trigger another small js for both links after they are fully loaded.
Here's what i tried
var linkArray = ('https://facebook.com/user1','https://facebook.com/user2');
for (var i = 0; i < linkArray.length; i++) { window.open({
url: linkArray[i]
});
}
linkArray.onload="blabla();"
function blabla()
{
var inputs = document.getElementsByClassName('_42ft _4jy0 _63_s _4jy4 _517h _51sy');for(var i=1; i<inputs.length;i++) {inputs[i].click();}
}
Can anyone please help?
Thanks in advance! :-)
Please change to this, this would works
var linkarray = ('https://facebook.com/user1', 'https://facebook.com/user2');
var linkArray = [https://facebook.com/user1,https://facebook.com/user2];
isn't valid, please set your array like this:
var linkArray = ['https://facebook.com/user1', 'https://facebook.com/user2'];
what I need
I need to hide js code in view source
js code
function unloadJS(scriptName) {
var head = document.getElementsByTagName('head').item(0);
var js = document.getElementById(scriptName);
js.parentNode.removeChild(js);
}
function unloadAllJS() {
var jsArray = new Array();
jsArray = document.getElementsByTagName('script');
for (i = 0; i < jsArray.length; i++){
if (jsArray[i].id){
unloadJS(jsArray[i].id)
}else{
jsArray[i].parentNode.removeChild(jsArray[i]);
}
}
}
var page_count = {{count()}};
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-android'});
}
$(document).ready(function()
{
var page_count = {{count()}};
var height= $(window).height();
if (page_count == 4 )
{
$.ajax({
type: "GET",
url: "http://times.com/mobilepopuptracker?from=android",
});
$('body').html('<div class="row flush aligncenter popbx" style="height:'+height+'px"><div class="12u">');
}
else
{
}
});
function redirect()
{
var a=$(location).attr('href');
window.location.href=a;
}
</script>
Problem
I Need to hide js code in view source.
Debug
i have reffred the link find solution on http://www.sitepoint.com/hide-jquery-source-code/.
though code is still viewed.
any suggestion are most welcome.
though we know we cannot stop viewing of js in view source but still there must be some trick.
Use the online Google Closure Compiler service, it will make your code almost unreadable by doing things like renaming variables and function names. For example:
Raw JS
function toggleDisplay(el){
if (!el) return;
el.style.display = (el.style.display==='none') ? 'block' : 'none';
}
Closure Compiled
function toggleDisplay(a){a&&(a.style.display="none"===a.style.display?"block":"none")};
JavaScript Beautified
function toggleDisplay(a){
a&&(a.style.display="none"===a.style.display?"block":"none")
};
In doing so it also reduces the size of your script, helping to boost the loading time of your webpage.
You can still read the script, but its harder to understand and can get really complex when using things like JavaScript Closures.
You can't truly hide your js code. You can obfuscate it (i.e. make it difficult to read), but unlike PHP or Perl - which is processed on the server side - JS runs in the client's browser itself. Therefore, the client always has a copy of it, and can view that source at any time.
I'm trying to learn the timbre.js javascript library. On the project page there is a functional preview of using the keyboard input to change oscillator pitch but once the code is copied to a new HTML document on my computer it no longer works. Simpler code snippets from the project page work fine once copied over though.
The project page is here: http://mohayonao.github.io/timbre.js/PragmaSynth.html
This is the code:
<script src="timbre.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>
It seems for T('keyboard') and T('ndict.key') you need to include an extra script called keyboard.js which can be found here. http://mohayonao.github.io/timbre.js/src/extras/keyboard.js
So your code will look something like this..
<script src="timbre.js"></script>
<script src="keyboard.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>
Hi All i'm developping a game when i run it on chrome it works but when i try it on the emulator i'm getting an error in my javascript code that i can't understand the source or the cause
here's the error:
05-13 11:53:11.726: E/Web Console(790): ReferenceError: Can't find variable: $ at file:///android_asset/www/js/html5games.matchgame6.js:5
the error is in line 5: here's my javascript file content:
var matchingGame = {};
***var uiPlay1 = $("#gamePlay1");*** //////line 5
var uiPlay2 = $("#gamePlay2");
var uiIntro = $("#popup");
var uiExit = $("#gameExit");
var uiNextLevel = $("#gameNextLevel");
var uigameQuit =$("#gameQuit");
var uiPlay3 = $("#gamePlay3");
matchingGame.savingObject = {};
matchingGame.savingObject.deck = [];
matchingGame.savingObject.removedCards = [];
// store the counting elapsed time.
matchingGame.savingObject.currentElapsedTime = 0;
//store the last-elapsed-time
//matchingGame.savingObject.LastElapsedTime = 0;//now
// store the player name
matchingGame.savingObject.palyerName=$("#player-name").html();
matchingGame.savingObject.currentLevel="game6.html";
// all possible values for each card in deck
matchingGame.deck = [
'cardAK', 'cardAK',
'cardAQ', 'cardAQ',
'cardAJ', 'cardAJ',
];
$( function(){init();} );
//initialise game
function init() {
$("#game").addClass("hide");
$("#cards").addClass("hide");
uiPlay1.click(function(e) {
e.preventDefault();
$("#popup").addClass("hide");
startNewGame();
});
uiPlay2.click(function(e) {
e.preventDefault();
$("#popup").addClass("hide");
var savedObject = savedSavingObject();
// location.href =savedObject.currentLevel ;
if (savedObject.currentLevel=="game6.html")
rejouer();
else
location.href =savedObject.currentLevel ;
//ResumeLastGame();
//alert ("level :"+savedObject.currentLevel );
});
uiExit.click(function(e) {e.preventDefault();
//alert("u clicked me ");
}
);
uiPlay3.click(function(e) {
e.preventDefault();
$("#popupHelp").fadeIn(500, function() {
$(this).delay(10000).fadeOut(500)}); });
}
Any idea please thank u in advance
You probably didn't include jQuery.
Presumably you haven't defined the $ function anywhere.
Perhaps you a working from documentation that assumes you have loaded Prototype.js, Mootools, jQuery or one of the many other libraries that set up a variable of that (very poor) name.
make sure you have loaded jquery, mootools, other javascript libraries etc before you use the $.
Have you included your library at the end of your document and you have your script written before the library is downloaded.
make sure you have a script tag that refers to your library and then have your script content.
Also one more thing to note is that your document may not have been loaded when your scriot is executed and some of the controls might not exist on the page, thus make sure you wrap them in an API that will run the function once the document is loaded completely. In jquery you use $(document).ready(function(){});
I am developing a JS app in Ejecta. jQuery was included but the DOM ready doesn't work with Ejecta. Instead on site/app initialization I do something like this:
function func() {
init();
animate();
}
setTimeout(func, 1000);
This gives jQuery time to be loaded and parsed.
I'm using the following script for onmouseover sound effects on menu buttons on a site.
<script LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "s.mp3";
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
This works fine in IE but not Firefox.
Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using flash?
Thanks
The only way for sound on your website is to use either flash or whatever Facebook uses for incoming IM, but that too requires Apple Quicktime to play.
Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using Flash?
Well, you could use a JavaScript library which normalizes cross-browser onmouseover behaviors. Or, if you really don’t want to — it should be possible in plain ol’ JavaScript, with a lot of hacks to support all different browsers. Your choice.
As posted in gist 243946, here’s a jQuery snippet to do exactly what you want:
var $sound = $('<div id="sound" />').appendTo('body');
$('#special-links-that-play-annoying-sounds-when-hovered a').hover(function() {
$sound.html('<embed src="foo.mp3" hidden="true" autostart="true" loop="false">');
}, function() {
// We could empty the innerHTML of $sound here, but that would only slow things down.
});
Of course, this could be written in plain old JavaScript (without jQuery) as well.