0

I have created a template that contains a panel and a content. Depending on the template's class (Top, Left, Right, or Bottom) the panel will have a different position. The expand and collapse animations are performed using transition and classes.

EDIT: Here is a fiddle: http://jsfiddle.net/ckkVx/2/ /EDIT

Here is the HTML code:

<!DOCTYPE html> <html> <head> <link href="../Css/reset.dev.css" type="text/css" rel="stylesheet"> <link href="../Css/V_PanelTemplate.dev.css" type="text/css" rel="stylesheet"> <script src="../Js/jquery-1.9.1.min.js" type="text/javascript"> <script src="../Js/V_PanelTemplate.dev.js" type="text/javascript"> </head> <body class="PanelTemplate Bottom"> <div class="Panel AutoHide Collapsed">PANEL</div> <div class="Content Expanded">CONTENT</div> </body> </html>

And here is the CSS code:

#CHARSET "UTF-8"; .PanelTemplate { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .PanelTemplate > .Panel, .PanelTemplate > .Content { position: absolute; -webkit-transition: ease-in-out 400ms; -moz-transition: ease-in-out 400ms; -ms-transition: ease-in-out 400ms; -o-transition: ease-in-out 400ms; transition: ease-in-out 400ms; } .PanelTemplate.Top > .Panel, .PanelTemplate.Bottom > .Panel { height: 100px; left: 0; right: 0; } .PanelTemplate.Left > .Panel, .PanelTemplate.Right > .Panel { width: 200px; top: 0; bottom: 0; } .PanelTemplate.Top > .Content, .PanelTemplate.Bottom > .Content { left: 0; right: 0; } .PanelTemplate.Left > .Content, .PanelTemplate.Right > .Content { top: 0; bottom: 0; } .PanelTemplate.Top > .Panel { top: -90px; } .PanelTemplate.Left > .Panel { left: -190px; } .PanelTemplate.Right > .Panel { right: -190px; } .PanelTemplate.Bottom > .Panel { bottom: -90px; } .PanelTemplate.Top > .Panel.Expanded { top: 0; } .PanelTemplate.Left > .Panel.Expanded { left: 0; } .PanelTemplate.Right > .Panel.Expanded { right: 0; } .PanelTemplate.Bottom > .Panel.Expanded { bottom: 0; } .PanelTemplate.Top > .Content { top: 100px; bottom: 0; } .PanelTemplate.Left > .Content { left: 200px; right: 0; } .PanelTemplate.Right > .Content { right: 200px; left: 0; } .PanelTemplate.Bottom > .Content { bottom: 100px; top: 0; } .PanelTemplate.Top > .Content.Expanded { top: 10px; } .PanelTemplate.Left > .Content.Expanded { left: 10px; } .PanelTemplate.Right > .Content.Expanded { right: 10px; } .PanelTemplate.Bottom > .Content.Expanded { bottom: 10px; } /* Test CSS */ .PanelTemplate > .Panel { background: #777; color: #FFF; } .PanelTemplate > .Content { background: #333; color: #FFF; }

And, if needed, the JavaScript code:

(function($) { $(document).ready(function() { var CLOSE_DELAY = 1000; var $panel = $('.PanelTemplate > .Panel.AutoHide').first(); $content = $('.PanelTemplate > .Content').first(); $panel.mouseenter(function() { $panel .addClass('Expanded') .removeClass('Collapsed') .data('isMouseOver', true); $content .removeClass('Expanded') .addClass('Collapsed'); }).mouseleave(function() { $panel.data('isMouseOver', false); // Waiting a short time in case the mouse accidently leaves var timeout = setTimeout(function() { // If it's no longer over after time out, closing if( ! $panel.data('isMouseOver')) { $panel .removeClass('Expanded') .addClass('Collapsed'); $content .addClass('Expanded') .removeClass('Collapsed'); } clearTimeout(timeout); }, CLOSE_DELAY); }); }); })(jQuery);

When I'm using the classes Top or Left on my template, everything works as intended, but when I use either Right or Bottom, the panel, while moving out of the body, expends the window and causes scroll bars to appear.

I read in another question related to overflow:hidden than it could be due to a relatively positioned element, but I don't have any. I also tried to position the html tag and add overflow:hidden to it too, but it didn't help either.

What can I do to prevent this ?

Improve this question
3
  • 2
    Can you make a simplified fiddle please Commented Apr 5, 2013 at 20:46
  • why is there so much css? there is no .PanelTemplate.Left and Right in your html Commented Apr 5, 2013 at 20:46
  • to Huangism It is as simple as it can be. I added nothing that's not required except background and text colors, and dumb text for the panel and the content. Here is a fiddle if you want : jsfiddle.net/ckkVx/1 to caramba There is no Right or Left in the HTML because it is meant to only use one at a time (i.e the panel can't be both on the left and the right for example). Here is an example with Bottom, but i could also have used Left, Right, or Top instead, that's just one of the four possibilities. Bottom and Right are the ones that don't work as intended. Commented Apr 5, 2013 at 20:53

2 Answers 2

Reset to default
2

This should fix your issue-

body { max-width:100%; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot for your help. This is surprising me, when i tried doing this before i post this question, it didn't work, and now it does, i don't get it. :o Anyway, it works now, thanks again !
1

The problem is in the CSS. Vector's answer with max-width: 100%; is great, but if that doesn't work then use the !Important override feature. For Example:

.PanelTemplate { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; !Important }

That will help override the other rules on overflow!

Improve this answer

4 Comments

In how does this add anything to the existing answer?
I was suggesting that if the Max-width didn't work then try the !Important rule. It helps give priority to overflow: hidden over the other rules in the .paneltemplate.
Since the OP accepted Vector's answer it seems like it helped. Else you might write something like "If Vector's answer doesn't help, try ..."
Sorry about that,I just edited the answer! Thanks for spotting the confusion!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.