3
\$\begingroup\$

What do you think of http://websilon.org/? Are there things that can be improved? Is there something missing? See the source of the webpages for code.

<!DOCTYPE HTML>
<html><head>
<title>Websilon - Mathematical Knowledge Base</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="websilon, mathematics, math, knowlegde" />
<meta name="description" content="Websilon - Mathematical knowledge base" />
<meta http-equiv="Content-Language" content="en" />
<meta name="rating" content="safe for kids" />
<meta name="copyright" content="Websilon.org" />
<meta name="publisher" content="Websilon.org" />
<meta name="author" content="Websilon.org" />
<link rel="shortcut icon" href="/favicon.ico">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="/css/page/1.css" />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script src="/module/jquery/js/jquery-1.6.2.min.js" /></script>
<script src="/module/jquery/js/jquery-ui-1.8.16.custom.min.js" /></script>
<link rel="stylesheet" href="/module/jquery/css/smoothness/jquery-ui-1.8.16.custom.css" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"]]}
});
</script>
<script type="text/javascript" src="/module/mathjax/MathJax.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28191597-1']);
  _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>
</head>
<body>
    <style>
.menu {
    margin: 0;
    padding: 0;
}

.menu .content {
    width: 98%;
    padding: 0;
    margin: 1%;
    margin-top: 0;
    margin-bottom: 0;
}

.menu .content button {
    margin-right: 10px;
}

.menu {
    display: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 80%;
}

.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 200px;
    position: absolute;
    left: 0;
    top: 50px;
    border-top: 0;
    font-size: 90%;
    z-index: 99999;
    background-color: #252525;
}

.menu ul li a:active,
.menu ul li a:hover,
.menu ul li a:link,
.menu ul li a:visited,
.menu ul li {
    padding: 0px 20px;
    text-decoration: none;
    color: #AFAFAF;
}

.menu ul li {
    padding: 0;
}

.menu ul li:hover > a {
    color: #FFFFFF;
}

.menu ul li:hover {
    background-color: #0B5ED9;
}

.menu ul li a {
    display: block;
}

.menu > li a:active,
.menu > li a:hover,
.menu > li a:link,
.menu > li a:visited,
.menu > li {
    font-size: 120%;
    text-decoration: none;
    color: #FFFFFF;
}

.menu > li:hover {
    background-color: #666666;
}

.menu > li {
    position: relative;
    float: left;
}

.menu > li > a {
    display: block;
    padding: 15px;
    padding-top: 0;
    padding-bottom: 0;
    height: 50px;
    width: 100%;
}

.menu > li:hover > ul {
    display: block;
}

.menu li {
    list-style-type: none;
}

hr {
    width: 100%;
    border: 1px solid #CCCCCC;
    border-bottom: 0;
}</style>

<script>
function TopMenu(selector) {

    var mainClass = this;
    var environment = selector;

    $(selector).css('z-index', 999999);

    $(window).scroll(function(e) {
        if ($(window).scrollTop() > 0) {
            $(selector).css({
                position: 'fixed',
                top: '0'
            });
        } else {
            $(selector).css({
                position: 'static'
            });
        }
    });

    $(selector).css('display', 'none');

    $(selector).ready(function() {
        if (typeof(mainClass.onLoad) == 'function') {
            mainClass.onLoad($(this));
        }
        $(selector).css('display', 'block');
    });

    /**
     * Get the height of the menu.
     *
     * @return  Menu height (int, pixels)
     */
    this.getHeight = function() {
        return parseInt($(selector).outerHeight());
    }

}</script>

<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Me</a>
    <ul>
        <li><a href="http://websilon.org/users/1/kevin/">Dashboard</a></li>
                <li><a href="/user/edit/">Settings</a></li>
        <li><a href="/user/logout/">Log out</a></li>
    </ul>
</li>
<li><a href="#">Talk</a>
<ul>
        <li><a href="/talk/">Discussions</a></li>
    <li><a href="/talk/create/">New discussion</a></li>
</ul>
</li>
<li><a href="#">Knowledge</a>
    <ul>
        <li><a href="/kb/">Overview</a></li>
        <li><a href="/kb/create/">Create</a></li>
    </ul>
</li>
</ul>
<script>
TopMenu('.menu');
</script>
    <div id="content">
        <h1>Websilon.org</h1>

            <p>
            Websilon is an open knowledge platform. It's a dynamic study environment. Books are static; if there is new knowledge, it will take a while before you can read it in books.
            </p>
            <p>
            Now we are in developing stage. You can partly use it and share some knowledge. If you would like to join or give ideas, please visit the <a href="/talk/view/1">Development</a> discussion.
            </p>

    </div>
</body>
</html>
\$\endgroup\$
5
\$\begingroup\$

Don't mix up html, css and javascript. Put the css and javascript into separate files and externally reference them from the html files, this will:

  1. clean up your html files
  2. allow the browser to cache the css and javascript so the files don't have to be re-downloaded for each page visit in your site

Don't use <a> elements if you don't want to link something:

<li><a href="#">Talk</a>

Instead, I'd suggest to link to /talk/, or, if that is not reasonable, use the <span> tag. Links to # are to use when you want to link to the top of the current page.

\$\endgroup\$
  • \$\begingroup\$ Thanks :). Problem is that these pages are auto-generated by Codeigniter and my view files. So seperating the Javascript/CSS files will be hard. And those links; when you visit the website with a smartphone, and you touch the menu button, then you will go to that page, right? So they will not be able to see the submenu that now will appear. \$\endgroup\$ – www.data-blogger.com Jan 10 '12 at 14:01
  • \$\begingroup\$ Then don't use <a>. ;-) \$\endgroup\$ – Yogu Jan 10 '12 at 18:24
1
\$\begingroup\$

Not much more to say but, I only see ul-elements using the menu-class.

Is this really supposed to work? If not, then you can remove some excessive CSS.

.menu ul li
\$\endgroup\$
1
\$\begingroup\$

On top of what Yogu said, I would also recommend moving you move as many of the <script> references to the bottom of your page just before your ending body tag. This will ensure that your view/html data loads before your Javascript, essentially speeding up the time it takes the user's browser to appear to load the page.

*Edit: ANeves is correct, this method has been surpassed by asyncronously loading script files via such scripts as yepnopejs

\$\endgroup\$
  • 1
    \$\begingroup\$ I disagree, instead of booting scripts to the end of pages we should link to external files and use the async and defer attributes of the script tag: developers.whatwg.org/scripting-1.html#the-script-element \$\endgroup\$ – ANeves Jan 9 '12 at 9:17
  • \$\begingroup\$ You're correct, my answer has been corrected. \$\endgroup\$ – Big Joe Feb 6 '12 at 10:35
0
\$\begingroup\$

You could add some exceptions to better deal with ie, such as using Chrome Frame:

<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>

or

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.