Hi all, I'm posting this in the

[neoBinary]

Hi all,

I'm posting this in the JS section even though my question does include CSS and AS because it is a JS function that I need to create. I'm 90% of the way to solving it but I'm real stuck now.

The effect I'm after is a full screen toggle button that can also turn the scrollbars "on and off" with a Flash movie.

I've put together a JavaScript function that toggles fullscreen to normal view and visa versa as follows:



function fullScreenTog(){
if (this.name =='fullScreen')
java script:window.close(self)
else
window.open(location.href,'fullScreen','fullscreen')
}



I have the Flash Player call this function with this ActionScript:



fullScreenBtn.onRelease = function() {
getURL("java script: fullScreenTog()"
};



All good so far.

Now, following is where I am banging my head against the wall.

The CSS I use to create the "no scrollbar" effect is this:


body
{
overflow:hidden;
}


However, I can't work out how to have this CSS code execute only when I toggle with my button into full screen mode. I also want the scrollbar to come back after toggleing back to the normal screen size. (I have centred my flash movie within a table with the html center tag and use the above CSS to get a totally fullscreen with nothing else but a perfectly centred Flash movie.)

How would I develop the fullScreenTog() function so that when called it not only toggles from normal view to fullscreen view but it toggles the scrollbars "on and off" by somehow calling the above CSS with an if condition and else statement? I just can't see a way of doing it.

Thank you in advance to anyone that can help me out with this.

 

[neoBinary]

I forgot to a title to my previous (first post)! I will do next time. Sorry.

 

[jlsmithhartfiel]

I've done this with hiding and displaying div tag. Maybe this will help...

.Hide
{
    DISPLAY: none;
    VISIBILITY: hidden
}

function ShowClass(objSrc){
     if (objSrc.className == "Hide") {
          objSrc.className = "";
     }
     else {
          objSrc.className = "Hide";
     }
}

    <input type=button value=&quot;show div&quot; onClick=&quot;ShowClass(div1)&quot;>
    <br>
    <div id=&quot;div1&quot; class=&quot;Hide&quot; name=&quot;div1&quot;>
      this is test info
    </div>

Jessica

 

[neoBinary]

Thanks for your help Jessica.

I don't believe what the solution was. I finally worked it out. It was a css issue. I needed to change:

overflow:hidden;

to

overflow:auto;

I just wish I wouldn,t make things so complicated. I was convinsed the only way to do it was with a function. I must read up on css.