We Keep Coding

Cant access a global variable

I am getting an undefined when I try the post to twitter function. Should the quote_text variable be global and therefore accessible by the quoteTwitter function?
$(document).ready(function () {
loadJSON();
getQuote();
console.log(quote_text);
});
// Declare variables
var json_obj;
var num = 0;
var quote_text = "";
// Display a quote - this method is not perfect since the random number will repeat itself and it appears as if no new quote is delivered
function getQuote(callback) {
var html = "";
num = randNum();
quote_text = json_obj[num].quote;
html += "<strong> " + quote_text + " </strong>";
$("#quote").html(html);
$("#author").html(json_obj[num].author);
};
// Post the current quote on twitter
function quoteTwitter(quote_text){
var tweet = quote_text;
window.open('https://twitter.com/home?status=' +encodeURIComponent(tweet),"_blank");
}

Your function definition includes quote_text as a parameter, so inside the function it's trying to use that instead of the global variable with the same name. You're presumably not passing anything to the function when you call it, so it comes out as undefined.
You can fix this by changing this:
function quoteTwitter(quote_text){
to this:
function quoteTwitter(){
...but it'd probably be better in the long run to pass the correct value in as a parameter, if possible, instead of depending on global variables.

Pass a Parameter to Another Function and Into innerHTML

I've built my own lightbox, and it's working rather well. I built my own because I needed it to be without a framework, and also work well within a game I'm building. However, I've run into a problem I'm fairly certain is simple, but proving rather vexing to me. The issue I'm having is taking the parameter "slideName" and passing it through to the "fillRightButton()" function.
var createSlidebox = function(cancelButton, bannerImg, slideName) {
fillRightButton("nextSlide",slideName);
};
Here's a portion of that function:
var fillRightButton = function(rightButtonType, rightDestination) {
if (rightButtonType === "nextSlide") {
document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide(' + rightDestination + ')">Next</a>';
}
}
The "fillRightButton()" function performs fine when it is called directly, and this code works if you put the parameter in directly:
var createSlidebox = function(cancelButton, bannerImg, slideName) {
fillRightButton("nextSlide", "mySlideName");
};
However, without the quotes it renders as:
<a onclick="changeSlide([object Object])">Next</a>
with a "Uncaught SyntaxError: Unexpected identifier" JS error. How would I fix this? Thanks!

use data attribute to store the object using jQuery, in function call
var fillRightButton = function(rightButtonType, rightDestination) {
if (rightButtonType === "nextSlide") {
document.getElementById("lightbox_fright").innerHTML = '';
// document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide( $(this).data('dest') )">Next</a>';
var a = document.createElement('a');
a['data-dest'] = rightDestination;
a.onclick=function(){changeSlide( this['data-dest']); }
a.innerHTML = 'Next';
document.getElementById("lightbox_fright").appendChild(a);
//document.getElementById('lightbox_fright > a').data({'dest':rightDestination});
}
}
use jQuery if not already included
PS updated w/o jQuery please give it a try let me know if it works, recommend using jQuery though

jQuery access to this event in new object

I want to get access to the data-global-id value in the following markup and I am not sure how to do this due to scoping.
For example:
<div data-global-id="168" class="remove-as-favorite">remove as favorite</div>
$('.remove-as-favorite').on('click',function(){
var global_id=$(this).data('global-id');
// this works
alert('here i am in something: ' + global_id);
// this doesn't work
event_handler.remove_as_favorite();
});
// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(){
// how to get access to this here; assuming this refers to event_handler
var global_id=$(this).data('global-id');
alert("here i am global_id:" + global_id);
}
}
thx
** edit 1 **

Try this bruv: working demo with global_id http://jsfiddle.net/HK55Q/8/ or http://jsfiddle.net/HK55Q/11/
In the code merely changing the declaration of global id outside the local function like this var global_id = "";
further the code should explain better,
Good read:) How to store a global value (not necessarily a global variable) in jQuery?
hope it helps, lemme know if I missed anything
code
var global_id = ""; //<=== See here the global_id variable is outside your click and now you can bind it and can use it again.
$('.remove-as-favorite').on('click',function(){
global_id=$(this).data('global-id'); //<== Do not redeclare it using var global_id
// this works
alert('here i am in something: ' + global_id);
// this doesn't work
event_handler.remove_as_favorite();
});
// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(){
// how to get access to this here; assuming this refers to event_handler
var global_id=$(this).data('global-id');
alert("here i am global_id:" + global_id);
}
}

You could do one of a couple things. The simplest I can see is to pass global_id as an argument into the remove_as_favorite function, so that it would look like this:
$('.remove-as-favorite').on('click',function(){
var global_id=$(this).data('global-id');
event_handler.remove_as_favorite(global_id);
});
// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(global_id){
alert("here i am global_id:" + global_id);
}
}
The other way is to use either the "call" or "apply" functions.
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call
$('.remove-as-favorite').on('click',function(){
var global_id=$(this).data('global-id');
event_handler.remove_as_favorite.call(this);
});

A simpler example would be to use call as follows:
​
$(function(){
$('.remove-as-favorite').on('click',function(){
var global_id=$(this).data('global-id');
alert('here i am in something: ' + global_id);
event_handler.remove_as_favorite.call({global_id:global_id});
});
event_handler = {
remove_as_favorite: function() {
alert("here i am global_id:" + this.global_id);
}
}
});​
And call is a javascript function, and is compatible with all the browsers, which support javascript ofcourse ;)
Check the fiddle at: http://jsfiddle.net/nTq97/

Flash player control from javascript outside?

I am making flash player that suppose to be controlled from outside, from javascript.
I need those methods:
Play/Pause and Volume level
I am stuck with volume level... I tried to add this code:
flashMovie.volume = 10;
Where flashMovie is flash instance... And it's show NO ERROR but it's NOT WORKING
I try to make inner AddCall(); and then when it's called to call() from javascript to return sound level.
AS 3:
function setthisvolume()
{
var vlm = ExternalInterface.call('giveMeVolume()');
this.soundTransform.volume = vlm;
}
ExternalInterface.addCallback("setthisvolume", setthisvolume);
JS:
var soundlevel = 10;
function soundlevelset()
{
var flashMovie=getFlashMovieObject("objswf");
flashMovie.setthisvolume();
}
function giveMeVolume()
{
return parseInt(soundlevel);
}
But I am getting this error:
Error calling method on NPObject!
I even tried with setInterval():
AS 3:
function setthisvolume()
{
var vlm = ExternalInterface.call('giveMeVolume()');
this.soundTransform.volume = vlm;
}
setInterval(setthisvolume, 1000);
JS:
var soundlevel = 10;
function giveMeVolume()
{
return parseInt(soundlevel);
}
And it doesn't show any error, but it doesn't work neither...
Did someone work with stuffs like this?
Can someone help me what I am doing wrong here...
Thank you!

Thank you, #someone!
This second option worked okay!
Here is working code:
AS3:
function setthisvolume(vlm)
{
this.soundTransform = new SoundTransform(vlm);
}
ExternalInterface.addCallback("setthisvolume", setthisvolume);
JS:
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else
{
return document.getElementById(movieName);
}
}
var soundlevel = 0.5; // it's 0-1 volume, not 0-100
function soundlevelset()
{
var flashMovie=getFlashMovieObject("objswf");
flashMovie.setthisvolume(parseFloat(soundlevel));
}
When you are using slider each time slider change you need to change soundlevel variable and call soundlevelset();
Hope I helped next one who is starting with this... :)
Thank you!

Try removing the parentheses when calling giveMeVolume, by changing this:
var vlm = ExternalInterface.call('giveMeVolume()');
to this:
var vlm = ExternalInterface.call('giveMeVolume');
If that doesn't work, try passing the volume directly as an argument/parameter, like this (this is probably a better way to do it):
AS3:
function setthisvolume(vlm)
{
this.soundTransform.volume = vlm;
}
ExternalInterface.addCallback("setthisvolume", setthisvolume);
JS:
var soundlevel = 10;
function soundlevelset()
{
var flashMovie=getFlashMovieObject("objswf");
flashMovie.setthisvolume(soundlevel);
}

Code looks reasonable.
Check if you allow Flash to communicate with script There is property when you create Flash object - AllowsScriptAccess - http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7c9b.html .
Check if Falsh is coming from the same domain as HTML page.
For addCallback check if you are getting correct Flash object by Id (the way to create Flash is different in IE/FF, so you may be getting the wrong one).
Check if you have correct SWF file - browser may cache older version... I.e. add element on the Flash control that simply shows static number and make sure it matches to latest one.

How to change the order of which they are called?

I have a quite inconvenient problem.
Say that I have the following functions
function name(namearg){
...
..
}
function handlefailed(){
..
..
}
function handlecover(){
..
..
}
Now to my problem, I have alot of hard coded html that can't be changed that is calling both functions like this
Link
Link
Link
The problem is the order of which I'm calling the functions, I first want to see which function that is called, either handlefailed() or handlecover(), and then want to know what name that is sent to the name function.
If I would have called the functions in the other way around I would just have done
var theName;
function name(namearg){
theName = namearg
}
function handlefailed(){
callOtherfunctionInAnotherJavascript(getElements(theName + ".failed"));
}
function handlecover(){
callOtherfunctionInAnotherJavascript(getElements(theName + ".cover"));
}
But now this is not possible since I'm calling the name function after the first function.
Is there a way in javascript that "changes" the order of how the functions are evaluated, or do you guys have a clever sollution to my problem, I.E getting the value of the namearg variable and use it in the handlefailed() & handlecover() functions?

var postFix;
function name(namearg){
callOtherfunctionInAnotherJavascript(getElements(namearg + postFix));
}
function handlefailed(){ postFix = '.failed'; }
function handlecover(){ postFix = '.cover'; }

you can empty both functions:
function handlefailed(){
..
..
}
function handlecover(){
..
..
}
and create two new functions that doing what you need
function handlefailed2(){
..
..
}
function handlecover2(){
..
..
}
then call the new functions from inside function name(namearg) according namearg deside to which function you want to call

You can declare another global, handleFunc, and have handlefailed/handlecover assign which one to call in name.
var theName;
var handleFunc = null;
function name(namearg)
{
if(handleFunc instanceof Function)
{
handleFunc(namearg);
handleFunc = null;
}
theName = namearg
}
function handlefailedCallback(namearg){ /* some code */}
function handlefailed()
{
handleFunc = handlefailedCallback;
}
function handlecoverCallback(namearg){ /* some code */}
function handlecover()
{
handleFunc = handlecoverCallback;
}
This gives you the flexibility to continue using name without breaking other areas of the code.