jQuery – Page 2 – TexasSwede

Bootstrap – An Overview

As I mentioned in a previous article, my boss asked me to write some short summaries of a couple of common web technologies and frameworks. I already wrote about jQuery, and now the turn has come to Twitter Bootstrap, commonly called just Bootstrap. Twitter Bootstrap is one of the durrent darlings of web developers. It is a CSS framework, and it also includes some Javascript and the icon set GlyphIcons. Personally I use Font Awesome, a larger set (currently 361 icons) of icons compatible with GlyphIcons. Just like jQuery, you can use Bootstrap from a CDN (Content Delivery Network). There are also several themes available (both free and premium), so you can quickly get a different look than with the default Bootstrap colors. The free themes are also available through a CDN. With Bootstrap it is very easy to quickly create nice looking websites/applications. There are several ready-made templates on the Bootstrap site, and there are many more available all over the internet. So what you typically do is to download a template that fit your project, and then start customizing it. A couple of weeks ago I needed to quickly put up a one-page marketing website. I simply downloaded one of the templates, changed the headline, added my content and removed the sign-up button. In 30 minutes I had the site up, and that included writing the inital text. Then I spent another hour or so tweaking and editing the text, but the actual design part took just minutes. I am also currently working on a larger web application (which I hope to be able to blog about later this fall), and I choose to use Bootstrap there as well. One of the issues I always had in the past was to find a nice menu system to use on my sites, and this actually caused me to abandon the redesign of my personal website for over a year. When I discovered Bootstrap it just took me a few hours to totally revamp my website (including adding some functionality), and I now have a nice and functional menu system. The site also include icons for the menu entries, using Font Awesome. Bootstrap contains a large number of elements: buttons, dropdowns, tables, labels, input controls, alert messages, a grid system (totally redesigned in Bootstrap version 3), etc. There is plenty of documentation available online, both at the official Bootstrap website and on other sites and forums. So if you haven't looked at Bootstrap yet, see if it might help you in your next web project!

1 Comment

August 29, 2013

Javascript / jQuery / Web Development

Some useful jQuery plugins – Part 1

I often find cool and (sometimes) useful jQuery plugins, so I want to share a few that I like. I plan to share more in the future. Adipoli jQuery Image Hover Plugin Includes several different effects to highlight images as the mouse hovers over them. http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/ jQuery File Upload File Upload widget with multiple file selection, drag&drop support, progress bars and preview of images, audio and videoy. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. https://github.com/blueimp/jQuery-File-Upload iCheck Customized checkboxes and radion buttons for your forms. http://damirfoy.com/iCheck/ Chosen A plugin to make dropdown-boxes (especially long ones) easier to use. I looked at using this in a project, but ultimately opted to use another plugin, for different reasons. Chosen is still a good tool. http://harvesthq.github.io/chosen/ MagicSuggest This is the plugin I selected over Chosen. The content of the dropdown can be supplied using an Ajax call, returning JSON, and there are a large number of configuartion options. The plugin support filtering and type-ahead, as well as many other useful functions. http://nicolasbize.github.io/magicsuggest/ SuperScrollorama A jQuery plugin for scroll animations. http://johnpolacek.github.io/superscrollorama/ Sticky Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible. http://stickyjs.com/

4 Comments

July 26, 2013

Frameworks / Javascript / jQuery / Notes/Domino / Programming / Web Development

jQuery – An Overview

Yesterday my boss asked me about a simple overview/tutorial explaining jQuery, Bootstrap and some other web technologies, and how they work together. I decided to also post the result on my blog, so here is the first part. You may recognize some code from a previous blog entry. jQuery is a currently very popular Javascript framework/library. There are other ones, like Dojo (used by IBM in XPages) and YUI (originally developed by Yahoo), but jQuery is right now at the top when it comes to usage. jQuery contains the plumbing behind the scene, it contains functions to let the different elements on the page talk to each other and interact, for example trigger events on click or change. It also have functions to hide and show elements (either directly or fade in or out). One of the big benefits with jQuery is that many functions are much easier to do than in traditional Javascript. It also addresses browser inconsistency, so you don't have to write different code for Firefox and Internet Explorer. jQuery is Javascript, just packaged in a nice library and simplified. There are also UI components and mobile components, found in jQuery UI and jQuery Mobile. Here are a couple of examples, comparing plain Javascript with jQuery: http://blog.jbstrickler.com/2010/06/vanilla-javascript-vs-jquery/. jQuery ties into the DOM (Document Object model) of the browser/webpage in a very easy-to-use way. The way elements are addressed is identical to how you do it in CSS, using . (dot) for classes and # for individual elements. It is not hard to start with jQuery. You do not even have to host the library on your own server, several companies (including Microsoft and Google) host jQuery (as well as other libraries and frameworks) in what is called a CDN (Content Delivery Network). You simply include a line of code in the head section of your HTML, telling the browser to load jQuery from a specified location, and you are all set: <head> <title>Hello, jQuery</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> Notice that you don't use http: or https: at the start of the URL. This is a trick that makes it work both on a http or a https site. However, if you have the code locally in the file system on your computer (like many do before uploading the html file to a server), you must add http: at the beginning for it to load. Let take a look at our first jQuery example. Below we have a very simple piece of HTML code: <body> <button id="btnSave">Save</button> <div id="messageBox"></div> </body> What we want to do is that when the button is clicked, a message should be displayed in the div with ID messageBox. That is done with the following piece of jQuery: $("#btnSave").click( function() { $("#messageBox").html("You clicked the Save button."); }); What this do is to replace everything inside the div with the text/HTML code we specify. The second line is the code to execute when the event specified triggers/fires. You can put triggers on almost any element, and…

1 Comment

July 19, 2013

End of content

No more pages to load

Newer Posts