background preloader

CSS and JavaScript

Facebook Twitter

Galleria – Responsive JavaScript Image Gallery. Fotorama. Nice-looking javascript gallery. BlocksIt.js Demonstration #2 - Pinterest Dynamic Grid Layout with CSS3 Transitions. Free web development tutorials gallery for web developer and designer. Download Javascripts.

jQuery

How to add Floating share box to your website. Advertisement After spending couple of hours searching for floating share box plugin for WordPress, I finally decided not to use plugins.

How to add Floating share box to your website

Those plugins were not good enough to produce what I thought of like menus on Mashable or Hongkiat. Then I came across this article Scroll/Follow Sidebar, Multiple Techniques by Chris Coyier. In this tutorial, I will use same jQuery code from Chris Coyier’s article and will add some bits and pieces to build a floating share box. Keep in mind this is not a plugin, but can be integrated with static as well as dynamic sites. Enter your email and download it now! Enter your email address and the download link will be sent right to your inbox. Step 1 Create a HTML page and add Div’s with id’s to structure page. Step 2 Add a DIV just below the page-wrap DIV with your social media buttons (Retweet, Facebook, Stumbleupon…). Step 3 From HTML IPSUM copy some dummy text to fill empty main and sideebar DIV. Step 4 Next add jQuery code between head tag. Step 5 Step 6. CSS-Tricks. Scroll/Follow Sidebar, Multiple Techniques. Really simple concept today folks!

Scroll/Follow Sidebar, Multiple Techniques

A sidebar that "follows" as you scroll down a page. There are a number of ways to go about it. We'll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. View Demo Download Files The easiest way to handle this is just to use CSS fixed positioning. With this technique, the sidebar stays solidly in place as you scroll down the page. jQuery If we use JavaScript, we can measure how far down the window the user has scrolled after a window.scroll event. Optimized by Doug Neiner: There is no particular advantage here other than the cool animated effect we get, which will certainly draw attention to it.

Bonus "reveal" technique On Tim Van Damme's Maxvoltar.com individual blog posts have a special sidebar with a fun "reveal" effect when the page is scrolled down. The trick is to have a header area with a solid background sit on top of the sidebar, which is pulled up underneath it. Concerns Cross-Browser Hoo-Hah This should work in "all" browsers. MooTools. Review - Top 10 Javascript MVC Frameworks. UPDATE 1/14/2012: Added Batman.js and Angular.js due to popular demand and because they looked impressive.

Review - Top 10 Javascript MVC Frameworks

Over the last several months I have been in a constant search for the perfect javascript MVC framework. Driven by a dire need for the right level of abstraction and features, I have tried out - some more cursorily than others - every framework I could get my hands on. Here lies a brief synopsis of each framework. Lastly, I share the framework which I ultimately decided on. Specifically, the following four features are very important to me: UI Bindings - I'm not just talking about templates, I'm talking about a declarative approach to automatically updating the view layer when the underlying model changes.

The Contenders Here is a table showing all of the frameworks support for the above features. 1. Backbone.js is the web's darling framework. Pros: Strong community and lots of momentum. Cons: Lacks strong abstractions and leaves something to be desired. Comparison of JavaScript frameworks. Galleria – Responsive JavaScript Image Gallery. GuiStuff - Coding, formats, standards.