Template:Kyoto Foreground

From 2011.igem.org

(Difference between revisions)
Line 57: Line 57:
#header {
#header {
-
  top: 0px;  padding: 0px;
+
  top: 0px;  padding: 5px;
  margin: -5px auto auto -26px;
  margin: -5px auto auto -26px;
-
  height: 155px;  width: 825px;
+
  height: 145px;  width: 815px;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
-
  background-color: #000000;
+
  background-color: #eeeeee;
 +
}
 +
 
 +
.top_panel {
 +
    background-color: #000000;
 +
}
 +
.top_panel * {
 +
    margin: 0px !important;
 +
}
 +
.top_panel a img {
 +
    float: right;
 +
}
 +
 
 +
/******* GALLERY *******/
 +
#gallery {
 +
    position: absolute;
 +
    width: 815px !important;
 +
    height: 145px !important;
 +
    padding: 0px;
 +
    overflow : hidden;
 +
    background-color: #ffffff;
 +
}
 +
 
 +
#gallery_base {
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding:0px;
 +
    margin: 0px;
 +
}
 +
 
 +
.gallery_panel {
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    margin: 0px;
 +
    padding: 0px;
}
}
-
#header a {
+
.gallery_panel * {
-
width: 100%;
+
    margin: 10px;
}
}
-
#header a img {
+
.red {
-
float: right;
+
    color: #00ffff;
 +
    background-color: #aa0000;
}
}
-
/******** menu ********/
+
/******** MENU ********/
#menu {
#menu {
  position: absolute;
  position: absolute;
Line 114: Line 151:
<div id="header">
<div id="header">
-
<a href="https://2011.igem.org/Team:Kyoto" title="return to main page.">
+
    <div id="gallery">
-
  <img src="https://static.igem.org/mediawiki/2011/2/27/%E4%BA%AC%E5%A4%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E5%85%89.jpg">
+
        <div id="gallery_base">
-
</a>
+
            <div class="gallery_panel top_panel">
 +
                <a href="https://2011.igem.org/Team:Kyoto" title="return to main page.">
 +
                    <img src="https://static.igem.org/mediawiki/2011/2/27/%E4%BA%AC%E5%A4%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E5%85%89.jpg">
 +
                </a>
 +
            </div>
 +
            <div class="gallery_panel">
 +
                <h3>iGEM Kyoto</h3>
 +
                <p>We create Carnivorous E.coli !</p>
 +
            </div>
 +
            <div class="gallery_panel red">
 +
                <h3>Carnivorous E.coli</h3>
 +
                <p>Carnivorous E.coli attracts bugs and hunts them.</p>
 +
            </div>
 +
        </div>
 +
    </div>
</div>
</div>
<!-- end header -->
<!-- end header -->
Line 167: Line 218:
   active:$(".</html>{{{active_page|home}}}<html>")
   active:$(".</html>{{{active_page|home}}}<html>")
  });
  });
 +
function init() {
 +
    var panels = $(".gallery_panel");
 +
    var c = panels.first();
 +
    var left = 0;
 +
    for (var i = 0; i < panels.length; i++) {
 +
        c.css("left",left+"px");
 +
        left += c.outerWidth();
 +
        c = c.next();
 +
    }
 +
}
 +
 +
function change(change_time, delay_time) {
 +
    var c = $(".gallery_panel").first();
 +
    gallery_unit(c,0, change_time, delay_time);
 +
}
 +
 +
function gallery_unit(c, left, change_time, delay_time) {
 +
    var b = $("#gallery_base");
 +
    b.animate({
 +
        left : left + "px"
 +
    },change_time,function() {
 +
    }).delay(delay_time);
 +
    left -= c.outerWidth();
 +
    c = c.next(".gallery_panel");
 +
    if (!c.is(".gallery_panel")) {
 +
        c = $(".gallery_panel").first();
 +
        left = 0;
 +
    }
 +
    gallery_unit(c, left,change_time,delay_time);
 +
}
 +
 +
init();
 +
change(800,5000);
});
});
</script>
</script>
</html>
</html>

Revision as of 09:02, 29 September 2011

Retrieved from "http://2011.igem.org/Template:Kyoto_Foreground"