Team:Freiburg/Project/toolkit

From 2013.igem.org

(Difference between revisions)
Line 10: Line 10:
############################################################################## -->
############################################################################## -->
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
<script>
-
<script language="javascript" type="text/javascript">
+
    var d = document;
-
$(document).ready(function(){
+
    var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
-
+
    var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
-
$("#check1, #check2, #check3, #check4").click(function(){
+
    onload = function() {
-
    $(this.value).toggle("slow");
+
       
-
});
+
        var body = gebtn(d,'body')[0];
-
   
+
        body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
-
});
+
       
 +
        if (!d.getElementById || !d.createTextNode) return;
 +
        var ls = gebtn(d,'label');
 +
        for (var i = 0; i < ls.length; i++) {
 +
            var l = ls[i];
 +
            if (l.className.indexOf('label_') == -1) continue;
 +
            var inp = gebtn(l,'input')[0];
 +
            if (l.className == 'label_check') {
 +
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
 +
                l.onclick = check_it;
 +
            };
 +
            if (l.className == 'label_radio') {
 +
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
 +
                l.onclick = turn_radio;
 +
            };
 +
        };
 +
    };
 +
    var check_it = function() {
 +
        var inp = gebtn(this,'input')[0];
 +
        if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
 +
            this.className = 'label_check c_on';
 +
            if (safari) inp.click();
 +
        } else {
 +
            this.className = 'label_check c_off';
 +
            if (safari) inp.click();
 +
        };
 +
    };
 +
    var turn_radio = function() {
 +
        var inp = gebtn(this,'input')[0];
 +
        if (this.className == 'label_radio r_off' || inp.checked) {
 +
            var ls = gebtn(this.parentNode,'label');
 +
            for (var i = 0; i < ls.length; i++) {
 +
                var l = ls[i];
 +
                if (l.className.indexOf('label_radio') == -1) continue;
 +
                l.className = 'label_radio r_off';
 +
            };
 +
            this.className = 'label_radio r_on';
 +
            if (safari) inp.click();
 +
        } else {
 +
            this.className = 'label_radio r_off';
 +
            if (safari) inp.click();
 +
        };
 +
    };
</script>
</script>
 +
 +
 +
 +
 +
 +
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
 +
<script type="text/javascript">var pageTracker = _gat._getTracker("UA-301801-11"); pageTracker._trackPageview();</script>
 +
Line 76: Line 126:
<div id="main_contant" style="height:500px;">
<div id="main_contant" style="height:500px;">
-
<p>
+
<div id="sizer">
-
<input type="radio" name="check1" value="#div1" id="check1" />
+
    <form action="#" method="get" accept-charset="utf-8">
-
<br />
+
        <fieldset class="checkboxes">
-
<div id="div1" style="display: none;">DIV Container 1</div>
+
            <label class="label_check" for="checkbox-01"><input name="sample-checkbox-01" id="checkbox-01" value="1" type="checkbox" checked /> I agree to the terms &#38; conditions.</label>
-
<input type="radio" name="check2" value="#div2" id="check2" />
+
            <label class="label_check" for="checkbox-02"><input name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox" /> Please send me regular updates.</label>
-
<br />
+
        </fieldset>
-
<div id="div2" style="display: none;">DIV Container 2</div>
+
        <fieldset class="radios">
-
<input type="radio" name="check3" value="#div3" id="check3" />
+
            <label class="label_radio" for="radio-01"><input name="sample-radio" id="radio-01" value="1" type="radio" checked /> This is option A...</label>
-
<br />
+
            <label class="label_radio" for="radio-02"><input name="sample-radio" id="radio-02" value="1" type="radio" /> and this is option B...</label>
-
<div id="div3" style="display: none;">DIV Container 3</div>
+
            <label class="label_radio" for="radio-03"><input name="sample-radio" id="radio-03" value="1" type="radio" /> or simply choose option C</label>
-
<input type="radio" name="check4" value="#div4" id="check4" />
+
        </fieldset>
-
<div id="div4" style="display: none;">DIV Container 4</div>
+
    </form>
-
</p>
+
    <div id="footer">
 +
        <a href="http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/">&#8592; Full how-to article</a>
 +
        <a href="jquery.html">jQuery version &#8594;</a>
 +
    </div>
 +
</div>

Revision as of 22:18, 17 September 2013


Retrieved from "http://2013.igem.org/Team:Freiburg/Project/toolkit"