Javascript function

[johnsimpson]

Hi guys,

I need a javascript function to do what this code here is doing:

<select style="width:165px" onchange="var v=this.options[this.selectedIndex].value; if (v != '') selectStyle('style', v);">
<option value="">-- Select Style --</option>
<option value="style-home">Home</option>
<option value="style-services">Services</option>
<option value="style-values">Our Values</option>
<option value="style-recycle">Reclaim and Recycle</option>
</select>

Its basically going to change a stylesheet to an alternate one. But what im wanting to do is to call on this javascript function from flash, so i think i will need a seperate function to set each stylesheet.

Can anyone help me?

thanks
J

 

[trollacious]

Did you want to hire someone to write this from scratch then?

Lee

 

[johnsimpson]

Hi Lee,

A bit of help would be good, not asking for anyone to write it, just point me in the right direction please.

 

[theniteowl]

I do not know anything about flash but as javascript this function not by itself going to do anything.
This line:

<select style="width:165px" onchange="var v=this.options[this.selectedIndex].value; if (v != '') selectStyle('style', v);">

checks if the current selection has a value and if it does it calls another function (selectStyle) which is not shown and passes the selected value to that function.

I do not think it really changes the stylesheet, I suspect it is just intended to change the classname assigned to an element on the page or even a block of elements depending on how the selectStyle function operates. Unless the selectStyle function re-loads the page passing a parameter to tell it which stylesheet to load?

What limitations are there calling javascript from flash?
What does the selectStyle function look like?
Are you looking to do this on page or by re-loading the page with the selected stylesheet? And if you do it by re-loading you may have to also worry about preserving any other form data during the re-load.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

hi,

i have been told that it is possible to call on a function from within flash. What i wanted was for this function to basically change the stylesheet, but without reloading the page.

i have got it working using a script i found, but it works through a dropdown list.

http://www.2percentinspiration.com/asm/index-j1.asp

The idea is that the top banner will be a flash banner with some text effects and the image changing. When the image changes i want to change the stylesheet so the navigation colour will change to the appropriate theme.

So i was thinking that if i could write a function that would do the same as what the drop down was doing, and then call on this function from within flash, i should work??

Do you think this is possible or am i walking down the wrong path?

 

[theniteowl]

Your page will not load for me so I cannot see what the function looks like.

What I suspect is that there is one stylesheet with multiple classes for the different styles that might be applied to the page and the function alters the classname applied to the body tag of the page or something similar.

All that the select box is doing is allowing the manual selection of which style to use and passing it to the selectStyle function so all you have to do is call the selectStyle function passing in the name of the style you want to use at any given time by using

selectStyle('style',style-home);
or
selectStyle('style',style-services);
or
selectStyle('style',style-values);
or
selectStyle('style',style-recycle);
as called for by your flash code.

You MIGHT need quotes around the name of the style. It does not appear so from the function call in your onchange event but without seeing the selectStyle function I could not say for sure.
Post the code and I will know more.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

yea sorry, having issues with a new firewall, should work now.

its not using one stylesheet, its using a primary one and then a few alternate ones, which are loaded but deactivated on page load. Then there is some javascript code which activates and deactivates them accordingly.

I cant have the page refreshing as this would restart the flash animation, this method seems to simply change the stylesheet without and refresh.

 

[theniteowl]

All of your code is being generated server-side so I cannot see what it is doing. You will have to post it. Show the selectStyle function and the style sheets.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[theniteowl]

Never mind, I managed to get the code loading your alternate page link without frames.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[theniteowl]

All the select box does is call the selectStyle function passing the value 'style' and the value of the currently selected option.

The selectStyle function sets a cookie named style and stores the value passed in from the select box then it calls the setActiveStyleSheet function to actually change the style of all links on the page.

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

This function accepts the name of the style to set as the parameter title then it sets up a loop to go through all links on the page and set each one's style attribute to the value from the select box.

If you do not care about setting cookies to hold the style which I do not think you do, then all you have to do is call setActiveStyleSheet passing in the name of the stylesheet you want to be active for your links.

If you want style-home then call the function from flash as:
setActiveStyleSheet(style-home);
if you want style-services then call it as:
setActiveStyleSheet('style',style-services);
or
setActiveStyleSheet('style',style-values);
or
setActiveStyleSheet('style',style-recycle);
as needed based on the style required for your flash code.

This way you call the function directly rather than having to go through the selectStyle function which is only needed for setting a cookie. That feature is just so frequent users can set their own disply preference for color which is not what you seem to want.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

Excellent, thanks niteowl, i will set about trying this now.

if i want to test it normally (without going through flash) can i just set some buttons in html to setActiveStyleSheet?

thanks for your help!!

J

 

[theniteowl]

Sure, just use something like:
<input type="button" value="Home" onclick="setActiveStyleSheet(style-home);">

That should work as a test.

It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

hmm it doesnt work,

http://www.2percentinspiration.com/asm/index-j2.asp

any ideas?

 

[theniteowl]

Add in single quotes around the style name.
<input type="button" value="Home" onclick="setActiveStyleSheet('style-home');">

The original code treated it like an object apparently but since we are going after it directly we need the quotes.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

thanks niteowl, its working perfectly!!!

much appreciated.

J

 

[theniteowl]

Glad it works for you. Should be all set as long as there is no problem making the same function call from flash.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[johnsimpson]

http://www.2percentinspiration.com/asm/index-j2.asp

I have got it mostly working now, just gona see if there is a different way to activate the javascript command from flash as the clicking is annoying.

thanks fo all your help

John