All posts tagged “JavaScript”

All the JavaScript-related tutorials, ideas and various posts in Stampede Constructs

April 19, 2016   |   Less than a minute reading time
comment 0

15 Interesting JS & CSS Libraries

There is nothing wrong about using ready-made libraries, especially if it helps with productivity. We’ve come across this list that provides resources for CSS & Javascript libraries.

We went through the list one-by-one since everything looked interesting. Particularly, this one caught out eye: Stylefmt. It is very handy as it can easily format your stylesheet! This is especially so, when you have multiple stylesheets and can be a lifesaver at times.

We also noticed these two libraries that caught our attention as well, TypeIt & StickerJs .

Check out the List

javascript
January 22, 2015   |   Less than a minute reading time
comment 0

Add and Remove Classes With Vanilla JavaScript

Adding and removing CSS classes using Javascript is easily the most common task when it comes to JS coding and DOM manipulation. Most of us would settle with jQuery for this simple task but did you know you can achieve this equally easily using vanilla JS? Enters the classList JavaScript property. By using this property, you can perform the usual class operations like add, remove, toggle and check with ease. Hit the button below to learn how to add and remove classes with vanilla JavaScript.

View More

javascript
January 20, 2015   |   Less than a minute reading time
comment 0

Open Source Sliding Navigation Menu

Sliding navigation menu also known as hamburger menu or push menu is a staple style for web navigation in mobile websites nowadays. In this article by WebResourcesDepot, the author compiled 10 free plugins to make beautiful sliding navigation menu. Out of these list, my favorite plugins are:

  • Shifter – It is the simplest jQuery plugin for implementing basic sliding navigation menus.
  • Multi-level push menu – It supports multi-level menus, very configurable and possibly has the highest number of features.
  • snap.js – With snap.js you drag the main content area from left or right to see the hidden navigation.

View More

blinking text
November 27, 2014   |   Less than a minute reading time
comment 0

Create Blinking Text Using CSS3 and jQuery

Learn how to create blinking text using either CSS3 or jQuery. Nikul Lakhani from CSS-Diary demonstrated a pretty easy way to do this. For CSS, the trick is using CSS animation and @keyframes to control the timing that toggles the opacity back and forth. The jQuery method is much more simpler using only few lines of built-in methods fadeIn() and fadeOut() to blink the text. Hit the button below to learn more.

View More   View Demo

drag and drop
November 22, 2014   |   Less than a minute reading time
comment 0

Drag and Drop Interaction

Web designer and developer Mary Lou from Codrops has created a pretty cool drag and drop UI concept to give us some ideas how a drag and drop-based interaction can be implemented in our websites or apps. This concept introduces a ‘droppable’ area that reveals itself as soon as the user started dragging the ‘draggables’. In the demos, Mary showcased the ‘droppable’ areas revealing themselves in seven interesting ways such as sliding from the bottom, sidebar as well as a modal. Example of the applicable scenarios where this can be implemented; think of categorizing and organizing content like in Pinterest boards, mail apps or content management systems. Hit the button below to read more.

View More   View Demo

diagonal-scrolling
October 30, 2014   |   Less than a minute reading time
comment 0

Diagonal Scrolling Page

When standard vertical scrolling is too mainstream, let’s do it diagonally! Codepen user Gregor Adams came out with this experimental diagonal scrolling page demo using CSS3 and jQuery. The idea to build this diagonal scrolling page demo is taken from his own webpage and this demo version was created to make it more compatible with different nested markup.Experience the live website with diagonal scrolling or view the demo by clicking on the buttons below. It feels a bit unnatural to me but cool nonetheless.

View More   View Demo

jQuery plugins
October 23, 2014   |   Less than a minute reading time
comment 0

Collections of 30 jQuery Plugins

The folks at Speckyboy.com has been so kind to provide us with a collection of 30 freshest jQuery plugins from the past few months. The plugin collection caters everything from page layout and interaction, carousel, image gallery, social media sharing buttons, typography-related and many more that will surely enough to quench you thirst for jQuery plugins for many months to come. As a bonus, they even added a plugin for creating the universe! Make sure you bookmark this page. Something might be useful for your next projects.

View More

draggable
October 21, 2014   |   Less than a minute reading time
comment 0

Create a Physics-Friendly Draggable Element

Draggable is a jQuery function that allows a targeted element to be dragged by clicking and holding it with the mouse and move it around. Based on this, Chris has created a tutorial on how to create an element that is draggable and droppable that could push other elements out of the way, physics-style! View more to see the tutorial and demo.

View More   View Demo

javascript clock
October 21, 2014   |   Less than a minute reading time
comment 0

Build JavaScript Clock Using Only 6 Lines of Code

In his previous post, Dudley has shared how to create a simple and beautiful JavaScript digital clock using only 15 lines of JavaScript. In his latest post, he shows how to built an SVG analog clock with even lesser lines of code compare to how he built the JavaScript digital clock. View more to see the behind-the-scene explanations of his JavaScript clock in the works.

View More   View Demo

Memory Game
October 20, 2014   |   Less than a minute reading time
comment 0

Memory: A Game Built using Plain JavaScript

Inspired by this Codepen post by Nate Wiley, Nick has created a memory game (called Memory) using only frontend technologies namely HTML, CSS and JavaScript. The objective of Memory is to flip and match all the turned-down cards in as few moves as possible. The uniqueness of Nick’s version is he built this game using plain old JS and added three difficulty levels to it. Hit the button below to see some sweet vanilla JS coding or give your brains a quick memory workout.

View More   View Demo