just a quick one, im using a oop style for my javascript game but for some reason when i add in a new class it kills any functions from other classes i have included.
Here is the script i am talking about which is my main file which i will include all my class files in:
$(document).ready(function(){
var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");
var ui = new Gui();
// var level = new Level();
//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
$('#new_but').click(function(){
game_settings("new");
});
$('#load_but').click(function(){
game_settings("load");
});
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#welcome").on("click", "#logout_but", ui.logout);
//___________________________________________________________________
//Initialisation of game
function game_settings(state){
if(state == "load"){
ui.load_game();
//do ajax call to load user last save
level.level_init(0,1);
}
else{
//set beginning params
//Change screens
ui.new_game();
alert("new game");
}
}
});
in the context of the script above, my problem is when i just have the call to new Gui() without the call to new level underneath or commented like you can see, well then all of the functions below under the heading login/register gui works perfectly, but as soon as i put the call to new level in or uncomment it, it kills all of the functions under the login/ register gui heading.
Why is this?
EDIT: here is the level.js file in case you would like to see it and how i am constructing my classes:
function Level(){
this.level_init = function(level, location){
var saved_level = level;
var saved_location = location;
};
this.get_tileset = function(){
};
this.draw = function() {
}
}
Thanks
Tom
SOrry guys, it turns out it was a silly mistake on my behalf i didnt add the script in html!, i need more sleep i think haha! thanks for your input
TOm
Related
And Thanks in Advance :)
So I am using Live Chat and want to dynamically change the group based on a user action.
IF user has a chat open THEN keep current chat open (this part is fine)
If user clicks link A then they will get assigned to groups 1-5 depending on another variable
If user clicks link B then they will get assigned to group 6
Now I can get all of the above IFs to work independently....but when I try to change the group ID dynamically it doesnt take... I've tried resetting the object then reloading the library again to no avail :(
// Inside $(document).ready()
window.__lc = window.__lc || {};
window.__lc.license = LICENSE_ID;
window.__lc.group = live_chat_group;
window.__lc.chat_between_groups = false;
window.LC_API = window.LC_API || {};
window.LC_API.on_before_load = function() {
if (window.LC_API.visitor_engaged() === false && livechat_chat_started === false) {
window.LC_API.hide_chat_window();
}
};
window.LC_API.on_chat_started = function() {
livechat_chat_started = true;
};
$.getScript('https://cdn.livechatinc.com/tracking.js', function() {});
So the above gets loaded on page load to keep the current chat session between pages
$("body").on("click", "#sales-chat-init", function () {
window.__lc = {};
window.LC_API = {};
window.__lc.license = LICENSE_ID;
window.__lc.group = 2;
window.__lc.hostname = "";
window.__lc.chat_between_groups = false;
$.getScript('https://cdn.livechatinc.com/tracking.js?q=52895293523', function() {});
console.log(window.__lc);
//window.LC_API.open_chat_window();
});
The above doesnt work...window.__lc is just the object I created and not tied re-init'd as the LiveChat object.
I work at LiveChat so let me help you with that :)
There is no option to change a group in the chat window if the LiveChat script is already loaded. However there are two ways you can handle it:
A) ask your users to pick a group in a pre-chat survey
B) create kind of 'pre-chat' on your site and load the script after the group will be chosen (this is available only once per session), here's an example http://lp.labs.livechatinc.com/helpers/group_chooser/
Perhaps the user needs to leave the chat first
LC_API.close_chat();
then start again...
https://developers.livechatinc.com/javascript-api/#close-chat
I'm using the jquery audio recording plugin jrecorder and I want to be able to change the audio file name by pushing a button. The script defines the file name with the 'host' variable. I want to be able to change that variable to "track01" by clicking button01 or "track02" by clicking button2. How would I go about doing this?
<script>
$.jRecorder(
{
host : 'acceptfile.php?filename=track00' ,
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
////Make buttons change save-file name
$("#button01").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track01'
;});
$("#button02").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track02'
;});
</script>
I managed to devise the solution by making changes in the Main.as script file and also in the jRecorder.js file. Following are six steps that you will need to achieve this.
Step -1
Go to https://github.com/sythoos/jRecorder and download everything in the flash-fla folder. Make sure you match the folder of the flash-fla folder structure EXACTLY on your local machine.
Step -2
Once you have done that, and if you haven't got it already, you're going to need to download Flash. I used the free 30 day trial to do this, you can also do the same.
Step 3. Open Main.as file and make following two changes:
Change : 1
Define a new string variable to contain file name
Change : 2
Add parameter in "jSendFileToServer" method
Step 4: Once the above changes are done, you need to open up the AudioRecorderCS4-1.0.fla file in Flash and export the movie (File -> Export -> Export Movie).
Step 5. Open jRecorder.js file and make following change:
Add parameter to sendData Method
Step 6. Open your HTML and make the change in the JS method which calls sendData
Add parameter in the sendData Method
Following are the code snippets, please note that I am pasting few lines of code before and after my changes by adding comments to the code which I have added/modified.
Main.as File
private var recorder:MicRecorder = new MicRecorder(waveEncoder);
private var recBar:RecBar = new RecBar();
private var maxTime:Number = 30;
//Start of addition by FaisalKhan
private var FileName:String = 'Hello.wav';
//End of addition by FaisalKhan
//Start of change 1 of 2 by Faisal
//public function jSendFileToServer():void
public function jSendFileToServer(file_name):void
//End of change 1 of 2 by Faisal
{
//Start of change 2 of 2 by FaisalKhan
FileName=file_name;
//End of change 2 of 2 by FaisalKhan
finalize_recording();
}
//functioon send data to server
private function finalize_recording():void
{
var _var1:String= '';
var globalParam = LoaderInfo(this.root.loaderInfo).parameters;
for (var element:String in globalParam) {
if (element == 'host'){
//Start of change by FaisalKhan
//_var1 = globalParam[element];
_var1 = globalParam[element]+FileName;
//End of change by FaisalKhan
}
}
ExternalInterface.call("$.jRecorder.callback_finished_recording");
if(_var1 != '')
{
var req:URLRequest = new URLRequest(_var1);
req.contentType = 'application/octet-stream';
req.method = URLRequestMethod.POST;
req.data = recorder.output;
var loader:URLLoader = new URLLoader(req);
ExternalInterface.call("$.jRecorder.callback_finished_sending");
}
}
jRecorder.js file change:
//function call to send wav data to server url from the init configuration
//Start of change by FaisalKhan
//$.jRecorder.sendData = function(){
$.jRecorder.sendData = function(file_name){
//getFlashMovie(jRecorderSettings['recorder_name']).jSendFileToServer();
getFlashMovie(jRecorderSettings['recorder_name']).jSendFileToServer(file_name);
//End of change by FaisalKhan
}
HTML Button click method change:
$('#SendRecordingDiv').click(function(){
//Start of change by FaisalKhan
//$.jRecorder.sendData($();
$.jRecorder.sendData($("#FileControl").val()+'.wav');
//End of change by FaisalKhan
});
Below is how, although I think you will still have issues because your $.jRecorder code is running as soon as the page loads, so by the time a user hits a button its too late. Maybe also consider putting that inside a function, and calling that function after they press the button.
<script>
function WhoSaysDearMe(saveFileName) {
$.jRecorder({
host : saveFileName ,
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
}
////Make buttons change save-file name
$("#button01").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track01'
WhoSaysDearMe('acceptfile.php?filename=track01');
;});
$("#button02").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track02'
WhoSaysDearMe('acceptfile.php?filename=track02');
;});
</script>
I have a blog that I am using metro js on
My blog
Metro JS
I am attempting to put a button at the bottom of the page that will load 5 posts at a time.
Everything was going swimmingly until I attempted to dynamically load Metro.js tiles.
The javascript function below is just a demo. I planned on doing an ajax call but I cant even get the demo working yet.
what loads on start
<div class="tiles">
<div id="id#" class="live-tile four-wide" data-mode="none" data-bounce="true">
<div style="background-color:orange;">
<table><tr><td><img src="textsym.png" width="50"/></td>
<td><h1>title</h1></td></tr>
</table>
</div>
</div>
</div>
This is what I tried
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class=\"tiles\"><div id=\"\" class=\"live-tile four-wide\" data-mode=\"none\" data-bounce=\"true\"><div style=\"background-color:orange;\"><table><tr><td><img src=\"textsym.png\" width=\"50\"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
}
The problem is that it is adding the tile but it isn't making it clickable like the other tiles. Is there something I am missing?
So the answer to this question is pretty easy
The JS file needs to be told that there are new elements on the page.
When the page is loaded initially, according to the metro js documentation, you run this JQuery Function
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
As far as I can tell this some how ties the class live-tile to the click handler that I have here. postpage.php....
So all I did was add this JQuery call into my button click function above. This refreshes the page and makes everything work.
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class=\"tiles\"><div id=\"\" class=\"live-tile four-wide\" data-mode=\"none\" data-bounce=\"true\"><div style=\"background-color:orange;\"><table><tr><td><img src=\"textsym.png\" width=\"50\"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
}
Currently I hide and show the content of a div like this:
var header = null;
var content = null;
var mainHolder = null;
var expandCollapseBtn = null;
var heightValue = 0;
header = document.getElementById("header");
content = document.getElementById("content");
mainHolder = document.getElementById("mainHolder");
expandCollapseBtn = header.getElementsByTagName('img')[0];
heightValue = mainHolder.offsetHeight;
header.addEventListener('click', handleClick, false);
mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
function handleClick() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
mainHolder.style.height = "26px";
content.style.display = "none";
}
else
{
mainHolder.style.height = heightValue + "px";
}
}
function transitionEndHandler() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
expandCollapseBtn.src = "expand1.png";
}
else{
expandCollapseBtn.src = "collapse1.png";
content.style.display = "block";
}
}
This is fine if the content is static, but I'm trying to populate my div dynamically like so.
This is called from an iphone application and populates the div with a string.
var method;
function myFunc(str)
{
method = str;
alert(method);
document.getElementById('method').innerHTML = method;
}
I store the string globally in the variable method. The problem I am having is now when I try expand the div I have just collapsed there is nothing there. Is there some way that I could use the information stored in var to repopulate the div before expanding it again? I've tried inserting it like I do in the function but it doesn't work.
Does anyone have any ideas?
to replicate:
Here is the jsfiddle. jsfiddle.net/6a9B3 If you type in text between
here it will work fine. I'm not sure
how I can call myfunc with a string only once in this jsfiddle, but if
you can work out how to do that you will see it loads ok the first
time, but when you collapse the section and attempt to re open it, it
wont work.
If the only way to fix this is using jquery I dont mind going down that route.
is it working in other browsers?
can you jsfiddle.net for present functionality because it is hard to understand context of problem in such code-shoot...
there are tonns of suggestions :) but I have strong feeling that
document.getElementById('method')
returns wrong element or this element not placed inside mainHolder
update: after review sample in jsfiddle
feeling about wrong element was correct :) change 'method' to 'info'
document.getElementById('method') -> document.getElementById('info')
I think you want to use document.getElementById('content') instead of document.getElementById('method') in myFunc.
I really see nothing wrong with this code. However, a guess you could explore is altering the line
content.style.display = "none";
It might be the case that whatever is displaying your html ( a webview or the browser itself) might be wiping the content of the elemtns, as the display is set to none
I'm trying to add a function to my website so when the user clicks on a footnote the browser will display it inline. Here is how far I have gotten,
var locate= document.getElementById("footnote1");
var note= document.getElementById("footnotes2");
function footnote() {
locate.onclick= note.style.display="inline";
};
any help would really be appreciated.
Here is an example of what you want.
var locate = document.getElementById("footnote1");
var note = document.getElementById("footnotes2");
locate.onclick = function() {
note.style.display = "inline";
};
Working Example
http://jsfiddle.net/v8fHE/
you just had to wrap the onclick action in a function
trigger.onclick=function(){toChange.style.background="#FF0000"};