Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2006-04-10
19
Medium Priority
?
788 Views
Last Modified: 2012-08-14
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.
0
Comment
Question by:zzynx
19 Comments
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16415359
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
 
LVL 37

Author Comment

by:zzynx
ID: 16415375
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
 
LVL 37

Author Comment

by:zzynx
ID: 16415402
>> 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 35

Accepted Solution

by:
TimYates earned 2000 total points
ID: 16415513
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16415516
Hahah..read the other comments, and that's probably NOT what you want at all ;-)

Sorry...  back to sleep for me ;-)
0
 
LVL 37

Author Comment

by:zzynx
ID: 16415613
>> 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
 
LVL 35

Expert Comment

by:TimYates
ID: 16415660
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
 
LVL 37

Author Comment

by:zzynx
ID: 16415729
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16415746
I wouldn't use frames full stop ;-)

hehe

Tim
0
 
LVL 35

Expert Comment

by:TimYates
ID: 16415749
But what I meant was that the code could do with some tweaking...  it's a bit verbose at the moment... ;-)

Tim
0
 
LVL 37

Author Comment

by:zzynx
ID: 16435631
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
 
LVL 37

Author Comment

by:zzynx
ID: 16435913
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16435965
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
 
LVL 37

Author Comment

by:zzynx
ID: 16436124
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16436147
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16436237
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
 
LVL 37

Author Comment

by:zzynx
ID: 16436460
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
 
LVL 35

Expert Comment

by:TimYates
ID: 16436483
:-)
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 16470372
did you look at dhtmlgoodies yet? http://www.dhtmlgoodies.com

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

Might be useful..

ellandrd
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question