Javascript, CSS, and HTML demos

Attempting to demonstrate:

• HTML/HTML5
• CSS - CSS3
• JavaScript
  • jQuery
  • jQuery mobile
  • minified.js
  • Ajax

May also play around with:

• Twitter's Bootstrap3.
  • http://fortawesome.github.io/Font-Awesome/ - site to view for example
  • http://reesenewslab.org/ - another example
• AngularJS.
• HTML5 Boilerplate

Demos

• http://toledotalk.com/weather/html/wx.html
  • jQuery mobile
  • functioning Toledo area weather Web app

• http://jothut.com/demos/javascript/animate/animate-blocks.html
  • uses minified.js --> http://minifiedjs.com
  • / animate-blocks.css
  • / animate-blocks.js

• http://jothut.com/demos/javascript/animate/animate-blocks-ajax.html
  • uses minified.js --> http://minifiedjs.com
  • / animate-blocks.css
  • / animate-blocks.js
  • /cgi-bin/animate-blocks-ajax.pl

• http://jothut.com/demos/css/media-queries/breakpoint-media-queries.html
  • simple test of text resizing and background color changes for various break points
  • / breakpoint-media-queries.css

• http://jothut.com/demos/css/media-queries/rearrange-boxes.html
  • simple test of resizing browser window and the boxes of text based upon media queries
  • / rearrange-boxes.css

• http://jothut.com/demos/css/menus/cssdropdown/list-menu.html
  • media queries, css mouse-over drop-down menu
  • / list-menu.css

• http://jothut.com/demos/css/menus/selectdropdown/select-dropdown.html
  • / select-dropdown.css

• http://jothut.com/demos/css/ordered-list/ordered-list.html
  • formatting of the numbers, comprising the ordered list
  • / ordered-list.css

• http://jothut.com/demos/javascript/menus/TinyNav/tinynav.html
  • uses tinynav.js

• http://jothut.com/demos/javascript/menus/minified/js-list-menu.html
  • uses minified.js

• http://jothut.com/demos/javascript/menus/MeanMenu/meanmenu.html
  • jquery.meanmenu.js
  • meanmenumodified.css

• http://jothut.com/demos/javascript/menus/MeanMenu/demo.html
  • original code from - this works in IE v8
  • jquery.meanmenu.js
  • meanmenu.css

• http://jothut.com/demos/javascript/menus/MeanMenu/demo2.html
  • jquery.meanmenu.js
  • meanmenu2.css
  • prefer this one
    • works in IE v8 and still provides links when .js is disabled

Locally installed demos of some code listed further down:

• http://jothut.com/demos/javascript/menus/MeanMenu/demo.html
• http://jothut.com/demos/javascript/menus/TinyNav/demo.html

css-javascript-rwd nav menus

http://erickar.be/blog/my-experience-with-navigation-in-responsive-design
https://gist.github.com/erickarbe/4932027

http://css-tricks.com/responsive-menu-concepts/

http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down-menu-for-a-responsive-website-in-jquery

http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html

pure javascript
http://lukaszfiszer.github.io/selectnav.js/
http://kennethdanielsen.dk/new/index.html
https://github.com/lukaszfiszer/selectnav.js/issues/10
http://themes.tvda.eu/demos/kutcherstudio/

http://www.hongkiat.com/blog/responsive-web-nav/

http://tinynav.viljamis.com/

test
http://www.meanthemes.com/plugins/meanmenu/

test
http://www.hongkiat.com/blog/responsive-web-nav/

http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials

http://css-tricks.com/examples/ConvertMenuToDropdown/

http://stackoverflow.com/questions/18140907/selectnav-js-not-running

styling select dropdown
http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

http://bavotasan.com/2011/style-select-box-using-only-css/

http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/

http://jsfiddle.net/danield770/sNwrs/596/

jquery

https://kippt.com

 <div class="navbar">
    <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"><img src="https://d17f28g3dsa4vh.cloudfront.net/img/kippt-logo-r.png" width="68"></a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <!--<li><a href="/features/">Features</a></li>-->
                <li><a href="/about/">About</a></li>
                <li><a href="http://blog.kippt.com/">Blog</a></li>
                <li class="sep"><li>
                
                <li><a href="/login/">Log in</a></li>
                <li class="signup"><a href="/signup/">Sign up</a></li>
                
            </ul>
        </div>
    </div>
</div>

#javascript - #css - #html