background preloader

MeanMenu - a jQuery responsive menu Plugin

MeanMenu - a jQuery responsive menu Plugin
The Main Features Hide or show menu childrenTarget navigation element to swap out with MeanMenuOrientation adjustment (centered menu will reposition when you tilt the device)Control screen width at which MeanMenu activatesExpanding/Collapsing sub navigationBundled with configurable CSSQuick to setup and configureMedia Query independent The Demo The dedicated demo page All of the boring “how to implement” stuff is over on… The WordPress Plugin Buy via PluginHero The jQuery Plugin Github or download it straight away: MeanMenu zip download The Small Print This jQuery plugin is free for you to use and implement, we do not offer any official support for the plugin, if you would like to ask any questions though, please do over on our contact page. Please note: This is not a menu system replacement. If you are looking for drop down functionality on the desktop, MeanMenu doesn’t do it. Related:  website套件

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago. Their products' image gallery is a simple one, but two things grabbed my attention about the gallery: It's made with Flash when it can totally be created with HTML, CSS3 and Javascript. It has a neat feature: exiting the slideshow mode back to the grid view mode, the last image which was active in the slideshow mode "returns back" to its position in the grid view, thus the user knows where they have stopped and what images are left in the gallery that they haven't maybe browsed. Not to mention that the gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts, and enter into fullscreen mode with only the gallery being in fullscreen, therefore removing all distractions so that you can focus only on the products gallery. Markup

6 free ajax chat applications using PHP While talking about chat application, these days people hate those kind application made in PHP which need page refreshing. In this post, I’ll show you six different free Ajax chat applications which might be very useful if you’ve to use Ajax based chat application. Depending upon the requirement of your chat application, you can use them. I might have missed another good Ajax based chat application, if you find any the please post it to the comments. Ajax Chat from A powerful Ajax chat application with a lot of features at free of cost. Ajax- IM It is not a only a chat application, it is a instant messenger that’s why it is named as Ajax-IM. PHPfreeChat Another great Ajax chat application build in PHP.Very easy to customize and use. Chatr Another simple ajax chat application with limited functionality built in PHP. Ajax chat from Ajax-chat.org Very simple, lightweight and easy to use another Ajax chat application built in PHP. Ajax chat from Blogoscopted

Awesome Media Queries in JavaScript - enquire.js The Lowdown What is it? enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching. Why should I use it? In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript, giving you the tools to create advanced responsive sites. Dependencies? None! The most you will need to do is provide a matchMedia polyfill if you wish to support old/incapable browsers. Downloads & All That Jazz Latest Build Grab the latest code, ready to go, from one of the locations below: Development — unminified Production — minified If you wish to browse/fork the source, you can do so on GitHub. Install via Bower To install via bower, enter the following at the command line: bower install enquire Install via npm To install via npm, enter the following at the command line: npm install enquire.js Build From Source Quick Start Walkthrough The easiest way to learn is by example.

GitHub - meanthemes/meanMenu: A responsive menu plugin jQuery floating menu A simple navigation menu that “follows” page scrolling and expands on mouse over, made with css and jquery. The code The css The jQuery library and plugins inside head tag The floating menu markup <div id="fl_menu"><div class="label">MENU</div><div class="menu"><a href="#" class="menu_item">An menu item</a><a href="#" class="menu_item">A long menu item</a><a href="#" class="menu_item">Item 3</a><a href="#" class="menu_item">Another one</a><a href="#" class="menu_item">A really, really long menu item</a><a href="#" class="menu_item">Menu item 6</a><a href="#" class="menu_item">And one more</a><a href="#" class="menu_item">A tiny</a></div></div> The floating menu script is inserted in the end of the document, right before the closing body tag Under //config comment you can set some configuration options for the menu. Enjoy License This work is released under the MIT License. Donating helps greatly in developing and updating free software and running this blog

jquery - Progress bar should display on screen until web page loads fully Tips for implementing responsive designs using Bootstrap 3 | endjin blog We ran a retrospective of our first few Bootstrap-based HTML5/Javascript projects a few weeks back, and distilled some of the output into these top tips. 1) You don’t have to use a container-fluid to make the design responsive container-fluid is a full-width, smoothly resizing container (e.g. for apps).container is a pseudo-fixed-width, centred container that steps down in size as the window resizes. 2) Similarly, with Bootstrap 2 you don’t have to use a row in a container You can use row-fluid inside a container to get a 12-column (nestable) fluid grid within a pseudo-fixed-width, centred container that steps down in size as the window resizes. This is the best way to achieve a resizable layout. 3) You should avoid any use of explicit pixel-based sizes Definitely no explicit widths or heights, even (especially!) 4) Make no use of <br/> or &nbsp; to affect line breaking without testing across all form factors/sizes 5) Always ensure everything is inside a well-understood structure Update

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 4 Detect DarkLight Background jQuery Plugins In this post is a list of 4 Detect DarkLight Background jQuery Plugins. They are pretty useful for websites with dynamic backgrounds where light is used on dark backgrounds and dark used on light background. 1. Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it. Source + Demo 2. colourBrightness.js A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark. SourceDemo 3. jquery.adaptive-backgrounds.js A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element. SourceDemo 4. getImageBrightness Brightness detection script. Source + Demo Further Reading:

Simple and effective dropdown login box Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don't take too much to fill a form like this, but using a dropdown solution will speed up things for you. In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery. View demo The concept The main purpose is to avoid waiting to load a separate page in order to log in. Ingredients Remember the CSS3 buttons we've created using HTML entities as icons? Comparing to the latest HTML5 & CSS3 login tutorial you've seen here, this one uses some jQuery code to animate the box when clicking on the log in button. Also, HTML5 new form features do not miss here. Here's the markup we'll use to create our CSS3 dropdown log in: There are quite a lot of CSS lines, but I think is worth it: jQuery The following code is quite self-explanatory. That's it! I hope you enjoyed this tutorial, don't forget to leave a comment.

html - How can I insert text from an external file onto a div Event-based XML parsing, at last! – Hacking with PHP - Practical PHP Parsing XML takes two steps. The second, harder part, we've already covered - working through the data with Expat. The first step is much easier, which is why I left it till last - you just need to read the contents of your selected XML file into a string, then pass the string to PHP. Before you begin, one last note: a special option in PHP's XML parsing implementation, "Case Folding", is set to true by default. Onto the code itself... <? In the code, first the XML file is opened for read access using fopen($file, "r"), then the contents of the file are read entirely into a string, data, using $data = fread($fp, filesize($fp)). With the XML document read into a string, fclose() is called, passing in the file handle we had opened for reading - in other words, we close the file we opened. In the code above, if the result from xml_parse() is false - that is, if the XML failed to parse - We print out a congratulatory status message, otherwise we print out failure. Jump to:

jQuery: Smooth Scrolling Internal Anchor Links | Sycha Web Design & Development November 13th, 2010Charlie Evans Here’s a neat little jQuery trick to fancy up your internal anchor links, by making them scroll smoothly to their target as opposed to jumping instantly. Internal anchor links are very common place, e.g. This is what it looks like in action, click the following link:Scroll to comments This technique is very simple. Set up your link as you normally would, e.g. href=”#comments” (where comments is the id of your target) Add a class=”scroll” attribute to the link element, so it now looks something like this: Finally add the following jQuery code wherever is most appropriate And that’s all there is to it A common mistake in implementing this script is using “named anchors” for your target, instead of an id attribute on your target element.

Related: