Sliding frame (being able to "slide in/out" when neeeded)

Hi experts,

Currently my webpage is divided in two frames:
1) The left frame contains a navigation tree
and
2) the right frame shows information and/or graphs that corresponds with the tree node that is clicked in the left frame.

Now, since I want to have my whole screen available for showing the information, I want the left frame to be "slidable".
So, by default that tree navigation frame is "invisible" except from some small 5 à 10 pixel column indicating the frame is available there. When the user needs the tree to navigate, he hoovers with the mouse over the 5 à 10 pixel column (or clicks on it) and the navigation frame "slides in" from the left.
When you click on the tree the information frame (partly behind the navigation frame) is updated.
When you want to see the information "in full screen" again, you click somewhere (on a link?) in the navigation frame and the frame slides away again.

Can anyone point me to some javascript providing this functionality?
Something like this sliding menu: http://www.codelifter.com/main/javascript/amazingglidermenu.html, but then for frames.
LVL 37
zzynxSoftware engineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JeffHowdenCommented:
This isn't possible if you're using normal frames (ie, using <frameset>/<frame> tag combinations) as the resize strip doesn't offer any way to expose events on it to the page developer.  
0
zzynxSoftware engineerAuthor Commented:
An *alternative* that I have in mind is this:
Currently when I drag the divider that is splitting my page,
the navigation frame's width becomes smaller/bigger and the information frame's width bigger/smaller.

But what I would like is this:
Two frames with an *unchangeable* (full) width.
Dragging the divider doesn't change the frames' widths, only their scrollbars indicating how much of their full width is currently visible.
In other words, imagine the two frames lying on the table beside each other.
Then my browser is the window through which I'm looking at the frames.
Dragging the divider is moving my window to the left/right to see less/more of the navigation frame.

I don't know if this is feasible.
0
zzynxSoftware engineerAuthor Commented:
>> as the resize strip doesn't offer any way to expose events on it to the page developer.
With "the resize strip" do you mean the "5 à 10 pixel column" from my question?
Can't that be a link to click on?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

TimYatesCommented:
You mean like this?

(It aint pretty, it's just a quick hack...)

main.html ----------------------------------------------------

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
<script type="text/javascript">
  var cWidth = 200 ;
  var dw = 1 ;
  var timerRunning = false ;
  var timerID ;

  function slide()
  {
    if( timerRunning )
      clearTimeout(timerID) ;
    timerRunning = false ;
    dw = -dw ;
    timerRunning = true ;
    timerID = self.setTimeout( "ping()", 10 ) ;
  }

  function grow()
  {
    dw = 1 ;
    timerRunning = true ;
    timerID = self.setTimeout( "ping()", 10 ) ;
  }

  function ping()
  {
    if( !timerRunning ) return ;
    if( dw < 0 )
    {
      cWidth -= 20 ;
      if( cWidth <= 0 )
      {
        cWidth = 0 ;
        if( timerRunning )
          clearTimeout(timerID) ;
        timerRunning = false ;
      }
      else
      {
        timerID = self.setTimeout( "ping()", 10 ) ;
      }
      document.getElementById( 'mainSet' ).cols = cWidth + ', *' ;
    }
    else if( dw > 0 )
    {
      cWidth += 20 ;
      if( cWidth >= 200 )
      {
        cWidth = 200 ;
        if( timerRunning )
          clearTimeout(timerID) ;
        timerRunning = false ;
      }
      else
      {
        timerID = self.setTimeout( "ping()", 10 ) ;
      }
      document.getElementById( 'mainSet' ).cols = cWidth + ', *' ;
    }
    else
    {
      if( timerRunning )
        clearTimeout(timerID) ;
      timerRunning = false ;
    }
  }

</script>
</HEAD>
<FRAMESET id="mainSet" cols="200, *">
  <FRAME src="test.html">
  <FRAME src="test1.html">
</FRAMESET>
</HTML>

---------------------------------------------------

test.html -----------------------------------------

<html>
<body>
This is the left hand frame!
</body>
</html>

---------------------------------------------------

test1.html -----------------------------------------

<html>
  <head>
  </head>
  <body>
    Hi there!  Click here to <a href="#" onclick="parent.slide() ; return false ;">shrink/grow</a>
  </body>
</html>

---------------------------------------------------

Tim.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TimYatesCommented:
Hahah..read the other comments, and that's probably NOT what you want at all ;-)

Sorry...  back to sleep for me ;-)
0
zzynxSoftware engineerAuthor Commented:
>> read the other comments, and that's probably NOT what you want at all ;-)
Nevertheless thanks for your time.
>> Sorry
Never need to feel sorry in trying to help. ;°)
0
TimYatesCommented:
Actually, if you change test.html so the body tag is like:

    <body style="white-space:nowrap;">

it's *closer* to what you wanted...
0
zzynxSoftware engineerAuthor Commented:
Thanks, Tim. I'm really 'considering' it.
Give me some time to try/understand it.

>> It aint pretty, it's just a quick hack.
Does that mean you wouldn't use it?
0
TimYatesCommented:
I wouldn't use frames full stop ;-)

hehe

Tim
0
TimYatesCommented:
But what I meant was that the code could do with some tweaking...  it's a bit verbose at the moment... ;-)

Tim
0
zzynxSoftware engineerAuthor Commented:
Hi Tim,
It looks like I'm gonna use your code in real life! ;°)

Just a question about it.

I want to incorporate this show/hide action in my current javascript menu.
The menu is built like this:

      <ul id="theMenu">
             <li><a href="#" onclick="parent.slide(); return false;">
                                      <img src='showhide.gif' alt='Show/Hide left panel' border='0'></a>
                                </li>
                                <li>
                                      <a href="http://www.google.com">Google</a> </li>
                                </li>
                </ul>

Now, when I hover over the menu item the default cursor becomes "the pointer"
but when I click on it, nothing happens, unless I click *on the icon*.
Of course that's because of the fact that the magic is in the 'onClick' and NOT in the 'href'.
Do you think there's a solution for this?
0
zzynxSoftware engineerAuthor Commented:
Some more questions about your code:
1) what is the function grow() for? Looks obsolete to me.
2) How would you adapt your example to start with the left panel invisible?
0
TimYatesCommented:
1)  Yup you can get rid of "grow" ;-)  Told you it was hacky code ;-)
2)  Change:

  var cWidth = 200 ;
  var dw = 1 ;

to

  var cWidth = 0 ;
  var dw = -1 ;

I don't get you with the clicking on the icon thing :-(  It's an "onclick" and you have the <a href> around just the icon.  So you will have to click on the icon as you say...
0
zzynxSoftware engineerAuthor Commented:
Thanks for 1) & 2)

>> I don't get you with the clicking on the icon thing
Well, for this menu item

                               <li>
                                      <a href="http://www.google.com">Google</a>
                                </li>

i) the cursor becomes a pointer when I hover over it (whether my cursor is over the word 'Google' or not)
   (That's for all menu items the case)
ii) and when I click, my browser brings me to Google's main page (even when the cursor is NOT over 'Google')

When I change the above to

                               <li>
                                      <a href="http://www.google.com" onclick="parent.slide(); return false;">Google</a>
                                </li>

- When I click in the menu item and on the 'Google' text, it brings me to Google's main page + slides the frame divider
- When I click in the menu item but besides the 'Google' link, it just brings me to Google's main page. No sliding.
That's probably specific behaviour for that menu.

My question is: no possibility to 'store' your solution in a href link?

Another small question about your code:

Why is it

      onclick="parent.slide(); return false;"

and not simply

      onclick="parent.slide();"

Who uses that return code?
0
TimYatesCommented:
Ok, first things first, the "return false"

This basically stops the browser following the URL.

So the browser does the "onclick" code then as it returns false, doesn't goto the url supplied.

So from the sounds of it, you would want:

                                      <a href="http://www.google.com" onclick="parent.slide()">Google</a>

ie:  no return

instead?

Not sure 100% what you're up to, but I hope that explains the return thingy :-)

It should go to google and slide without it :-)

Tim
0
TimYatesCommented:
As an example of the return from an onclick, this shows the sort of thing you can do:

    <a href="http://www.google.com" onclick="return confirm( 'Sure you want to go to ' + this.href + '?' )">Go to google!</a>

Which will check the user wants to go to the site first, and only go if they click "OK" (or "Yes" depending on OS/Browser)  *sigh* ;-)

Tim
0
zzynxSoftware engineerAuthor Commented:
Thanks for explaining.

>> only go if they click "OK"
That's indeed valid for <a href="...."></a> in a standard html file.
Once incorporated in my menu system, clicking it
*always* takes me to the Google page whatever my answer is.
But that's the menu's fault, not yours. ;°)

I'll leave this one open in case some other experts with brilliant ideas jump in,
but it's clear that if not, you deserve the points.
0
TimYatesCommented:
:-)
0
ellandrdCommented:
did you look at dhtmlgoodies yet? http://www.dhtmlgoodies.com

then look under: Misc Scripts -> Slide in Help Panel...

Might be useful..

ellandrd
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.