Manipulating styles with JavaScript [solved]

[Cairoo]

Dear experts

I am trying to manipulate styles in a HTML page using JavaScript. The JavaScript code works when I view the page in a browser outside of my app, but in my app it behaves unexpectedly, causing an error. It would seem like LiveCode Server alters the style elements, making it impossibly difficult to manipulate using JavaScript.

To verify that the JavaScript works in a browser outside of my app, I used the "Web console" in Mozilla Firefox and the "Console" tab of the Developer Tools in Internet Explorer, to call the changeFontSize JavaScript function like this:

changeFontSize('200');

My LiveCode project is attached. Please download it, unzip it, and have a look. The HTML page is called "TestPage.html".

I really need to create and apply styles programmatically. Any help would be greatly appreciated!

Thanks,

Cairoo

edit: I changed the title to show that the problem is solved.

[sturgis]

Since you are using a .html page, this is not livecode server, (server is the php-like version of livecode that can be used to render dynamic pages)

You're using the revbrowser object to view a local file which for me is working fine. THe change fontsize works well, refresh works, the page loads correctly, no errors so far.

I'm on LC 5.5.3 (latest build) osx mountain lion. What errors are you getting?

If you go to the message box you can execute the command:

Code: Select all

put revbrowserget (1,"htmltext")

Assuming your browser instance is number 1, it should return the source contents of the loaded page so that you can confirm your .html hasn't developed a problem.

As I say, it is working very well for me, so its hard to diagnose. If you can figure out a recipe to make it fail I will test again.

[Cairoo]

Thank you sturgis

I'm glad you found no problem with it on **OS X**. However, I get the following error on **Windows** (which is why this thread is posted in the Windows forum):

Error number: -2146827688
Description: Unknown runtime error

and on closer inspection it seems like the style elements are being altered. In the original HTML the style elements have only 2 attributes but once loaded into my app, the style elements suddenly have 176 attributes!

I could perhaps try altering the styles by physically altering the linked stylesheet *file*, but I can't figure out how to go about that without having to reload the page each time the stylesheet file has been altered. Having to reload the page with every style change would add the overhead of trying to persist variable and control states using cookies. There must be a better way!

Edit: I executed the suggested command with the Message Box, and surprisingly there is no problem with *that* code, but when I use JavaScript to inspect the elements, they appear altered, i.e.

Code: Select all

document.getElementById('theStyleTag');

returns a style element with 176 attributes instead of 2 attributes.

[sturgis]

The livecode browser object just loads the text file. Interpretation is done using OS mechanics, the external just links to OS functionality. In the case of Windows it uses the base of internet explorer of course. One side affect of this is that sometimes plugins and extensions in internet explorer can sometimes cause issues. Any "new stuff" that appears in the page that were not included in the original are most likely caused by this. (the externals or plugins) It is also possible that something has been compromised in IE causing problems also.

My suggestion would be to open IE, and temporarily disable any extensions, plugins and toolbars (toolbars are probably fine, but maybe not) Then retry the stack. If it works correctly at that point you can turn things back on 1 at a time till you find the culprit. (hopefully)

Since livecode just grabs the file, and the underlying IE functionality takes over, its most likely an external thing. And just to reiterate, server is a different thing. If you are using server with apache (or whatever) that is a different situation, but since the example file ends in .html most likely this is not the case. (and of course you are using a file:/// reference so again, doesn't appear that you're using apache and livecode server)

Sorry for the confusion re: osx, though I should point out that it is a valid test. If it works on osx (which uses safari, and I have zero plugins/externals in use) the information that it works is still useful. But you're right I should have noticed that this was in windows. When I get a moment I'll check on a windows box, I can check xp, and possibly win7, and will let you know.

oh, also built a standalone and tested there also.

Oh, finally, my guess is that:
Error number: -2146827688
Description: Unknown runtime error

are os system messages rather than LC errors (someone correct me if i'm wrong) which still leads me to believe you may have a plugin issue.

Good luck! I'll post here if I find issues with windows tests.

[Cairoo]

I think plugins or add-ons can be ruled out because everything *works* when the page is viewed *outside* my app in *Internet Explorer*, which is the browser used by livecode when it runs on Windows.

[sturgis]

okie dokie.

[sturgis]

Last try. I promise. I did a search for that error, it is IE specific. There are differences in execution context between the lc extension vs running directly in a browser, but other (non-lc) users are hitting similar issues. Since the list info I found mostly relates to 'inner' as being the specific fail point(theories and workarounds available if you search) would you consider a different javascript method to accomplish this task?

I'm attaching a stack and web page with a simplified method. I can't test on windows right this second, but perhaps the method will work for you. The stack (yours but modified) allows you to choose a container to change, a font size in %, and click, it changes that container (in this case, div1 based on id)

If you have specific need to use the other method, feel free to ignore this. Good luck.

[Cairoo]

Thank you sturgis!

On Windows I tested your solution and it worked correctly. I just changed

Code: Select all

document.getElementById(tContainerId).style.fontSize=tSize+"%";

to

Code: Select all

var tNewSize = 16 * (parseInt(tSize) / 100);
document.getElementById(tContainerId).style.fontSize = tNewSize.toString();

Manipulating styles this way is much simpler.

Thanks also for pointing out that my app doesn't actually use LiveCode Server.

I owe you one!

(If only now I could change the title of this thread...)