Team:METU-Ankara/Extras

From 2011.igem.org

(Difference between revisions)
(Created page with "/** * nmcDropDown plugin - v1.0.5 * Author: Eli Van Zoeren * Copyright (c) 2009 New Media Campaigns * http://www.newmediacampaigns.com * ------------------------------------...")
Line 1: Line 1:
-
/**
 
-
* nmcDropDown plugin - v1.0.5
 
-
* Author: Eli Van Zoeren
 
-
* Copyright (c) 2009 New Media Campaigns
 
-
* http://www.newmediacampaigns.com
 
-
* ---------------------------------------------
 
-
* Usage: $('#nav').nmcDropDown({[options]});
 
-
*
 
-
* See below for configuration options. If you
 
-
* don't pass in any options, the plugin will
 
-
* Use reasonable defaults.
 
-
*
 
-
* Dependancy: jQuery 1.2.6+
 
-
* Optional depenancy: hoverIntent plugin
 
-
*  http://cherne.net/brian/resources/jquery.hoverIntent.html 
 
-
**/
 
-
(function($) {
 
-
    $.fn.nmcDropDown = function(options) {
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
        // build main options before element iteration
+
-
        var opts = $.extend({}, $.fn.nmcDropDown.defaults, options);
+
<head>
-
 
+
    <title>nmcDropDown Example Page</title>
-
        // iterate each matched element
+
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
         return this.each(function() {
+
    <meta name="language" content="en" />
-
            var menu = $(this);
+
-
             submenus = menu.children('li:has('+opts.submenu_selector+')');
+
    <link href="css/all.css" rel="stylesheet" type="text/css" media="all" />
 +
    <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
 +
    <!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
 +
   
 +
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 +
    <script src="js/site.js" type="text/javascript"></script>
 +
</head>
 +
 +
<body>
 +
    <div id="wrapper">
 +
          
 +
        <div id="header">
 +
             <h2 id="logo"><a href="{$base_url}">Site Name</a></h2>
              
              
-
             if (opts.fix_IE) {
+
             <ul id="nav">
-
                 // Fix IE 6+7 z-index bug
+
                 <li><a href="#">Item One</a>
-
                menu.css('z-index', 51)
+
                  <ul>
-
                     .parents().each(function(i) {
+
                    <li><a href="#">Sub-menu Item 1</a></li>
-
                        if ($(this).css('position') == 'relative') {
+
                    <li><a href="#">Sub-menu Item 2</a></li>
-
                            $(this).css('z-index', (i + 52));
+
                    <li><a href="#">Sub-menu Item 3</a></li>
-
                        }
+
                     <li><a href="#">Sub-menu Item 4</a></li>
-
                     });
+
                  </ul>
-
                 submenus.children(opts.submenu_selector).css('z-index', 50);
+
                </li>
-
            }
+
              <li><a href="#">Item Two</a>
-
+
                  <ul>
-
            // Function that is called to show the submenu
+
                    <li><a href="#">Sub-menu Item 1</a></li>
-
            over = function(e) {
+
                    <li><a href="#">Sub-menu Item 2</a></li>
-
                $(e || this)
+
                    <li><a href="#">Sub-menu Item 3</a></li>
-
                .addClass(opts.active_class)
+
                     <li><a href="#">Sub-menu Item 4</a></li>
-
                     .children(opts.submenu_selector).animate(opts.show, opts.show_speed);
+
                  </ul>
-
                 return false;
+
                 </li>
-
            }
+
            <li><a href="#">Item Three</a>
-
+
                  <ul>
-
            // Function that is called to hide the submenu
+
                    <li><a href="#">Sub-menu Item 1</a></li>
-
            out = function(e) {
+
                    <li><a href="#">Sub-menu Item 2</a></li>
-
            $(e || this)
+
                    <li><a href="#">Sub-menu Item 3</a></li>
-
            .removeClass(opts.active_class)
+
                     <li><a href="#">Sub-menu Item 4</a></li>
-
                     .children(opts.submenu_selector).animate(opts.hide, opts.hide_speed);
+
                  </ul>
-
                 return false;
+
                 </li>
-
             }
+
            <li><a href="#">Item Three</a>
-
+
                  <ul>
-
            // Show and hide the sub-menus
+
                    <li><a href="#">Sub-menu Item 1</a></li>
-
             if (opts.trigger == 'click') {
+
                    <li><a href="#">Sub-menu Item 2</a></li>
-
                 submenus
+
                    <li><a href="#">Sub-menu Item 3</a></li>
-
                    .click(function(event) {
+
                     <li><a href="#">Sub-menu Item 4</a></li>
-
                    if ($(event.target).parent().get(0) == this) {
+
                  </ul>
-
                    event.preventDefault();
+
                 </li>
-
                    $(this).hasClass(opts.active_class) ? out(this) : over(this);
+
             </ul>
-
                    }
+
        </div>
-
                    })
+
       
-
                    .children(opts.submenu_selector).hide();
+
        <div id="content">
-
            } else if ($().hoverIntent) {
+
             <div id="body">
-
                 submenus
+
                 <h1>Page Title</h1>
-
                    .hoverIntent({
+
               
-
                        interval: opts.show_delay,  
+
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit. Sed felis sem, venenatis at ullamcorper a, ornare sit amet nunc. Nunc id massa turpis. In dolor dui, ultricies sit amet mattis vel, cursus non eros. <a href="#">Pellentesque ut mi arcu</a>, ac scelerisque dolor. Phasellus neque nibh, tincidunt quis mattis vel, scelerisque et metus.</p>
-
                        over: over,  
+
               
-
                        timeout: opts.hide_delay,
+
                <p>Nullam fermentum pulvinar porta. In hac habitasse platea dictumst. Phasellus non nunc diam, in lacinia dolor. Cras nec eros in metus elementum rhoncus. Phasellus viverra malesuada est, eu pharetra sapien mollis at.</p>
-
                        out: out
+
   
-
                    }).children(opts.submenu_selector).hide();
+
    <h2>Nam accumsan dui at neque malesuada</h2>
-
             } else {
+
                  
-
                 submenus
+
                <p>Curabitur vitae neque a lacus malesuada porta. Sed non condimentum risus. Nam malesuada, erat quis facilisis consectetur, neque felis varius ante, vel egestas dui urna a diam.</p>
-
                     .hover(over, out)
+
            </div>
-
                     .children(opts.submenu_selector).hide();
+
           
-
            }
+
             <div id="sidebar">
-
        });
+
                 <ul id="sidebarNav">
-
    };
+
                     <li><a href="#">Item One</a>
-
 
+
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit.</p>
-
    // Default options
+
                     </li>
-
    $.fn.nmcDropDown.defaults = {
+
                  <li><a href="#">Item Two</a>
-
        trigger: 'hover',          // Event to show and hide sub-menu - hover or click
+
                      <p>Nullam fermentum pulvinar porta. In hac habitasse platea dictumst. Phasellus non nunc diam, in lacinia dolor.</p>
-
         active_class: 'open',      // Class to give open menu items
+
                    </li>
-
         submenu_selector: 'ul',     // The element immediately below the <li> containing the sub-menu
+
                <li><a href="#">Item Three</a>
-
        show: {opacity: 'show'},   // Effect(s) to use when showing the sub-menu
+
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit. Sed felis sem, venenatis at ullamcorper a, ornare sit amet nunc.</p>
-
        show_speed: 300,            // Speed of the show transition
+
                    </li>
-
        show_delay: 50,            // Delay before the sub-menu is show (requires HoverIntent)
+
                <li><a href="#">Item Three</a>
-
        hide: {opacity: 'hide'},    // Effect(s) to use when hiding the sub-menu
+
                      <p>Phasellus non nunc diam, in lacinia dolor. Cras nec eros in metus elementum rhoncus. Phasellus viverra malesuada est, eu pharetra sapien mollis at.</p>
-
        hide_speed: 200,            // Speed of the hide transition
+
                    </li>
-
        hide_delay: 100,            // Delay before the sub-menu is hidden (requires HoverIntent)
+
                </ul>
-
        fix_IE: true                // IE 6 and 7 have problems with z-indexes. This tries to fix them
+
            </div>
-
     };
+
         </div>
-
 
+
          
-
})(jQuery);
+
     </div>
 +
<script type="text/javascript">  
 +
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-499901-76']);
 +
  _gaq.push(['_trackPageview']);
 +
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 +
</script>
 +
</body>
 +
</html>

Revision as of 22:57, 5 August 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> nmcDropDown Example Page

Page Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu metus velit. Sed felis sem, venenatis at ullamcorper a, ornare sit amet nunc. Nunc id massa turpis. In dolor dui, ultricies sit amet mattis vel, cursus non eros. Pellentesque ut mi arcu, ac scelerisque dolor. Phasellus neque nibh, tincidunt quis mattis vel, scelerisque et metus.

Nullam fermentum pulvinar porta. In hac habitasse platea dictumst. Phasellus non nunc diam, in lacinia dolor. Cras nec eros in metus elementum rhoncus. Phasellus viverra malesuada est, eu pharetra sapien mollis at.

Nam accumsan dui at neque malesuada

Curabitur vitae neque a lacus malesuada porta. Sed non condimentum risus. Nam malesuada, erat quis facilisis consectetur, neque felis varius ante, vel egestas dui urna a diam.