Changing button images dynamically using javascript
February 25, 2014 12:00 AM
Context:
I am working on a Lectora template which will be used by different developers to create courses for different brands and in multiple languages. I have used javascript, what this javascript does is, it replaces the appropriate images by looking at the values for the variables set for brand and language. All works fine for most of the global elements like logo, Next button, Back button, etc. However I have an issue with a button within the assessment, Submit button.
Issue:
I would like to change the submit button images (png images for normal state, rollover state, down state) according to the value set for the language variable. Please note that the difference between this button object (Submit button) and other global image objects is that the rest of the global objects like logo, next button, etc. are all inserted into the title just once and are just inherited in ever page. So the object name in Lectora title and the object name Lectora creates to be used in javascript for these global objects are constant throughout the title. So I can easily use the javascript object name for these images and manipulate them in my javascript code.
Whereas everytime you create a new assessment page, you have a new instance of the Submit button. Hence the javascript name created for this submit button is also different on every assessment page. So I cannot hardcode the javascript object name and write my javascript code.
Solution that I tried:
So I wrote a javascript which loops through all the objects within the (assessment) page, pushes all the objects in an array, loops through that array and finds the object which are instanceof type ObjButton (javascript object created by Lectora for buttons) and then replaces its images using the .setImages() method for that object.
My solution works fine in most of the modern browsers including IE11, however, for my purpose, I have to make it work on IE8. And this is where my problem is. I cannot get my javascript to work on IE8 because of the primitive nature of that browser.
Need Help:
Has anybody worked on anything like this with a solution? I am really looking forward to any kind of help with this regard. Any kind of help, in any direction, any clue will be helpful to me. Thanks.
Discussion (5)
So... What exactly does not work? Which specific JS method or function fails in IE8? What's the error message?
var num_totalObjs = 0;
for(var s in window)
{
num_totalObjs++;
}
alert(num_totalObjs); // gives 845 in IE11 and gives 44 in IE8[/CODE]
This means it is not looping through all the members in IE8, something to do with the non-enumerable members I guess, please correct me if wrong.
So my code,
[CODE]var arr_objInstances = [];
for(var v in scp)
{
if(typeof scp[v] == 'object')
{
if(scp[v] instanceof ObjButton)
{
arr_objInstances.push(v);
}
}
}
var obj_submitBtn;
for(var i=0; i
for(var s in window)
{
num_totalObjs++;
}
alert(num_totalObjs); // gives 845 in IE11 and gives 44 in IE8[/CODE]
This means it is not looping through all the members in IE8, something to do with the non-enumerable members I guess, please correct me if wrong.
So my code,
var arr_objInstances = [];
for(var v in scp)
{
if(typeof scp[v] == 'object')
{
if(scp[v] instanceof ObjButton)
{
arr_objInstances.push(v);
}
}
}
var obj_submitBtn;
for(var i=0; i
for(var v in scp)
{
if(typeof scp[v] == 'object')
{
if(scp[v] instanceof ObjButton)
{
arr_objInstances.push(v);
}
}
}
var obj_submitBtn;
for(var i=0; i
{
var objBtn = eval(arr_objInstances);
if(objBtn.imgOffSrc == "images/btn_submit.png")
{
obj_submitBtn = objBtn;
break;
}
}
var str_lang = Varstr_language.getValue();
if(str_lang == "fr")
{
objSubmitBtn.setImages('branding/btn_submit_fr.png','branding/btn_submit_mouseover_fr.png','branding/btn_submit_mouseover_fr.png');
objSubmitBtn.build();
}[/CODE]
here my objSubmitBtn comes null as the code does not loop through all the objects in IE8 (it excludes the non-enumerable objects), and the javascript fails.
Please note, this code works fine in IE11, Chrome. So I want and alternative to this which will work in IE8.
Well, first of all, I don't think that window object should have the same number of elements in IE8 and other browsers, so I don't think it's the enumeration issue.
I managed to get your code running (had to replace scp for window in the code) and it does produce an array of buttons in Chrome. It fails in IE8 with "Object expected" on the "if(scp[v] instanceof ObjButton)" line.
The issue (and solution) are described here: http://stackoverflow.com/questions/18721969/ie8-queryselector-null-vs-normal-null -- just check whether "scp[v]" is null before checking if it's an instance of ObjButton.
Cheers.
I have every possible check in my code and I am checking whether the scp[v] is null before checking it to be instanceof something but without any luck.
I just fail to believe that there was no way of doing this in IE8!
Discussions have been disabled for this post