Download slide in pane

Demo | Demo 2 | Demo 3 | Demo 4

Bookmark and Share

Put this into your <HEAD> section

Put this somewhere in your <BODY> section

Configuration

You use CSS(The part between <STYLE type="text/css"> and </STYLE>) to configure the colors and fonts used in the slide in pane. Look at the comments there for more help.

Javascript variable are used to specify if:

  • Sliding should be used or not. If it's not used, it will pop out instantly.
  • The speed of the sliding effect
  • The width of the panel
  • If your main content should be pushed to the right when sliding

This is the default settings for these variables:
var panelWidth = 150; // Width of help panel
var slideSpeed = 15; // Higher = quicker slide
var slideTimer = 10; // Lower = quicker slide
var slideActive = true; // Slide active?
var initBodyMargin = 0; // Left or top margin of your tag (left if panel is at the left, top if panel is on the top)
var pushMainContentOnSlide = true; // Push your main content to the right when sliding
var panelPosition = 0; // 0 = left , 1 = top

Update content of left panel dynamically

You can update the content of the left panel by calling the function setLeftPanelContent. Example:
<A href="#" onclick="setLeftPanelContent('Hello <b>There</b>');return false">Show help

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Comments

Hawkeye
I liked everything about the concept and the demo does work, surprisingly. However, plan on spending some time with JSlint to clean up the code. After seeing all the errors, you wonder, how did it did work.

JSlint found so many errors which included else statements without brackets, missing matching brackets and that is just to start. How anyone would want to use these scripts, as is, without using a tool as JSlint is beyond me. I take pride in verifying my code is error free, otherwise, it would not be uploaded and published.

Concept, proof of concept, I would rate 5 out of 5. Coding practices and verifying code with available tools. A flat ZERO.

Code like this is going to give dhtmlgoodies a very bad name.

Someone needs to test all the code on this site.

I felt I had to call it as I see it.

Thanks,




Hawkeye at 10:17PM, 2013/04/26.
Admin comment
DHTMLGoodies
Hawkeye wrote: #
I liked everything about the concept and the demo does work, surprisingly. However, plan on spending some time with JSlint to clean up the code. After seeing all the errors, you wonder, how did it did work.

JSlint found so many errors which included else statements without brackets, missing matching brackets and that is just to start. How anyone would want to use these scripts, as is, without using a tool as JSlint is beyond me. I take pride in verifying my code is error free, otherwise, it would not be uploaded and published.

Concept, proof of concept, I would rate 5 out of 5. Coding practices and verifying code with available tools. A flat ZERO.

Code like this is going to give dhtmlgoodies a very bad name.

Someone needs to test all the code on this site.

I felt I had to call it as I see it.

Thanks,






Hawkeye,

Thanks for the post. Yes, there are some old scripts where clean code wasn't my primary focus. I have cleaned up some of the scripts, but haven't been able to refactor them all. So, yes there are some scripts from 2005, 2006 which doesn't pass a lint test :)

However, if you take a look at the newest scripts, you will see a much more focus on clean code. That's also a big focus for the scripts on my other website ludojs.com.

I will try to find time to clean up more of my old scripts.

Alf
Dhtmlgoodies.com
DHTMLGoodies at 01:29PM, 2013/05/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com