Difference between revisions of "Interface"

From Wikicliki
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
* Corner - see the top right hand corner of http://sorgalla.com/jcarousel/ (jquery)
 
* Corner - see the top right hand corner of http://sorgalla.com/jcarousel/ (jquery)
 
* Tool tip - [http://craigsworks.com/projects/qtip/ qTip] | [http://craigsworks.com/projects/simpletip Simpletip]
 
* Tool tip - [http://craigsworks.com/projects/qtip/ qTip] | [http://craigsworks.com/projects/simpletip Simpletip]
 +
* Slideshow/Gallery - [http://slideshowpro.net/products/slideshowpro/slideshowpro_for_flash Slideshowpro]
 +
* Wall
 +
* Chunk Hopper - eg: http://www.treehugger.com/files/2009/12/aged-obama-poster-says-im-sorry.php#ch08
  
 +
[[Image:chunkhopper.png]]
  
 
== qTip ==
 
== qTip ==
  
<pre>$("#pam").qtip({
+
<pre><link rel="stylesheet" href="css/lightbox.css" type="text/css" />
   content: 'Click here to find out more about Prudential Asset Management',
+
<style>
  style: {  
+
.qtip-content {font-family:arial; font-size:11px}
      width: 150,
+
</style>
 +
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
 +
<script type="text/javascript">     
 +
$(document).ready(function() {
 +
$("#pam").qtip({
 +
   content: 'Click here to find out more',
 +
  style: {
 +
    width: 100,
 
       padding: 5,
 
       padding: 5,
       background: '#eeeeee',
+
       background: '#dddddd',
 
       color: 'black',
 
       color: 'black',
 
       textAlign: 'center',
 
       textAlign: 'center',
 
       border: {
 
       border: {
         width: 7,
+
         width: 8,
 
         radius: 5,
 
         radius: 5,
 
         color: '#dddddd'
 
         color: '#dddddd'
 
       },
 
       },
 
       tip: {  
 
       tip: {  
       corner: 'topLeft',
+
       corner: 'topMiddle',
 
       },
 
       },
 
       name: 'dark'
 
       name: 'dark'
 
   },
 
   },
position: { adjust: { x: -60, y: -50 } }
+
position: { adjust: { x: -105, y: -50 } },
 +
hide: { delay: 300 }
 
});
 
});
 
});
 
});
 +
</script>
 
</pre>
 
</pre>
 +
 +
 +
==Accordian ==
 +
 +
<pre><script language="javascript" type="text/javascript">
 +
    $('#tblAc').accordion({
 +
        active: false,
 +
        header: '.cs_ac_header',
 +
        autoheight: false
 +
    });
 +
    $('.cs_ac_content').eq(0).show();  // this is for selecting the first item (eq)
 +
</script>  </pre>

Latest revision as of 02:21, 10 December 2009

An interface defines the communication boundary between two entities, such as a piece of software, a hardware device, or a user. It generally refers to an abstraction that an entity provides of itself to the outside.

Minority report style interface: http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html

Interface ideas

Chunkhopper.png

qTip

<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
<style>
 	.qtip-content {font-family:arial; font-size:11px}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> 
<script type="text/javascript">       		
$(document).ready(function() {
$("#pam").qtip({
   content: 'Click here to find out more',
	  style: {  
   	  width: 100,
      padding: 5,
      background: '#dddddd',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 8,
         radius: 5,
         color: '#dddddd'
      },
      tip: { 
       corner: 'topMiddle',
      },
      name: 'dark'
   },
	position: { adjust: { x: -105, y: -50 } },
	hide: { delay: 300 }
});
});
</script>


Accordian

<script language="javascript" type="text/javascript">
    $('#tblAc').accordion({
        active: false,
        header: '.cs_ac_header',
        autoheight: false
    });
    $('.cs_ac_content').eq(0).show();  // this is for selecting the first item (eq)
</script>