Team:ETH Zurich/project/overview/grid

From 2014.igem.org

(Difference between revisions)
Line 3: Line 3:
<html>
<html>
-
<script src="http://www.dyn-web.com/lib/js/page_v5.js" type="text/javascript"></script>
+
<title>Demo</title>
-
<link rel="stylesheet" href="http://www.dyn-web.com/css/tip_demos.css" type="text/css" />
+
<link rel="stylesheet" href="C:\Users\Claude\Desktop\css\ex.css" type="text/css">
-
<script src="http://www.dyn-web.com/js/dw_tooltip_c.js" type="text/javascript"></script>
+
<style type="text/css">
 +
/* optional styles */
 +
div#tipDiv {
 +
    background-color:#E1E5F1;
 +
    border:1px solid #667295;
 +
    padding:4px;
 +
    width:200px;
 +
}
 +
 
 +
</style>
 +
<script src="http://www.dyn-web.com/code/tooltips/js/dw_tooltip_c.js" type="text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
-
// for iOS
+
/* 2 functions that can be used to vary tooltip width according to image width:
-
DYN_WEB.Event.domReady( function(){ dw_Util.makeClickable('span.showTip'); } );
+
dw_Tooltip.wrapImageToWidth and dw_Tooltip.wrapToWidth
-
 
+
See www.dyn-web.com/code/tooltips/documentation2.php#wrapFn for info */
dw_Tooltip.defaultProps = {
dw_Tooltip.defaultProps = {
-
     supportTouch: true,
+
     //supportTouch: true, // set false by default
-
    klass: 'tooltip',
+
     wrapFn: dw_Tooltip.wrapImageToWidth
-
    showCloseBox: true,
+
-
    closeBoxImage: '/images/btns/close.gif'
+
-
}
+
-
 
+
-
// different class for touch devices
+
-
if ( dw_Util.isTouchDevice() ) {
+
-
     dw_Tooltip.defaultProps['klass'] = 'tipWithX';
+
}
}
 +
// Problems, errors? See http://www.dyn-web.com/tutorials/obj_lit.php#syntax
dw_Tooltip.content_vars = {
dw_Tooltip.content_vars = {
-
     img: {
+
     L1: {
-
         img: '/images/common/mtnlake.jpg',
+
         img: 'https://static.igem.org/mediawiki/2014/d/d9/ETH_Zurich_GridGlowing.png',
-
        w: 432,
+
         w: 80, // width of image
-
        h: 346,
+
         h: 24 // height of image
-
        wrapFn: dw_Tooltip.wrapImageToWidth
+
-
    },
+
-
   
+
-
    img_w: {
+
-
        img: '/images/common/falls.jpg',
+
-
         w: 321,
+
-
         h: 480,
+
-
        wrapFn: dw_Tooltip.wrapImageToWidth
+
-
    },
+
-
   
+
-
    img_txt1: {
+
-
        img: '/images/common/cranes.gif',
+
-
        txt: 'Cranes mandala',
+
-
        w: 160,
+
-
        wrapFn: dw_Tooltip.wrapImageOverText
+
-
    },
+
-
     img_txt2: {
+
     }
-
        img: '/images/common/mandala2.gif',
+
}
-
        txt: 'Yin-Yang mandala',
+
-
        w: 160,
+
-
        wrapFn: dw_Tooltip.wrapTextOverImage
+
-
    },
+
-
    img_txt3: {
+
</script>
-
        img: '/images/common/heron.gif',
+
-
        txt: 'Heron image created from a character font.',
+
-
        w: 210,
+
-
        wrapFn: dw_Tooltip.wrapTextByImage
+
-
    },
+
-
    img_cap: {
 
-
        caption: 'A Heron',
 
-
        img: '/images/common/heron.gif',
 
-
        txt: 'Heron image created from a character font.',
 
-
        w: 210,
 
-
        wrapFn: dw_Tooltip.wrapTextByImage
 
-
    },
 
-
    img_stk: {
+
<h1>Images in the Tooltip</h1>
-
        sticky: true,
+
-
        klass: 'tipWithX',
+
-
        caption: 'Image in a &quot;Sticky Tooltip&quot;',
+
-
        img: '/images/common/mtnlake3.jpg',
+
-
        txt: 'Demonstrating with a sticky tooltip positioned in the center of the window.',
+
-
        w: 440,
+
-
        wrapFn: dw_Tooltip.wrapImageOverText,
+
-
        positionFn: dw_Tooltip.positionWindowCenter
+
-
    }
+
-
}
 
-
 
-
 
-
</script>
 
-
<article>
 
<ul>
<ul>
-
     <li>Tooltip with <span class="showTip img_w">image</span></li>
+
     <li><a href="#" class="showTip L1">Link 1</a></li>
-
    <li>Tooltip with <span class="showTip img_txt1">image over text</span>, another with <span class="showTip img_txt2">text over image</span></li>
+
-
    <li>Tooltip with image and <span class="showTip img_txt3">text side by side</span>, another including a <span class="showTip img_cap">caption</span></li>
+
-
    <li>Large <span class="showTip img_stk">sticky</span> tooltip with image, caption and text description</li>
+
</ul>
</ul>

Revision as of 10:45, 30 September 2014

iGEM ETH Zurich 2014

Retrieved from "http://2014.igem.org/Team:ETH_Zurich/project/overview/grid"