From 70ed6c1e32be4a1bcca71ce1f4f226fb8f05f92b Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Wed, 9 Feb 2011 13:50:24 -0800 Subject: [PATCH] modified demo.css for expansion animations --- demo/demo.css | 11 ++++++++--- index.html | 19 ++++++++----------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index b52bc5e..5c607d6 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -50,7 +50,7 @@ h2 { h2.section { margin: 0; - padding: 20px 0px 0px 0px; + padding: 20px 0px 20px 0px; cursor: pointer; border-top: 1px dotted #ccc; -webkit-transition: color 0.15s linear; @@ -67,12 +67,16 @@ div.collapsed h2, div.expanded h2 { cursor: pointer; } +.last { margin-bottom: 0px !important; } +.first { margin-top: 0px; } + div.trans { border-top: 1px dotted #ccc; margin: 0px 0px 20px 0px; } ol#secrets { - padding: 0px 0px 20px 0px; + padding: 0px; + margin: 0px; } div.expanded h2:before { content: '-'; @@ -93,13 +97,14 @@ div.expanded h2:before, div.collapsed h2:before { div.collapsable { overflow: hidden; clear: both; - margin-bottom: 20px; -moz-transition: height .2s ease-out; -webkit-transition: height .2s ease-out; transition: height .2s ease-out; } div.collapsable div { + padding-bottom: 20px; + margin-bottom: -20px; height: auto; } diff --git a/index.html b/index.html index fb2cd3f..91bf68a 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,4 @@ - - - + gui-dat @@ -183,7 +180,7 @@ window.onload = function() {

The simplest way to save your parameters is via GUI.saveURL(). This method directs your browser to a URL containing the current GUI settings.

- 
+		    	
 // Make a button for the url function
 gui.add(GUI, "saveURL");
@@ -216,7 +213,7 @@ var gui = new GUI(); gui.add(someObject, "someProperty"); gui.add(someObject, "someOtherProperty"); -

Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.

+

Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.

@@ -226,7 +223,7 @@ gui.add(someObject, "someOtherProperty");

Choosing from a list of values

-
gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
+
gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
 
 // Alternatively, you can specify custom labels using object syntax
 gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
@@ -247,7 +244,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
    alert("You just finished changing me to " + newValue);
 });

 				
Finally, if you'd like to do a little something extra when a function is called, use the following:

-		    	
gui.add(obj, "functionName").onFire(function() {
+		    	
gui.add(obj, "functionName").onFire(function() {
    alert("You called a function with gui-dat");
 });
@@ -258,7 +255,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});

Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the listen() method.

- 
gui.add(obj, "changingProperty").listen();
+ 
gui.add(obj, "changingProperty").listen();
@@ -278,7 +275,7 @@ setInterval(function() { }, 1000 / 60);

Alternatively, you can forego calling listen() on individual controllers, and instead choose to monitor changes in all values controlled by your gui.

- 
+		    	
 gui.autoListen = false; // disables internal interval
 gui.add(obj, "add");
 gui.add(obj, "lotsa");
@@ -305,7 +302,7 @@ gui1.name("Utilities");
 gui2.name("Camera Placement");

 
 		    	
By default, gui-dat panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.

-		    	
+		    	
 // Notice this belongs to the GUI class (uppercase) 
 // and not an instance thereof.
 GUI.autoPlace = false;